@extends('tutor.layouts.layout')
@section('title', 'Bookings')
@section('content')
    <div class="">
        <div class="flex flex-wrap gap-3">
            @php
                $one = $two = $three = 'bg-[#FEFEFE] text-sm text-[#5D5D5D]';
                if (request()->query('status') == 'pending') {
                    $two = 'bg-[#133754] text-white Poppins-medium';
                } elseif (request()->query('status') == 'completed') {
                    $three = 'bg-[#133754] text-white Poppins-medium';
                } else {
                    $one = 'bg-[#133754] text-white Poppins-medium';
                }
            @endphp
            <button onclick="window.location.href='{{ route('tutor.bookingRequest') }}'"
                class="  border-[#EDEDED] border   rounded-sm h-[48px] sm:w-[198px] w-full flex justify-center items-center font-medium  cursor-pointer  {{ $one }}">
                Approved Bookings @if ($totalApprove > 0)
                    ({{ $totalApprove }})
                @endif
            </button>
            <button onclick="window.location.href='{{ route('tutor.bookingRequest') }}?status=pending'"
                class="   border-[#EDEDED] border   rounded-sm h-[48px] sm:w-[198px] w-full flex justify-center items-center font-medium  cursor-pointer {{ $two }}">
                Pending Approval @if ($totalPending > 0)
                    ({{ $totalPending }})
                @endif
            </button>
            <button onclick="window.location.href='{{ route('tutor.bookingRequest') }}?status=completed'"
                class="  border-[#EDEDED] border   rounded-sm h-[48px] sm:w-[198px] w-full flex justify-center items-center font-medium  cursor-pointer  {{ $three }}">
                Past Bookings @if ($totalComplete > 0)
                    ({{ $totalComplete }})
                @endif
            </button>
        </div>
        <div
            class="grid 2xl:grid-cols-2 desk:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1  2xl:gap-6 gap-3 sm:mt-10 mt-4">
            @if (count($sessions) > 0)
                @foreach ($sessions as $session)
                    <div
                        class="border border-[#EAEAEA] rounded-sm overflow-hidden bg-white flex 2xl:items-center 2xl:flex-row flex-col">


                        <div class="p-2">
                            <img src="{{ asset($session->student->studentDefaultImage) }}"
                                class="2xl:w-[180px] 2xl:h-[180px] w-full w-full object-cover" />
                        </div>


                        <div class="flex-1 py-2 px-2">
                            <h3 class="text-[20px]  text-[#133754] Poppins-medium">
                                {{ $session->student->name }}
                            </h3>

                            <p class="text-[#3B3B3B] Poppins font-normal mt-1">
                                {{ $session->subjects()->pluck('subject_name')->join(', ') }}
                            </p>

                            {{-- <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                            Recurring Schedule : {{ daysToGo($session->booking_date) }} Days
                        </p> --}}

                            <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                                Booking Created : {{ dateFormate($session->booking_date, 'd-M-Y') }}
                            </p>

                            <p class="text-[#3B3B3B] Poppins font-normal 2xl:text-sm text-[12px] ">
                                Total Sessions : {{ $session->total_sessions }}
                            </p>


                            <div class="flex  w-full gap-3 mt-4">
                                @if ($session->status != 'completed')
                                    @if ($status == 'pending' || $status == 'completed' || $session->canBeCancelledByTutor())
                                        <button command="show-modal" commandfor="cencle{{ $session->id }}"
                                            class="border border-[#FF8C8C] w-1/2 cursor-pointer text-[#9D0000] 2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-full Poppins-medium rounded-sm font-medium hover:bg-red-50 transition">
                                            Cancel Booking
                                        </button>
                                    @else
                                        <button
                                            class="w-full bg-[#EFEFEF] text-sm text-[#9A9A9A]  py-2 rounded-sm font-medium Poppins-medium cursor-pointer"
                                            disabled="">
                                            Cancel Booking
                                        </button>
                                    @endif
                                @endif

                                <button
                                    onclick="window.location.href='{{ route('tutor.booking.booking-detail', encrypt($session->id)) }}'"
                                    class="bg-[#133754] cursor-pointer text-white  rounded-sm Poppins-medium 2xl:text-sm text-[12px] flex justify-center items-center h-[43px] 2xl:w-full  font-medium hover:bg-slate-700 transition">
                                    View Details
                                </button>
                            </div>
                        </div>


                        <div
                            class="  h-full 2xl:w-[70px] w-[96%] py-2 self-center    flex border border-[#1CD8C4] bg-[#1CD8C4] flex-col justify-center items-center text-center ">

                            @if ($session->status == 'upcoming')
                                <p class="text-[#FFFFFF] Poppins-medium text-[13px]">Up coming </p>
                            @elseif ($session->status == 'approve')
                                <p class="text-[#FFFFFF] Poppins-medium text-[13px]">Approved</p>
                            @else
                                <p class="text-[#FFFFFF] Poppins-medium text-[13px] px-3">{{ ucFirst($session->status) }}
                                </p>
                            @endif
                        </div>



                        <div class="2xl:w-32 w-full  h-full flex flex-col justify-center items-center text-center px-3">


                            <span class="text-[#3A3A3A] Poppins text-[11px] mt-1">
                                Total Earnings
                            </span>
                            <span class="text-[#02B502] 2xl:text-[30px] text-[25px] Poppins-medium ">
                                ${{ $session->amount }}
                            </span>

                        </div>

                    </div>
                @endforeach
            @else
                <div class="w-full">
                    <h1 class="text-[#181D27]  text-start fo-m sm:text-[26px] text-[24px] Poppins font-semibold">
                        No Bookings Found!</h1>
                </div>
            @endif


        </div>
    </div>


    @foreach ($sessions as $session)
        <el-dialog>
            <dialog id="cencle{{ $session->id }}" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <div class="form bg-[#FFFFFF] px-4 pt-2 pb-4 sm:p-7 sm:pb-4">
                            <div class="flex justify-between sm:items-center">

                                <h1
                                    class="text-[#181D27] flex-1 text-center fo-m sm:text-[26px] text-[24px] Poppins font-semibold">
                                    Cancel confirmation</h1>

                                <button command="close" commandfor="cencle{{ $session->id }}" class="cursor-pointer ">

                                    <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                                </button>
                            </div>

                            <p class="text-[#414651] Poppins-medium text-[17px] text-center mt-4">Are you sure you
                                want to cancel this booking?</p>









                            <form action="{{ route('tutor.booking.cancel', $session->id) }}" method="post">
                                <div class="mt-3 flex w-full gap-3">
                                    <button command="close" commandfor="cencle{{ $session->id }}"
                                        class=" cursor-pointer px-3 Poppins-medium text-[16px] border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        No
                                    </button>
                                    @csrf
                                    <button type="submit"
                                        class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        Yes, Cancel
                                    </button>
                                </div>
                            </form>


                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>
    @endforeach
@endsection
