@extends('student.layouts.layout')
@section('title', 'Booking details')
@section('content')
    <div class="my-6">
        <h2 class="text-2xl text-[#133754] Poppins-medium">
            Booking Details
        </h2>
        <div
            class="border border-[#E5E5E5] rounded-[6px] bg-white 
            desk:w-[60%] lg:w-[80%] w-full my-6 
            flex items-stretch overflow-hidden">

            <div class="p-2">
                <img src="{{ asset($booking->tutor->tutorDefaultImage) }}"
                    class="md:w-[159px] md:h-[197px] 
                    sm:w-[110px] sm:h-[110px] 
                    w-[159px] h-[197px] 
                    object-cover rounded-md " />
            </div>

            <div class="flex-1 py-4 md:px-6 sm:px-3 px-2">

                <h3 class="md:text-[20px] sm:text-lg text-[16px]
                   Poppins-medium text-[#1F3B57]">
                    {{ $booking->tutor->name }}
                </h3>

                <hr class="my-3  text-[#D7D7D7]">
                <div class="grid md:grid-cols-2 grid-cols-1 gap-y-2 gap-x-8 mt-4 text-[14px] text-[#151515]">

                    <div class="flex items-center gap-2 ">
                        <i class="fa-regular fa-calendar"></i>
                        <span class="text-[#151515] text-sm Poppins-medium">Start Date</span>
                        <span class="ml-2 Poppins">
                            {{ $booking->sessions->first() ? dateFormate($booking->sessions->first()->start_date, 'M d, Y') : '-' }}
                        </span>
                    </div>

                    <div class="flex justify-between md:justify-start md:gap-2">
                        <span class="text-[#151515] text-sm Poppins-medium">Number of Sessions</span>
                        <span class="md:ml-2 Poppins-medium text-[15px]">{{ $booking->total_sessions }}</span>
                    </div>

                    <div class="flex items-center gap-2">
                        <i class="fa-regular fa-calendar"></i>
                        <span class="text-[#151515] text-sm Poppins-medium">End Date</span>
                        <span class="ml-2 Poppins">
                            {{ $booking->sessions->last() ? dateFormate($booking->sessions->last()->start_date, 'M d, Y') : '-' }}
                        </span>
                    </div>

                    <div class="flex justify-between md:justify-start md:gap-2">
                        <span class="text-[#151515] text-sm Poppins-medium">Sessions Completed</span>
                        <span class="text-[#078600] font-medium md:ml-2 text-[15px] Poppins-medium ">
                            {{ $booking->sessions->filter(function ($session) {
                                    return $session->getSessionStatusAttribute() === 'completed';
                                })->count() }}
                        </span>
                    </div>
                </div>

                <div class="mt-5">
                    @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>
                        @elseif($booking->status='cancelled')
                        <button
                            class="bg-[#EFEFEF] w-full text-[#9A9A9A] sm:py-4 py-2 rounded-sm font-medium cursor-pointer Poppins-medium"
                            disabled>
                            {{ $booking->cancelled_by ?? 'Cancel Booking' }}
                        </button>
                    @else
                        <button
                            class="bg-[#EFEFEF] w-full text-[#9A9A9A] sm:py-4 py-2 rounded-sm font-medium cursor-pointer Poppins-medium"
                            disabled>
                            Cancel Booking
                        </button>
                    @endif
                </div>

            </div>
            <div class="p-2 h-full ">

                <div
                    class="bg-[#16C1B0] md:w-[121px] sm:w-[120px] w-[95px] max-h-[194px] h-[194px] rounded-sm
            flex flex-col justify-center items-center text-center p-4">
                    <span class="text-[#000000] text-[10px] Poppins">
                        Booking Total
                    </span>
                    <span class="text-[#013E37] Poppins-medium md:text-[30px] text-[20px] font-semibold ">
                        ${{ $booking->amount }}
                    </span>
                </div>
            </div>

        </div>

        <div class="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-2">
            @foreach ($booking->sessions as $session)
                <div class="max-w-[504px] border border-gray-300 rounded-lg xldesk:p-4 p-2 xldesk:px-6 px-4 pt-5 bg-white">

                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <div class="flex items-center xldesk:gap-4 gap-2 ">
                                <div
                                    class="bg-[#F4C701] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px] flex justify-center">
                                    <img src="{{ asset('student/Sites/images/session-frame.png') }}" alt="images" />
                                </div>
                                <h3 class="text-[#272727] Poppins-medium xldesk:text-[22px] text-lg mb-0">
                                    {{ \Carbon\Carbon::parse($session->start_date)->format('l') }}
                                </h3>
                            </div>
                        </div>


                        <span
                            class="rounded-[5px] xldesk:px-[39px] px-6 py-2 text-sm text-[#000000] Poppins-medium {{ $session->status_class }}">
                            {{ ucfirst($session->session_status) }}
                        </span>
                    </div>

                    <div class="space-y-3 text-[#151515] text-lg Poppins">
                        <div class="flex justify-between">
                            <div class="flex items-center gap-3">
                                <i class="fa-regular fa-calendar text-2xl"></i>
                                <span>{{ dateFormate($session->start_date, 'd-M-Y') }}</span>
                            </div>
                            <span
                                class="bg-[#00D2BB] Inter text-white font-semibold xldesk:px-8 px-4 xldesk:py-1.5 py-1 rounded-sm">
                                ${{ $session->amount }}
                            </span>
                        </div>

                        <div class="flex items-center gap-3">
                            <i class="fa-regular fa-clock text-2xl"></i>
                            <span>{{ \Carbon\Carbon::parse($session->start_time)->format('H:i') }} -
                                {{ \Carbon\Carbon::parse($session->end_time)->format('H:i') }}</span>
                        </div>
                        <p><span class="font-medium">Duration:</span> {{ $session->duration }}</p>
                        <p>{{ $session->subjects ?? 'English, History' }}</p>
                    </div>

                    <hr class="my-4 text-[#D7D7D7]">

                    <div class="flex w-full gap-1 text-sm mt-4">
                        {{-- check cancel or not  --}}
                        @if ($session->status != 'cancelled')
                            @if ($session->can_cancel)
                                <button command="show-modal" type="button" commandfor="cancel_session{{ $session->id }}"
                                    class="bg-[#D30000] w-full Poppins-medium text-white py-2.75 rounded-sm cursor-pointer">
                                    Cancel Session
                                </button>
                                @elseif($session->status=="cancelled")
                                <button
                                    class="bg-[#EFEFEF] w-full text-[#9A9A9A] sm:py-4 py-2 rounded-sm font-medium cursor-pointer Poppins-medium"
                                    disabled>
                                    {{ $session->cancelled_by ?? "Cancel Session" }}
                                </button>
                            @else
                                <button
                                    class="bg-[#EFEFEF] w-full text-[#9A9A9A] sm:py-4 py-2 rounded-sm font-medium cursor-pointer Poppins-medium"
                                    disabled>
                                    Cancel Session
                                </button>
                            @endif



                            @if ($session->can_reschedule)
                                @if ($session->is_reschedule == 1)
                                    <button
                                        class="bg-[#EFEFEF] w-full text-[#9A9A9A] sm:py-4 py-2 rounded-sm font-medium cursor-pointer Poppins-medium"
                                        disabled>
                                        Reschedule {{ $session->rescheduled_status }}
                                    </button>
                                @else
                                    <button command="show-modal" onclick="fetchModalSlots()" commandfor="dialog"
                                        class="bg-[#F4C701] w-full Poppins-medium text-[#1C1C1C] py-2.75 rounded-sm cursor-pointer">
                                        Reschedule
                                    </button>
                                @endif
                            @else
                                <button
                                    class="bg-[#EFEFEF] w-full text-[#9A9A9A] sm:py-4 py-2 rounded-sm font-medium cursor-pointer Poppins-medium"
                                    disabled>
                                    Reschedule
                                </button>
                            @endif
                        @else
                             <button
                                    class="bg-[#EFEFEF] w-full text-[#9A9A9A] sm:py-4 py-2 rounded-sm font-medium cursor-pointer Poppins-medium"
                                    disabled>
                                    {{ $session->cancelled_by ?? "Cancel Session" }}
                                </button>
                        @endif
                    </div>


                </div>
            @endforeach
        </div>
    </div>

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

    @push('scripts')
        <script>
            function fetchModalSlots(startDate = null) {

                let url = '{{url('week/slots')}}?tutorId={{ $booking->tutor->id }}';

                if (startDate) {
                    url += '&start_date=' + startDate;
                }

                fetch(url)
                    .then(res => res.text())
                    .then(data => {
                        document.getElementById('modalCalender').innerHTML = data;
                    });
            }

            let slotsCount = 0;
            document.addEventListener('change', function(e) {
                slotsCount = 0
                if (e.target.classList.contains('slot_check_box')) {

                    if (e.target.checked) {

                        document.querySelectorAll('.slot_check_box').forEach(function(box) {
                            if (box !== e.target) {
                                box.checked = false;
                                slotsCount = 1;
                            }
                        });
                    }

                }

            });
            $(document).on('click', '#reschedule_submit_btn', function() {

                var el = document.getElementById('selectionError');

                if (slotsCount <= 0) {
                    el.classList.remove('hidden');
                    el.innerText = "Please select at least one slot to reschedule.";
                    return;
                }

                el.classList.add('hidden');

                $(this).closest('form').submit();

            });
        </script>
    @endpush
@endsection
