@extends('layout.administrator.index')
@section('title', 'Supervisors')
@section('style')
<style type="text/css" media="print">
    .no-print { display: none; }
    .non-printable { display: none; }
    .printable { display: block !important; }
 </style>
@endsection
@section('content')
  <div class="content-wrapper">
    <section class="content-header">
      {{-- <h1>Operators</h1> --}}
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{route('administrator.dashboard')}}"><i class="fa fa-dashboard"></i> Inicio</a></li>
        <li class="breadcrumb-item"><a href="{{route('administrator.supervisor.index')}}"> Supervisors</a></li>
        <li class="breadcrumb-item active">Detalle</li>
      </ol>
    </section>

    <section class="content">
      @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
          {{session('success')}}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      @endif
      @if(session('danger'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
          {{session('danger')}}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      @endif
      <div class="row">
        <div class="col-md-5 no-print">
          <div class="box box-solid bg_dark">
            <div class="box-header with-border">
              <div class="row align-items-center">
                <div class="col-12">
                  <h4 class="box-title">Información</h4>
                </div>
              </div>
            </div>
            <div class="box-body">
              <div class="row mb-10">
                <div class="col-md-12">
                  <div class="label-{{Config::get('constants.states')[$operator->state]['type']}} state_details">{{Config::get('constants.states')[$operator->state]['name']}}</div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <h4 class="font-weight-bold">DOCUMENTO</h4>
                  <h5><strong>CC {{$operator->document}}</strong></h5>
                </div>
                <div class="col-md-6">
                  <h4 class="font-weight-bold">USUARIO</h4>
                  <h5><strong>{{$operator->username}}</strong></h5>
                </div>
              </div>
              <div class="row mt-10">
                <div class="col-md-6">
                  <h4 class="font-weight-bold">NOMBRE</h4>
                  <h5><strong>{{$operator->name}} {{$operator->last_name}}</strong></h5>
                </div>
                <div class="col-md-6">
                  <h4 class="font-weight-bold">CORREO</h4>
                  <h5><strong>{{$operator->email}}</strong></h5>
                </div>
              </div>
              <div class="row mt-10">
                <div class="col-md-6">
                  <h4 class="font-weight-bold">CELULAR PRINCIPAL</h4>
                  <h5><strong>{{$operator->cellphone}}</strong></h5>
                </div>
              </div>
              <div class="row mt-10 ">
                <div class="col">
                   <button class="btn btn_admin btn-block" id="btnPrint"><i class="fa fa-print" aria-hidden="true"></i>Imprimir</button>
                </div>
              </div>
              <div class="row mt-3">
                <div class="col">
                    <button class="btn btn_admin  btn-block" id="btnDownload"><i class="fa fa-download" aria-hidden="true"></i>Descargar</button>
                 </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-7" id="printElement">
            <div class="print">
                <div class="box">
                  <div class="box-header">
                  <h5 class="text-uppercase text-muted my-2">Total Casos: {{$total}}<br> <small>Por estado de Reporte</small></h5>
                  </div>
                  <div class="box-body">
                    <ul class="flexbox flex-justified text-center">
                      <li class="br-1">
                        <div class="font-size-20 text-warning">{{$countReports['approved']}}</div>
                      <big>x̄: <small class="text-warning text-uppercase">{{$total>0?$countReports['approved']/$total:'-'}}</small></big>
                      <br>
                        <big>Reportes<br> <small class="text-warning text-uppercase">Aprobados</small></big>
                      </li>
                      <li class="br-1">
                        <div class="font-size-20 text-danger">{{$countReports['rejected']}}</div>
                        <big>x̄: <small class="text-danger text-uppercase">{{$total>0?$countReports['rejected']/$total:'-'}}</small></big>
                        <br>
                        <big>Reportes<br> <small class="text-danger text-uppercase">Rechazados</small></big>
                      </li>
                      <li>
                        <div class="font-size-20 text-success">{{$countReports['ready']}}</div>
                        <big>x̄: <small class="text-success text-uppercase">{{$total>0?$countReports['ready']/$total:'-'}}</small></big>
                        <br>
                        <big>Reportes<br> <small class="text-success text-uppercase">Listos</small></big>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="box">
                  <div class="box-header">
                      <div class="row">
                          <div class="col">
                              <h5 class="text-uppercase text-muted my-2">Total Casos 2020<br> <small class="text-right">Por estado de Reporte </small></h5>
                          </div>
                          <div class="col offset-5">
                              <h5 class="text-uppercase text-muted my-2"> Reportes de Hoy<br> <small class="text-right">Por estado de Reporte </small></h5>
                          </div>
                      </div>

                  </div>
                  <div class="box-body">
                      <div class="row">
                          <div class="col">
                              <div class="chart">
                                  <canvas id="idReportedChart" style="height:32vh;"></canvas>
                              </div>
                          </div>
                          <div class="col">
                              <div class="chart">
                                  <canvas id="idReportedChart2" style="height:32vh;"></canvas>
                              </div>
                          </div>
                      </div>
                  </div>
                </div>
            </div>
        </div>
      </div>

    </section>
  </div>
@endsection

@section('js')
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <script src="{{ asset('assets/plugins/html2pdf/dist/html2pdf.bundle.min.js')}}"></script>
  <script type="text/javascript">
  const options = {
    margin: 0.4,
    filename: 'Sample-details',
    image: {
      type: 'jpeg',
      quality: 0.78
    },
    html2canvas: {
      scale: 2
    },
    jsPDF: {
      unit: 'in',
      format: 'letter',
      orientation: 'landscape'
    }
  }
  $('#btnPrint').click(function() {
        window.print();
  })
  $('#btnDownload').click(function() {
      console.log('hola');
        let element= document.getElementById('printElement');
        html2pdf().from(element).set(options).save();
  })
var reportedBystatus = <br />
<b>Notice</b>:  Undefined variable: reportedBystatus in <b>D:\laragon2\www\Terpel\resources\views\system\administrator\supervisors\show.blade.php</b> on line <b>185</b><br />
null;
var reportedChartData = {
    labels: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
    datasets: [{
      label: 'Approved',
      backgroundColor: '#DF1A09',
      stack: 'Stack 1',
      data: reportedBystatus['approved']
    }, {
      label: 'Rejected',
      backgroundColor: '#ffb22b',
      stack: 'Stack 1',
      data: reportedBystatus['rejected']
    }, {
      label: 'Ready',
      backgroundColor: '#0FAB0B',
      stack: 'Stack 1',
      data: reportedBystatus['ready']
    }]
  };
  var ctx = document.getElementById('idReportedChart').getContext('2d');
  var ctx2 = document.getElementById('idReportedChart2').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 myDoughnutChart = new Chart(ctx2, {
    type: 'doughnut',
    data: {
    datasets: [{
        backgroundColor: ['#DF1A09','#ffb22b','#0FAB0B'],
        data: [ {{ $approved}}, {{$rejected}}, {{$ready}}]
    }],

    // These labels appear in the legend and in the tooltips when hovering different arcs
    labels: [
        '% approved',
        '% rejected',
        '% ready'
    ]
},

});

  </script>
@endsection