{{-- Header --}}


<div class="flex gap-3 items-center">
    <button type="button" onclick="fetchModalSlots('{{ $prev_week_start }}')"
        class="border cursor-pointer rounded-sm border-[#EEEEEE] sm:h-[42px] sm:w-[42px] w-[36px] flex justify-center items-center week-nav-btn">
        <i class="fa-solid fa-arrow-left text-[#898989]"></i>
    </button>

    <button type="button" onclick="fetchModalSlots('{{ $next_week_start }}')"
        class="border cursor-pointer rounded-sm border-[#EEEEEE] sm:h-[42px] sm:w-[42px] w-[36px] flex justify-center items-center week-nav-btn">
        <i class="fa-solid fa-arrow-right text-[#898989]"></i>
    </button>


    <h2 class="text-[#2A2A2A] text-[17px] mt-2 poppins ml-3">
        {{ $formated_rang }}
    </h2>
</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 $date => $slots)
        <div class="space-y-5">
       
            @foreach ($slots as $index => $slot)
            
    @php
        $isAvailable = $slot['status'] === 'available';
        $slotDate = $date ?? '';
        $slotStart = $slot['start_time'] ?? '';
        $slotEnd = $slot['end_time'] ?? '';
        $slotId = 'slot_' . uniqid() . '_' . $index;
    @endphp

    <label
        for="{{ $slotId }}"
        class="poppins sm:text-[20px] text-[13px] block cursor-pointer transition
            {{ $isAvailable ? 'text-[#2A2A2A] hover:text-green-800' : '' }}
            {{ $slot['status'] === 'booked' ? 'text-[#C20000]' : '' }}
            {{ $slot['status'] === 'unavailable' ? 'text-[#2A2A2A]' : '' }}
            peer-checked:text-white
        "
    >

        {{-- Hidden checkbox --}}
        @if ($slot['status'] === 'available' && !empty($slot['slot_id']))
        @php
            $slotData = [
                "slot_id" => encrypt($slot['slot_id']),
                "date" => $slotDate
            ];
        @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 py-1 rounded slot_time
        peer-checked:text-green-600
        {{ $slot['status'] === 'unavailable' ? 'text-gray-400' : '' }}"
>
            @if($slotStart !== '--:--' && $slotStart !== '')
                {{ \Carbon\Carbon::parse($slotStart)->format('H:i') }} ~
                {{ \Carbon\Carbon::parse($slotEnd)->format('H:i') }}
            @else
                --:-- ~ --:--
            @endif
        </span>

    </label>

@endforeach

        </div>
    @endforeach

</div>
