@extends('layout.administrator.index')
@section('title', 'Dashboard')

@section('content')
   <style type="text/css">
   .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
      padding: 0.6rem !important;
      font-size: 11px;
      line-height: 1;
      font-family: arial;
   }

   #chart {
      height: 20em;
      width: 30em;
   }
</style>

<div class="content-wrapper bg-white">
   <section class="content-header">
      {{-- <h1>
         Dashboard
      </h1> --}}
      <ol class="breadcrumb">
         {{-- <div class="box-tools pull-right">
         <button type="button" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
         Component type
      </button>
      <div class="dropdown-menu" x-placement="top-start" style="position: absolute; transform: translate3d(-87px, -132px, 0px); top: 0px; left: 0px; will-change: transform;">
      <a class="dropdown-item border" href="#">Compressor</a>
      <a class="dropdown-item border" href="#">Diesel Engine</a>
      <a class="dropdown-item border" href="#">Gasoline Engine</a>
      <a class="dropdown-item border" href="#">Gear Box</a>
      <a class="dropdown-item border" href="#">Hydraulic</a>
   </div>
   @if(auth()->user()->id_role == 3)
   <button type="button" class="btn btn-success btn-sm" onclick="openEditDateModal()" title="Collapse">
   Editar Fecha
</button>
@endif
</div> --}}
</ol>
</section>
<div class="box-body">
   <div class="row">
      <div class="col-12">
         <div class="row">
            <div class="col-lg-4 col-12">
               <div class="box">
                  <div class="box-body">
                     <div class="row">
                        <div class="col">
                           <form action="{{route('administrator.dashboard')}}" method="get" id="formDate">
                              <div class="row">
                                 <div class="col">
                                    <label for="idSelectYear">Años</label>
                                    <select class="form-control select2" name="year" id="idSelectYear" onchange="selectDate()">
                                       @for ($i=date('Y'); $i>=2000; $i--)
                                          @if ($i == request()->get('year'))
                                             <option value="{{$i}}" selected>{{$i}}</option>
                                          @else
                                             <option value="{{$i}}">{{$i}}</option>
                                          @endif
                                       @endfor
                                    </select>
                                 </div>
                                 <input type="hidden" name="customerId" id="idCustomer" value="{{request()->get('customerId')}}">
                                 <div class="col">
                                    <label for="idSelectMonth">Meses</label>
                                    <select class="form-control select2" name="month" id="idSelectMonth" onchange="selectDate()">
                                       <option value="">TODOS</option>
                                       @foreach ($options['ltMonths'] as $key => $value)
                                          @if ($value['id'] == request()->get('month'))
                                             <option value="{{$value['id']}}" selected>{{$value['name']}}</option>
                                          @else
                                             <option value="{{$value['id']}}">{{$value['name']}}</option>
                                          @endif
                                       @endforeach
                                    </select>
                                 </div>
                              </div>
                           </form>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="box">
                  <div class="box-body" style="height: 21vh; overflow-y: auto;">
                     @if (!empty($options['customerId']))
                        <div class="row mb-10">
                           <div class="col">
                              <button type="button" class="btn btn-info btn-sm btn-block" onclick="selectCustomer()">Mostrar todos</button>
                           </div>
                        </div>
                     @endif
                     <table class="table table-hover table-responsive">
                        <thead>
                           <tr>
                              <th><big>Customer</big></th>
                              <th class="text-success text-center"><big>Nor</big></th>
                              <th class="text-warning text-center"><big>Abn</big></th>
                              <th class="text-danger text-center"><big>Sev</big></th>
                              <th class="text-center"><big>T</big></th>
                           </tr>
                        </thead>
                        <tbody>
                           @foreach ($listCustomer as $customer)
                              <tr>
                                 <td>
                                    <a href="javascript:;" onclick="selectCustomer({{$customer->customer_id}})">{{$customer->company}}</a>
                                 </td>
                                 <td class="text-center text-success">{{$customer->normal_report}}</td>
                                 <td class="text-center text-warning">{{$customer->abnormal_report}}</td>
                                 <td class="text-center text-danger">{{$customer->critical_report}}</td>
                                 <td class="text-center">{{$customer->total_report}}</td>
                              </tr>
                           @endforeach
                        </tbody>
                     </table>
                  </div>
               </div>
            </div>
            <div class="col-lg-4 col-12">
               <div class="box">
                  <div class="box-header p-0 text-center">
                     <h6 class="box-title font-weight-bold">Total samples Analyzed per month</h6>
                  </div>
                  <div class="box-body p-2">
                     <div class="chart">
                        <canvas id="idAnalyzedPerMonth" style="height:32vh;"></canvas>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-4 col-12">
               <div class="box">
                  <div class="box-header p-0 text-center">
                     <h6 class="box-title font-weight-bold">Total samples Reported per Condition</h6>
                  </div>
                  <div class="box-body p-2">
                     <div class="chart">
                        <canvas id="idReportedChart" style="height:32vh;"></canvas>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-lg-4 col-12">
               <div class="box">
                  <div class="box-header p-0 text-center">
                     <h6 class="box-title font-weight-bold">Rpt_condition Wear Out</h6>
                  </div>
                  <div class="box-body p-2">
                     <div class="chart">
                        <canvas id="idWearOutChart" style="height:30vh;"></canvas>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-4 col-12">
               <div class="box">
                  <div class="box-header p-0 text-center">
                     <h6 class="box-title font-weight-bold">Rpt_condition Contaminacion</h6>
                  </div>
                  <div class="box-body p-2">
                     <div class="chart">
                        <canvas id="idContaminationChart" style="height:30vh;"></canvas>
                     </div>
                  </div>
               </div>
            </div>
            <div class="col-lg-4 col-12">
               <div class="box">
                  <div class="box-header p-0 text-center">
                     <h6 class="box-title font-weight-bold">Rpt_contidition Lube Health</h6>
                  </div>
                  <div class="box-body p-2">
                     <div class="chart">
                        <canvas id="idLubeHealthChart" style="height:30vh;"></canvas>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
</div>
{{-- MODAL --}}
{{-- <div class="modal fade" id="idModalExport" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Datos a exportar</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="fa fa-times"></i>
</button>
</div>
<div class="modal-body">
<form id="formGenerateLiquidation">
<div class="row">
<div class="col-md">
<div class="form-group">
<label class="control-label">Fecha inicio</label>
<div class="input-group">
<input type="text" class="form-control pull-right" id="date_init" name="date_init" autocomplete="off" value="{{$dateInit}}">
<span class="input-group-btn">
<button type="button" class="btn btn-danger" id="btnSampleDateTakenConsult"><i class="fa fa-times"></i></button>
</span>
</div>
</div>
</div>
<div class="col-md">
<div class="form-group">
<label class="control-label">Fecha final</label>
<div class="input-group">
<input type="text" class="form-control pull-right" id="date_end" name="date_end" autocomplete="off" value="{{$dateEnd}}">
<span class="input-group-btn">
<button type="button" class="btn btn-danger" id="btnSampleDateTakenConsult"><i class="fa fa-times"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="modal-footer pull-right">
<button type="submit" onclick="" class="btn btn-success">Cambiar fecha</button>
</div>
</form>
</div>
</div>
</div>
</div> --}}
@endsection

@section('js')
   <script type="text/javascript">

   var analyzedPerMonth = <br />
<b>Notice</b>:  Undefined variable: analyzedPerMonth in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\dashboard\supervisors\index.blade.php</b> on line <b>239</b><br />
null;
   var reportedPerCondition = <br />
<b>Notice</b>:  Undefined variable: reportedPerCondition in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\dashboard\supervisors\index.blade.php</b> on line <b>240</b><br />
null;
   var wearOutCondition = <br />
<b>Notice</b>:  Undefined variable: wearOutCondition in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\dashboard\supervisors\index.blade.php</b> on line <b>241</b><br />
null;
   var contaminationCondition = <br />
<b>Notice</b>:  Undefined variable: contaminationCondition in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\dashboard\supervisors\index.blade.php</b> on line <b>242</b><br />
null;
   var lubeHealthCondition = <br />
<b>Notice</b>:  Undefined variable: lubeHealthCondition in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\dashboard\supervisors\index.blade.php</b> on line <b>243</b><br />
null;

   var labelsData = <br />
<b>Notice</b>:  Undefined variable: options in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\dashboard\supervisors\index.blade.php</b> on line <b>245</b><br />
null;

   $( document ).ready(function() {
      $('#date_init').datetimepicker({
         format: 'DD/MM/YYYY hh:mm A',
         showClose: true,
         icons: {
            up: 'fas fa-chevron-up text-warning',
            down: 'fas fa-chevron-down text-warning',
            time: 'far fa-clock',
            close: 'fas fa-times text-warning'
         }
      });

      $('#date_end').datetimepicker({
         format: 'DD/MM/YYYY hh:mm A',
         showClose: true,
         icons: {
            up: 'fas fa-chevron-up text-warning',
            down: 'fas fa-chevron-down text-warning',
            time: 'far fa-clock',
            close: 'fas fa-times text-warning'
         }
      });
   });

   function selectCustomer(value = null) {
      if (value!=null) {
         $("#idCustomer").val(value);
      }else{
         $("#idCustomer").val("");
      }

      selectDate();
   }

   function selectDate() {
      $('#formDate').submit();
   }
</script>
<script type="text/javascript">
var reportedChartData = {
   labels: labelsData,
   datasets: [{
      label: 'Severe',
      backgroundColor: '#DF1A09',
      stack: 'Stack 1',
      data: reportedPerCondition['severe']
   }, {
      label: 'Abnormal',
      backgroundColor: '#ffb22b',
      stack: 'Stack 1',
      data: reportedPerCondition['abnormal']
   }, {
      label: 'Normal',
      backgroundColor: '#92D050',
      stack: 'Stack 1',
      data: reportedPerCondition['normal']
   }]
};
var ctx = document.getElementById('idReportedChart').getContext('2d');
window.myBar = new Chart(ctx, {
   type: 'bar',
   data: reportedChartData,
   options: {
      title: false,
      tooltips: {
         mode: 'index',
         intersect: false
      },
      responsive: true,
      legend: false,
      scales: {
         xAxes: [{
            stacked: true,
         }],
         yAxes: [{
            stacked: true
         }]
      }
   }
});

var wearOutChartData = {
   labels: labelsData,
   datasets: [{
      label: 'Severe',
      backgroundColor: '#DF1A09',
      stack: 'Stack 1',
      data: wearOutCondition['severe']
   }, {
      label: 'Abnormal',
      backgroundColor: '#ffb22b',
      stack: 'Stack 1',
      data: wearOutCondition['abnormal']
   }, {
      label: 'Normal',
      backgroundColor: '#92D050',
      stack: 'Stack 1',
      data: wearOutCondition['normal']
   }]
};
var ctx3 = document.getElementById('idWearOutChart').getContext('2d');
window.myBar = new Chart(ctx3, {
   type: 'bar',
   data: wearOutChartData,
   options: {
      title: false,
      tooltips: {
         mode: 'index',
         intersect: false
      },
      responsive: true,
      legend: false,
      scales: {
         xAxes: [{
            stacked: true,
         }],
         yAxes: [{
            stacked: true
         }]
      }
   }
});

var contaminationChartData = {
   labels: labelsData,
   datasets: [{
      label: 'Severe',
      backgroundColor: '#DF1A09',
      stack: 'Stack 1',
      data: contaminationCondition['severe']
   }, {
      label: 'Abnormal',
      backgroundColor: '#ffb22b',
      stack: 'Stack 1',
      data: contaminationCondition['abnormal']
   }, {
      label: 'Normal',
      backgroundColor: '#92D050',
      stack: 'Stack 1',
      data: contaminationCondition['normal']
   }]
};
var ctx4 = document.getElementById('idContaminationChart').getContext('2d');
window.myBar = new Chart(ctx4, {
   type: 'bar',
   data: contaminationChartData,
   options: {
      title: false,
      tooltips: {
         mode: 'index',
         intersect: false
      },
      responsive: true,
      legend: false,
      scales: {
         xAxes: [{
            stacked: true,
         }],
         yAxes: [{
            stacked: true
         }]
      }
   }
});

var lubeHealthChartData = {
   labels: labelsData,
   datasets: [{
      label: 'Severe',
      backgroundColor: '#DF1A09',
      stack: 'Stack 1',
      data: lubeHealthCondition['severe']
   }, {
      label: 'Abnormal',
      backgroundColor: '#ffb22b',
      stack: 'Stack 1',
      data: lubeHealthCondition['abnormal']
   }, {
      label: 'Normal',
      backgroundColor: '#92D050',
      stack: 'Stack 1',
      data: lubeHealthCondition['normal']
   }]
};
var ctx5 = document.getElementById('idLubeHealthChart').getContext('2d');
window.myBar = new Chart(ctx5, {
   type: 'bar',
   data: lubeHealthChartData,
   options: {
      title: false,
      tooltips: {
         mode: 'index',
         intersect: false
      },
      responsive: true,
      legend: false,
      scales: {
         xAxes: [{
            stacked: true,
         }],
         yAxes: [{
            stacked: true
         }]
      }
   }
});
</script>

<script>
var ctx = document.getElementById("idAnalyzedPerMonth").getContext("2d");

var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: labelsData,
      datasets: [{
         label: 'Samples',
         backgroundColor: '#0346a4',
         stack: 'Stack 1',
         data: analyzedPerMonth
      }]
   },
   options: {
      responsive: true,
      legend: false,
      title: false,
      tooltips: {
         mode: 'index',
         intersect: true
      },
      annotation: {
         annotations: [{
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y-axis-0',
            value: 5,
            borderColor: 'rgb(75, 192, 192)',
            borderWidth: 4,
            label: {
               enabled: false,
               content: 'Test label'
            }
         }]
      }
   }
});
</script>
<script>
function openEditDateModal() {
   $("#idModalExport").modal();
}
</script>
@endsection