@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') !!}/contract/report" class="active">Contract</a></li>
            </ul>

            <div class="tab-content">

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

                    {!! Form::horizondal_open()->id('leaseReportForm')->secure()->method('POST')->files('true')->enctype('multipart/form-data') !!}
                    <div class="col-md-5 col-lg-5">


                        {{-- {!! Form::select('search[service_company_id]')
              -> options([])
              ->id('service_company_id')
              -> label(trans('maintenance_contracts::maintenance_contract.label.service_company_id'))
              -> placeholder(trans('maintenance_contracts::maintenance_contract.placeholder.service_company_id'))
              -> addGroupClass('form-group-sm')!!} --}}
              
                        {!! Form::select('search[maintenance_contracts.company_id]')->options(Company::companies(),user('admin.web')->current_comp)->disabled()->id('company_id')->label(trans('maintenance_contracts::maintenance_contract.label.company_id'))->placeholder(trans('maintenance_contracts::maintenance_contract.placeholder.company_id'))->addGroupClass('form-group-sm') !!}
                        {!! Form::select('search[maintenance_contracts.division_id]')->options(Company::divisions())->id('division_id')->label(trans('maintenance_contracts::maintenance_contract.label.division_id'))->placeholder(trans('maintenance_contracts::maintenance_contract.placeholder.division_id'))->addGroupClass('form-group-sm') !!}
                        {!! Form::select('search[contract_asset_lists.asset_id]')->options([])->id('asset_id')->label(trans('maintenance_contracts::maintenance_contract.label.asset_id'))->placeholder(trans('maintenance_contracts::maintenance_contract.placeholder.asset_id'))->addGroupClass('form-group-sm') !!}
                        {!! Form::select('search[service_company_id]')->options([])->id('service_company_id')->addGroupClass('form-group-sm')->label('Service Provider')->placeholder('Select Supplier') !!}
                        {!! Form::select('search[customer_id]')-> options([])->id('customer_id')-> addGroupClass('form-group-sm')-> label('Customer')-> placeholder('Select Customer')!!}
                        {!! Form::select('search[maintenance_contracts.custodian_id]')-> id('custodian_id')-> options(Company::custodians())-> addGroupClass('form-group-sm')-> label('Custodian')-> placeholder('select')!!}

                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6"> 
                           Contract Start Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">
            
                                {!! Form::date('search[start_date][0]')
                                -> id('start_date_from')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> placeholder('From')
                                -> raw()!!}
                            </div>
            
                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                              {!! Form::date('search[start_date][1]')
                                -> id('start_date_to')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> 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"> 
                            Contract End Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">
            
                                {!! Form::date('search[end_date][0]')
                                -> id('end_date_from')
                                -> addGroupClass('form-group-sm')->addClass('end_from_datepick')
                                -> placeholder('From')
                                -> raw()!!}
                            </div>
            
                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                              {!! Form::date('search[end_date][1]')
                                -> id('end_date_to')
                                -> addGroupClass('form-group-sm')->addClass('end_to_datepick')
                                -> 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"> 
                            Signed Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">
            
                                {!! Form::date('search[signed_date][0]')
                                -> id('signed_date_from')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> placeholder('From')
                                -> raw()!!}
                            </div>
            
                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                              {!! Form::date('search[signed_date][1]')
                                -> id('signed_date_to')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> 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"> 
                            Contract Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">
            
                                {!! Form::date('search[contract_date][0]')
                                -> id('contract_date_from')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> placeholder('From')
                                -> raw()!!}
                            </div>
            
                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                              {!! Form::date('search[contract_date][1]')
                                -> id('contract_date_to')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> placeholder('To')
                                -> raw()!!}
                            </div>
                        </div>
                    </div>
                
                    
                    <div class="col-md-5 col-lg-5">
                        <div class="form-group form-group-sm">
                            <label for="primary_view" class="control-label col-lg-3 col-md-6 col-sm-6"> 
                            Extension Entered Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">
            
                                {!! Form::date('search[date_of_extension][0]')
                                -> id('date_of_extension_from')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> placeholder('From')
                                -> raw()!!}
                            </div>
            
                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                              {!! Form::date('search[date_of_extension][1]')
                                -> id('date_of_extension_to')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> 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"> 
                             Revision Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">
            
                                {!! Form::date('search[revision_date][0]')
                                -> id('revision_date_from')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> placeholder('From')
                                -> raw()!!}
                            </div>
            
                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                              {!! Form::date('search[revision_date][1]')
                                -> id('revision_date_to')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> 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"> 
                            Termination Date
                            </label>
                            <div class="col-lg-5 col-md-3 col-sm-3">
            
                                {!! Form::date('search[termination_date][0]')
                                -> id('termination_date_from')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> placeholder('From')
                                -> raw()!!}
                            </div>
            
                            <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                              {!! Form::date('search[termination_date][1]')
                                -> id('termination_date_to')
                                -> addGroupClass('form-group-sm')->addClass('datepick')
                                -> placeholder('To')
                                -> raw()!!}
                            </div>
                        </div>

                        {!! Form::select('search[maintenance_contracts.signed_by]')->options(Company::employees())->addGroupClass('form-group-sm')->id('signed_by')->label('Signed By')->placeholder('All') !!}

                        {{-- {!! Form::date('search[start_date]')->id('report_date_from')->addGroupClass('form-group-sm')->addClass('datepick')->placeholder('From Date')->label('Start Date') !!} --}}
                        
                        {{-- {!! Form::date('search[end_date]')->id('report_date_to')->addGroupClass('form-group-sm')->addClass('datepick')->placeholder('To date')->label('End Date') !!} --}}

                        {!! Form::select('search[maintenance_contracts.status]')->id('status')->options(trans('maintenance_contracts::maintenance_contract.options.status'))->label('Trans. Status')->placeholder('All')->addGroupClass('form-group-sm') !!}

                        {!! Form::select('search[type]')->options(trans('maintenance_contracts::maintenance_contract.options.type'))->label('AMC/CMC')->placeholder('All')->addGroupClass('form-group-sm') !!}

                        @if(user('admin.web')->currentCompany->enable_responsible_work_department_in_contract == 'Yes')
                            {!! Form::select('search[workdepartmentid]')->id('workdepartmentid')->options(['' => trans('maintenance_contracts::maintenance_contract.placeholder.allworkdepartmentid')] + WorkDepartment::work_departments(),)->label(trans('maintenance_contracts::maintenance_contract.label.workdepartmentid'))->addGroupClass('form-group-sm') !!}
                        @endif

                        {!! Form::select('search[contract_type]')->options(trans('maintenance_contracts::maintenance_contract.options.contract_type'))->label(trans('maintenance_contracts::maintenance_contract.label.contract_type'))->placeholder('All')->addGroupClass('form-group-sm') !!}
                        
                        {!! Form::select('search[partner_type]')->options(trans('maintenance_contracts::maintenance_contract.options.partner_type'))->label('Partner Type')->placeholder('All')->addGroupClass('form-group-sm') !!}

                        {!! Form::select('search[expired_status]')->options(trans('maintenance_contracts::maintenance_contract.options.expired_status'))->label(trans('maintenance_contracts::maintenance_contract.label.expired_status'))->addGroupClass('form-group-sm') !!}

                    </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">
                  <img src="{!!URL::to('img/report/print.png')!!}">&nbsp;
                  <a class="headpicture popup_a" width="350" id='popup-save-report' style="cursor:pointer">Save Report</a>
                </div>
                <div class="m-b-20">
                  <img src="{!!URL::to('img/report/finish-work.png')!!}">&nbsp;
                  <a class="headpicture popup_a" width="350" id='view_report' href="#">My Saved Reports</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-graph" data-toggle="tab">Graph</a></li>
            <li><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>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" 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>
                          <td height="30" colspan="3" class="form_fields_table" style="padding:5px;"><b>Date Range:</b><span style="padding-left:30px;" id="date_range_label">No Date Range Selected</span></td>
                        </tr> -->
                                    <!-- <tr>
                          <td height="30" colspan="3" class="form_fields_table" style="padding:5px;"><b>Filters:</b><span style="padding-left:30px;" id="filters_label"></span></td>
                        </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-summary">
                <div class="table-wrapper" style="margin-left: auto; margin-right: auto;overflow-x: auto;">
                    <table width="100%" id="data_summary" border="0" align="center"
                        class="table table-striped display datatable data-table" cellpadding="0" cellspacing="0">
                    </table>
                </div>
                <span style="background-color: rgb(255, 255, 255); color: black;">* Transaction status Pending and InActive are not considered in the Expiry Data Summary.</span>
            </div>
            <div class="tab-pane" id="tab-full-data" style="overflow-x: auto;">
                <table id="full_listings" class="table table-striped data-table" width="100%">
                    <thead class="list_head">
                        <th>Contract No.</th>
                        <th>Partner Type</th>
                        <th>Service Provider</th>
                        <th>Customer</th>
                        <th>Custodian</th>
                        <th>Assets</th>
                        <th>AMC/CMC</th>
                        <th>Company</th>
                        <th>Division</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Extension Entered Date</th>
                        <th>Revision Date</th>
                        <th>Termination Date</th>
                        <th>Trans. Status</th>
                        <th>Expiry Status</th>
                        <th>Old Contract No</th>
                        <th>New Contract No</th>
                        <th>Contract Type</th>
                        @if(user('admin.web')->currentCompany->enable_responsible_work_department_in_contract == 'Yes')
                            <th width="10%">Responsible Work Dept</th>
                        @endif
                    </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('maintenance_contract') !!}

                            {!! 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() {

        // @if (@$save_report['search']['portfolio_id'] != '')
        //   $("select[name='search[property_id]").load('{{ URL::to('admin/property/property-list') }}/{{ @$save_report['search']['portfolio_id'] }}/{{ @$save_report['search']['property_id'] }}');
        // @endif

        // @if (@$save_report['search']['currentyear'] != '')
        //   $("#currentyear option[value='{!! $save_report['search']['currentyear'] !!}']").prop('selected', true);
        // @else 
        //  $("#currentyear option[value='{!! date('Y') !!}']").prop('selected', true);
        // @endif
        // @if (@$save_report['search']['month'] != '')
        //   $("#month option[value='{!! $save_report['search']['month'] !!}']").prop('selected', true);
        // @endif

        $(".end_from_datepick").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true,
            onStart: function() {
                let today = new Date();
                let lastMonthFirstDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);

                this.set('select', [lastMonthFirstDate.getFullYear(), lastMonthFirstDate.getMonth(), lastMonthFirstDate.getDate()]);
            }
        });

        $(".end_to_datepick").pickadate({
            format: 'dd mmm, yyyy',
            formatSubmit: 'yyyy-mm-dd',
            hiddenSuffix: '',
            selectMonths: true,
            selectYears: true,
            onStart: function() {
                let today = new Date(); // Get today's date
                let lastDayOfThisMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0); // Last day of the current month

                this.set({
                    select: [lastDayOfThisMonth.getFullYear(), lastDayOfThisMonth.getMonth(), lastDayOfThisMonth.getDate()]
                });
            }
        });

        // Set the dates after initialization
        $(".end_from_datepick").pickadate('picker').set('select', [
            new Date().getFullYear(),
            new Date().getMonth() - 1,
            1
        ]);

        $(".end_to_datepick").pickadate('picker').set('select', [
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate()
        ]);


        var filter = $("#leaseReportForm").serialize();
        plotGraph("{{ URL::to('admin/contract/report/graph') }}" + '/' + filter + '');
        $('#view_report').click(function() {
            $('#saved-reports').load("{{ trans_url('admin/maintenance_contract/save/save_report') }}");
            $('#show_report').modal("show");
        });

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

        // $("#portfolio_id").change(function(){
        //    var portfolio = $("#portfolio_id option:selected").val();
        //    $("#property_id").load("{{ trans_url('admin/property/property-list') }}"+"/"+portfolio);
        // });

        $('#resetnow').click(function() {
            $('input[name="search[start_date][0]"]').val('');
            $('input[name="search[start_date][1]"]').val('');
            $('input[name="search[end_date][0]"]').val('');
            $('input[name="search[end_date][1]"]').val('');
            $('input[name="search[signed_date][0]"]').val('');
            $('input[name="search[signed_date][1]"]').val('');
            $('input[name="search[contract_date][0]"]').val('');
            $('input[name="search[contract_date][1]"]').val('');
            $('input[name="search[revision_date][0]"]').val('');
            $('input[name="search[revision_date][1]"]').val('');
            $('input[name="search[termination_date][0]"]').val('');
            $('input[name="search[termination_date][1]"]').val('');
            $('input[name="search[date_of_extension][0]"]').val('');
            $('input[name="search[date_of_extension][1]"]').val('');
            $('#leaseReportForm')[0].reset();
            $('.select2-selection__rendered').html('');
            $(".end_from_datepick").pickadate('picker').set('select', [
                new Date().getFullYear(),
                new Date().getMonth() - 1,
                1
            ]);
            $(".end_to_datepick").pickadate('picker').set('select', [
                new Date().getFullYear(),
                new Date().getMonth(),
                new Date().getDate()
            ]);
            var filter = $("#leaseReportForm").serialize();
            plotGraph("{{ URL::to('admin/contract/report/graph') }}" + '/' + filter + '');
            $('#date_range_label').html('No Date Range Selected');
            var company = $("#company_id option:selected").val();
            $("#division_id").load('{{URL::to("/admin/company/accessible_divisions/employee")}}'+'/'+company);
            oTable.api().draw();
        });

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

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

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

        $('input[id=end_date_from]').change(function() {
            $("#end_date_to").pickadate('picker').set({
                select: $('input[id=end_date_from]').val(),
                min: new Date($('input[id=end_date_from]').val())
            });
        });
        $('input[id=signed_date_from]').change(function() {
            $("#signed_date_to").pickadate('picker').set({
                select: $('input[id=signed_date_from]').val(),
                min: new Date($('input[id=signed_date_from]').val())
            });
        });
        $('input[id=contract_date_from]').change(function() {
            $("#contract_date_to").pickadate('picker').set({
                select: $('input[id=contract_date_from]').val(),
                min: new Date($('input[id=contract_date_from]').val())
            });
        });
        $('input[id=revision_date_from]').change(function() {
            $("#revision_date_to").pickadate('picker').set({
                select: $('input[id=revision_date_from]').val(),
                min: new Date($('input[id=revision_date_from]').val())
            });
        });
        $('input[id=termination_date_from]').change(function() {
            $("#termination_date_to").pickadate('picker').set({
                select: $('input[id=termination_date_from]').val(),
                min: new Date($('input[id=termination_date_from]').val())
            });
        });
        $('input[id=date_of_extension_from]').change(function() {
            $("#date_of_extension_to").pickadate('picker').set({
                select: $('input[id=date_of_extension_from]').val(),
                min: new Date($('input[id=date_of_extension_from]').val())
            });
        });
        $("#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
                        sublocation_id: $("#sublocationid").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: 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
        });
        $("#customer_id").select2({
            ajax: {
                url: "{{ trans_url('admin/customer/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,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
            
            templateResult: formatRepo3, // omitted for brevity, see the source of this page
            templateSelection: formatRepo3Selection // omitted for brevity, see the source of this page
        });

        $("#custodian_id").select2({
            ajax: {
                url: "{{ trans_url('admin/company/list/division/employee/all') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term, // search term
                        companyId: $("#company_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;
            }, // let our custom formatter work
        
            templateResult: formatRepo3, // omitted for brevity, see the source of this page
            templateSelection: formatRepo3Selection // omitted for brevity, see the source of this page
        });

        $("#company_id").change(function(){
            var company = $("#company_id option:selected").val();
            $("#division_id").load('{{URL::to("/admin/company/accessible_divisions/employee")}}'+'/'+company);
            });
        
            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;
        }
        $("#service_company_id").select2({
            // minimumInputLength: 2,
            allowClear: true,
            placeholder: 'Select Supplier',
            ajax: {
                url: "{{ trans_url('admin/supplier/allSelect2') }}",
                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: "{{ @$maintenance_contract->service_company_id }}",
                    name: "{{ @$maintenance_contract->serviceproviders->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;

        }

        $('#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 = $("#leaseReportForm").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: 'Expired',
                data: []
            }, {
                name: 'Renew In Process',
                data: []
            }, {
                name: 'Renewed',
                data: []
            }, {
                name: 'To Expire',
                data: []
            }, {
                name: 'Total Contracts',
                data: []
            }]
        });
        oTable = $('#full_listings').dataTable({
            "bProcessing": true,
            "sDom": 'R<>rt<ilp><"clear">',
            "bServerSide": true,
            "sAjaxSource": '{!! trans_url('admin') !!}/contract/report',
            "fnServerData": function(sSource, aoData, fnCallback) {

                $('#leaseReportForm select, #leaseReportForm 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: 'id',
                    render: function(data, type, row) {
                    // Custom rendering logic for 'id' column
                    return row.ref;
                }
                },
                {
                    data: 'partner_type'
                },
                {
                    data: 'supplier_name'
                },
                {
                    data: 'customer_id'
                },
                {
                    data: 'custodian_id'
                },
                {
                    data: 'asset_name'
                },
                {
                    data: 'type'
                },
                {
                    data: 'company_code'
                },
                {
                    data: 'division_code'
                },
                {
                    data: 'start_date'
                },
                {
                    data: 'end_date'
                },
                {
                    data: 'date_of_extension'
                },
                {
                    data: 'revision_date'
                },
                {
                    data: 'termination_date'
                },
                {
                    data: 'status'
                },
                {
                    data: 'expiry_status'
                },
                {
                    data: 'old_contract_no'
                },
                {
                    data: 'new_contract_no'
                },
                {
                    data: 'contract_type'
                },
                @if(user('admin.web')->currentCompany->enable_responsible_work_department_in_contract == 'Yes')
                    {data :'workdepartmentid'},
                @endif
            ],
            "pageLength": 25,
            "order": [
                [0, "desc"]
            ],
        });

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

            /* labels set */
            $('#group_by_label').html($('#group_by :selected').text());
            $('#date_range_label').html('From ' + $('#report_date_from').val() + ' To ' + $(
                '#report_date_to').val());
            //$('#filters_label').html(filter_label);


            plotGraph("{{ URL::to('admin/contract/report/graph') }}" + '/' + filter + '');
            $('#full_listings .search_bar').find("." + $(this).attr('id')).prop('disabled', true);
            oTable.api().draw();
        });
    });

    function plotGraph(url) {

        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 html = '';
        var color = '';
        var count = 0;

        var expired_count=0;
        var terminated_count=0;
        var renew_in_process=0;
        var renewed=0;
        var to_expire=0;
        var total=0;

        html += '<thead class="list_head"><tr height="30" class="listing_headings" >';
        html += '<th width="218" style="padding-left:10px;" >Group By</th>';
        html += '<th width="192" style="padding-left:10px;" >Expired</th>';
        html += '<th width="192" style="padding-left:10px;" >Terminated</th>';
        html += '<th width="320" style="padding-left:10px;" >Renew In Process</th>';
        html += '<th width="320" style="padding-left:10px;" >Renewed</th>';
        html += '<th width="320" style="padding-left:10px;" >To Expire</th>';
        html += '<th width="320" style="padding-left:10px;" >Total</th>';
        html += '</tr></thead>';

        $.getJSON(url, function(seriesData) {
            console.log(seriesData);
            $.each(seriesData, function(id, key) {
                if (count % 2 == 0) {
                    color = '#ffffff';
                } else {
                    color = '#e9e9e9'
                }
                expired_count+=parseInt(key.expired_count);           
                renew_in_process+=parseInt(key.renew_in_process);
                terminated_count+=parseInt(key.terminated_count);
                renewed+=parseInt(key.renewed);
                to_expire+=parseInt(key.to_expire);
                total+=parseInt(key.total);

                label.push(key.labels);
                dataA.push(Number(key.expired_count));
                dataB.push(Number(key.terminated_count));
                dataC.push(Number(key.renew_in_process));
                dataD.push(Number(key.renewed));
                dataE.push(Number(key.to_expire));
                dataF.push(Number(key.total));

                html += '<tr height="25">';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels +
                '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.expired_count +
                '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.terminated_count +
                    '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.renew_in_process +
                    '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.renewed +
                        '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.to_expire +
                    '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.total + '</td>';
                html += '</tr>';

                count++;

            });

            html += '<tr height="25">';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">Total</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + expired_count + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + terminated_count + '</td>';           
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + renew_in_process + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + renewed + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + to_expire + '</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[4].setData(dataF, 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>