@extends('layouts.app')
@section('content')
    <section class="relative about-banner">
        <div
            class="bannerInner bg-gradient-to-t from-[#AABF86] from-[-60%] to-80% to-[#F4FFE1] md:px-20 md:pt-[8rem] md:pb-[8rem] w-[90%] mx-auto rounded-3xl">
            <div class="container">
                <div class="md:flex md:items-center md:justify-center">
                    <h1 class="text-3xl md:text-6xl text-black font-extrabold relative max-[991px]:text-center">Order History
                    </h1>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container mx-auto px-4 py-8">
            <div class="grid grid-cols-12 gap-4">
                <div class="col-span-3">
                    @include('user.include.sidebar')
                </div>
                <div class="col-span-9">
                    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
                        <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                            <thead class="bg-[#AABF8699] font-bold text-black">
                                <tr>
                                    <th scope="col" class="px-6 py-4">
                                        SNo.
                                    </th>
                                    <th scope="col" class="px-6 py-4">
                                        Name
                                    </th>
                                    <th scope="col" class="px-6 py-4">
                                        Invoice Number
                                    </th>
                                    <th scope="col" class="px-6 py-4">
                                        Total
                                    </th>
                                    <th scope="col" class="px-6 py-4">
                                        View Invoice
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($order as $key => $items)
                                    <tr class="{{ $key % 2 == 0 ? 'bg-white' : 'bg-[#AABF8699]' }} font-bold text-black">
                                        <td class="px-6 py-4">{{ $key + 1 }}</td>
                                        <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                                            {{ ucwords($items->name) }}</td>
                                        <td class="px-6 py-4">{{ $items->invoice }}</td>
                                        <td class="px-6 py-4">${{ $items->amount }}</td>
                                        <td class="px-6 py-4"><a href="{{ route('user.invoice.detail', $items->id) }}"
                                                class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">View</a>
                                        </td>
                                    </tr>
                                @endforeach


                            </tbody>
                        </table>
                    </div>


                </div>
            </div>
        </div>
    </section>
@endsection

@push('css')
@endpush

@push('js')
@endpush