@foreach ($shiftTypes as $shiftType)
    @php
        $shiftTimeSlots = $timeSlots->get($shiftType->id, collect());
    @endphp

    <div class="modal fade timeframe-modal" id="timeframeModal{{ $shiftType->id }}" tabindex="-1" aria-labelledby="timeframeModalTitle{{ $shiftType->id }}" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <form method="POST" action="{{ route('academic-setup.time-slots.sync', $shiftType) }}" class="modal-content timeframe-form"
                data-ajax="true" data-close-modal="true" data-swap-after-close="true" data-reset-on-success="false">
                @csrf
                @method('PUT')

                <div class="modal-header">
                    <div class="timeframe-head">
                        <span class="timeframe-head-icon"><i class="bi bi-clock-history"></i></span>
                        <div>
                            <h5 class="modal-title" id="timeframeModalTitle{{ $shiftType->id }}">{{ $shiftType->name }} Timeframe</h5>
                            <div class="timeframe-summary" data-tf-summary></div>
                        </div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="tf-cols" aria-hidden="true">
                        <span>Start</span>
                        <span></span>
                        <span>End</span>
                        <span>Label</span>
                        <span class="text-center">Break</span>
                        <span class="text-center">Active</span>
                        <span></span>
                    </div>

                    <ol class="tf-list" data-tf-list>
                        @foreach ($shiftTimeSlots as $slot)
                            @include('academic-setup.partials._timeframe-row', ['slot' => $slot])
                        @endforeach
                    </ol>

                    <div class="tf-empty" data-tf-empty @if ($shiftTimeSlots->isNotEmpty()) hidden @endif>
                        <i class="bi bi-calendar2-plus"></i> No slots yet
                    </div>

                    <button type="button" class="btn btn-sm tf-add" data-tf-add>
                        <i class="bi bi-plus-lg"></i> Add Slot
                    </button>

                    <template data-tf-template>
                        @include('academic-setup.partials._timeframe-row', ['slot' => null])
                    </template>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-sm px-3">
                        <i class="bi bi-check2"></i> Save Timeframe
                    </button>
                </div>
            </form>
        </div>
    </div>
@endforeach