<div class="overflow-x-auto booklio-scrollbar">
    <table class="min-w-[900px] w-full divide-y divide-booklio-border">
        <thead class="bg-slate-50">
            <tr>
                @foreach (['Day', 'Available', 'Start', 'End', 'Break Start', 'Break End'] as $heading)
                    <th class="px-5 py-4 text-left text-xs font-bold uppercase tracking-wide text-booklio-muted">{{ $heading }}</th>
                @endforeach
            </tr>
        </thead>
        <tbody class="divide-y divide-booklio-border bg-white">
            @foreach ($hours as $index => $row)
                <tr>
                    <td class="px-5 py-4 text-sm font-extrabold">
                        {{ $row['day'] }}
                        <input type="hidden" name="hours[{{ $index }}][day_of_week]" value="{{ $row['day_of_week'] }}">
                    </td>
                    <td class="px-5 py-4">
                        <label class="inline-flex items-center gap-2 text-sm font-bold text-slate-700">
                            <input type="hidden" name="hours[{{ $index }}][enabled]" value="0">
                            <input name="hours[{{ $index }}][enabled]" value="1" type="checkbox" @checked(old("hours.$index.enabled", $row['enabled'])) class="h-4 w-4 rounded border-booklio-border text-booklio-primary focus:ring-booklio-primary">
                            {{ old("hours.$index.enabled", $row['enabled']) ? 'Open' : 'Closed' }}
                        </label>
                    </td>
                    <td class="px-5 py-4">
                        <input name="hours[{{ $index }}][starts_at]" type="time" value="{{ old("hours.$index.starts_at", $row['start']) }}" class="h-10 rounded-lg border border-booklio-border px-3 text-sm font-semibold">
                        @error("hours.$index.starts_at")<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </td>
                    <td class="px-5 py-4">
                        <input name="hours[{{ $index }}][ends_at]" type="time" value="{{ old("hours.$index.ends_at", $row['end']) }}" class="h-10 rounded-lg border border-booklio-border px-3 text-sm font-semibold">
                        @error("hours.$index.ends_at")<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </td>
                    <td class="px-5 py-4">
                        <input name="hours[{{ $index }}][break_start]" type="time" value="{{ old("hours.$index.break_start", $row['break_start']) }}" class="h-10 rounded-lg border border-booklio-border px-3 text-sm font-semibold">
                        @error("hours.$index.break_start")<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </td>
                    <td class="px-5 py-4">
                        <input name="hours[{{ $index }}][break_end]" type="time" value="{{ old("hours.$index.break_end", $row['break_end']) }}" class="h-10 rounded-lg border border-booklio-border px-3 text-sm font-semibold">
                        @error("hours.$index.break_end")<p class="mt-1 text-xs font-semibold text-red-600">{{ $message }}</p>@enderror
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>
