@extends("Site.Layouts.blank")
@section ("content")

    <div class="bg-green-dark  ">

        @include('Site.UserPages._welcomeUser')


        <main class="x-container bg-white px-5 md:px-10 min-h-[80vh] py-5">

            <div class="flex items-center gap-4  text-xs my-4">
                <a href="{{urlLang('')}}">Home</a>
                <p> > </p>
                <p> My Orders  </p>
            </div>

            <h1 class="hidden md:block text-green-700 font-medium text-3xl">My Orders </h1>

            <section class="grid md:grid-cols-[1fr_2fr] gap-6 mt-6">

                <!-- *************** Left side *************** -->
                <div>
                    @include('Site.UserPages._userSideMenu',['selected' => 'orders'])
                </div>

                <!-- *************** Right side *************** -->
                <div>
                    <h1 class="block md:hidden text-green-700 font-medium text-3xl mb-3 text-center">My Orders </h1>

                    <div class="bg-[#F6F7F7] rounded-md">

                        <div class="  text-center center-by-flex flex-col py-4">
                            <h1 class="text-3xl font-bold text-gray-800 mb-4">🚧 Products Coming Soon!</h1>
                            <p class="text-lg text-gray-600 mb-6">
                                We're working hard to bring you our new product line. Stay tuned!
                            </p>

                            <div class="mt-10">
                                <a href="{{ urlLang('my-courses') }}" class="inline-block  text-primary     font-semibold py-2 px-4 hover:px-6 border border-primary rounded" >
                                    Go to My Courses
                                </a>
                            </div>
                        </div>



                    {{--

                        @if($Boxes->isEmpty())
                            <div class="py-10 text-center">
                                <p class="text-gray-500">You have no orders yet.</p>
                            </div>
                        @endif

                        <section class="p-5 ">
                            @foreach($Boxes as $Box)
                                <div class="p-4 bg-white my-3 rounded-md">
                                    <div class="flex items-center justify-between gap-5">
                                        <p class="bg-[#FAF7F1] p-1 text-sm"> {{ucfirst($Box->delivery_status)}} </p>
                                        <p class=" text-xs">
                                            <span class="font-semibold me-1">Initiation Data: </span>
                                            <span> {{$Box->created_at->toDateString()}} ({{$Box->created_at_diff}})</span>
                                        </p>
                                    </div>

                                    <p class="text-primary my-4 font-medium"> Order ID: #{{$Box->id}} </p>

                                    <div class="flex justify-between gap-2">
                                        <p class="text-xs">
                                            <span class="font-semibold me-1">Delivery Time: </span>
                                            <span> {{$Box->date}} ({{$Box->slot}}) </span>
                                        </p>
                                        <p class="font-semibold text-xs"> AED {{$Box->final_price}} </p>
                                    </div>

                                    <div class="grid grid-cols-2 gap-3 mt-6">
                                        <a href="{{urlLang('orders/'.$Box->id)}}" class="border border-primary text-primary rounded-3xl text-center text-sm p-2">
                                            View Order
                                        </a>
                                        <a href="" class="bg-[#FCFF3C] text-primary rounded-3xl text-center text-sm p-2">
                                            Order Again
                                        </a>
                                    </div>

                                </div>
                            @endforeach
                        </section>
                 --}}
                    </div>


                </div>

            </section>

            <div class="text-center mx-auto table  my-10">
                {{$Boxes->onEachSide(5)->links('pagination::tailwind')}}
            </div>
            <br>

        </main>



    </div>


@endsection