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

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

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

              {!! Form::select('search[divisionid]')
              -> options(Company::divisions())
              -> addGroupClass('form-group-sm')
              -> label('Division')
              -> id('divisionid')
              -> placeholder('select')
              !!}
                            
                   
              {!! Form::select('search[suppliers_id]')
              -> options([])
              ->id('suppliers_id')
              -> addGroupClass('form-group-sm')
              -> label('Supplier')
              -> placeholder('select')
              !!}   
              
              {!! Form::select('search[technician_id]')
              -> options([])
              ->id('technician_id')
              -> addGroupClass('form-group-sm')
              -> label('Technician')
              -> placeholder('select')
              !!}  

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

              {!! Form::select('search[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')
              !!}

              {!! Form::select('search[assets.category_id]')
              -> options(Category::allCategories())
              -> id('category_id')
              -> label(trans('work_order::work_order.label.category_id'))
              -> addGroupClass('form-group-sm')
              -> placeholder('select')
              !!}

              {!! Form::select('search[assets.subcategory_id]')
              -> options(Category::subcategories())
              -> id('subcategory_id')
              -> label(trans('work_order::work_order.label.subcategory_id'))
              -> addGroupClass('form-group-sm')
              -> placeholder('select')
              !!}

              {!! Form::select('search[assets.subclass_id]')
              -> options(Category::subclasses())
              -> id('subclass_id')
              -> label(trans('work_order::work_order.label.subclass_id'))
              -> addGroupClass('form-group-sm')
              -> placeholder('select')
              !!}

              {!! Form::select('search[work_priority]')
              -> options(trans('work_order::work_order.options.work_priority'))
              -> addGroupClass('form-group-sm')
              -> label('Work Priority')
              -> placeholder('select')
              !!}

              {!! Form::select('search[groupby]')
                -> options(['work_orders.departmentid'=>'Department',
                'work_orders.workdepartmentid'=>'Work Department','category' => 'Work Type'])
                -> addGroupClass('form-group-sm')
                ->select('category')
                -> label('Group By')
                -> placeholder('Select')
                !!}

                {!! Form::select('search[sub_work]')
                    ->options(trans('work_order::work_order.options.sub_work'))
                    ->addGroupClass('form-group-sm')
                    ->addClass('sub_work')
                    ->label('Show Sub Work')
                    ->id('sub_work') 
                !!}

            </div>
            <div class="col-md-5 col-lg-5">

              
              {!! Form::select('search[workorder_type]')
              -> options(trans('work_order::work_order.options.workorder_type'))
              -> addGroupClass('form-group-sm')
              -> label('Work Order Type')
              -> placeholder('select')
              !!}
              @if ($selectedworkStatus)
                {!! Form::select('search[work_orders.work_status][]')
                ->multiple(true)
                -> options(trans('work_order::work_order.options.status'))
                -> addGroupClass('form-group-sm')
                -> label('Status')
                ->value(['Pending' => 'Pending', 'WIP' => 'WIP', 'Assigned'=>'Assigned', 'Hold'=>'Hold'])
                ->id('status')
                ->select($selectedworkStatus)
                !!}
              @else
                {!! Form::select('search[work_orders.work_status][]')
                ->multiple(true)
                -> options(trans('work_order::work_order.options.status'))
                -> addGroupClass('form-group-sm')
                -> label('Status')
                ->value(['Pending' => 'Pending', 'WIP' => 'WIP', 'Assigned'=>'Assigned', 'Hold'=>'Hold'])
                ->id('status')
                !!}
              @endif
              

              
              {!! Form::select('search[category]')
              -> options(trans('work_order::work_order.options.category')+ trans('work_order::work_order.options.category2'))
              -> addGroupClass('form-group-sm')
              -> label('Work Type')
              -> placeholder('select')
              !!}

              
              {!! Form::select('search[work_orders.departmentid][]')
              ->options(Department::allDepartments())
              ->addClass('js-multiple')->type('text')
              ->multiple(true)
              ->addGroupClass('form-group-sm')
              ->label('Department')
              ->select($selectedDepartment)
              ->id('department_id') !!}

                            {!! Form::select('search[work_orders.workdepartmentid][]')
              ->options(WorkDepartment::allWorkDepartments())
              ->addClass('js-multiple')->type('text')
              ->multiple(true)
              ->addGroupClass('form-group-sm')
              ->label('Work Department')
              ->select($selectedWorkDepartment)
              ->id('work_department_id') !!}

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

                    {!! Form::date('search[work_orders.created_at][0]')
                    -> id('created_at_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[work_orders.created_at][1]')
                    -> id('created_at_to')
                    -> addGroupClass('form-group-sm')->addClass('datepick_enddate')
                    -> 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_due][0]')
                    -> id('work_due_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[work_due][1]')
                    -> id('work_due_to')
                    ->addGroupClass('form-group-sm')->addClass('datepick_enddate')
                    -> 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[status_date][0]')
                    -> id('compl_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[status_date][1]')
                    -> id('compl_date_to')
                    ->addGroupClass('form-group-sm')->addClass('datepick_enddate')
                    -> placeholder('To')
                    -> raw()!!}
                </div>
              </div>    

            </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">
                  <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" style="overflow-x :scroll">
        <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 table-responsive">
              <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="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>
        </div>
        <div class="tab-pane" id="tab-full-data">
          <table id="full_listings" class="table table-striped data-table" width="100%">
              <thead  class="list_head">
                   <th>Work Order</th>
                   <th>{!! trans('work_order::work_order.label.work_due')!!}</th>
                   <th>{!! trans('work_order::work_order.label.asset_id')!!}</th>
                   <th>Division</th>
                   <th>{!! trans('work_order::work_order.label.work_priority')!!}</th>
                   <th>Request Type</th>
                   <th>Category</th>
                   <th>Sub Category</th>
                   <th>Sub Class</th>
                   <th>Work Order Type</th>
                   <th>Work Type</th>
                   <th>{!! trans('work_order::work_order.label.suppliers_id')!!}</th>
                   <th>{!! trans('work_order::work_order.label.technician_id')!!}</th>
                   @if ((!user('admin.web')->hasPermission('assets.asset.value')) || user('admin.web')->isSuperUser())
                   <th>HR Cost</th>
                   <th>Material Cost</th>
                   <th>Estimated Cost</th>
                   <th>Asset Cost</th>
                   @endif
                   <th>Actual Amount</th>
                   <th>{!! trans('work_order::work_order.label.status')!!}</th>
                   <th>{!! trans('work_order::work_order.label.departmentid')!!}</th>
                   <th>{!! trans('work_order::work_order.label.workdepartmentid')!!}</th>
                   <th>Sub Work</th>
				   <th>Job Type</th>
                   <th>Total Consumed Time</th>
                   <th>Turn Around Time</th>
                   <th>{!! trans('work_order::work_order.label.status_date')!!}</th>
                   <th>Created Date</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('work_order')!!}

                {!! 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').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'),
        })
    });
        
  $("#asset_id").select2({
    minimumInputLength: 3,
        ajax: {
          url: "{{ trans_url('admin/assets/select3/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
    });


    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;
    }
    $("#suppliers_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: "{{ @$asset->suppliers_id }}",
                    name: "{{ @$asset->supplier->name }}"                });
            },
            templateResult: formatRepo3, // omitted for brevity, see the source of this page
            templateSelection: formatRepo3Selection // omitted for brevity, see the source of this page
        });
         function formatRepo3(repo) {
            if (repo.loading) return repo.name;
            var markup = "<div class='select2-result-repository clearfix'>" +
                "<div class='select2-result'><span>" + repo.name + "</span></div>";

            return markup;
        }


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

        $("#technician_id").select2({
            // minimumInputLength: 2,
            allowClear: true,
            placeholder: 'Select Technician',
            ajax: {
                url: "{{ trans_url('admin/company/technicians/all/select2') }}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return {
                        q: params.term, // search term
                        companyId: {!! user('admin.web')->current_comp !!},
                        page: params.page
                    };
                },
                processResults: function(data, params) {

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

      function formatRepo4(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 formatRepo4Selection(repo) {
          return repo.name?repo.name:repo.text;
          
      }
      $("#status").select2({
   
      });
     
  @if(@$save_report['search']['company_id'] <> "")
    $("select[name='search[divisionid]").load('{{URL::to("admin/company/accessible_divisions/employee")}}/{{@$save_report['search']['company_id']}}');
    @endif

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

    @if(@$save_report['search']['category_id'] <> "")
    $("select[name='search[subcategory_id]").load('{{URL::to("admin/category/subcategory")}}/{{@$save_report['search']['category_id']}}');
    @endif

    @if(@$save_report['search']['subcategory_id'] <> "")
    $("#subcategory_id").load('{{URL::to("admin/category/subcategory")}}/{{@$save_report['search']['category_id']}}/{{@$save_report['search']['subcategory_id']}}');
    @endif

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

    // $("#technician_id").change(function(){
    // var techid = '"'+$("#technician_id option:selected").val()+'"';
    // $("#technician_id option:selected").val(techid);     
    // });

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

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

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

    $('input[id=created_at_from]').change(function() {  
    $("#created_at_to").pickadate('picker').set({ select:$('input[id=created_at_from]').val(), min: new Date($('input[id=created_at_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())});
    });

    $("#category_id").change(function() {
        $("#subclass_id").empty().append('<option value="">Select Subclass</option>');
            var category = $("#category_id option:selected").val();
            $("#subcategory_id").load('{{ URL::to('admin/category/all/subcategory') }}' + '/' +
                category);

      });

    $("#subcategory_id").change(function(){
            var subcategory = $("#subcategory_id option:selected").val();   
            $("#subclass_id").empty().append('<option value="">Select Subclass</option>');
            if (subcategory)
            {        
              $("#subclass_id").load('{{URL::to('admin/category/all/subclass')}}'+'/'+subcategory);
            }
        }); 
        
    $('#resetnow').click(function(){
		var defaultOptions = {
			'Pending': 'Pending',
             'WIP': 'WIP',
             'Assigned': 'Assigned',
            'Hold': 'Hold'
		}
      $("input[name='search[work_due][0]']").val('');
      $("input[name='search[work_due][1]']").val('');
      $("input[name='search[work_orders.created_at][0]']").val('');
      $("input[name='search[work_orders.created_at][1]']").val('');
      $("input[name='search[status_date][0]']").val('');
      $("input[name='search[status_date][1]']").val('');
      $('#workOrderReportForm')[0].reset();
      $('.select2-selection__rendered').html('');
	  $('#status').val(Object.keys(defaultOptions));

	  $('#status').trigger('change');
            togglesubwork();

      var filter = $("#workOrderReportForm").serialize(); 
       plotGraph("{{URL::to('admin/work_order/report/graph')}}" +'/' + filter + '');          
      $('#group_by_label').html('');
      oTable.api().draw();
    });

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

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

    $('#download_excel').click(function() {
        var filter = $("#workOrderReportForm").serialize();
        $('#download_excel').attr('href',
            "{{ URL::to('admin/work_order/report/graph/excel') }}" + "/" + filter);
        $('#download_excel').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 = $("#workOrderReportForm").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: 'Assigned',
            data: []
        },  {
            name: 'Completed',
            data: []
        }, {
            name: 'Hold',
            data: []
        }, {
            name: 'WIP',
            data: []
        }, {
            name: 'Pending',
            data: []
        }, {
            name: 'All',
            data: []
        }]
    });
   

   oTable = $('#full_listings').dataTable( {
        "bProcessing": true,
        "sDom": 'R<>rt<ilp><"clear">',
        "bServerSide": true,
        "sAjaxSource": '{!!trans_url("admin")!!}/work_order/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() } );
                }
            );
            $('#workOrderReportForm select, #workOrderReportForm 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 :'ref'},
                     {data :'work_due'},
                     {data :'asset_id'},
                     {data :'divisionid'},                                 
                     {data :'work_priority'},
                     {data :'request_type'},
                     {data :'category_id'},
                     {data :'subcategory_id'},
                     {data :'subclass_id'},
                     {data :'workorder_type'},
                     {data :'category'},
                     {data :'suppliers_name'},                     					 
                     {data :'technician_id'},
                     @if ((!user('admin.web')->hasPermission('assets.asset.value')) || user('admin.web')->isSuperUser())
                     {data :'totalhrcost'},
                     {data :'totalmaterialcost'},
                     {
                      data :'estimated_amount',
                      render: function (data) {
                          return parseFloat(data).toFixed(2); 
                        }
                     },
                     {data :'purchase_value'},
                     @endif
                     {
                        data: 'actual_amount',
                        render: function (data) {
                          return data !== null && data !== undefined ? parseFloat(data).toFixed(2) : '0.00';
                        }
                      },

                     {data :'work_status'},
                     {data :'departmentid'},
                     {data :'workdepartmentid'},
                     {data :'sub_work'},
					           {data :'job_type'},
                     {data :'consumed_time'},
                     {data :'turn_around_time'},
                     {data :'status_date'},
                     {data :'created_at'},
            ],
             
        "pageLength": 25
    });


    

    
    $(document.body).on('click', "#gobutton", function (e) {
        e.preventDefault();
        chart.showLoading();
        var filter = $("#workOrderReportForm").serialize();
        var filter_label = '';
        var comma = '';
        $("#workOrderReportForm select, #workOrderReportForm input").each(function () {
            if ($(this).val() != '' || $(this).val() != null ) {
                filter_label += comma + ' ' + $('#' + $(this).attr('id') + ' :selected').text();
                comma = ',';
            }
        });       
        
        plotGraph("{{URL::to('admin/work_order/report/graph')}}" +'/' + filter + '');
        $('#full_listings .search_bar').find("."+$(this).attr('id')).prop('disabled',true);
        oTable.api().draw();
    });
});

function plotGraph(url) { 

    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 html = '';
    var color = '';
    var count = 0;
 
    var assigned=0;
    var completed=0;
    var hold=0;
    var wip = 0;
    var pending=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>';
            html += '<th width="320" style="padding-left:10px;" >Assigned</th>';    
            html += '<th width="320" style="padding-left:10px;" >Completed</th>';
            html += '<th width="320" style="padding-left:10px;" >Hold</th>';
            html += '<th width="320" style="padding-left:10px;" >Pending</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 (status_value.includes('Assigned')) {
                html += '<th width="320" style="padding-left:10px;" >Assigned</th>';    
            }
            if (status_value.includes('Completed')) {
                html += '<th width="320" style="padding-left:10px;" >Completed</th>';
            }
            if (status_value.includes('Hold')) {
                html += '<th width="320" style="padding-left:10px;" >Hold</th>';
            }
            if (status_value.includes('WIP')) {
                html += '<th width="320" style="padding-left:10px;" >WIP</th>';
            }
            if (status_value.includes('Pending')) {
                html += '<th width="320" style="padding-left:10px;" >Pending</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'
            }

            assigned+=parseInt(key.assigned);           
            completed+=parseInt(key.completed);
            hold+=parseInt(key.hold);
            wip+=parseInt(key.wip);
            pending+=parseInt(key.pending);
            total+=parseInt(key.total);

            label.push(key.labels);
            dataA.push(Number(key.assigned));
            
            dataB.push(Number(key.completed));           
            dataC.push(Number(key.hold));
            dataD.push(Number(key.wip));
            dataE.push(Number(key.pending));
            dataF.push(Number(key.total));

                if(status_value == null)
                {
                    html += '<tr height="25">';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.assigned + '</td>';           
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.completed + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.hold + '</td>';
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.pending + '</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 (status_value.includes('Assigned')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.assigned + '</td>';           
                    }
                    if (status_value.includes('Completed')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.completed + '</td>';
                    }
                    if (status_value.includes('Hold')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.hold + '</td>';
                    }
                    if (status_value.includes('WIP')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.wip + '</td>';
                    }
                    if (status_value.includes('Pending')) {
                        html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.pending + '</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>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + assigned + '</td>';           
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + completed + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + hold + '</td>';
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + pending + '</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 (status_value.includes('Assigned')) {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + assigned + '</td>';           
                }
                if (status_value.includes('Completed')) {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + completed + '</td>';
                }
                if (status_value.includes('Hold')) {
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + hold + '</td>';
                }
                if (status_value.includes('WIP')) {
                html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + wip + '</td>';
                }
                if (status_value.includes('Pending')) {
                    html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + pending + '</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.redraw();
        chart.hideLoading();
    });

}

    function togglesubwork() {
        var groupby = $('select[name="search[groupby]"]').val();
        var select_sub_Work = $('select[name="search[sub_work]"]').closest('.form-group');

        if (groupby === 'work_orders.workdepartmentid') {
            select_sub_Work.show();
        } else {
            select_sub_Work.hide();
        }
    }


</script>

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