@php
    $rosterData = $shiftSavedData[$dateRangeIndex][$mainShiftKey] ?? [];
@endphp
<input class="form-control form-control-lg form-control-solid roster_id" type="hidden" 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]" id="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>
    <div class="col-lg-3">
        <!--label>Default Start Time:</label-->
        <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">
        <!--label>Default End Time:</label-->
        <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">

    <div class="form-group col-lg-3 staff-shift-area" style="padding-left: 0px;">
        <div class="col-lg-12 mb-2">
            <h6>Staff 1</h6>
            <hr>
        </div>
        <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}}][staff_1]">
                <option value="">Select Staff</option>
                @foreach($users_list as $value)
                <option value="{{$value['id']}}" data-hours="{{ ($value['total_contract_hours']??'') }}" {{($rosterData['staff_1']??0)==$value['id']?"selected":""}}>{{$value['user_full_name']}}</option>
                @endforeach
            </select>
        </div>
        @php
        $staff1StartTime = $shiftTimesList[$mainShiftKey]['start'][0]??'';
        $staff1EndTime = $shiftTimesList[$mainShiftKey]['end'][0]??'';

        if(isset($rosterData['staff_1_start_time'])){
            $staff1StartTime = $rosterData['staff_1_start_time'];
          }else{
            $staff1StartTime =-1;
          }

        if(isset($rosterData['staff_1_end_time'])){
           $staff1EndTime = $rosterData['staff_1_end_time'];
        }
        else{
            $staff1EndTime =-1;
          }
        @endphp
        <div class="col-lg-12 mb-2">
            <label>Start Time</label>
            <!--input class="form-control form-control-lg form-control-solid staff_start_time" id="time" type="time"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_1_start_time]" id="staff_1_start_time"   value="{{$staff1StartTime}}" autocomplete="off" /-->
            <select class="form-control form-control-solid input-shift-start form-select"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_1_start_time]">
                <option value="">Select time</option>
                @foreach($shiftTimesList[$mainShiftKey]['start'] as $timeKey => $timeTitle)
                <option value="{{$timeTitle}}" {{$timeTitle.':00'==($staff1StartTime??0)?"selected":""}}>{{$timeTitle}}</option>
                
                @endforeach
            </select>


        </div>

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


        </div>

        <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}}][cover_staff_1]" data-selected="{{($rosterData['cover_staff_1']??0)}}">
                <option value="">Select Staff</option>
                @foreach($all_users_list as $value)
                <option value="{{$value['id']}}" data-hours="{{ ($value['total_contract_hours']??'') }}" {{($rosterData['cover_staff_1']??0)==$value['id']?"selected":""}}>{{$value['user_full_name']}}</option>
                @endforeach
            </select>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_report_id_1]" class="cover_report_id d-none" value=""></textarea>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_exceeded_hours_history_1]" class="staff_exceeded_hours_history d-none" value=""></textarea>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_staff_exceeded_hours_history_1]" class="cover_staff_exceeded_hours_history d-none" value=""></textarea>
        </div>

        @include('backend.roster_management.shared_roster_columns',['hrs_key'=>'staff_1_total_hours'])
    </div>
    <div class="form-group col-lg-3 staff-shift-area" style="padding-left: 0px;">
        <div class="col-lg-12 mb-2">
            <h6>Staff 2</h6>
            <hr>
        </div>
        <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}}][staff_2]">
                <option value="">Select Staff</option>
                @foreach($users_list as $value)
                <option value="{{$value['id']}}" data-hours="{{ ($value['total_contract_hours']??'') }}" {{($rosterData['staff_2']??0)==$value['id']?"selected":""}}>{{$value['user_full_name']}}</option>
                @endforeach
            </select>
        </div>
        @php
        $staff2StartTime = $shiftTimesList[$mainShiftKey]['start'][0]??'';
        $staff2EndTime = $shiftTimesList[$mainShiftKey]['end'][0]??'';

        if(isset($rosterData['staff_2_start_time'])){
            $staff2StartTime = $rosterData['staff_2_start_time'];
        }else{
            $staff2StartTime =-1;
        }
        if(isset($rosterData['staff_2_end_time'])){
            $staff2EndTime = $rosterData['staff_2_end_time'];
        }else{

            $staff2EndTime = -1;
        }
        @endphp
        <div class="col-lg-12 mb-2">
            <label>Start Time</label>
            <!--input class="form-control form-control-lg form-control-solid staff_start_time" type="time"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_2_start_time]" id="staff_2_start_time" value="{{$staff2StartTime}}" autocomplete="off" /-->
            <select class="form-control form-control-solid input-shift-start form-select"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_2_start_time]">
                <option value="">Select time</option>
                @foreach($shiftTimesList[$mainShiftKey]['start'] as $timeKey => $timeTitle)
                <option value="{{$timeTitle}}" {{$timeTitle.':00'==($staff2StartTime??0)?"selected":""}}>{{$timeTitle}}</option>
                @endforeach                    
            </select>


        </div>
        <div class="col-lg-12 mb-2">
            <label>End Time</label>
            <!--input class="form-control form-control-lg form-control-solid staff_end_time" type="time" name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_2_end_time]" id="staff_2_end_time" value="{{$staff2EndTime}}" autocomplete="off" /-->

            <select class="form-control form-control-solid input-shift-end form-select"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_2_end_time]">
                <option value="">Select time</option>
                @foreach($shiftTimesList[$mainShiftKey]['end'] as $timeKey => $timeTitle)
                <option value="{{$timeTitle}}" {{$timeTitle.':00'==($staff2EndTime??0)?"selected":""}}>{{$timeTitle}}</option>
                @endforeach
            </select>
        </div>

        <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}}][cover_staff_2]" data-selected="{{($rosterData['cover_staff_2']??0)}}">
                <option value="">Select Staff</option>
                @foreach($all_users_list as $value)
                <option value="{{$value['id']}}" data-hours="{{ ($value['total_contract_hours']??'') }}" {{($rosterData['cover_staff_2']??0)==$value['id']?"selected":""}}>{{$value['user_full_name']}}</option>
                @endforeach
            </select>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_report_id_2]" class="cover_report_id d-none" value=""></textarea>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_exceeded_hours_history_2]" class="staff_exceeded_hours_history d-none" value=""></textarea>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_staff_exceeded_hours_history_2]" class="cover_staff_exceeded_hours_history d-none" value=""></textarea>
        </div>

        @include('backend.roster_management.shared_roster_columns',['hrs_key'=>'staff_2_total_hours'])
    </div>

    <div class="form-group col-lg-3 staff-shift-area" style="padding-left: 0px;">
        <div class="col-lg-12 mb-2">
            <h6>Staff 3</h6>
            <hr>
        </div>
        <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}}][staff_3]">
                <option value="">Select Staff</option>
                @foreach($users_list as $value)
                <option value="{{$value['id']}}" data-hours="{{ ($value['total_contract_hours']??'') }}" {{($rosterData['staff_3']??0)==$value['id']?"selected":""}}>{{$value['user_full_name']}}</option>
                @endforeach
            </select>
        </div>
        @php
        $staff3StartTime = $shiftTimesList[$mainShiftKey]['start'][0]??'';
        $staff3EndTime = $shiftTimesList[$mainShiftKey]['end'][0]??'';

        if(isset($rosterData['staff_3_start_time'])){
            $staff3StartTime = $rosterData['staff_3_start_time'];
        }else{
            $staff3StartTime =-1;
        }
        if(isset($rosterData['staff_3_end_time'])){
            $staff3EndTime = $rosterData['staff_3_end_time'];
        }else{

            $staff3EndTime = -1;
        }
        @endphp
        <div class="col-lg-12 mb-2">
            <label>Start Time</label>
            <!--input class="form-control form-control-lg form-control-solid staff_start_time" type="time"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_3_start_time]" id="staff_3_start_time" value="{{$staff3StartTime}}" autocomplete="off" /-->
            <select class="form-control form-control-solid input-shift-start form-select"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_3_start_time]">
                <option value="">Select time</option>
                @foreach($shiftTimesList[$mainShiftKey]['start'] as $timeKey => $timeTitle)
                <option value="{{$timeTitle}}" {{$timeTitle.':00'==($staff3StartTime??0)?"selected":""}}>{{$timeTitle}}</option>
                @endforeach                    
            </select>


        </div>
        <div class="col-lg-12 mb-2">
            <label>End Time</label>
            <!--input class="form-control form-control-lg form-control-solid staff_end_time" type="time" name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_3_end_time]" id="staff_3_end_time" value="{{$staff3EndTime}}" autocomplete="off" /-->

            <select class="form-control form-control-solid input-shift-end form-select"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_3_end_time]">
                <option value="">Select time</option>
                @foreach($shiftTimesList[$mainShiftKey]['end'] as $timeKey => $timeTitle)
                <option value="{{$timeTitle}}" {{$timeTitle.':00'==($staff3EndTime??0)?"selected":""}}>{{$timeTitle}}</option>
                @endforeach
            </select>
        </div>

        <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}}][cover_staff_3]" data-selected="{{($rosterData['cover_staff_3']??0)}}">
                <option value="">Select Staff</option>
                @foreach($all_users_list as $value)
                <option value="{{$value['id']}}" data-hours="{{ ($value['total_contract_hours']??'') }}" {{($rosterData['cover_staff_3']??0)==$value['id']?"selected":""}}>{{$value['user_full_name']}}</option>
                @endforeach
            </select>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_report_id_3]" class="cover_report_id d-none" value=""></textarea>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_exceeded_hours_history_3]" class="staff_exceeded_hours_history d-none" value=""></textarea>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_staff_exceeded_hours_history_3]" class="cover_staff_exceeded_hours_history d-none" value=""></textarea>
        </div>

        @include('backend.roster_management.shared_roster_columns',['hrs_key'=>'staff_3_total_hours'])
    </div>

    <div class="form-group col-lg-3 staff-shift-area" style="padding-left: 0px;">
        <div class="col-lg-12 mb-2">
            <h6>Staff 4</h6>
            <hr>
        </div>
        <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}}][staff_4]">
                <option value="">Select Staff</option>
                @foreach($users_list as $value)
                <option value="{{$value['id']}}" data-hours="{{ ($value['total_contract_hours']??'') }}" {{($rosterData['staff_4']??0)==$value['id']?"selected":""}}>{{$value['user_full_name']}}</option>
                @endforeach
            </select>
        </div>
        @php
        $staff4StartTime = $shiftTimesList[$mainShiftKey]['start'][0]??'';
        $staff4EndTime = $shiftTimesList[$mainShiftKey]['end'][0]??'';

        if(isset($rosterData['staff_4_start_time'])){
            $staff4StartTime = $rosterData['staff_4_start_time'];
        }else{
            $staff4StartTime =-1;
        }
        if(isset($rosterData['staff_4_end_time'])){
            $staff4EndTime = $rosterData['staff_4_end_time'];
        }else{

            $staff4EndTime = -1;
        }
        @endphp
        <div class="col-lg-12 mb-2">
            <label>Start Time</label>
            <!--input class="form-control form-control-lg form-control-solid staff_start_time" type="time"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_4_start_time]" id="staff_4_start_time" value="{{$staff4StartTime}}" autocomplete="off" /-->
            <select class="form-control form-control-solid input-shift-start form-select"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_4_start_time]">
                <option value="">Select time</option>
                @foreach($shiftTimesList[$mainShiftKey]['start'] as $timeKey => $timeTitle)
                <option value="{{$timeTitle}}" {{$timeTitle.':00'==($staff4StartTime??0)?"selected":""}}>{{$timeTitle}}</option>
                @endforeach                    
            </select>


        </div>
        <div class="col-lg-12 mb-2">
            <label>End Time</label>
            <!--input class="form-control form-control-lg form-control-solid staff_end_time" type="time" name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_4_end_time]" id="staff_4_end_time" value="{{$staff4EndTime}}" autocomplete="off" /-->

            <select class="form-control form-control-solid input-shift-end form-select"  name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_4_end_time]">
                <option value="">Select time</option>
                @foreach($shiftTimesList[$mainShiftKey]['end'] as $timeKey => $timeTitle)
                <option value="{{$timeTitle}}" {{$timeTitle.':00'==($staff4EndTime??0)?"selected":""}}>{{$timeTitle}}</option>
                @endforeach
            </select>
        </div>

        <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}}][cover_staff_4]" data-selected="{{($rosterData['cover_staff_4']??0)}}">
                <option value="">Select Staff</option>
                @foreach($all_users_list as $value)
                <option value="{{$value['id']}}" data-hours="{{ ($value['total_contract_hours']??'') }}" {{($rosterData['cover_staff_4']??0)==$value['id']?"selected":""}}>{{$value['user_full_name']}}</option>
                @endforeach
            </select>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_report_id_4]" class="cover_report_id d-none" value=""></textarea>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][staff_exceeded_hours_history_4]" class="staff_exceeded_hours_history d-none" value=""></textarea>
            <textarea name="shiftData[{{$dateRangeIndex}}][{{$mainShiftKey}}][cover_staff_exceeded_hours_history_4]" class="cover_staff_exceeded_hours_history d-none" value=""></textarea>
        </div>

        @include('backend.roster_management.shared_roster_columns',['hrs_key'=>'staff_4_total_hours'])
    </div>
    

</div>