@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    <link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/assets/css/daterangepicker.css">
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
@endpush
@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Contractor Summary</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Contractor Summary
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-md-end col-md-3 col-12 d-md-block d-none">
        <div class="mb-1 breadcrumb-right">
            <div class="dropdown">
                <button class="btn-icon btn btn-primary btn-round btn-sm dropdown-toggle" type="button"
                    data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd" type="button"><i
                        data-feather='filter'></i></button>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="dashboard-ecommerce">

        <div class="offcanvas-end-example">
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
                <div class="offcanvas-header">
                    <h5 id="offcanvasEndLabel" class="offcanvas-title">{{ trans('common/common.filter') }}</h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
                </div>
                <div class="offcanvas-body my-auto mx-0 flex-grow-0">
                    <div class="row">
                        <div class="col-sm-12 mt-1">
                            <label class="form-label mt-2" for="modal_location_id">Location</label>
                            <label class="form-label mt-2" style="float: right"><input type="checkbox" class="select_all" id="select_all_location_id"> Select All</label>
                            <select class="form-control mb-2 select2 selected_fields" id="modal_location_id"
                                onchange="getsubLocations(this,'sublocations')" multiple>
                                @foreach ($locations as $location)
                                    <option value="{{ $location->id }}"
                                        @if (in_array($location->id, request()->input('location_id', []))) selected @endif>
                                        {{ $location->name }}
                                    </option>
                                @endforeach
                            </select>

                            <label class="form-label mt-2" for="modal_sublocation_id">Sub Location</label>
                            <label class="form-label mt-2" style="float: right"><input type="checkbox" class="select_all" id="select_all_sublocation_id"> Select All</label>
                            <select class="form-control mb-2 select2 selected_fields" id="modal_sublocation_id"
                                multiple>
                                @foreach ($subLocations as $subLocation)
                                    <option value="{{ $subLocation->id }}"
                                        @if (in_array($subLocation->id, request()->input('sublocation_id', []))) selected @endif>
                                        {{ $subLocation->name }}
                                    </option>
                                @endforeach
                            </select>

                            <label class="form-label mt-2" for="modal_department_id">Department</label>
                            <label class="form-label mt-2" style="float: right"><input type="checkbox" class="select_all" id="select_all_department_id"> Select All</label>
                            <select class="form-control mb-2 select2 selected_fields" id="modal_department_id"
                                multiple>
                                @foreach ($departments as $department)
                                    <option value="{{ $department->id }}"
                                        @if (in_array($department->id, request()->input('department_id', []))) selected @endif>
                                        {{ $department->name }}
                                    </option>
                                @endforeach
                            </select>

                            <label class="form-label mt-2" for="modal_designation_id">Designation</label>
                            <label class="form-label mt-2" style="float: right"><input type="checkbox" class="select_all" id="select_all_designation_id"> Select All</label>
                            <select class="form-control mb-2 select2 selected_fields" id="modal_designation_id"
                                multiple>
                                @foreach ($designations as $designation)
                                    <option value="{{ $designation->id }}"
                                        @if (in_array($designation->id, request()->input('designation_id', []))) selected @endif>
                                        {{ $designation->name }}
                                    </option>
                                @endforeach
                            </select>

                            <label class="form-label mt-2" for="modal_contractor_id">Contractor</label>
                            <label class="form-label mt-2" style="float: right"><input type="checkbox" class="select_all" id="select_all_contractor_id"> Select All</label>
                            <select class="form-control mb-2 select2 selected_fields" id="modal_contractor_id"
                                multiple>
                                @foreach ($contractors as $contractor)
                                    <option value="{{ $contractor->id }}"
                                        @if (in_array($contractor->id, request()->input('contractor_id', []))) selected @endif>
                                        {{ $contractor->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <button type="button" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center"
                        id="filterSubmitBtn" data-bs-dismiss="offcanvas" aria-label="Close">Apply</button>

                </div>
            </div>
        </div>

        <form method="get" action="/{!! $alias !!}/contractor-summary/export" class="loder-disabled" target="_blank">
            <input type="hidden" name="location_ids" id="location_id">
            <input type="hidden" name="sublocation_ids" id="sublocation_id">
            <input type="hidden" name="designation_ids" id="designation_id">
            <input type="hidden" name="department_ids" id="department_id">
            <input type="hidden" name="contractor_ids" id="contractor_id">

            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mt-2 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-md-3">
                            <label class="form-label" for="area_id">{{ trans('admin/template.month') }}</label>
                            <select class="form-control mb-2 select2" name="month" id="month">
                                @foreach ($months as $key => $val)
                                    <option class="form-control" value="{{ $key }}"
                                        @if ($key == $month) selected @endif>{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="year">{{ trans('admin/template.year') }}</label>
                            <select class="form-control mb-2 select2" name="year" id="year">
                                @foreach ($years as $val)
                                    <option class="form-control" value="{{ $val }}"
                                        @if ($val == $year) selected @endif>{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label" for="reports">Reports</label>
                            <select class="form-control mb-2 select2" name="reports" id="reports" multiple>
                                <option class="form-control" value="/{!! $alias !!}/functional-mis-report/export" selected>Functional MIS Report</option>
                                <option class="form-control" value="/{!! $alias !!}/contractor-summary/export" selected>Contractor Summary</option>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <button type="button" id="final-submit-btn" class="btn btn-primary mb-1 mt-2 me-1">
                                Export to Excel</button>
                        </div>
                    </div>
                </div>
                
            </div>
        </form>
    </section>
@endsection

@push('footer-script')
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
    <script src="/assets/js/moment.min.js"></script>
    <script src="/assets/js/daterangepicker.js"></script>
    <script src="/assets/plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <script src="/assets/plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>


    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
    <script src="/app-assets/js/scripts/tables/table-datatables-advanced.js"></script>
    <!-- END: Page JS-->

    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });

        function getsubLocations(th) {
            var locationId = $('#modal_location_id').val();
            
            var subLocationId = "";

            var data = {
                location_id: locationId,
                '_token': '{{{csrf_token()}}}'
            }
            $.ajax({
                url: '/{!! $alias !!}/location/sub-locations',
                type: 'POST',
                data: data,
                success: function(data) {
                    var selectbox = '';
                    if (data) {
                        selectbox = '<label for="sub_location_id">Sub Location</label>';
                        selectbox += '<div class="form-label-group"><select name="sublocation_id[]" class="form-control select2" id="sublocation_id" multiple>';
                        $.each(data, function(i, item) {
                            selectbox += '<option value="' + i + '">' + item + '</option>';
                        });
                        selectbox += '</select></div>';
                    }
                    $('#modal_sublocation_id').html(selectbox);
                    $("#modal_sublocation_id").select2({
                        multiple: true
                    });
                }
            });
        }

        $(document).ready(function(){
            if ($('#location_id').val() != '') {
                getsubLocations();
            }
            $('.select_all').click();
            $('#filterSubmitBtn').click();
        });

        $('#filterSubmitBtn').click(function () {
            var location_ids = $('#modal_location_id').val();
            var sublocation_ids = $('#modal_sublocation_id').val();
            var designation_ids = $('#modal_designation_id').val();
            var department_ids = $('#modal_department_id').val();
            var contractor_ids = $('#modal_contractor_id').val();

            $('#location_id').val(location_ids);
            $('#sublocation_id').val(sublocation_ids);
            $('#designation_id').val(designation_ids);
            $('#department_id').val(department_ids);
            $('#contractor_id').val(contractor_ids);
        });

        $('.select_all').change(function(){
            let inputId = $(this).attr('id');
            inputId = inputId.replace('select_all', 'modal');

            if($(this).is(':checked')){
                $('#'+inputId+' option').prop("selected", true);
            }else{
                $('#'+inputId+' option').prop("selected", false);
            }
            $('#'+inputId).trigger('change');
        })

        $('.selected_fields').change(function(){
            var totalOptions = $(this).find('option').length;
            var selectedOptions = $(this).find('option:selected').length;

            let inputId = $(this).attr('id');
            inputId = inputId.replace('modal', 'select_all');

            if (totalOptions == selectedOptions) {
                $('#'+inputId).prop('checked', true);
            } else {
                $('#'+inputId).prop('checked', false);
            }
        });

        $('#final-submit-btn').click(function () {
            let query = {};
            query.location_ids = $('#location_id').val();
            query.sublocation_ids = $('#sublocation_id').val();
            query.designation_ids = $('#designation_id').val();
            query.department_ids = $('#department_id').val();
            query.contractor_ids = $('#contractor_id').val();
            query.month = $('#month').val();
            query.year = $('#year').val();

            let array = $('#reports').val();
            let queryString = new URLSearchParams(query);

            array.forEach(element => {
                let url = element+"?"+queryString.toString();
                window.open(url, "_blank");
            });
        });
    </script>
@endpush