{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{$page_title}}
@endsection

{{-- Content --}}
@section('content')

<form class="form" method="post" action="{{$action}}" id="manage_form" enctype="multipart/form-data">
    @if(!empty($data['id']))
    @method('PUT')
    @endif
    @csrf
    <input type="hidden" name="isCopy" value="{{$isCopy}}" />
    <!--begin::Card-->
    <div class="card shadow-sm">
        <!--begin::Card body-->
        <div class="card-body">
            <div id="custom-loader" style="display: table !important;">
                <div class="overlay"></div>
                <div class="loader"></div>
            </div>
            <div class="tab-content">
                <!--begin::Tab-->
                <div class="tab-pane show active" id="kt_user_edit_tab_1" role="tabpanel">
                    @if (session('save_status'))
                    <div class="alert alert-dismissible bg-danger d-flex flex-column flex-sm-row w-100 p-5 mb-10">
                        <!--begin::Icon-->
                        <!--begin::Svg Icon | path: icons/duotune/art/art005.svg-->
                        <span class="svg-icon svg-icon-2hx svg-icon-light me-4 mb-5 mb-sm-0">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path opacity="0.3" d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z" fill="currentColor"></path>
                                <path d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z" fill="currentColor"></path>
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                        <!--end::Icon-->
                        <!--begin::Content-->
                        <div class="d-flex flex-column text-light pe-0 pe-sm-10">
                            <h4 class="mb-2 text-light">Alert</h4>
                            <span>{{ session('save_status') }}</span>
                        </div>
                        <!--end::Content-->
                        <!--begin::Close-->
                        <button type="button" class="position-absolute position-sm-relative m-2 m-sm-0 top-0 end-0 btn btn-icon ms-sm-auto" data-bs-dismiss="alert">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-2x svg-icon-light">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </button>
                        <!--end::Close-->
                    </div>
                    @endif
                    <!--begin::Row-->
                    <div class="row">
                        <div class="col-xl-2"></div>
                        <div class="col-xl-12 my-2">
                            {!!Helper::getClientManageDropDown(['selectedClientId' => ($client_id ?? ''), 'isRequired' => true, 'divClass' => 'form-group row mb-7', 'inputDivClass' => 'col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12', 'isDisabled' => $isDisabled])!!}
                            <div class="form-group row mb-5">
                                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <label>Month:</label>
                                    <select class="form-control form-control-solid required input-month form-select" {{$isDisabled}} name="month">
                                        <option value="">Select Month </option>
                                        @foreach($monthList as $code => $name)
                                        <option value="{{$code}}" {{$month == $code ? "selected": ""}}>{{$name}}</option>
                                        @endforeach
                                    </select>
                                    @if($isDisabled)
                                    <input type="hidden" name="month" value="{{$month}}" />
                                    @endif
                                </div>
                                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-xs-12">
                                    <label>Year:</label>
                                    <select class="form-control form-control-solid required input-year form-select" name="year" {{$isDisabled}}>
                                        <option value="">Select Year </option>
                                        @foreach($yearList as $code => $name)
                                        <option value="{{$name}}" {{$year == $name ? "selected": ""}}>{{$name}}</option>
                                        @endforeach
                                    </select>
                                    @if($isDisabled)
                                    <input type="hidden" name="year" value="{{$year}}" />
                                    @endif
                                </div>


                            </div>
                        </div>
                    </div>
                    <!--end::Row-->
                    @if(!empty($year) && !empty($month))
                    @include("backend.roster_management.roster")
                    @endif
                </div>
                <!--end::Tab-->
            </div>
        </div>
    </div>
    <!--end::Card-->
    <style>
        input[type="time"]::-webkit-calendar-picker-indicator {
            background: none;
        }

        input[type="time"]::-webkit-datetime-edit-ampm-field {
            display: none;
        }
    </style>
    @if(!empty($year) && !empty($month) && !empty($weekDate))
    <input type="hidden" name="roster_week_id" value="{{$weekDate??''}}" />
    @foreach($dateRange as $dateRangeIndex => $date)
    <br />
    <div class="card card-custom {{$dateRangeIndex>0?'card-collapsed':''}} shift-main-area" id="kt_card_{{$dateRangeIndex}}" data-card="true">
        <div class="card-header ps-5">
            <div class="card-title">
                <a href="#" class="card-label btn  btn-sm btn-hover-light-warning me-1" data-bs-toggle="collapse" data-bs-target="#kt_docs_card_collapsible_{{$dateRangeIndex}}" title="Roster Date">
                    <h3 class="">{{date('d-m-Y (D)',strtotime($date))}}</h3>
                </a>
            </div>
        </div>
        <div id="kt_docs_card_collapsible_{{$dateRangeIndex}}" class="collapse show">
            <div class="pt-0">
                @foreach($shiftTypes as $mainShiftKey => $mainShiftTitle)
                <div class="card card-custom {{$mainShiftKey>1 ? 'card-collapsed':''}} shift-main-area" id="kt_card_{{$mainShiftKey}}" data-card="true">
                    <div class="card-header">
                        <div class="card-title">
                            <a href="#" class=" card-label btn  btn-sm btn-hover-light-primary me-1 ps-0 pt-0 pb-0" data-bs-toggle="collapse" data-bs-target="#kt_docs_card_collapsible_child_{{$dateRangeIndex}}_{{$mainShiftKey}}" title="Shift Time">
                                <h3>{{$mainShiftTitle}} <span class="text-danger fs-4"> {{ !empty($shiftLabelText[$mainShiftKey]) ? '(' . $shiftLabelText[$mainShiftKey] . ')'  : '' }} </span></h3>
                            </a>

                        </div>
                    </div>
                    <div id="kt_docs_card_collapsible_child_{{$dateRangeIndex}}_{{$mainShiftKey}}" class="collapse show">
                        <div class="card-body">
                            @include('backend.roster_management.roster_shift')
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endforeach

    <br />
    <!--begin::Card-->
    <div class="card shadow-sm">
        <div class="card-header">
            <div class="card-title">
                Notes
            </div>
        </div>
        <!--begin::Card body-->
        <div class="card-body">
            <textarea name="notes" class="form-control">{{$data['notes']??""}}</textarea>
        </div>
    </div>
    @endif
    <br />
    <div class="card shadow-sm">
        <!--begin::Card body-->
        <div class="card-footer text-right">
            <button type="button" class="btn btn-primary me-2 btn-hover-rise" onclick="submitRosterForm()">Submit</button>
            <a href="{{route('roster_management.index')}}"><button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button></a>
        </div>
    </div>
    <!--end::Card-->
</form>
<div class="modal fade" id="staffTiming" tabindex="-1" role="dialog" aria-labelledby="staffTimingTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Staff Allocated Timings</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert alert-custom alert-danger fade show hide" role="alert">
                            <div class="alert-text">One of the certificate will expire in next 7 days or is already expired. Please check the Certificate tab for more details.</div>
                        </div>
                        <table class="table table-bordered" id="staff_time_tbl">
                            <thead>
                                <th>Date</th>
                                <th>Start Time</th>
                                <th>End Time</th>
                                <th>Shift</th>
                                <th>Staff Name</th>
                                <th>ParticipantName</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="popup-save-btn" onclick="popupSubmitAndSave()">Continue and Save</button>
                <button type="button" class="btn btn-secondary btn-hover-rise" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="cover_report_modal" tabindex="-1" role="dialog" aria-labelledby="coverReportTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Staff Cover Report</h5>                
            </div>
            <div class="modal-body">
                <form class="form" method="post" action="javascript:;" data-action="" id="cover_report_form" enctype="multipart/form-data">
                    <div class="row">
                        <div class="col-md-12">
                            <table class="table table-bordered" id="cover_report_tbl">
                                <tbody>
                                    <tr>
                                        <td>Original staff name</td>
                                        <td><span class="o_staff_name cover_report_lbl"></span></td>
                                    </tr>
                                    <tr style="display: none;">
                                        <td>Previous Cover staff name</td>
                                        <td>
                                            <span class="p_c_staff_name cover_report_lbl"></span>
                                            <input type="hidden" name="previous_cover_user_id" id="previous_cover_user_id" value="" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Informed date <span class="text-danger">*</span></td>
                                        <td><input class="form-control form-control-lg form-control-solid datepicker required" type="text" name="informed_date" id="informed_date" value="" placeholder="Informed date" autocomplete="off" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Informed time <span class="text-danger">*</span></td>
                                        <td><input class="form-control form-control-lg form-control-solid bt_timepicker_2 required" type="text" name="informed_time" id="informed_time" value="" placeholder="Informed time" autocomplete="off" style="width: 265px;" /></td>
                                    </tr>
                                    <tr>
                                        <td>Reason <span class="text-danger">*</span></td>
                                        <td><select class="form-control form-control-lg form-control-solid reason_select" name="reason" id="reason">
                                                @foreach(config('constant.cover_reason_list') as $gN => $gV)
                                                <option value="{{$gN}}">{{$gV}}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Comment <span class="text-danger">*</span></td>
                                        <td><textarea name="comments" id="comments" placeholder="Comment" class="form-control form-control-lg form-control-solid required"></textarea></td>
                                    </tr>
                                    <tr>
                                        <td>Cover staff name</td>
                                        <td><span class="c_staff_name cover_report_lbl"></span></td>
                                    </tr>
                                    <tr>
                                        <td>Who changed the roster</td>
                                        <td><span class="who_name">{{auth()->user()->name}}</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="popup-save-btn" onclick="saveCoverReport()">Save and Continue</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="clearCoverStaff()">Close and Change Cover Staff</button>
            </div>
        </div>
    </div>
</div>
@endsection



{{-- Scripts Section --}}
@section('scripts')
@include('backend.roster_management.script')
@include('backend.roster_management.script-var')
@include('backend.roster_management.shared_client_script')
<script type="text/javascript">
    var masterStaffSelect = null;
    $('#staffTiming').on('hidden.bs.modal', function() {
        // do something…
        showCoverReportTracking();
    });
    function commonAjax(url, data, successCallback, errorCallback){
        data['_token'] = '{!! csrf_token() !!}';
        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: data,
            success: function(response) {
                if (typeof successCallback === 'function') {
                    successCallback(response);
                }
            },
            error: function(xhr, status, error) {
                if (typeof errorCallback === 'function') {
                    errorCallback(xhr, status, error);
                }
            }

        });
    }

    function manageStaffSelect(userId, userName, shift, date, userData, userStr){
        // Old Code
        $('#staffTiming').find('.alert-danger').hide();
        var showPopup = false;

        if ($.inArray(userId, expiredCertificateUserIds) !== -1) {
            $('#staffTiming').find('.alert-danger').show();
            showPopup = true;
        }

        $('#exampleModalLongTitle').html("Staff Allocated Timings " + userName);
        $('#staff_time_tbl').show();

        if (!userData && showPopup) {
            $('#exampleModalLongTitle').html('Certificate Expiry Notification');
            $('#staff_time_tbl').hide();
            $('#staffTiming').modal('show');
        }

        if (!userData && !showPopup) {
            showCoverReportTracking();
        }

        $('#popup-save-btn').hide();
        var addedTr = [];
        if (userData) {
            var userDateData = filteredStaffTimings[userId][date] || false;
            if (userDateData) {
                var userShiftData = filteredStaffTimings[userId][date][shift] || false;
                var userLeaveData = filteredStaffTimings[userId][date]['Leave'] || false;
                if (userShiftData || userLeaveData) {
                    $('#staff_time_tbl tbody').html('');
                    var tr = "";
                    
                    if (userShiftData && $.inArray(userStr + '_shift', addedTr) === -1) {
                        addedTr.push(userStr + '_shift');
                        $(userShiftData).each(function(i, rdata) {
                            tr += "<tr>";
                            tr += "<td>" + date + "</td>";
                            tr += "<td>" + rdata[0] + "</td>";
                            tr += "<td>" + rdata[1] + "</td>";
                            tr += "<td>" + shift + "</td>";
                            tr += "<td>" + userName + "</td>";
                            tr += "<td>" + rdata[2] + "</td>";

                            tr += "</tr>";
                        });
                    }

                    if (userLeaveData && $.inArray(userStr + '_leave', addedTr) === -1) {
                        addedTr.push(userStr + '_leave');
                        $(userLeaveData).each(function(i, rdata) {
                            var tdStr = date;
                            if (rdata[3]) {
                                tdStr += " (" + rdata[3] + ")";
                            }

                            tr += "<tr class='bg-danger'>";
                            tr += "<td>" + tdStr + "</td>";
                            tr += "<td>" + rdata[0] + "</td>";
                            tr += "<td>" + rdata[1] + "</td>";
                            tr += "<td>" + 'Staff On Leave' + "</td>";
                            tr += "<td>" + userName + "</td>";
                            tr += "<td>" + '' + "</td>";
                            tr += "</tr>";
                        });
                    }

                    $('#staff_time_tbl tbody').html(tr);
                    $('#staffTiming').modal('show');
                } else if(!showPopup) {
                    showCoverReportTracking();
                }
            } else if(!showPopup) {
                showCoverReportTracking();
            }
        }
    }
    function clearCoverStaff() {
        // do something…
        var staffArea = masterStaffSelect.parents('.staff-shift-area:first');
        masterStaffSelect.val('');
        staffArea.find('.cover_report_id:first').val('');
        staffArea.find('.cover_staff_exceeded_hours_history:first').val('');
    }
    $(document).on('change', '.staff_select_input', function() {
        var _self = $(this);
        masterStaffSelect = _self;
        isSubmit = false;
        var roster_id = _self.closest('.shift-main-area').find('.roster_id:first').val();
        var userId = _self.val();
        var userName = _self.find("option:selected").text();
        var shift = _self.attr('data-shift');
        var date = _self.attr('data-date');
        var userData = filteredStaffTimings[userId] || false;
        var userStr = userId + date;
        var totalHours = _self.find("option:selected").data('hours');
        var startTime = _self.parents('.staff-shift-area').find('.input-shift-start').val();
        var endTime = _self.parents('.staff-shift-area').find('.input-shift-end').val();
        var oUserId = _self.parents('.staff-shift-area').find('.staff_select_input:first').val();
        var weekStart = $('.input-weekstart').find('option:selected').text();
        var weekEnd = $('.input-weekend').val();
        var isCoverStaff = _self.data('cover') == true;
        var coverStaffId = _self.parents('.staff-shift-area').find('.staff_select_cover_input:first').val();
        if(!isCoverStaff){
            _self.parents('.staff-shift-area').find('.staff_exceeded_hours_history:first').val('');
        }else{
            _self.parents('.staff-shift-area').find('.cover_staff_exceeded_hours_history:first').val('');
        }
        if(userId){
            if(!totalHours){
                manageStaffSelect(userId, userName, shift, date, userData, userStr);
            }else if(oUserId && startTime && endTime && shift != "Passive Night Shift"){
                var requestData = {
                    roster_id: roster_id,
                    staff_id: userId,
                    total_hours: totalHours,
                    startTime: startTime,
                    endTime: endTime,
                    weekStart: weekStart,
                    weekEnd: weekEnd,
                    coverStaffId: coverStaffId,
                    date: date
                };

                var ajaxUrl = "{{ route('roster_management.check_hours') }}";

                commonAjax(ajaxUrl, requestData, function(response) {
                    // Success callback
                    if (response.status === false) {
                        manageStaffSelect(userId, userName, shift, date, userData, userStr);
                    } else {
                        deleteAlert['text'] = "The allotted hours for " + userName + " have exceeded from his/her total contract hours which is " + totalHours + " !";
                        deleteAlert['confirmButtonText'] = "Continue";
                        deleteAlert['cancelButtonText'] = "Change Staff";
                        deleteAlert['customClass']['cancelButton'] = "btn font-weight-bold btn-primary";
                        Swal.fire(deleteAlert).then(function(result){
                            if(result.value){
                                var logData = $.param({
                                    staff_id: userId,
                                    date: date,
                                    shift_hours: response.shift_hours,
                                    shift: shift,
                                    week_start: weekStart,
                                    week_end: weekEnd,
                                    exceeded_hours: response.exceededHours,
                                    // total_hours_after_exceeded_hours: response.totalAllottedHours
                                });
                                if(!isCoverStaff){
                                    _self.parents('.staff-shift-area').find('.staff_exceeded_hours_history:first').val(logData);
                                }else{
                                    _self.parents('.staff-shift-area').find('.cover_staff_exceeded_hours_history:first').val(logData);
                                }
                                manageStaffSelect(userId, userName, shift, date, userData, userStr);
                            }else{
                                _self.find('option:first').prop('selected', true);
                            }
                        })
                    }
                }, function(xhr, status, error) {
                    deleteSuccessAlert['text'] = error;
                    deleteSuccessAlert['icon'] = 'error';
                    Swal.fire(deleteSuccessAlert);
                });
            }else{
                manageStaffSelect(userId, userName, shift, date, userData, userStr);
            }
        }

    });

    $(document).on('change', '.input-shift-start, .input-shift-end', function() {
        var _self = $(this);
        var roster_id = _self.closest('.shift-main-area').find('.roster_id:first').val();
        var isCoverStaff = _self.parents('.staff-shift-area').find('.staff_select_input[data-cover="true"]').val() ? true : false;
        var startTime = _self.parents('.staff-shift-area').find('.input-shift-start').val();
        var endTime = _self.parents('.staff-shift-area').find('.input-shift-end').val();
        var weekStart = $('.input-weekstart').find('option:selected').text();
        var weekEnd = $('.input-weekend').val();
        if(!isCoverStaff){
            _self.parents('.staff-shift-area').find('.staff_exceeded_hours_history:first').val('');
        }else{
            _self.parents('.staff-shift-area').find('.cover_staff_exceeded_hours_history:first').val('');
        }
        if(!isCoverStaff){
            var staff = _self.parents('.staff-shift-area').find(".staff_select_input:first");
            var userId = staff.val();
            var userName = staff.find("option:selected").text();
            var shift = staff.attr('data-shift');
            var date = staff.attr('data-date');
            var totalHours = staff.find('option:selected').data('hours');
        }else{
            var staff = _self.parents('.staff-shift-area').find(".staff_select_input:last");
            var userId = staff.val();
            var userName = staff.find("option:selected").text();
            var shift = staff.attr('data-shift');
            var date = staff.attr('data-date');
            var totalHours = staff.find('option:selected').data('hours');
        }

        var coverStaffId = _self.parents('.staff-shift-area').find('.staff_select_cover_input:first').val();
        
        if(userId && totalHours && startTime && endTime && shift != "Passive Night Shift"){
            var requestData = {
                roster_id: roster_id,
                staff_id: userId,
                total_hours: totalHours,
                date: date,
                startTime: startTime,
                endTime: endTime,
                weekStart: weekStart,
                weekEnd: weekEnd,
                coverStaffId: coverStaffId
            };

            var ajaxUrl = "{{ route('roster_management.check_hours') }}";

            commonAjax(ajaxUrl, requestData, function(response) {
                // Success callback
                if (response.status === true) {
                    deleteAlert['text'] = "The allotted hours for " + userName + " have exceeded from his/her total contract hours which is " + totalHours + " !";
                    deleteAlert['confirmButtonText'] = "Continue";
                    deleteAlert['cancelButtonText'] = "Change Staff";
                    deleteAlert['customClass']['cancelButton'] = "btn font-weight-bold btn-primary";
                    Swal.fire(deleteAlert).then(function(result){
                        if(result.value){
                            var logData = $.param({
                                staff_id: userId,
                                shift_hours: response.shift_hours,
                                date: date,
                                shift: shift,
                                week_start: weekStart,
                                week_end: weekEnd,
                                exceeded_hours: response.exceededHours,
                                // total_hours_after_exceeded_hours: response.totalAllottedHours
                            });
                            if(!isCoverStaff){
                                _self.parents('.staff-shift-area').find('.staff_exceeded_hours_history:first').val(logData);
                            }else{
                                _self.parents('.staff-shift-area').find('.cover_staff_exceeded_hours_history:first').val(logData);
                            }
                        }else{
                            staff.find('option:first').prop('selected', true);
                        }
                    })
                }
            }, function(xhr, status, error) {
                deleteSuccessAlert['text'] = error;
                deleteSuccessAlert['icon'] = 'error';
                Swal.fire(deleteSuccessAlert);
            });
        }
    });

    $(document).on('change', '.input-month, .input-year, .input-weekstart, .input_client_id', function() {
        $('#custom-loader').show();
        var month = $('.input-month').val();
        var year = $('.input-year').val();
        var week = $('.input-weekstart').val() || "";
        var url = "{{$currentUrl}}";
        var client_id = $('.input_client_id').val();
        @if($isCopy)
        var connect = '&';
        @else
        var connect = '?';
        @endif
        url = url + connect + "year=" + year + "&month=" + month + "&week=" + week+ "&client_id="+client_id;
        window.location.href = url;
    });

    function popupSubmitAndSave() {
        submitSaveBtn();
    }

    function submitRosterForm() {
        var tr = showOnSubmitPopup();
        if (tr != "") {
            $('#staff_time_tbl tbody').html(tr);
            $('#popup-save-btn').show();
            $('#staffTiming').modal('show');
        } else {
            submitSaveBtn();
        }
    }

    function submitSaveBtn() {
        if ($('#save_as_input').val() == "0") {
            $('#manage_form').submit();
        } else {
            Swal.fire({
                text: "Please enter the notes, if any modification are made.",
                icon: "info",
                showCancelButton: true,
                buttonsStyling: true,
                confirmButtonText: "Continue and Save",
                cancelButtonText: "Back",
                customClass: {
                    confirmButton: "btn font-weight-bold btn-primary",
                    cancelButton: "btn font-weight-bold btn-secondary"
                }
            }).then(function(result) {
                if (result.value) {
                    $('#manage_form').submit();
                }
            });
        }
    }

    function showOnSubmitPopup() {
        var showPopup = false;
        var tr = "";
        $('#staffTiming').find('.alert-danger').hide();
        $('#staff_time_tbl').show();
        $('#staff_time_tbl tbody').html('');
        var addedTr = [];
        $('.staff_select_input').each(function() {
            var _self = $(this);
            var userId = _self.val();
            var userName = $(this).find("option:selected").text();
            if (userId) {
                $('#exampleModalLongTitle').html("Staff Allocated Timings");
                var shift = _self.attr('data-shift');
                var date = _self.attr('data-date');
                var userData = filteredStaffTimings[userId] || false;
                var userStr = userId + date;
                // console.log($.inArray(userStr, addedTr))
                if (userData) {
                    var userDateData = filteredStaffTimings[userId][date] || false;
                    if (userDateData) {

                        var userShiftData = filteredStaffTimings[userId][date][shift] || false;
                        var userLeaveData = filteredStaffTimings[userId][date]['Leave'] || false;
                        if (userShiftData || userLeaveData) {
                            if (userShiftData && $.inArray(userStr + '_shift', addedTr) == -1) {
                                addedTr.push(userStr + '_shift');
                                $(userShiftData).each(function(i, rdata) {
                                    tr += "<tr>";
                                    tr += "<td>" + date + "</td>";
                                    tr += "<td>" + rdata[0] + "</td>";
                                    tr += "<td>" + rdata[1] + "</td>";
                                    tr += "<td>" + shift + "</td>";
                                    tr += "<td>" + userName + "</td>";
                                    tr += "<td>" + rdata[2] + "</td>";

                                    tr += "</tr>";
                                });
                            }
                            if (userLeaveData && $.inArray(userStr + '_leave', addedTr) == -1) {
                                addedTr.push(userStr + '_leave');
                                $(userLeaveData).each(function(i, rdata) {
                                    var tdStr = date;
                                    if (rdata[3]) {
                                        tdStr += " (" + rdata[3] + ")";
                                    }
                                    tr += "<tr>";
                                    tr += "<td>" + tdStr + "</td>";
                                    tr += "<td>" + rdata[0] + "</td>";
                                    tr += "<td>" + rdata[1] + "</td>";
                                    tr += "<td>" + 'Staff On Leave' + "</td>";
                                    tr += "<td>" + userName + "</td>";
                                    tr += "<td>" + '' + "</td>";

                                    tr += "</tr>";
                                });
                            }
                        }
                    }
                }
            }
        });

        return tr;
    }

    /*$(document).on('change', '.input-shift-start, .input-shift-end', function() {
        var parentDiv = $(this).parents('.shift-main-area:first');
        var start = parentDiv.find('.input-shift-start:first option:selected').text();
        var end = parentDiv.find('.input-shift-end:first option:selected').text();

        parentDiv.find('.staff_start_time').val(start);
        parentDiv.find('.staff_end_time').val(end);
    });*/

    // $(document).on('change', '.input-shift-type', function() {
    //     var shiftType = $(this).val();
    //     var startTimes = shiftTimes[shiftType]['start'];
    //     var endTimes = shiftTimes[shiftType]['end'];
    //     var parentDiv = $(this).parents('.shift-area:first');

    //     var startSelect = parentDiv.find('.input-shift-start');
    //     var endSelect = parentDiv.find('.input-shift-end');
    //     startSelect.html('');
    //     endSelect.html('');

    //     $(startTimes).each(function(i,time){
    //         startSelect
    //         .append($("<option></option>")
    //             .attr("value", time)
    //             .text(time));
    //     })

    //     $(endTimes).each(function(i,time){
    //         endSelect
    //         .append($("<option></option>")
    //             .attr("value", time)
    //             .text(time));
    //     })
    //     startSelect.trigger('change');
    //     endSelect.trigger('change');
    // });


    $(document).ready(function() {
        $('#custom-loader').hide();
        // This card is lazy initialized using data-card="true" attribute. You can access to the card object as shown below and override its behavior
        // var card = new KTCard('kt_card_1');

        $('#manage_form').validate({
            ignore: [],
            invalidHandler: function(form, validator) {
                var errors = validator.numberOfInvalids();
                if (errors && errors == 1) {
                    // console.log(validator.errorList)
                }
            }
        });
    });
    function showCoverReportTracking() {
        var _self = masterStaffSelect;
        var userId = _self.val();
        var isCover = masterStaffSelect.attr('data-cover');
        var staffArea = _self.parents('.staff-shift-area:first');
        var oUserId = staffArea.find('.staff_select_input:first').val();
        var alreadySelected = masterStaffSelect.attr('data-selected');
        if (_self && !isSubmit && isCover) {
            if (userId != '' && oUserId != '') {
                staffArea.find('.cover_report_id:first').val('');

                $('#cover_report_tbl').find('input').val('');
                $('#cover_report_tbl').find('textarea').val('');
                $('#cover_report_tbl').find('.reason_select').val('Sick');
                $('#cover_report_tbl').find('#informed_time').val('00:00:00');
                $('#cover_report_tbl').find('.cover_report_lbl').html('');
                $('#cover_report_tbl').find('#previous_cover_user_id').val('');

                $('#cover_report_tbl').find('label.text-danger').remove();

                var oName = staffArea.find('.staff_select_input:first').find('option:selected').text();
                $('#cover_report_tbl').find('span.o_staff_name').html(oName);
                var coverName = _self.find('option:selected').text();
                $('#cover_report_tbl').find('span.c_staff_name').html(coverName);
                var selectedCover = _self.find('option[value="'+alreadySelected+'"]');
                if(Number(alreadySelected)){
                    $('#cover_report_tbl').find('#previous_cover_user_id').parents('tr:first').show();
                    $('#cover_report_tbl').find('#previous_cover_user_id').val(selectedCover.attr('value'));
                    $('#cover_report_tbl').find('span.p_c_staff_name').html(selectedCover.text());
                } else {
                    $('#cover_report_tbl').find('#previous_cover_user_id').val('');
                    $('#cover_report_tbl').find('#previous_cover_user_id').parents('tr:first').hide();
                }
                initTimepicker();
                $('#cover_report_modal').modal({backdrop:'static', keyboard:false});
                $('#cover_report_modal').modal('show');
                console.log(userId, 'showCoverReportTracking');
            } else {
                staffArea.find('.cover_report_id:first').val('');
                if (userId != '' && oUserId == '') {
                    alert('Please select staff before selecting cover staff!');
                    _self.val('');
                }
            }
        }
    }

    function saveCoverReport() {
        if ($('#cover_report_form').valid()) {
            var staffArea = masterStaffSelect.parents('.staff-shift-area:first');
            staffArea.find('.cover_report_id:first').val($('#cover_report_form').serialize());
            $('#cover_report_modal').modal('hide');
        }
    }
</script>
@endsection