@php
    $rosterData = $rosterData ?? [];
@endphp

<input type="hidden"
       class="form-control form-control-lg form-control-solid roster_id"
       name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][roster_id]"
       value="{{ $rosterData['id'] ?? '' }}" />

<div class="form-group row shift-area mb-7">
    <div class="col-lg-3 ps-0">
        <label>Date: </label>
        <input class="form-control form-control-lg form-control-solid required"
               type="text"
               name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][date]"
               value="{{ date('d-m-Y D', strtotime($date)) }}"
               readonly autocomplete="off" />
    </div>

    <div class="col-lg-3">
        <label>Shift</label>
        <select class="form-control form-control-solid input-shift-type required form-select"
                disabled
                name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][shift]">
            <option value="">Select Type</option>
            @foreach($shiftTypes as $shiftKey => $shiftTitle)
                <option value="{{ $shiftKey }}" {{ $mainShiftKey == $shiftKey ? "selected" : "" }}>
                    {{ $shiftTitle }}
                </option>
            @endforeach
        </select>
    </div>

    <!-- Start/End Time (default shift) -->
    <div class="col-lg-3">
        <select class="form-control form-control-solid input-shift-start form-select"
                hidden
                name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][default_shift_start_time]">
            <option value="">Select time</option>
            @foreach($shiftTimesList[$mainShiftKey]['start'] as $timeKey => $timeTitle)
                <option value="{{ $timeTitle }}"
                        {{ $timeKey == ($rosterData['default_shift_start_time'] ?? -1) ? "selected" : "" }}>
                    {{ $timeTitle }}
                </option>
            @endforeach
        </select>
    </div>
    <div class="col-lg-3">
        <select class="form-control form-control-solid input-shift-end form-select"
                hidden
                name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][default_shift_end_time]">
            <option value="">Select time</option>
            @foreach($shiftTimesList[$mainShiftKey]['end'] as $timeKey => $timeTitle)
                <option value="{{ $timeTitle }}"
                        {{ $timeKey == ($rosterData['default_shift_end_time'] ?? -1) ? "selected" : "" }}>
                    {{ $timeTitle }}
                </option>
            @endforeach
        </select>
    </div>
</div>

<div class="row">
    @for($i = 1; $i <= 4; $i++)
        @php
            $staffKey   = "staff_{$i}";
            $coverKey   = "cover_staff_{$i}";
            $startKey   = "staff_{$i}_start_time";
            $endKey     = "staff_{$i}_end_time";

            $staffStartTime = $rosterData[$startKey] ?? -1;
            $staffEndTime   = $rosterData[$endKey] ?? -1;
        @endphp

        <div class="form-group col-lg-3 staff-shift-area ps-0">
            <div class="col-lg-12 mb-2">
                <h6>Staff {{ $i }}</h6>
                <hr>
            </div>

            <!-- Staff Name -->
            <div class="col-lg-12 mb-2">
                <label>Name :</label>
                <select class="form-control form-control-lg form-control-solid staff_select_input form-select"
                        data-date="{{ $date }}"
                        data-shift="{{ $shiftTypes[$mainShiftKey] }}"
                        name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][{{$staffKey}}]">
                    <option value="">Select Staff</option>
                    @foreach($users_list as $value)
                        <option value="{{ $value['id'] }}"
                                data-hours="{{ $value['total_contract_hours'] ?? '' }}"
                                {{ ($rosterData[$staffKey] ?? 0) == $value['id'] ? "selected" : "" }}>
                            {{ $value['user_full_name'] }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Start Time -->
            <div class="col-lg-12 mb-2">
                <label>Start Time</label>
                <select class="form-control form-control-solid input-shift-start form-select"
                        name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][{{$startKey}}]">
                    <option value="">Select time</option>
                    @foreach($shiftTimesList[$mainShiftKey]['start'] as $timeTitle)
                        <option value="{{ $timeTitle }}"
                                {{ $timeTitle.':00' == $staffStartTime ? "selected" : "" }}>
                            {{ $timeTitle }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- End Time -->
            <div class="col-lg-12 mb-2">
                <label>End Time</label>
                <select class="form-control form-control-solid input-shift-end form-select"
                        name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][{{$endKey}}]">
                    <option value="">Select time</option>
                    @foreach($shiftTimesList[$mainShiftKey]['end'] as $timeTitle)
                        <option value="{{ $timeTitle }}"
                                {{ $timeTitle.':00' == $staffEndTime ? "selected" : "" }}>
                            {{ $timeTitle }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Cover Staff -->
            <div class="col-lg-12 mb-2">
                <label>Cover Staff Name :</label>
                <select class="form-control form-control-lg form-control-solid staff_select_input form-select staff_select_cover_input"
                        data-cover="true"
                        data-date="{{ $date }}"
                        data-shift="{{ $shiftTypes[$mainShiftKey] }}"
                        name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][{{$coverKey}}]"
                        data-selected="{{ $rosterData[$coverKey] ?? 0 }}">
                    <option value="">Select Staff</option>
                    @foreach($all_users_list as $value)
                        <option value="{{ $value['id'] }}"
                                data-hours="{{ $value['total_contract_hours'] ?? '' }}"
                                {{ ($rosterData[$coverKey] ?? 0) == $value['id'] ? "selected" : "" }}>
                            {{ $value['user_full_name'] }}
                        </option>
                    @endforeach
                </select>

                {{-- Hidden fields --}}
                <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_report_id_{{$i}}]" class="cover_report_id d-none"></textarea>
                <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_exceeded_hours_history_{{$i}}]" class="staff_exceeded_hours_history d-none"></textarea>
                <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_staff_exceeded_hours_history_{{$i}}]" class="cover_staff_exceeded_hours_history d-none"></textarea>
            </div>

            {{-- Shared columns --}}
            @include('backend.roster_management.shared_roster_columns', ['hrs_key' => "staff_{$i}_total_hours"])
        </div>
    @endfor
</div>