@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/kpi/report')!!}" class="active">MTTR Analysis</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[company_id]')
              -> options(Company::companies(), user('admin.web')->current_comp)
              -> disabled()
              -> addGroupClass('form-group-sm')
              -> label('Company')
              -> id('company_id')
              -> placeholder('select company')
              !!}

              {!! Form::select('search[division_id]')
              -> options(Company::divisions())
              -> addGroupClass('form-group-sm')
              -> label('Division')
              -> id('division_id')
              -> placeholder('select division')
              !!}
                            
         

            
              {!! 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 request type')
              !!}

            
            </div>
            <div class="col-md-5 col-lg-5">
            
              {!! Form::select('search[asset_type]')
              -> options(trans('assets::asset.options.asset_type'))
              -> label(trans('assets::asset.label.asset_type'))
              -> placeholder(trans('assets::asset.placeholder.asset_type'))
              -> addClass('asset_type')
              -> addGroupClass('form-group-sm')!!}
          
              {!! Form::select('search[criticality_type]')
              -> options(trans('assets::asset.options.criticality_type'))
              -> label('Criticality Type')
              -> placeholder('select criticality type')
              -> addGroupClass('form-group-sm')
            !!}

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

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

                <div class="col-lg-4 col-md-3 col-sm-3 m-l-0">
                  {!! Form::text('search[monthrange][1]')
                    -> id('exp_date_to')
                    ->addClass('date-picker')
                    -> addGroupClass('form-group-sm')
                    -> 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">
                  <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="width:100%">
        <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>
                      
                    </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 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" style="width:100%">
          <table id="full_listings" class="table table-striped data-table"  width="90%">
              <thead  class="list_head">
                   <th>Service Request</th>
                   <th>Preferred Date</th>
                   <th>Request By</th>
                   <th>{!! trans('service_request::service_request.label.asset_id')!!}</th>
                   <th>Request Type</th>
                   <th>Job Priority</th>
                   <th>Department</th>
                   <th>Status</th>

                   <th>Work Order</th>
                   <th>Work Order Status</th>
                   <th>Company and Division</th>
                   <th>Due From</th>
              </thead>
              
          </table>
        </div> --}}
    </div>
</div>



@stop


<script type="text/javascript">

var chart;


 $(document).ready(function () {

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

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

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

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

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

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

    $('#resetnow').click(function(){
      $("input[name='search[work_due][0]']").val('');
      $("input[name='search[work_due][1]']").val('');
      $("input[name='search[monthrange][0]']").val('');
      $("input[name='search[monthrange][1]']").val('');
      $("input[name='search[status_date][0]']").val('');
      $("input[name='search[status_date][1]']").val('');
      $('#serviceRequestReportForm')[0].reset();
      var filter = $("#serviceRequestReportForm").serialize(); 
       plotGraph("{{URL::to('admin/kpi/report/graph')}}" +'/' + filter + '');          
      $('#group_by_label').html('');
      oTable.api().draw();
    });

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

    $('#download_csv').click(function(){
      var filter = $("#serviceRequestReportForm").serialize();
      $('#download_csv').attr('href',"{{URL::to('admin/kpi/report/graph/csv')}}"+ "/" + filter);
      $('#download_csv').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: 'Hours'
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '' +
                    this.series.name + ': ' + this.y + '';
            }
        },
        credits: {
            enabled: false
        },
        exporting: {
          enabled: true
        },
        series: [{
            name: 'Actual MTTR',
            data: []
        },
        {
            name: 'Expected MTTR',
            data: [],
            color:'#28a745'

        }
      ]
    });
   

   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'},
                     {data :'request_date'},
                     {data :'requested_by'},
                     {data :'asset_id'},
                    //  {data :'asset_name'},
                     {data :'request_type'},
                     {data :'job_priority'},
                     {data :'department_id'},
                    //  {data :'work_department_id'},
                     {data :'status'},
                     {data :'workorder_no'},
                     {data :'workorder_status'},
                     {data :'company_id'},
                     {data :'due_from'},
                    //  {data :'division_id'},    
                    //  {data :'created_at'},    

            ],
             
        "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/kpi/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 dataG = new Array();
    var html = '';
    var color = '';
    var count = 0;
 
    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;" >WIP</th>';
    html += '<th width="320" style="padding-left:10px;" >Completed</th>';
    html += '<th width="320" style="padding-left:10px;" >Pending</th>';
    html += '<th width="320" style="padding-left:10px;" >Cancelled By User</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.data));
            dataB.push(Number(key.mttr));
            html += '<tr height="25">';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.labels + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.wip + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.completed + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.pending + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.cancelled_by_user + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.closed_by_admin + '</td>';
            html += '<td style="padding-left:10px;" bgcolor="' + color + '">' + key.total + '</td>';
            html += '</tr>';

            count++;

        });


        $('#data_summary').html(html)
        chart.xAxis[0].setCategories(label);
        chart.series[0].setData(dataA, true);
        chart.series[1].setData(dataB, true);
        chart.redraw();
        chart.hideLoading();
  });



  $('.date-picker').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'M yy',
    onClose: function(dateText, inst) { 
        $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
    }
  });
}


</script>

<style type="text/css">
.header{
        background: #3c8dbc;
        color: white;
    }
    .ui-datepicker table{
    display: none;
  }
  .ui-datepicker-prev{
    display: none;
  
  }
  .ui-datepicker-next{
    display: none;
  
  }
  .ui-datepicker-buttonpane{
    display: none;

  }
</style>