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

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

{{-- Content --}}
@section('content')
<!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Header-->
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
            <!--begin::Search-->
            <div class="d-flex align-items-center position-relative my-1">
                <input type="text" data-kt-customer-table-filter="search" class="form-control form-control-solid w-250px ps-15" placeholder="Search" />
            </div>
            <!--end::Search-->
            <!--begin::Export buttons-->
            <div id="kt_datatable_example_1_export" class="d-none"></div>
            <!--end::Export buttons-->
        </div>
        <div class="card-toolbar">
            <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                <!--end::Filter-->
                <!--begin::Export dropdown-->
                <button type="button" class="btn btn-light-primary me-5" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                    <span class="svg-icon svg-icon-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <rect opacity="0.3" x="12.75" y="4.25" width="12" height="2" rx="1" transform="rotate(90 12.75 4.25)" fill="currentColor"></rect>
                            <path d="M12.0573 6.11875L13.5203 7.87435C13.9121 8.34457 14.6232 8.37683 15.056 7.94401C15.4457 7.5543 15.4641 6.92836 15.0979 6.51643L12.4974 3.59084C12.0996 3.14332 11.4004 3.14332 11.0026 3.59084L8.40206 6.51643C8.0359 6.92836 8.0543 7.5543 8.44401 7.94401C8.87683 8.37683 9.58785 8.34458 9.9797 7.87435L11.4427 6.11875C11.6026 5.92684 11.8974 5.92684 12.0573 6.11875Z" fill="currentColor"></path>
                            <path d="M18.75 8.25H17.75C17.1977 8.25 16.75 8.69772 16.75 9.25C16.75 9.80228 17.1977 10.25 17.75 10.25C18.3023 10.25 18.75 10.6977 18.75 11.25V18.25C18.75 18.8023 18.3023 19.25 17.75 19.25H5.75C5.19772 19.25 4.75 18.8023 4.75 18.25V11.25C4.75 10.6977 5.19771 10.25 5.75 10.25C6.30229 10.25 6.75 9.80228 6.75 9.25C6.75 8.69772 6.30229 8.25 5.75 8.25H4.75C3.64543 8.25 2.75 9.14543 2.75 10.25V19.25C2.75 20.3546 3.64543 21.25 4.75 21.25H18.75C19.8546 21.25 20.75 20.3546 20.75 19.25V10.25C20.75 9.14543 19.8546 8.25 18.75 8.25Z" fill="#C4C4C4"></path>
                        </svg>
                    </span>
                    Export
                </button>
                <!--begin::Menu-->
                <div id="kt_datatable_example_1_export_menu" class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-200px py-4" data-kt-menu="true">
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="copy">
                            Copy to clipboard
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="excel">
                            Export as Excel
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="csv">
                            Export as CSV
                        </a>
                    </div>
                    <!--end::Menu item-->
                    <!--begin::Menu item-->
                    <div class="menu-item px-3">
                        <a href="#" class="menu-link px-3" data-kt-export="pdf">
                            Export as PDF
                        </a>
                    </div>
                    <!--end::Menu item-->
                </div>
                <!--end::Menu-->
                <!--end::Export dropdown-->
            </div>
        </div>
    </div>
    <!--end::Header-->
    <!--begin::Body-->
    <div class="card-body">
        @include("backend.alerts")

        <!--begin::Row-->
        <div class="row">
            <div class="col-xl-2"></div>
            <div class="col-xl-12 my-2">
                <div class="form-group row mb-7">
                    <div class="col-xl-6 col-lg-6 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-6 col-lg-6 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))
        <!--begin::Row-->
        <div class="row">

            <div class="col-xl-2"></div>
            <div class="col-xl-12">
                <div class="form-group row mb-7">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <label>Week Start Date:</label>
                        <select class="form-control form-control-solid input-weekstart form-select filter-date" {{$isDisabled}} name="fromDate" value="{{$data['weekstart']??''}}">
                            <option value="">Select Week Date </option>
                            @foreach($week_start as $code => $weekid)

                            <option value="{{$weekid}}" {{$weekDate==$weekid?'selected':''}}>{{$code}}</option>
                            @endforeach
                        </select>

                        <input type="hidden" class="input-from-date" value="{{$weekstart??''}}" />

                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <label>Week End Date:</label>
                        <input class="form-control form-control-lg form-control-solid input-to-date filter-date" type="text" name="toDate" value="{{$weekEndDate??''}}" readonly />
                    </div>
                </div>

            </div>


        </div>
        <!--end::Row-->
        @if(!empty(($selected_week_id??'')))
        <!--Schads Breach-->
        <!--begin::Row-->
        <div class="row">
            <div class="col-xl-2"></div>
            <div class="col-xl-12 my-2">
                <div class="form-group row">
                    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
                        <label>Last Sync Date for Schads Breach: {{$last_sync_date??""}}</label>
                        <br/>
                        <a href="javascript:;" class="btn btn-primary font-weight-bolder" onclick="syncShiftBreaches()">
                            <span class="svg-icon svg-icon-md">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/Design/Flatten.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"></rect>
                                        <circle fill="#000000" cx="9" cy="15" r="6"></circle>
                                        <path d="M8.8012943,7.00241953 C9.83837775,5.20768121 11.7781543,4 14,4 C17.3137085,4 20,6.6862915 20,10 C20,12.2218457 18.7923188,14.1616223 16.9975805,15.1987057 C16.9991904,15.1326658 17,15.0664274 17,15 C17,10.581722 13.418278,7 9,7 C8.93357256,7 8.86733422,7.00080962 8.8012943,7.00241953 Z" fill="#000000" opacity="0.3"></path>
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>Sync Now</a>
                    </div>
                </div>

            </div>
        </div>
        <!--end::Row-->
        @endif
        @endif
        <div class="col-md-12">
        <!--begin: Datatable-->
        {!! $html->table() !!}
        <!--end: Datatable-->
        </div>
        <div class="col-md-12">
                <p class="text-info">This report hours includes hours from DRAFT ROSTER + FINALIZED&nbsp;ROSTER</p>
            </div>
    </div>
    <!--end::Body-->
</div>
<!--end::Card-->
<div class="modal fade" id="exceededHistoryModal" tabindex="-1" role="dialog" aria-labelledby="exceededHistoryModal" 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">Exceeded Hours History</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#exceededHistoryModal').modal('hide');">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-bordered" id="exceededHistoryTable">
                            
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#exceededHistoryModal').modal('hide');">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="shiftHistoryModal" tabindex="-1" role="dialog" aria-labelledby="shiftHistoryModal" 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">Schads Breach</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#shiftHistoryModal').modal('hide');">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="modal-body" id="schadsBreachModalBody">
                <div class="row" id="schadsLegacyConditions">
                    <div class="col-md-12">
                        <p class="text-info">Conditions:</p>
                        <p class="text-info">1. The shift must be AM, PM, AN, or any two continuous shifts, but PN shifts are not allowed.</p>
                        <p class="text-info">2. There must be a minimum break of 8 hours between shifts.</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="table-responsive">
                            <table class="table table-bordered" id="shiftHistoryTable"></table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#shiftHistoryModal').modal('hide');">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection


{{-- Scripts Section --}}
@section('scripts')

<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{asset('vendor/datatables/buttons.server-side.js')}}"></script>
{!! $html->scripts() !!}
<script type="text/javascript">
    $('#kt_header_menu_wrapper').attr('style', 'visibility:hidden;');
    $(document).on('change', '.input-month, .input-year, .input-weekstart', function() {
        var month = $('.input-month').val();
        var year = $('.input-year').val();
        var week = $('.input-weekstart').val() || "";
        var url = "{{route('team_roster_staff_report.index')}}";
        url = url + "?year=" + year + "&month=" + month + "&week=" + week;
        window.location.href = url;
    });

    $(document).on('change', '.filter-date', function() {
        window.LaravelDataTables["dataTableBuilder"].ajax.reload();
    });

    function getExceededHours(ele){
        var staff_id = $(ele).data('staff_id');
        var from = $(ele).attr('data-from');
        var to = $(ele).attr('data-to');
        $('#exceededHistoryBody').html('');
        if(staff_id){
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: {
                    staff_id: staff_id,
                    from: from,
                    to: to,
                    "_token": "{{ csrf_token() }}",
                },
                url: "{!! route('team_roster_staff_report.get_exceeded_hours') !!}",
                success: function(data) {
                        $('#exceededHistoryTable').html(data.html);
                        $('#exceededHistoryModal').modal('show');
                }
            }); 
        }
    }

    function getStaffShiftBreaches(ele){
        var staff_id = $(ele).attr('data-staff_id');
        var week_id = $(ele).attr('data-week_id') || "{{$selected_week_id??''}}";
        var from = $(ele).attr('data-from');
        var to = $(ele).attr('data-to');
        $('#exceededHistoryBody').html('');
        if(staff_id){
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: {
                    staff_id: staff_id,
                    week_id: week_id,
                    from: from,
                    to: to,
                    type:'schads_breach',
                    "_token": "{{ csrf_token() }}",
                },
                url: "{!! route('team_roster_staff_report.get_exceeded_hours') !!}",
                success: function(data) {
                    if (data.is_v2) {
                        $('#schadsBreachModalBody').html(data.html);
                    } else {
                        $('#schadsBreachModalBody').html(
                            '<div class="row"><div class="col-md-12">' +
                            '<p class="text-info">Conditions:</p>' +
                            '<p class="text-info">1. The shift must be AM, PM, AN, or any two continuous shifts, but PN shifts are not allowed.</p>' +
                            '<p class="text-info">2. There must be a minimum break of 8 hours between shifts.</p>' +
                            '</div></div>' +
                            '<div class="row"><div class="col-md-12"><div class="table-responsive">' +
                            '<table class="table table-bordered" id="shiftHistoryTable">' + data.html + '</table>' +
                            '</div></div></div>'
                        );
                    }
                    $('#shiftHistoryModal').modal('show');
                }
            }); 
        }
    }

    function syncShiftBreaches()
    {
        var selectedWeekId = "{{$selected_week_id??''}}";
        if(selectedWeekId){
            Swal.fire({
                "text": "Do you want to proceed with syncing Schads Breach? This process may take some time, and the last sync date will be updated once completed.",
                "icon": "warning",
                "showCancelButton": true,
                "buttonsStyling": false,
                "confirmButtonText": "Yes, submit!",
                "cancelButtonText": "No, cancel",
                "customClass": {
                    "confirmButton": "btn font-weight-bold btn-primary",
                    "cancelButton": "btn font-weight-bold btn-default"
                }
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            "selectedWeekId": selectedWeekId,
                            "type":'add_schads_breach_task',
                            "_token": "{{ csrf_token() }}",
                        },
                        url: "{!! route('team_roster_staff_report.get_exceeded_hours') !!}",
                        success: function(data) {
                            Swal.fire({
                                "text": data['msg'],
                                "icon": "success",
                                "showCancelButton": false
                            });
                        }
                    }); 
                }
            });
        }
    }
</script>
@endsection