@extends('personals.layout')

@section('personal.m_header')
    <!-- DataTables -->
  <link rel="stylesheet" href="/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link rel="stylesheet" href="/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
@endsection

@section('personal.breadcrumbs')
    <!-- Content Header (personal breadcrumbs) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1><a href="/unidad">Todas las Unidades</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
@endsection

@section('personal.content')
    <div class="pt-3">
    <h4 class="mb-2"><strong>Grupos</strong> </h4>
    <div class="row">
      <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box">
          <a href="#">
          <span class="info-box-icon bg-primary">1</span>
          </a>
          <div class="info-box-content">
            <span class="info-box-text">Integrantes:</span>
            <span class="info-box-number fs-4">{{$grupos[0]}}</span>
          </div>
          <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
      </div>
      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box">
        <a href="#">
          <span class="info-box-icon bg-success">2</span>
</a>
          <div class="info-box-content">
            <span class="info-box-text">Integrantes:</span>
            <span class="info-box-number fs-4">{{$grupos[1]}}</span>
          </div>
          <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
      </div>
      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box">
        <a href="#">
          <span class="info-box-icon bg-info">3</span>
</a>
          <div class="info-box-content">
            <span class="info-box-text">Integrantes:</span>
            <span class="info-box-number fs-4">{{$grupos[2]}}</span>
          </div>
          <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
      </div>
      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-12">
        <div class="info-box">
        <a href="#">
          <span class="info-box-icon bg-teal">4</span>
</a>
          <div class="info-box-content">
            <span class="info-box-text">Integrantes:</span>
            <span class="info-box-number fs-4">{{$grupos[3]}}</span>
          </div>
          <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
      </div>
      <!-- /.col -->
    </div>

      

      <div class="row">
          <div class="col-md-6">
            <!-- Widget: user widget style 2 -->
            <div class="card">
        <!-- /.card-header -->
        <div class="card-body p-0">
          <table class="table fs-5">
            <tbody>
            <tr>
                
                <td style="width: 14rem;"><strong>Personal Total</strong></td>
                <td style="width: 16rem;">
                  
                </td>
                <td><span class="badge bg-teal fs-4">{{$stats['total']}}</span></td>
              </tr>
              <tr>
              <tr>
                
                <td style="width: 14rem;">Disponibles</td>
                <td style="width: 16rem;">
                  <div class="progress ">
                    <div class="progress-bar {{ $stats['disponible'][0] < 70 ? ' bg-danger' : ' bg-success' }}" style="width: {{$stats['disponible'][0]}}%"></div>
                  </div>
                </td>
                <td><span class="badge {{ $stats['disponible'][0] < 70 ? ' bg-danger' : ' bg-success' }} fs-5">{{$stats['disponible'][0]}}%  |  {{$stats['disponible'][1]}}</span></td>
              </tr>
              <tr>
                
                <td>Unidad de origen</td>
                <td>
                  <div class="progress ">
                    <div class="progress-bar bg-primary " style="width: {{$stats['unidadorigen'][0]}}%"></div>
                  </div>
                </td>
                <td><span class="badge bg-primary  fs-5">{{$stats['unidadorigen'][0]}}%  |  {{$stats['unidadorigen'][1]}}</span></td>
              </tr>
              <tr>
                
                <td>Alertas SIIPNE</td>
                <td>
                  <div class="progress  progress-striped active">
                    <div class="progress-bar bg-warning" style="width: {{$stats['alertasiipne'][0]}}%; height:10px;"></div>
                  </div>
                </td>
                <td><span class="badge bg-warning fs-5">{{$stats['alertasiipne'][0]}}%  |  {{$stats['alertasiipne'][1]}}</span></td>
              </tr>
              <tr>
                
                <td>Despacho</td>
                <td>
                  <div class="progress progress-striped active">
                    <div class="progress-bar bg-success" style="width: {{$stats['despacho'][0]}}%"></div>
                  </div>
                </td>
                <td><span class="badge bg-success fs-5">{{$stats['despacho'][0]}}%  |  {{$stats['despacho'][1]}}</span></td>
              </tr>
              <tr>
                
                <td>Sin Considerar</td>
                <td>
                  <div class="progress  progress-striped active">
                    <div class="progress-bar bg-success" style="width: {{$stats['noconsiderado'][0]}}%"></div>
                  </div>
                </td>
                <td><span class="badge bg-success fs-5">{{$stats['noconsiderado'][0]}}%  |  {{$stats['noconsiderado'][1]}}</span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- /.card-body -->
      </div>
            <!-- /.widget-user -->
          </div>
          <!-- /.col -->
          <div class="col-md-6">
            <!-- Widget: user widget style 1 -->
            <div class="card card-widget widget-user">
              <!-- Add the bg color to the header using any of the bg-* classes -->
              <div class="widget-user-header {{ $stats['disponible'][0] < 80 ? ' bg-danger' : ' bg-success' }}" style="height: 4rem;">
                <h5 class="widget-user-desc">Totales</h5>
              </div>
              
              <div class="card-footer pt-3">
                <div class="row">
                  <div class="col-sm-4 border-right">
                    <div class="description-block">
                      <h5 class="description-header">{{$stats['total']}}</h5>
                      <span class="description-text">Personal Total</span>
                    </div>
                    <!-- /.description-block -->
                  </div>
                  <!-- /.col -->
                  <div class="col-sm-4 border-right">
                    <div class="description-block">
                      <h5 class="description-header">{{$stats['unidadesTotales']}}</h5>
                      <span class="description-text">Unidades Totales</span>
                    </div>
                    <!-- /.description-block -->
                  </div>
                  <!-- /.col -->
                  <div class="col-sm-4">
                    <div class="description-block">
                      <h5 class="description-header">{{$stats['disponiblesbaja']}}</h5>
                      <span class="description-text">Unidades < 80%</span>
                    </div>
                    <!-- /.description-block -->
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->
                 <div class="row">
                  <div class="col">

                    @if( $stats['disponible'][0] < 80)
                    <div class="callout callout-warning">
                      <h5>Por favor Actualice las unidades </h5>

                      <p>Total de Unidades: {{$stats['unidadesTotales']}} unidades <br>
                          Unidades que no Alcanzan el 80% de disponibilidad: {{$stats['disponiblesbaja']}}</p>
                    </div>
                    @endif
                    @if( $stats['disponible'][0] >= 80)
                    <div class="callout callout-success">
                      <h5>Ha completado las observaciones con éxito!</h5>

                      <p>El grupo han alcanzado el requerimiento de disponibilidad.</p>
                    </div>
                    @endif
                  </div>

                 </div>
                 <!-- /.row -->
              </div>
            </div>
            <!-- /.widget-user -->
          </div>
          <!-- /.col -->

        </div>
    

    

    <div class="card">
              <div class="card-header">
                <h3 class="card-title p-3"><strong>Conteo de personal por UNIDAD</strong></h3>

                
                <div class="card-tools">
                          <span class="btn btn-tool">
                          <input type="button" name="imprimir" class="btn btn-success" value="Imprimir" onclick="window.print();">
                          </span>                                               
                      </div>
              </div><!-- /.card-header -->
              <div class="card-body">

                    <table class="table table-bordered table-hover" id="unidad-table">
                      <thead role="rowgroup">
                        <tr role="row">
                        <th role='columnheader'>#</th>
                          <th role='columnheader'>Unidad</th>
                          <th role='columnheader'>Grupo 1</th>
                          <th role='columnheader'>Grupo 2</th>
                          <th role='columnheader'>Grupo 3</th>
                          <th role='columnheader'>Grupo 4</th>
                          <th role='columnheader'>Totales</th>
                           
                        </tr>
                      </thead>
                      <tbody> 
                      @php
                        $i =1;
                        @endphp
                            @foreach($data as $d)
                                <tr>
                                <td data-label="#">{{ $i }}</td>
                                                    <td data-label="Cedula">{{ $d[0] ?: "0" }}</td>
                                                    <td data-label="Unidad">{{ $d[1] ?: "0" }}</td>
                                                    <td data-label="Grupo">{{ $d[2] ?: "0" }}</td>
                                                    <td data-label="Grado">{{ $d[3]?: "0" }}</td>
                                                    <td data-label="Nombre">{{ $d[4] ?: "0" }}</td>
                                                    <td data-label="Nombre"> <strong>{{ $d[5] ?: "0" }}</strong> </td>
                                               
                      </tr>
                      @php
                      $i++;
                      @endphp
                      @endforeach
                  </tbody>
                  <tfoot>
                  <tr>
                  <th>#</th>
                    <th>Total por Grupo</th>
                    <th>{{$grupos[0]}}</th>
                    <th>{{$grupos[1]}}</th>
                    <th>{{$grupos[2]}}</th>
                    <th>{{$grupos[3]}}</th>
                    <th>{{$grupos[0]+$grupos[1]+$grupos[2]+$grupos[3]}}</th>
                  </tr>
                  </tfoot>
                    </table>
              </div><!-- /.card-body -->
            </div>


    </div>


@endsection

@section('personal.scripts')
<!-- DataTables  & Plugins -->
<script src="/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="/plugins/jszip/jszip.min.js"></script>
<script src="/plugins/pdfmake/pdfmake.min.js"></script>
<script src="/plugins/pdfmake/vfs_fonts.js"></script>
<script src="/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script>
  var myModal = new bootstrap.Modal(document.getElementById('personal-single-modal'), {
                    keyboard: false
                  });
                  $(function () {
                    var urlactual = JSON.stringify(location.href) ;
var coun = urlactual.length;
var grupo = urlactual.charAt(coun - 1);
console.log(urlactual, grupo, coun);
    
  const table =  $("#unidad-table").DataTable({  
      "responsive": true, "lengthChange": false, "autoWidth": false,"searching": true,"paging": false,
      "buttons": ["excel", "pdf", "print", "colvis"],
    }).buttons().container().appendTo('#unidad-table_wrapper .col-sm-12:eq(0)');
  });

  
 

  const updatePersonal= async (ced) => {
  try {
    const respuesta = await fetch('/personal/get/'+ced)
    const data = await respuesta.json();
    populateForm(data);
    myModal.show();
  } catch (error) {
    console.log(error);
  } 
}

function populateForm(data){
  let ids= Object.keys(data);
  ids.forEach(element => {
    let el = document.getElementById(element);
    if (el) {
      if (el.nodeName == "INPUT") {
        if (data[element]) {
          el.value = data[element];
        }
      }
      if (el.nodeName == "SELECT") {
        if (data[element]) {
          el.value = data[element];
        }
      }
      if (el.nodeName == "H4") {
        el.innerHTML = data[element];
      }

    }
  });

}

function test(){
  let da= document.getElementById('form-personal');
        let datos = serializeFormData(da);
        console.log(datos)

}

function serializeFormData(form) {
  var formData = new FormData(form);
  var serializedData = {};

  for (var [name, value] of formData) {
    if (serializedData[name]) {
      if (!Array.isArray(serializedData[name])) {
        serializedData[name] = [serializedData[name]];
      }
      serializedData[name].push(value);
    } else {
      serializedData[name] = value;
    }
  }

  return serializedData;
}




    var form = '#form-personal';
    $(form).on('submit', function(event){
        event.preventDefault();
        let datos = serializeFormData(this);
        let idpersonal = $('#id').val(); 
        $.ajax({
            url: '/unidad/personal/'+idpersonal,
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: datos,
            dataType: 'json',
            success:function(response)
            {
               window.location.reload();
            },
            error: function(response) {
            }
        });
    });


</script>




@endsection