@extends('admin::curd.index')
@section('heading')
    <i class="fa fa-file-text-o"></i> {!! trans('work_order::work_order.name') !!} <small> {!! trans('cms.manage') !!}
        {!! trans('work_order::work_order.names') !!}</small>
@stop

@section('title')
    {!! trans('work_order::work_order.names') !!}
@stop

@section('breadcrumb')
    <ol class="breadcrumb">
        <li><a href="{!! trans_url('admin') !!}"><i class="fa fa-dashboard"></i> {!! trans('cms.home') !!} </a></li>
        <li class="active">{!! trans('work_order::work_order.names') !!}</li>
    </ol>
@stop

@section('entry')
    <div class="box box-warning" id='work_order-work_order-entry'>
    </div>
@stop

@section('tools')
@stop

@section('content')
    <div class="table-responsive clearfix">
        <table id="work_order-work_order-list" class="table table-striped  data-table">
            <thead class="list_head">
                <th>
                    <input type="checkbox" id="select_all_rows" style="display:none;">
                </th>
                <th>{!! trans('work_order::work_order.label.status') !!}</th>
                <th>{!! trans('work_order::work_order.label.ref') !!}</th>
                <th style="padding-left: 33px;
                padding-right: 32px;">{!! trans('work_order::work_order.label.work_due') !!}</th>
                <th>Category</th>
                <th>{!! trans('work_order::work_order.label.asset_id') !!}</th>
                <th>Asset Status</th>
                <th>Sub Location</th>
                <th>Type</th>
                <th>Technician</th>
                <th>{!! trans('work_order::work_order.label.suppliers_id') !!}</th>
                <th>Acknowledged</th>
                <th>Turn Around Time</th>
                {{-- <th>Pm/Cali Checklist</th> --}}
                <th>Request Type</th>
                <th style="padding-left: 33px;
                padding-right: 32px;">{!! trans('work_order::work_order.label.status_date') !!}</th>
                <th style="padding-left: 30px;
                padding-right: 29px;">Created Date</th>
                <th>Estimated Time</th>
                <th>Consumed Time</th>
                <th>Hold Time</th>
                <th>Criticality Type</th>
                <th>Department</th>
                <th>Work Department</th>
                <th>Division</th>
                <th>Contact Name</th>
                <th>Contact Number</th>
                <th>Remarks</th>

            </thead>
            <thead class="search_bar">
                <th>
                    <div class="reset" style="display:none;"><a id="resetnow" class="headpicture"
                            style="cursor:pointer;"><i class="fa fa-refresh" style="color:#000;"></i></a></div>
                </th>
                <th>{!! Form::select('search[work_status]')->options(['' => 'All'] + trans('work_order::work_order.options.status'))->id('ser_work_status')->raw() !!}</th>
                <th>{!! Form::number('search[id]')->min(0)->id('ser_id')->raw() !!}</th>
                <th>{!! Form::text('search[work_orders.work_due]')->addClass('datepick')->id('ser_work_due')->raw() !!}</th>
                <th>{!! Form::select('search[category]')->options(
                        ['' => 'All'] +
                            trans('work_order::work_order.options.category') +
                            trans('work_order::work_order.options.category2'),
                    )->id('ser_request_type')->raw() !!}</th>
                <th>{!! Form::select('search[asset_id]')->addClass('js-selectt2')->options([])->id('ser_assetid')->raw() !!}</th>
                <th>{!! Form::select('search[asset_status]')->options(['' => 'All'] + trans('service_request::service_request.options.asset_status'))->id('ser_assetid')->raw() !!}</th>
                <th>{!! Form::select('search[work_orders.sublocationid]')->id('sublocationid')->raw() !!}</th>
                <th>{!! Form::select('search[workorder_type]')->options(['' => 'All'] + trans('work_order::work_order.options.workorder_type'))->id('ser_request_type')->raw() !!}</th>
                <th>{!! Form::select('search[technician_id]')->id('ser_technician_id')->raw() !!}</th>
                <th>{!! Form::select('search[suppliers_id]')->addClass('js-selectt2')->options([])->id('ser_suppliers_id')->raw() !!}</th>
                <th>{!! Form::select('search[signature]')->options(['' => 'All'] + trans('work_order::work_order.options.signature'))->id('signature')->raw() !!}</th>
                <th></th>
                {{-- <th>{!! Form::select('search[pm_cali_id]')-> options([''=>'All']+PmCali::pm_calis("problem"))->id('ser_pm_cali_id')->raw()!!}</th> --}}
                <th>{!! Form::select('search[request_type]')->options(['' => 'All'] + trans('service_request::service_request.options.request_type'))->id('ser_request_type')->raw() !!}</th>
                <th>{!! Form::text('search[work_orders.status_date]')->addClass('datepick')->id('ser_status_date')->raw() !!}</th>
                {{-- <th>{!! Form::text('search[created_at]')->addClass('datepick')->id('ser_created_at')->raw()!!}</th> --}}
                <th></th>
                <th>{!! Form::text('search[estimated_time]')->id('ser_estimated_time')->raw() !!}</th>
                <th>{!! Form::text('search[consumed_time_seconds]')->id('ser_consumed_time')->raw() !!}</th>
                <th>{!! Form::text('search[hold_time]')->id('ser_hold_time')->raw() !!}</th>
                <th>{!! Form::select('search[criticality_type]')->options(['' => 'All'] + trans('assets::asset.options.criticality_type'))->id('ser_criticality_type')->raw() !!}</th>
                <th>{!! Form::select('search[departmentid]')->options(['' => 'All'] + Department::departments())->id('departmentid')->raw() !!}</th>
                <th>{!! Form::select('search[workdepartmentid]')->options(['' => 'All'] + WorkDepartment::work_departments())->id('workdepartmentid')->raw() !!}</th>
                <th>{!! Form::select('search[divisionid]')->options(['' => 'All'] + Company::divisions())->id('divisionid')->raw() !!}</th>
                <th>{!! Form::text('search[contact_name]')->id('contact_name')->raw() !!}</th>
                <th>{!! Form::text('search[contact_number]')->id('contact_number')->raw() !!}</th>
                <th>{!! Form::text('search[remark]')->id('remark')->style('width: 150px; height: 50px;')->raw() !!}</th>
            </thead>
        </table>
    </div>
@stop

@section('script')
    <script type="text/javascript">
        var oTable;
        $(document).ready(function() {
            $('#ser_work_status').on('change', function() {
                var status = $(this).val();
                if (status === 'Pending') {
                    $('#actions_group').show(); 
                    $('#select_all_rows').show();
                } else {
                    $('#actions_group').hide();  
                    $('#select_all_rows').hide();
                    $('.row_checkbox').prop('checked', false);
                }
                oTable.api().ajax.reload(); // reload table to apply checkboxes
            });
            $(document).on('click', '#select_all_rows', function() {
                var checked = $(this).is(':checked');
                $('.row_checkbox').prop('checked', checked);
            });

            // $("#ser_technician_id").load('{{ URL::to('admin/company/users') }}' + '/' +
            //     {{ user('admin.web')->current_comp }} + '/' + 0);

            $(".datepick").pickadate({
                format: 'dd mmm, yyyy',
                formatSubmit: 'yyyy-mm-dd',
                hiddenSuffix: '',
                selectMonths: true,
                selectYears: true
            }).prop('type', 'text');

            let searchParams = new URLSearchParams(window.location.search)
            if (searchParams.get('id')) {
                app.load('#work_order-work_order-entry', '{!! trans_url('admin/work_order') !!}' + '/' + searchParams.get('id'));
            } else {
                app.load('#work_order-work_order-entry', '{!! trans_url('admin') !!}/work_order/0');
            }
            oTable = $('#work_order-work_order-list').dataTable({
                "bProcessing": true,
                "autoWidth": false,
                "sDom": 'R<>rt<ilp><"clear">',
                "bServerSide": true,
                "sAjaxSource": '{!! trans_url('admin') !!}/work_order',
                rowCallback: function(row, data, index) {
                    $('td:eq(1)', row).addClass('status_' + data.work_status);
                },
                "fnServerData": function(sSource, aoData, fnCallback) {

                    $('#work_order-work_order-list .search_bar input, #work_order-work_order-list .search_bar select')
                        .each(
                            function() {
                                aoData.push({
                                    'name': $(this).attr('name'),
                                    'value': $(this).val()
                                });
                            }
                        );
                    app.dataTable(aoData);
                    $.ajax({
                        'dataType': 'json',
                        'data': aoData,
                        'type': 'GET',
                        'url': sSource,
                        'success': fnCallback
                    });
                },

                "columns": [
                    {
                        data: null,
                        orderable: false,
                        className: "dt-center",
                        render: function(data, type, row) {
                            if ($('#ser_work_status').val() === 'Pending') {
                                return '<input type="checkbox" class="row_checkbox" value="' + row.id + '">';
                            }
                            return '';
                        }
                    },
                    {
                        data: 'work_status'
                    },
                    {
                        data: 'ref'
                    },
                    {
                        data: 'work_due'
                    },
                    {
                        data: 'category'
                    },

                    {
                        data: 'asset_id'
                    },
                    {
                        data: 'asset_status'
                    },
                    {
                        data: 'sublocationid',
                        render: function(data, type, row) {
                            return row.sublocation_name;
                        }
                    },
                    {
                        data: 'workorder_type'
                    },
                    {
                        data: 'technician_id'
                    },
                    {
                        data: 'suppliers_id'
                    },
                    {
                        data: 'acknowledged'
                    },
                    //  {data :'pm_cali_id'},
                    {
                        data: 'turn_around_time'
                    },
                    {
                        data: 'request_type'
                    },
                    {
                        data: 'status_date'
                    },
                    {
                        data: 'created_at'
                    },
                    {
                        data: 'estimated_time',
                        className: "text-right"
                    },
                    {
                        data: 'consumed_time_seconds',
                        className: "text-right"
                    },
                    {
                        data: 'hold_time',
                        className: "text-right"
                    },
                    {
                        data: 'criticality_type'
                    },
                    {
                        data: 'departmentid'
                    },
                    {
                        data: 'workdepartmentid'
                    },
                    {
                        data: 'divisionid'
                    },
                    {
                        data: 'contact_name'
                    },
                    {
                        data: 'contact_no'
                    },
                    {
                        data: 'remark'
                    },
                ],
                "pageLength": 10,
                "order": [
                    [2, "desc"]
                ],
            });
            $("#resetnow").click(function() {
                // hide and uncheck the select-all checkbox
                $("#select_all_rows").prop("checked", false).hide();

                // also clear all row checkboxes
                $(".row_checkbox").prop("checked", false);
                $('.search_bar input, .search_bar select').each(function() {
                    $(this).val('');
                })
                $("#ser_technician_id").empty().trigger('change');
                document.getElementById("select2-ser_technician_id-container").innerHTML = " ";


                document.getElementById("select2-ser_assetid-container").innerHTML = " ";
                document.getElementById("select2-ser_suppliers_id-container").innerHTML = " ";
                document.getElementById("select2-sublocationid-container").innerHTML = " ";
                oTable.api().draw();
                $(".reset").css({
                    'display': 'none'
                });
            });
            $('.search_bar').change(function() {
                $(".reset").css({
                    'display': 'inline'
                });
                return;
            });
            // Stop row click when clicking checkbox
            $('#work_order-work_order-list tbody').on('click', '.row_checkbox', function(e) {
                e.stopImmediatePropagation(); // <- important!
            });

            $('#work_order-work_order-list tbody').on('click', 'tr', function() {

                oTable.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');

                var d = $('#work_order-work_order-list').DataTable().row(this).data();

                $('#work_order-work_order-entry').load('{!! trans_url('admin') !!}/work_order' + '/' + d.id);
            });

            $("#work_order-work_order-list .search_bar input, #work_order-work_order-list .search_bar select").on(
                'keyup select',
                function(e) {
                    e.preventDefault();
                    if (e.keyCode == 13 || e.keyCode == 9) {
                        oTable.api().draw();
                    }
                });
            $("#work_order-work_order-list .search_bar select,.datepick").on('change', function(e) {
                e.preventDefault();
                oTable.api().draw();
            });

            $("#sublocationid").select2({
                allowClear: false,
                ajax: {
                    url: "{{ trans_url('admin/location/sub_location/select2/location') }}",
                    dataType: 'json',
                    delay: 650,
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            // companyId: $('#companyid').val(),
                            // divisionId: $('#divisionid').val(),
                            // blockId: $('#block_id').val(),
                            // sectionId: $('#section_id').val(),
                            // locationId: $('#location_id').val(),
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;
                        return {
                            results: data.items.map(function(obj) {
                                return {
                                    id: obj.id,
                                    text: obj.name
                                };
                            }),
                            // results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false,
                },
            });

            $(".js-selectt2").select2({
                ajax: {
                    url: "{{ trans_url('admin/assets/select2/asset') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;
                        return {
                            results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                escapeMarkup: function(markup) {
                    return markup;
                }, // let our custom formatter work

                minimumInputLength: 1,
                templateResult: formatRepo, // omitted for brevity, see the source of this page
                templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
            });


            function formatRepo(repo) {
                if (repo.loading) return repo.name;
                var markup = "<div class='select2-result-repository clearfix'>" +
                    "<div class='select2-result'><span>" + repo.name + "&nbsp;" + repo.status + "&nbsp;" + repo
                    .ref + "&nbsp" + repo.bar_code + "</span></div>";

                return markup;
            }

            function formatRepoSelection(repo) {
                if (repo.id != "") {
                    $("#workorder_no").load('{{ URL::to('admin/work_order/asset') }}' + '/' + repo.id);
                }
                return repo.name;


            }
            $("#ser_suppliers_id").select2({
                ajax: {
                    url: "{{ trans_url('admin/supplier/select2') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            companyId: {{ user('admin.web')->current_comp }},
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;
                        return {
                            results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: true,
                },
                escapeMarkup: function(markup) {
                    return markup;
                }, // let our custom formatter work
                initSelection: function(element, callback) {
                    callback({
                        id: "{{ @$asset->supplier_id }}",
                        name: "{{ @$asset->supplier->name }}"
                    });
                },
                templateResult: formatRepo3, // omitted for brevity, see the source of this page
                templateSelection: formatRepo3Selection // omitted for brevity, see the source of this page
            });

            function formatRepo3(repo) {
                if (repo.loading) return repo.name;
                var markup = "<div class='select2-result-repository clearfix'>" +
                    "<div class='select2-result'><span>" + repo.name + "</span></div>";

                return markup;
            }


            function formatRepo3Selection(repo) {
                return repo.name ? repo.name : repo.text;

            }

            $("#ser_technician_id").select2({
                ajax: {
                    url: "{{ trans_url('admin/company/technicians/select2') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term, // search term                            
                            page: params.page
                        };
                    },
                    processResults: function(data, params) {

                        params.page = params.page || 1;
                        return {
                            results: data.items.map(function(obj) {
                                return {
                                    id: obj.id,
                                    text: obj.name
                                };
                            }),
                            // results: data.items,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: false
                },

            });
        });
    </script>
@stop

@section('style')
    <style type="text/css">
        <table>tbody>tr>td,
        th {
            white-space: nowrap;
        }

        table.dataTable .select2-container--default .select2-selection--single,
        .select2-selection .select2-selection--single {
            height: 26px !important;
        }

        th>.select2-container {
            width: 312px !important;
        }

        .status_Pending {
            color: red !important;
        }

        .status_WIP {
            color: #ff980f !important;
        }

        .status_Completed {
            color: green !important;


        }

        .status_Assigned {
            color: blue !important;

        }

        .status_Accepted {
            color: blue !important;

        }
    </style>
@stop