{{-- Header --}}

<style>
    .sm\:text-\[20px\] {
        @media (width >=40rem) {
            font-size: 14px;
        }
    }
</style>
<div class="flex gap-12 justify-center">
                <button type="button" onclick="fetchModalSlots('{{ $prev_week_start }}')"
             class="border cursor-pointer rounded-sm border-[#EEEEEE] sm:h-[38px] sm:w-[38px] w-[36px] flex justify-center items-center">
                <i class="fa-solid fa-arrow-left text-[#898989]"></i>
            </button>
            <h2 class="text-[#2A2A2A] sm:text-[22px] flex items-center text-[15px] sm:mt-0 mt-2 Poppins ml-3">
        {{ $formated_rang }}
            </h2>
             <button type="button" onclick="fetchModalSlots('{{ $next_week_start }}')"
             class="border cursor-pointer rounded-sm border-[#EEEEEE] sm:h-[38px] sm:w-[38px] w-[36px] flex justify-center items-center">
                <i class="fa-solid fa-arrow-right text-[#898989]"></i>
            </button>

        </div>


{{-- Days --}}
<div class="grid grid-cols-7 text-center text-sm font-medium text-gray-700 mb-3 mt-5">
    @foreach ($dates as $date => $slots)
        @php $carbon = \Carbon\Carbon::parse($date); @endphp

        <div class="text-[#2A2A2A] sm:text-[30px] text-lg Poppins leading-none flex flex-col">
            <div
                class="border-t border-4 rounded-[10px] mb-3 w-[80%] mx-auto
                    {{ count($slots) ? 'border-[#00C200]' : 'border-[#C20000]' }}">
            </div>

            {{ $carbon->format('d') }}
            <span class="sm:text-lg text-[12px] text-[#626262]">
                {{ $carbon->format('D') }}
            </span>
        </div>
    @endforeach
</div>

{{-- Slots --}}
<div class="grid grid-cols-7 gap-2 text-xs text-center">

    @foreach ($dates as $slots)
        <div class="space-y-5">
            @foreach ($slots as $index => $slot)
                @php
                    $isAvailable = $slot['status'] === 'available';
                    $slotId = 'slot_' . md5($slot['date'] . $slot['start_time'] . $slot['end_time']);
                @endphp

                <label for="{{ $slotId }}"
                    class="Poppins sm:text-[20px] text-[13px] block cursor-pointer transition
            {{ $slot['status'] === 'booked' ? 'text-red-600' : '' }}
            
            peer-checked:text-white
        ">


                    @if ($isAvailable)
                        @php
                            $slotData = [
                                'slot_id' => encrypt($slot['slot_id']),
                                'date' => $slot['date'],
                            ];
                        @endphp

                        <input type="checkbox" id="{{ $slotId }}" name="selected_slots[]"
                            value='@json($slotData)' class="hidden peer slot_check_box" />
                    @endif

                    {{-- Slot time --}}
                    <span class="inline-block Poppins py-1 rounded">
                        {{ \Carbon\Carbon::parse($slot['start_time'])->format('H:i') }}
                        ~

                        {{ \Carbon\Carbon::parse($slot['end_time'])->format('H:i') }}

                    </span>

                </label>
            @endforeach

        </div>
    @endforeach

</div>
