
    {{-- Header --}}
   



    <div class="flex gap-3 items-center">
        <button 
            onclick="fetchWeek('{{ $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 
            onclick="fetchWeek('{{ $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] sm:text-[24px] text-[15px] 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

            @php
    $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 --}}
    <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)
                    <div
                        class="poppins sm:text-[20px] text-[13px]
                        @if ($slot['status'] === 'available') text-green-600
                        @elseif ($slot['status'] === 'booked') text-[#C20000]
                        @else text-[#2A2A2A] @endif
                        ">
                                 {{ \Carbon\Carbon::parse($slot['start_time'])->format('H:i') }}
 ~
{{ \Carbon\Carbon::parse($slot['end_time'])->format('H:i') }}
                    </div>
                @endforeach
            </div>
        @endforeach

    </div>
