{{-- 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);

            // ✅ check if ANY slot is available
            $hasAvailable = collect($slots)->contains(function ($slot) {
                return $slot['status'] === 'available';
            });
        @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
                {{ $hasAvailable ? '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 (READ ONLY) --}}
<div class="grid grid-cols-7 gap-2 text-xs text-center">

    @foreach ($dates as $slots)
        <div class="space-y-5">
            @foreach ($slots as $slot)
                @php
                    $status = $slot['status'];
                @endphp

                <div
                    class="Poppins sm:text-[20px] text-[13px]
                    {{ $status === 'available' ? 'text-green-600' : '' }}
                    {{ $status === 'booked' ? 'text-[#626262] font-semibold' : '' }}
                    {{ $status === 'unavailable' ? 'text-red-600' : '' }}">

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

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

</div>