@extends('student.layouts.layout')
@section('title', 'Bookings')
@section('content')
@php
    use Carbon\Carbon;
@endphp

    <div class="">
        <div class="flex flex-wrap gap-3">
            @include('student.components.bookingStatusButtons')
        </div>
        <div class="flex justify-between   mt-5 mb-5">
            <div class="flex items-center sm:gap-4 gap-2 ">
                <div class="bg-[#2AE3D1] border border-[#EAEAEA] rounded-[5px] px-[8px] py-[11px]  flex justify-center">
                    <img src="{{ asset('student/Sites/images/session-frame.png') }}" alt="images" />
                </div>
                <h3 class="text-[#133754] Poppins-medium text-[20px]      mb-0">Active Bookings</h3>
            </div>
        </div>
        <div class="grid grid-cols-1 desk:grid-cols-4 md:grid-cols-3 gap-2">
            @foreach ($bookings as $booking)
                @php
                    $firstSession = $booking->sessions->first();
                    $lastSession = $booking->sessions->last();
                   
         $upcomingSession = $booking->sessions->first(function ($session) {
                    $sessionStartDate = Carbon::parse($session->start_date . ' ' . $session->start_time);
                    return $sessionStartDate->gt(now()); // Check if the session's start date is greater than the current date/time
                });
                    $lastCompletedSession = $booking->sessions
                        ->where('status', 'completed')
                        ->sortByDesc('start_date')
                        ->first();

                @endphp
                <div class="border border-[#D7D7D7] rounded-[7px] p-3 bg-white max-w-sm">

                    <div class="flex justify-between items-start">
                        <div>
                            <img src="{{$booking->tutor->userDefaultProfile}}"
                                class="w-20 h-20 rounded-md border-2 border-[#F4C701] object-cover" />
                        </div>

                        <div class="text-right space-y-2">
                            <div
                                class="bg-[#00D2BB] Inter sm:text-[17px] text-lg text-[#FFFFFF] font-semibold sm:px-[26px] px-5 py-1 rounded-sm inline-block">
                                ${{ $booking->amount }}
                            </div>
                            <div
                                class="bg-[#0AC400] Poppins-medium text-[12px] text-[white]  sm:px-8 px-5 sm:py-1.75 py-1.5 rounded-sm">
                                Active
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-between mt-3">
                        <h3 class="text-[17px] Poppins-medium font-semibold text-[#272727]">{{ $booking->tutor->name }}</h3>
                        <p class="text-[#434343] Poppins text-[13px]">#{{ $booking->session_id }}</p>
                    </div>

                    <hr class="my-2 border-[#D7D7D7]">

                    <div class="space-y-3 text-[13px] text-[#151515] Poppins-medium">

                        <div class="flex justify-between items-center">
                            <span class="  ">
                                Start Date
                            </span>
                            <span class="Poppins gap-2 text-[13px] flex items-center"> <i
                                    class="fa-regular fa-calendar  text-lg"></i>
                                {{ dateFormate($firstSession->start_date, 'M d , Y') }}</span>
                        </div>

                        <div class="flex justify-between items-center">
                            <span class=" ">
                                End Date
                            </span>
                            <span class="Poppins gap-2 text-[13px] flex items-center"> <i
                                    class="fa-regular fa-calendar text-lg"></i>
                                {{ dateFormate($lastSession->start_date, 'M d , Y') }}</span>
                        </div>

                        <div class="flex justify-between Poppins-medium">
                            <span>Number of Sessions</span>
                            <span class="text-[#151515] text-[15px]">{{ $booking->total_sessions }}</span>
                        </div>
                        <div class="flex justify-between Poppins-medium">
                            <span>Sessions Completed</span>
                            <span class="text-[#078600] text-[15px]">
                                {{ $booking->sessions->where('status', 'completed   ')->count() }}
                            </span>
                        </div>

                        <div class="flex justify-between items-center">
                            <span class="flex items-center gap-2">
                                Upcoming session date
                            </span>
                            <span class="Poppins gap-2 text-[13px] flex items-center"> <i
                                    class="fa-regular fa-calendar text-lg"></i>
                                   @if ($upcomingSession)
                                {{ dateFormate($upcomingSession->start_date, 'M d , Y') }}
                            @else
                                No Upcoming Sessions
                            @endif

                        </div>
                        <hr class="my-2 border-[#D7D7D7]">
                        <div class="flex justify-between items-center ">
                            <span class="text-[#000000] Poppins text-sm">Last Session Payment</span>
                            @if ( isset($lastCompletedSession) && $lastCompletedSession->payment_status == 'paid')
                                <span class="bg-[#08A600] Poppins-medium text-white text-[12px] px-6.5 py-1.75 rounded-sm">
                                Paid
                            </span>
                                
                            @else
                                <span class="bg-[#F4C701] text-black Poppins-medium text-[12px] px-6.5 py-1.75 rounded-sm">
                                Pending
                            </span>
                            
                            @endif
                       

                        </div>
                    </div>
                    <div class="flex w-full gap-1 mt-2 text-[12px]">
                        @if ($booking->canBeCancelledByStudent())
                            
                        <button command="show-modal" type="button"
                        commandfor="cancel{{$booking->id}}"
                        class="bg-[#D30000] w-full Poppins-medium text-white py-2.75 rounded-sm cursor-pointer">
                        Cancel Booking
                    </button>
                    @endif
                        <button class="bg-[#F4C701] w-full text-black py-2.75 rounded-sm Poppins-medium cursor-pointer   "
                            onclick="window.location.href='{{route('student.bookingRequest.detail',encrypt($booking->id))}}'">
                            View Details
                        </button>
                    </div>

                </div>
            @endforeach

        </div>
    </div>

    @foreach ($bookings as $booking)
        @include('components.cancelModal',['id'=>$booking->id,'route'=>route('student.bookingRequest.cancel',encrypt($booking->id))])
    @endforeach
@endsection
