@extends('admin::curd.index')
@section('heading')
@stop

@section('title')
    <img src="{!! URL::to('img/report/analytics.png') !!}"> &nbsp;{!! ucwords('Reports') !!}
@stop

@section('breadcrumb')
@stop

@section('entry')

@stop

@section('tools')
@stop


@section('content')
    <div class="box-body">
        <div class="nav-tabs-custom">

            <ul class="nav nav-tabs primary">


                <li class="active"><a href="{!! trans_url('admin/service_request/report') !!}" class="active">Service Request</a></li>
            </ul>

            <div class="tab-content">

                <div class="tab-pane active clearfix" id="details">

                    {!! Form::horizondal_open()->id('serviceRequestReportForm')->secure()->method('POST')->files('true')->enctype('multipart/form-data') !!}
                    <div class="col-md-5 col-lg-5">
                        {!! Form::select('search[service_requests.companyid]')->options(Company::companies(), user('admin.web')->current_comp)->disabled()->addGroupClass('form-group-sm')->label('Company')->id('companyid')->placeholder('select company') !!}

                        {{-- {!! Form::select('search[service_requests.division][]')->options(Company::divisions())->addClass('js-multiple')->addGroupClass('form-group-sm')->label('Division')->id('divisionid')->multiple(true) !!} --}}

                                                {!! Form::select('search[service_requests.division][]')
                            ->options(Company::divisions())
                            ->addClass('js-multiple')
                            ->addGroupClass('form-group-sm')
                            ->label('Division')
                            ->id('divisionid')
                            ->multiple(true)
                            ->select($selectedDivisionId) !!}

                        {!! Form::select('search[service_requests.asset_id]')->options([])->id('asset_id')->addGroupClass('form-group-sm')->label('Assets')->placeholder('select asset ') !!}

                        {!! Form::select('search[service_requests.request_type]')->options(trans('service_request::service_request.options.request_type'))->label(trans('service_request::service_request.label.request_type'))->addGroupClass('form-group-sm')->placeholder('select request type')->id('request_type') !!}

                        {!! Form::select('search[service_requests.job_priority]')->options(trans('service_request::service_request.options.job_priority'))->addGroupClass('form-group-sm')->label('Job Priority')->placeholder('select job priority')->id('job_priority') !!}

                        @if ($selectedworkStatus)
                            {!! Form::select('search[service_requests.work_status][]')->multiple(true)->options(trans('service_request::service_request.options.status'))->addGroupClass('form-group-sm')->label('Status')->id('status')->select($selectedworkStatus)!!}
                        @else
                            {!! Form::select('search[service_requests.work_status][]')->multiple(true)->options(trans('service_request::service_request.options.status'))->addGroupClass('form-group-sm')->value(['Pending' => 'Pending', 'WIP' => 'WIP', 'Assigned' => 'Assigned', 'Accepted' => 'Accepted'])->label('Status')->id('status') !!}
                        @endif
                        @if ($selectedAssignedUser !="null" && $selectedAssignedUser)

                            {!! Form::select('search[service_requests.assigned_user]')->id('assigned_user')->options(Company::technicians())->addGroupClass('form-group-sm')->label('Technician')->select($selectedAssignedUser) !!}

                        @else

                            {!! Form::select('search[technician_id]')->id('assigned_user')->options(trans('service_request::service_request.options.assigned_user'))->addGroupClass('form-group-sm')->label('Technician') !!}
                        @endif

                        {!! Form::select('search[service_requests.sublocationid]')->id('sublocationid')->options([])->label(trans('assets::asset.label.sublocation_id'))->placeholder(trans('assets::asset.placeholder.sublocation_id'))->addGroupClass('form-group-sm') !!}

                        {!! Form::select('search[service_requests.source]')->id('source_id')->options(['' => 'All'] + trans('service_request::service_request.options.source'))->label('Source')->addGroupClass('form-group-sm') !!}

                        {!! Form::select('search[groupby]')->options([
                                'service_requests.departmentid' => 'Department',
                                'service_requests.workdepartmentid' => 'Work Department',
                                'assets.category_id' => 'Category',
                                'assets.subcategory_id' => 'Sub Category',
                                'assets.subclass_id' => 'Sub Class',
                                'service_requests.asset_id' => 'Asset',
                                'service_requests.requested_by' => 'Requested User',
                            ])->addGroupClass('form-group-sm')->select('departmentid')->label('Group By')->placeholder('Select') !!}
                        
                        {!! Form::select('search[show_sub_work]')->options(trans('service_request::service_request.options.sub_work'))->addGroupClass('form-group-sm')->addClass('sub_work')->label('Show Sub Work')->id('show_sub_work') !!}                        

                    </div>
                    <div class="col-md-5 col-lg-5">
                                                
                        {!! Form::select('search[service_requests.department][]')->options(Department::allDepartments())->addClass('js-multiple')->type('text')->multiple(true)->addGroupClass('form-group-sm')->label('Department')->id('department_id')->select($selectedDepartment) !!}
                        {!! Form::select('search[service_requests.workdepartment][]')->options(WorkDepartment::allWorkDepartments())->addClass('js-multiple')->type('text')->multiple(true)->addGroupClass('form-group-sm')->label('Work Department')->id('work_department_id')->select($selectedworkDepartment) !!}
                        
                        @if (!empty($selectedsubClass) && !(count($selectedsubClass) === 1 && $selectedsubClass[0] === "null"))                      

                            {!! Form::select('search[assets.subclass_id][]')->addClass('js-multiple')->type('text')->multiple(true)->addGroupClass('form-group-sm')->label('Sub Class')->id('subclass_id')->options(Category::subclasses())->select($selectedsubClass) !!}
                        @endif
                        
                        @if (!empty($selectedsubWork) && !(count($selectedsubWork) === 1 && $selectedsubWork[0] === "null"))                      
                            {!! Form::select('search[sub_work][]')->options(PmCali::ShowSubWork())->addClass('js-multiple')->type('text')->multiple(true)->addGroupClass('form-group-sm')->label('Sub Work')->id('sub_work_id')->select($selectedsubWork) !!}
                        @endif
                        @if (!empty($selectedjobType) && !(count($selectedjobType) === 1 && $selectedjobType[0] === "null"))                      

                            {!! Form::select('search[job_type][]')->options(PmCali::ShowJobType())->addClass('js-multiple')->type('text')->multiple(true)->addGroupClass('form-group-sm')->label('Job Type')->id('jobtype_id')->select($selectedjobType) !!}
                        @endif
                        
                        @if (!empty($selectedcategoryId) && !(count($selectedcategoryId) === 1 && $selectedcategoryId[0] === "null"))                      

                            {!! Form::select('search[assets.category_id][]')->addClass('js-multiple')->type('text')->multiple(true)->addGroupClass('form-group-sm')->label('Category')->id('category_id')->options(Category::categories())->select($selectedcategoryId) !!}
                        @endif

                        @if (!empty($selectedsubcategoryId) && !(count($selectedsubcategoryId) === 1 && $selectedsubcategoryId[0] === "null"))                      

                        {!! Form::select('search[assets.subcategory_id][]')->addClass('js-multiple')->type('text')->multiple(true)->addGroupClass('form-group-sm')->label('Sub Category')->id('subcategory_id')->options(Category::subcategories())->select($selectedsubcategoryId) !!}
                        @endif

                        {!! Form::select('search[service_requests.asset_status]')->options(trans('service_request::service_request.options.asset_status'))->addGroupClass('form-group-sm')->label('Asset Status')->placeholder('select Asset Status')->id('asset_status') !!}

                        {!! Form::select('search[service_requests.requested_by]')->options(Company::employees())->addGroupClass('form-group-sm')->id('requested_by')->label('Requested By')->placeholder('Select Requested By') !!}
                        {!! Form::select('search[service_requests.created_by_user]')->options(Company::allUsers())->addGroupClass('form-group-sm')->id('created_by_user')->label('Created By')->placeholder('Select Created By') !!}

                        {!! Form::select('search[service_requests.sub_work][]')->id('subwork_id')->options([])->addGroupClass('form-group-sm')->placeholder('Select Sub Work')->label('Sub Work') !!}
                        {!! Form::select('search[service_requests.job_type][]')->id('job_type_id')->options([])->addGroupClass('form-group-sm')->placeholder('Select Job Type')->label('Job Type') !!}

                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                Requested Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">

                                {!! Form::date('search[service_requests.created_at][0]')->id('exp_date_from')->addClass('datepick')->addGroupClass('form-group-sm')->placeholder('From')->raw() !!}
                            </div>

                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                                {!! Form::date('search[service_requests.created_at][1]')->id('exp_date_to')->addClass('datepick_enddate')->addGroupClass('form-group-sm')->placeholder('To')->raw() !!}
                            </div>
                        </div>

                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                Preferred Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">

                                {!! Form::date('search[service_requests.request_date][0]')->id('req_date_from')->addClass('datepick')->addGroupClass('form-group-sm')->placeholder('From')->raw() !!}
                            </div>

                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                                {!! Form::date('search[service_requests.request_date][1]')->id('req_date_to')->addClass('datepick')->addGroupClass('form-group-sm')->placeholder('To')->raw() !!}
                            </div>
                        </div>

                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                Work Due
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">

                                {!! Form::date('search[work_orders.work_due][0]')->id('work_due_from')->addClass('datepick')->addGroupClass('form-group-sm')->placeholder('From')->raw() !!}
                            </div>

                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                                {!! Form::date('search[work_orders.work_due][1]')->id('work_due_to')->addClass('datepick_enddate')->addGroupClass('form-group-sm')->placeholder('To')->raw() !!}
                            </div>
                        </div>

                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6">
                                Status Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">

                                {!! Form::date('search[work_orders.status_date][0]')->id('compl_date_from')->addClass('datepick')->addGroupClass('form-group-sm')->placeholder('From')->raw() !!}
                            </div>

                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                                {!! Form::date('search[work_orders.status_date][1]')->id('compl_date_to')->addClass('datepick_enddate')->addGroupClass('form-group-sm')->placeholder('To')->raw() !!}
                            </div>
                        </div>    
                        {!! Form::select('search[work_orders.workorder_type]')->options(trans('service_request::service_request.options.workorder_type'))->addGroupClass('form-group-sm')->label('Work Order Type')->placeholder('select Work order Type')->id('workorder_type') !!}

                    </div>
                    <div class="col-md-2 col-lg-2">
                        <div class="m-b-20">
                            <img src="{!! URL::to('img/report/order.png') !!}">&nbsp;
                            <a id="download_report" class="headpicture" href="#">Download Report</a>
                        </div>
                        {{-- <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="download_csv" class="headpicture" href="#">Download Csv</a>
                        </div> --}}
                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="download_excel" class="headpicture" href="#">Download Excel</a>
                        </div>
                        <div class="m-b-20">
                            <i class="fa fa-file-excel-o" style="color:#000;"></i>&nbsp;
                            <a id="download_summary" class="headpicture" href="#">Download Summary Excel</a>
                        </div>
                        <div class="m-b-20">
                            <i class="fa fa-refresh" style="color:#000;"></i>&nbsp;
                            <a id="resetnow" class="headpicture" style="cursor:pointer;">Reset Filter</a>
                        </div>

                    </div>
                    <div class="col-md-10 col-lg-10">
                        <button type="button" id="gobutton" class="btn btn-success btn-sm" style="width:100%">Go</button>
                    </div>


                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

    <div class="nav-tabs-custom">
        <ul class="nav nav-tabs primary">
            <li class="active"><a href="#tab-summary" data-toggle="tab">Data Summary</a></li>
            <li><a href="#tab-full-data" data-toggle="tab">Full Data Set</a></li>
            <li><a href="#tab-graph" data-toggle="tab">Graph</a></li>
        </ul>

        <div class="tab-content" style="width:100%">

            {{-- <div class="tab-pane " id="tab-graph">
                <div class="table-wrapper col-lg-12" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table width="100%" align="center" cellpadding="0" cellspacing="0" id="table_1"
                        class="form_table table table-striped">
                        <tr>
                            <td colspan="2">
                                <table width="100%" bgcolor="#FFF" border="0" cellpadding="0" cellspacing="0"
                                    style="padding:8px 0 0 0;">
                                    <tr>
                                    </tr>
                                    <tr>
                                    </tr>
                                    <tr>
                                        <td height="10" class="form_fields_table">&nbsp;</td>
                                        <td width="15%" height="10" colspan="-4" class="form_fields_table">&nbsp;
                                        </td>
                                        <td width="71%" height="10" colspan="-4" class="form_fields_table">&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="form_fields_table" style="padding:10px;">
                                            <div id="chart_span" style="min-width: 400px; height: 350px; margin: 0 auto">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div> --}}

            <div class="tab-pane" id="tab-graph">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto; overflow-x: auto;">
                    <table width="100%" align="center" cellpadding="0" cellspacing="0" id="table_1"
                        class="form_table table table-striped">
                        <tr>
                            <td colspan="2">
                                <table width="100%" bgcolor="#FFF" border="0" cellpadding="0" cellspacing="0"
                                    style="padding: 8px 0 0 0;">
                                    <tr></tr>
                                    <tr></tr>
                                    <tr>
                                        <td height="10" class="form_fields_table">&nbsp;</td>
                                        <td width="15%" height="10" colspan="-4" class="form_fields_table">&nbsp;
                                        </td>
                                        <td width="71%" height="10" colspan="-4" class="form_fields_table">&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" class="form_fields_table" style="padding: 10px;">
                                            <div id="chart_span" style="min-width: 100%; height: 350px; margin: 0 auto;">
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="tab-pane active" id="tab-summary">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table id="data_summary" border="0" align="center"
                        class="table table-striped display datatable data-table" cellpadding="0" cellspacing="0">
                    </table>
                </div>
            </div>
            <div class="tab-pane table-responsive" id="tab-full-data" style="width:100%">
                <table id="full_listings" class="table table-striped data-table" width="90%">
                    <thead class="list_head">
                        <th>Service Request</th>
                        <th>Requested Date</th>
                        <th>{!! trans('service_request::service_request.label.asset_id') !!}</th>
                        <th>Request Type</th>
                        <th>Job Priority</th>
                        <th>Asset Status</th>
                        <th>Department</th>
                        <th>Work Department</th>
                        <th>Sub Work</th>
                        <th>Job Type</th>
                        <th>Status</th>
                        <th>Escalation Level</th>
                        <th>Technician</th>
                        <th>Supplier</th>
                        <th>Work Order</th>
                        <th>Work Order Status</th>
                        <th>Work Order Type</th>
                        <th>Status Date</th>
                        <th>Turn Around Time</th>
                        <th>Criticality Type</th>
                        <th>Complaint/Description</th>
                        <th>Preferred Date & Time</th>
                        <th>Work Due</th>
                        <th>Requested By</th>
                        <th>Created By</th>
                        <th>Company and Division</th>
                    </thead>

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

    <div class="modal fade" id="save-report">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Save Report</h3>
                    <div class="popup_description">Type the name and save report for future use.</div>
                </div>
                <div class="modal-body" style="height:110px;">
                    <div class="form-horizontal">

                        <div class="col-md-12 col-lg-12 m-t-20">
                            {!! Form::horizontal_open()->id('report_save')->method('POST')->files('true')->action(trans_url('admin/save_report')) !!}

                            {!! Form::hidden('screen')->forceValue('service_request') !!}

                            {!! Form::text('name')->placeholder('Enter Name')->label('Report Name')->required() !!}

                            {!! Form::close() !!}
                        </div>
                    </div>
                    <div id="resultofsave" class="searchoptiontext"> </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="save-repot" name="Saverep" value="Send"
                        data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="show_report">
        <div class="modal-dialog">
            <div class="modal-content" style="max-width:400px;">
                <div class="modal-header header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Recent Saved Searches</h4>
                </div>
                <div class="modal-body" style="height:210px; overflow-y: auto;">

                    <div id="saved-reports"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" name="Closerep" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

@stop


<script type="text/javascript">
    var chart;
    $(document).ready(function() {
        $('.js-multiple').select2();

        ToggleSubWork();

        $('select[name="search[groupby]"]').change(function() {
            ToggleSubWork();
        });

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

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

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

        $("#work_department_id").change(function() {    
            $.ajax({
                type: 'GET',
                url: "{{ URL::to('admin/pm_cali/list/sub_work') }}" + "/" + $(this).val(),
                dataType: 'html',
                success: function(data, textStatus, jqXHR) {
                    var data = JSON.parse(data);

                    if (data.count > 0) {
                        $('#subwork_id').empty();
                        $('#subwork_id').append(data.html)                        
                        $('#subwork_id').trigger('change');
                    } else {
                        $('#subwork_id').empty();
                    }
                },
            });
            $.ajax({
                type: 'GET',
                url: "{{ URL::to('admin/pm_cali/list/job_type') }}" + "/" + $(this).val(),
                dataType: 'html',
                success: function(data, textStatus, jqXHR) {
                    var data = JSON.parse(data)
                    if (data.count > 0) {
                        $('#job_type_id').empty();
                        $('#job_type_id').append(data.html);
                        $('#job_type_id').trigger('change');
                    } else {
                        $('#job_type_id').empty();

                    }
                },
            });
        })

        var from_date = '';
        var to_date = '';
        
        if (from_date !== '') {
            var picker = $('.datepick').pickadate('picker');
            picker.set('select', from_date);
        }

        if (to_date !== '') {
            var picker = $('.datepick_enddate').pickadate('picker');
            picker.set('select', to_date);
        }

        $('.datepick').change(function() {
            var name = $(this).attr('name');
            var end_date = name.replace('[0]', '[1]');
            var start_date = $(this).val();
            $('input[name="' + end_date + '"]')
                .pickadate('picker')
                .set({
                    min: new Date(start_date + ' 23:59:59'),
                    select: new Date(start_date + ' 23:59:59'),
                })
        });

        $("#assigned_user").select2({
            ajax: {
                url: "{{ trans_url('admin/company/technicians/all/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
            },

        });

        $("#asset_id").select2({
            minimumInputLength: 3,
            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

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

        $("#status").select2({
            data: {!! json_encode(trans('service_request::service_request.options.status')) !!},
            escapeMarkup: function(markup) {
                return markup;
            },
        });

        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.rfc + "&nbsp;" + repo
                .bar_code + "</span></div>";

            return markup;
        }

        function formatRepoSelection(repo) {
            return repo.name;
        }


        @if (@$save_report['search']['companyid'] != '')
            $("select[name='search[divisionid]").load(
                '{{ URL::to('admin/company/accessible_divisions/employee') }}/{{ @$save_report['search']['companyid'] }}'
            );
        @endif

        @if (@$save_report['search']['divisionid'] != '')
            $("select[name='search[divisionid]").load(
                '{{ URL::to('admin/company/accessible_divisions/employee') }}/{{ @$save_report['search']['companyid'] }}/{{ @$save_report['search']['divisionid'] }}'
            );
        @endif

        $("#companyid").change(function() {
            var company = $("#companyid option:selected").val();
            $("#divisionid").load('{{ URL::to('/admin/company/accessible_divisions/employee') }}' + '/' + company);
        });

        var filter = $("#serviceRequestReportForm").serialize();
        plotGraph("{{ URL::to('admin/service_request/report/graph') }}" + '/' + filter + '');

        $('#view_report').click(function() {
            $('#saved-reports').load("{{ trans_url('admin/service_request/save/save_report') }}");
            $('#show_report').modal("show");
        });

        $("#popup-save-report").click(function() {
            $("#name").val('');
            $("#save-report").modal('show');
        });

        $('input[id=exp_date_from]').change(function() {

            $("#exp_date_to").pickadate('picker').set({
                select: $('input[id=exp_date_from]').val(),
                min: new Date($('input[id=exp_date_from]').val())
            });
        });

        $('input[id=req_date_from]').change(function() {

            $("#req_date_to").pickadate('picker').set({
                select: $('input[id=req_date_from]').val(),
                min: new Date($('input[id=req_date_from]').val())
            });
        });

        $('input[id=work_due_from]').change(function() {

            $("#work_due_to").pickadate('picker').set({
                select: $('input[id=work_due_from]').val(),
                min: new Date($('input[id=work_due_from]').val())
            });
        });

        $('input[id=compl_date_from]').change(function() {

            $("#compl_date_to").pickadate('picker').set({
                select: $('input[id=compl_date_from]').val(),
                min: new Date($('input[id=compl_date_from]').val())
            });
        });


        $('#resetnow').click(function() {

            var defaultOptions = {
                'Pending': 'Pending',
                'WIP': 'WIP',
                'Assigned': 'Assigned',
                'Accepted': 'Accepted'
            };

            $("input[name='search[work_orders.work_due][0]']").val('');
            $("input[name='search[work_orders.work_due][1]']").val('');
            $("input[name='search[service_requests.created_at][0]']").val('');
            $("input[name='search[service_requests.created_at][1]']").val('');
            $("input[name='search[service_requests.request_date][0]']").val('');
            $("input[name='search[service_requests.request_date][1]']").val('');
            $("input[name='search[work_orders.status_date][0]']").val('');
            $("input[name='search[work_orders.status_date][1]']").val('');
            $("#assigned_user").empty();
            $('#serviceRequestReportForm')[0].reset();
            $('#status').val(Object.keys(defaultOptions));
            $('.select2-selection__rendered').html('');

            var filter = $("#serviceRequestReportForm").serialize();
            plotGraph("{{ URL::to('admin/service_request/report/graph') }}" + '/' + filter);

            $('#group_by_label').html('');
            oTable.api().draw();

            $('#status').trigger('change');
            ToggleSubWork();
        });


        $('#download_report').click(function() {
            var filter = $("#serviceRequestReportForm").serialize();
            $('#download_report').attr('href',
                "{{ URL::to('admin/service_request/report/graph/pdf') }}" + "/" + filter);
            $('#download_report').attr("target", "_blank");
        });

        $('#download_csv').click(function() {
            var filter = $("#serviceRequestReportForm").serialize();
            $('#download_csv').attr('href', "{{ URL::to('admin/service_request/report/graph/csv') }}" +
                "/" + filter);
            $('#download_csv').attr("target", "_blank");
        });

        $('#download_excel').click(function() {
            var filter = $("#serviceRequestReportForm").serialize();
            $('#download_excel').attr('href',
                "{{ URL::to('admin/service_request/report/graph/excel') }}" +
                "/" + filter);
            $('#download_excel').attr("target", "_blank");
        });

        $('#download_summary').click(function() {
            var filter = $("#serviceRequestReportForm").serialize();
            $('#download_summary').attr('href',
                "{{ URL::to('admin/service_request/report/graph/excel/summary') }}" +
                "/" + filter);
            $('#download_summary').attr("target", "_blank");
        });

        $('#save-repot').click(function(e) {
            if ($("#report_save").valid() == false) {
                toastr.error('Please enter valid information.', 'Error');
                return false;
            }
            var postData = $("#report_save").serialize();
            var chartData = $("#serviceRequestReportForm").serialize();
            var formURL = "{{ trans_url('admin/save_report') }}";
            $.ajax({
                url: formURL,
                type: "POST",
                data: {
                    data: postData,
                    data1: chartData
                },
                success: function(data, textStatus, jqXHR) {},
                error: function(jqXHR, textStatus, errorThrown) {
                    toastr.error('An error occurred while saving.', 'Error');
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            });

            e.preventDefault();
        });

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chart_span',
                type: 'column'
            },
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            xAxis: {
                categories: [],
                labels: {
                    rotation: -55,
                    align: 'right',
                    style: {
                        fontSize: '11px',
                        fontFamily: 'Roboto, sans-serif'
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return '' +
                        this.series.name + ': ' + this.y + '';
                }
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: true
            },
            series: [{
                    name: 'Pending',
                    data: []
                },
                {
                    name: 'Assigned',
                    data: []
                },
                {
                    name: 'Accepted',
                    data: []
                },
                {
                    name: 'WIP',
                    data: []
                },
                {
                    name: 'Cancelled By User',
                    data: []
                },
                {
                    name: 'Completed',
                    data: []
                }, {
                    name: 'All',
                    data: []
                }
            ]
        });


        oTable = $('#full_listings').dataTable({
            "bProcessing": true,
            "sDom": 'R<>rt<ilp><"clear">',
            "bServerSide": true,
            "sAjaxSource": '{!! trans_url('admin') !!}/service_request/report',
            "fnServerData": function(sSource, aoData, fnCallback) {

                $('#full_listings .search_bar input, #full_listings .search_bar select').each(
                    function() {

                        aoData.push({
                            'name': $(this).attr('name'),
                            'value': $(this).val()
                        });
                    }
                );
                $('#serviceRequestReportForm select, #serviceRequestReportForm input').each(
                    function() {
                        if ($(this).val() == null || $(this).val() == '') {
                            return;
                        }
                        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: 'request_no',
                    render: function(data, type, row, meta) {
                        var requestId = data.replace('SR-', '');
                        
                        var url = '{{ trans_url("admin/service_request/service_request") }}/' + '?id=' + row.id;
                        var style = row.source === 'Qrcode' ? 'style="color: #4169e1;"' : '';

                        return '<a href="' + url + '" target="_blank" ' + style + '>' + data + '</a>';
                    }
                },
                { data: 'created_at' },
                { data: 'asset_id' },
                { data: 'request_type' },
                { data: 'job_priority' },
                { data: 'asset_status' },
                { data: 'departmentid' },
                { data: 'workdepartmentid' },
                { data: 'sub_work' },
                { data: 'job_type' },
                { data: 'status_div' },
                { data: 'escalation_matrix' },
                { data: 'assigned_user' },
                { data: 'suppliers_name' },
                { data: 'workorder_no' },
                { data: 'workorder_status' },
                { data: 'workorder_type' },
                { data: 'workorder_status_date' },
                { data: 'turn_around_time' },
                { data: 'criticality_type' },
                { data: 'job_description' },
                { data: 'request_date_time' },
                { data: 'work_due' },
                { data: 'requested_by' },
                { data: 'created_by_user' },
                { data: 'companyid' }
            ],


            "pageLength": 25
        });


        $(document.body).on('click', "#gobutton", function(e) {
            e.preventDefault();
            chart.showLoading();
            var filter = $("#serviceRequestReportForm").serialize();
            var filter_label = '';
            var comma = '';
            $("#serviceRequestReportForm select, #serviceRequestReportForm input").each(function() {
                if ($(this).val() != '' || $(this).val() != null) {
                    filter_label += comma + ' ' + $('#' + $(this).attr('id') + ' :selected')
                        .text();
                    comma = ',';
                }
            });

            plotGraph("{{ URL::to('admin/service_request/report/graph') }}" + '/' + filter +
                '');
            $('#full_listings .search_bar').find("." + $(this).attr('id')).prop('disabled', true);
            oTable.api().draw();
        }); 
        
        $("#sublocationid").select2({
            allowClear: true,
            placeholder: 'Select Sub Location',
            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,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false,
            },
            escapeMarkup: function(markup) {
                return markup;
            },

            templateResult: formatRepo3,
            templateSelection: formatRepo3Selection
        });

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

            return markup;
        }


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

    function ToggleSubWork() {
        var groupby = $('select[name="search[groupby]"]').val();
        var SelectSubWork = $('select[name="search[service_requests.sub_work][]"]').closest('.form-group');
        var SelectJobType = $('select[name="search[service_requests.job_type][]"]').closest('.form-group');

        var Select_Sub_Work = $('select[name="search[show_sub_work]"]').closest('.form-group');        

        if (groupby === 'service_requests.workdepartmentid') {
            SelectSubWork.show();
            SelectJobType.show();
            Select_Sub_Work.show();
        } else {
            $('select[name="search[service_requests.sub_work][]"]').val('');
            $('select[name="search[service_requests.job_type][]"]').val('');
            SelectSubWork.hide();
            SelectJobType.hide();
            Select_Sub_Work.hide();

        }        
    }

    function plotGraph(url) {
        var groupby = $('select[name="search[groupby]"]').val();        
        var subWork = $('#show_sub_work').val();
        var Select_Sub_Work = $('select[name="search[subwork_id]"]').closest('.form-group');                
        var status_value = $("#status").val();

        var label = new Array();
        var dataA = new Array();
        var dataB = new Array();
        var dataC = new Array();
        var dataD = new Array();
        var dataE = new Array();
        var dataF = new Array();
        var dataG = new Array();
        var dataH = new Array();
        // var dataG = new Array();
        var html = '';
        var color = '';
        var count = 0;
        var assigned = 0;
        var accepted = 0;
        var wip = 0;
        var completed = 0;
        var pending = 0;
        var cancelled_by_user = 0;
        var sub_work = 0;
        var job_type = 0;
        var total = 0;

        if(status_value == null){
            html += '<thead class="list_head"><tr height="30" class="listing_headings" >';
            html += '<th width="320" style="padding-left:10px;" >Group By</th>';
            if (groupby === 'service_requests.workdepartmentid' && subWork === 'Yes')
            { 
                html += '<th width="320" style="padding-left:10px;" >Sub Work</th>';
                html += '<th width="320" style="padding-left:10px;" >Job Type</th>';
            }
            html += '<th width="320" style="padding-left:10px;" >Pending</th>';
            html += '<th width="320" style="padding-left:10px;" >Assigned</th>';
            html += '<th width="320" style="padding-left:10px;" >Accepted</th>';
            html += '<th width="320" style="padding-left:10px;" >WIP</th>';
            html += '<th width="320" style="padding-left:10px;" >Cancelled By User</th>';
            html += '<th width="320" style="padding-left:10px;" >Completed</th>';
            html += '<th width="320" style="padding-left:10px;" >Total</th>';
            html += '</tr></thead>';
        } else {
            html += '<thead class="list_head"><tr height="30" class="listing_headings" >';
            html += '<th width="320" style="padding-left:10px;" >Group By</th>';   
            if (groupby === 'service_requests.workdepartmentid' && subWork === 'Yes')
            { 
                html += '<th width="320" style="padding-left:10px;" >Sub Work</th>';
                html += '<th width="320" style="padding-left:10px;" >Job Type</th>';
            }
            if (status_value.includes('Pending')) {
                html += '<th width="320" style="padding-left:10px;" >Pending</th>';
            }
            if (status_value.includes('Assigned')) {
                html += '<th width="320" style="padding-left:10px;" >Assigned</th>';
            }
            if (status_value.includes('Accepted')) {
                html += '<th width="320" style="padding-left:10px;" >Accepted</th>';
            }
            if (status_value.includes('WIP')) {
                html += '<th width="320" style="padding-left:10px;" >WIP</th>';
            }
            if (status_value.includes('Cancelled By User')) {
                html += '<th width="320" style="padding-left:10px;" >Cancelled By User</th>';
            }
            if (status_value.includes('Completed')) {
                html += '<th width="320" style="padding-left:10px;" >Completed</th>';
            }
            html += '<th width="320" style="padding-left:10px;" >Total</th>';
            html += '</tr></thead>';
        }
        $.getJSON(url, function(seriesData) {
            $.each(seriesData, function(id, key) {                
                if (count % 2 == 0) {
                    color = '#ffffff';
                } else {
                    color = '#e9e9e9'
                }

                label.push(key.labels);
                dataA.push(Number(key.pending));
                dataB.push(Number(key.assigned));
                dataC.push(Number(key.accepted));
                dataD.push(Number(key.wip));
                dataE.push(Number(key.cancelled_by_user));
                dataF.push(Number(key.completed));
                dataG.push(Number(key.total));
                sub_work += parseInt(key.sub_work);
                job_type += parseInt(key.job_type);
                pending += parseInt(key.pending);
                assigned += parseInt(key.assigned);
                accepted += parseInt(key.accepted);
                wip += parseInt(key.wip);
                cancelled_by_user += parseInt(key.cancelled_by_user);
                completed += parseInt(key.completed);
                total += parseInt(key.total);

                if(status_value == null){
                    html += '<tr height="25">';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels +'</td>';  
                    if (groupby === 'service_requests.workdepartmentid' && subWork === 'Yes') 
                    {                            
                        if(key.sub_work !=null ){
                            
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.sub_work +
                            '</td>';
                        }else{
                            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + "" +
                                '</td>';
                                
                            }     
                                
                        if(key.job_type != null){                           
                            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.job_type +
                                '</td>';                        
                            }else{
                            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + "" +
                                '</td>';
                        }
                    }              
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.pending +'</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.assigned +'</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.accepted +'</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.wip +'</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.cancelled_by_user + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.completed +'</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.total + '</td>';
                    html += '</tr>';
                } else {
                    html += '<tr height="25">';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels +
                        '</td>';     
                    if (groupby === 'service_requests.workdepartmentid' && subWork === 'Yes') 
                    {                            
                        if(key.sub_work !=null ){
                            
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.sub_work +
                            '</td>';
                        }else{
                            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + "" +
                                '</td>';
                                
                            }     
                                
                        if(key.job_type != null){                           
                            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.job_type +
                                '</td>';                        
                            }else{
                            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + "" +
                                '</td>';
                        }
                    }                    
                    if (status_value.includes('Pending')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.pending +
                            '</td>';
                    }
                    if (status_value.includes('Assigned')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.assigned +
                            '</td>';
                    }
                    if (status_value.includes('Accepted')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.accepted +
                            '</td>';
                    }
                    if (status_value.includes('WIP')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.wip +
                            '</td>';
                    }
                    if (status_value.includes('Cancelled By User')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key
                            .cancelled_by_user + '</td>';
                    }
                    if (status_value.includes('Completed')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.completed +
                            '</td>';
                    }
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.total + '</td>';
                    html += '</tr>';
                }
                count++;
            });

            if (count % 2 == 0) {
                color = '#ffffff';
            } else {
                color = '#e9e9e9'
            }

            if(status_value == null){
                html += '<tr height="25">';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">Total</td>';
                if (groupby === 'service_requests.workdepartmentid' && subWork === 'Yes') 
                {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + '' + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + '' + '</td>';                    
                } 
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + pending + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + assigned + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + accepted + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + wip + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + cancelled_by_user + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + completed + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + total + '</td>';
                html += '</tr>';
            } else {
                html += '<tr height="25">';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">Total</td>';
                if (groupby === 'service_requests.workdepartmentid' && subWork === 'Yes') 
                {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + '' + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + '' + '</td>';                    
                }                
                if (status_value.includes('Pending')) {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + pending + '</td>';
                }
                if (status_value.includes('Assigned')) {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + assigned + '</td>';
                }
                if (status_value.includes('Accepted')) {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + accepted + '</td>';
                }
                if (status_value.includes('WIP')) {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + wip + '</td>';
                }
                if (status_value.includes('Cancelled By User')) {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + cancelled_by_user + '</td>';
                }
                if (status_value.includes('Completed')) {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + completed + '</td>';
                }
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + total + '</td>';
                html += '</tr>';

            }
            $('#data_summary').html(html)
            chart.xAxis[0].setCategories(label);
            chart.series[0].setData(dataA, true);
            chart.series[1].setData(dataB, true);
            chart.series[2].setData(dataC, true);
            chart.series[3].setData(dataD, true);
            chart.series[4].setData(dataE, true);
            chart.series[5].setData(dataF, true);
            chart.series[6].setData(dataG, true);
            // chart.series[7].setData(dataH, true);
            // chart.series[6].setData(dataG, true);
            chart.redraw();
            chart.hideLoading();
        });
        $(".datepick").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true
        }).prop('type', 'text');

    }

    
</script>

<style type="text/css">
    .header {
        background: #3c8dbc;
        color: white;
    }
</style>