@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 Courses </h1>

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

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

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

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

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

                        <section class="p-5 ">
                            @foreach($courses as $course)

                                <div class="p-4 bg-white my-3 rounded-md">
                                    <div class="flex items-center justify-between gap-5">
                                        <p class="p-1 text-sm font-medium rounded
    {{ $course->status === 'pending' ? 'bg-red-100 text-red-700' : '' }}
    {{ $course->status === 'confirmed' ? 'bg-green-100 text-green-700' : '' }}
">
                                            {{ ucfirst($course->status) }}
                                        </p>
                                        <div class="flex flex-col items-end gap-1">
                                        <p class=" text-xs">
                                            <span class="font-semibold me-1">Booked At: </span>
                                            <span> {{$course->created_at?->format('d-m-Y H:i')}} ({{$course->created_at?->diffForHumans()}})</span>
                                        </p>
                                        <p class=" text-xs">


                                            <span class="font-semibold me-1">Session Start Data: </span>
                                            <span> {{$course->session?->start_time?->format('d-m-Y H:i')}} ({{$course->session?->start_time?->diffForHumans()}})</span>
                                        </p>
                                        </div>
                                    </div>

                                    <div class="flex justify-between gap-2 items-center">  <p class="text-primary my-4 font-medium"> {{$course->session?->course?->title}} </p>
                                        <p class="font-semibold text-xs"> $ {{$course->session?->course?->price}} </p>
                                    </div>


{{--                                    <div class="flex justify-between gap-2">--}}
{{--                                        <p class="text-xs">--}}
{{--                                            <span class="  me-1">Class ID: </span>--}}
{{--                                            <span> {{$course->id}} </span>--}}
{{--                                        </p>--}}
{{--                                       --}}
{{--                                    </div>--}}

                                    @php
                                        $isPending = ($course->status === 'pending' && $course->payment_status === 'pending');
                                    @endphp

                                    <div class="grid grid-cols-2 gap-3 mt-6">

                                        {{-- Class Details --}}
                                        @if($isPending)
                                            <a href="javascript:void(0)"
                                               class="bg-gray-400 text-white rounded-3xl text-center text-sm p-2 cursor-not-allowed opacity-60 pointer-events-none">
                                                Class Details
                                            </a>
                                        @else
                                            <a href="{{ urlLang('my-course/'.$course->id) }}"
                                               class="bg-[#FCFF3C] text-primary rounded-3xl text-center text-sm p-2">
                                                Class Details
                                            </a>
                                        @endif

                                        {{-- Class Link --}}
                                        @if($isPending)
                                            <a href="javascript:void(0)"
                                               class="bg-gray-400 text-white rounded-3xl text-center text-sm p-2 cursor-not-allowed opacity-60 pointer-events-none">
                                                Class Link
                                            </a>
                                        @else
                                            <a href="{{ $course->session?->link }}"
                                               target="_blank"
                                               class="bg-primary text-white rounded-3xl text-center text-sm p-2">
                                                Class Link
                                            </a>
                                        @endif

                                    </div>


                                </div>
                            @endforeach
                        </section>

                    </div>
                </div>

            </section>

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

        </main>



    </div>


@endsection