@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>Unidad: {{$unidad->unidad}}</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="/unidad/{{$unidad->id}}/grupo/1">
          <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="/unidad/{{$unidad->id}}/grupo/2">
          <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="/unidad/{{$unidad->id}}/grupo/3">
          <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="/unidad/{{$unidad->id}}/grupo/4">
          <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;">Disponibles</td>
                <td style="width: 16rem;">
                  <div class="progress ">
                    <div class="progress-bar {{$disponibilidad ?  ' bg-success' :' bg-danger'}}" style="width: {{$stats['disponible'][0]}}%"></div>
                  </div>
                </td>
                <td><span class="badge {{$disponibilidad ? ' bg-success':' bg-danger' }} fs-5">{{$stats['disponible'][0]}}%</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]}}%</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]}}%</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]}}%</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]}}%</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 {{ $disponibilidad ? ' bg-success':' bg-danger' }}" 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['disponible'][1]}}</h5>
                      <span class="description-text">Disponible</span>
                    </div>
                    <!-- /.description-block -->
                  </div>
                  <!-- /.col -->
                  <div class="col-sm-4">
                    <div class="description-block">
                      <h5 class="description-header">{{$stats['unidadorigen'][1]}}</h5>
                      <span class="description-text">Und. Origen</span>
                    </div>
                    <!-- /.description-block -->
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->
                 <div class="row">
                  <div class="col">

                    @if( $disponibilidad)

                    <div class="callout callout-success">
                      <h5>Ha completado las observaciones con éxito!</h5>

                      <p>Los grupos han alcanzado el requerimiento de disponibilidad.</p>
                    </div>
                    @else
                    
                    <div class="callout callout-danger">
                      <h5>Por favor Actualice los grupos</h5>

                      <p>La cantidad de personal Disponible, debe ser Mayor al 80% y la suma del personal en Unidad de origen y Alertas Siipne, no deben ser mayor al 20% del total del personal de la unidad, por favor reorganice los grupos.</p>
                    </div>
                    @endif
                  </div>

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

        </div>
    

    

    <div class="card">
              <div class="card-header d-flex p-0">
                <h3 class="card-title p-3"><strong>Seleccione el personal de cada grupo</strong></h3>

              </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'>Cedula</th>
                          <th role='columnheader'>Grupo</th>
                          <th role='columnheader'>Grado</th>
                          <th role='columnheader'>Nombre</th>
                          <th role='columnheader'>Cargo</th>
                          <th role='columnheader'>Sexo</th>
                          <th role='columnheader'>Tipo</th>
                          <th role='columnheader'>Sector</th>
                          <th role='columnheader'>Novedad</th>
                          <th role='columnheader'>Designacion</th>
                          <th role='columnheader'>Funcion</th>
                          <th role='columnheader'>Posee Discapacidad</th>
                          <th role='columnheader'>Describa Discapacidad</th>
                          <th role='columnheader'>Posee Enfermedad Catastrofica</th>
                          <th role='columnheader'>Describa Enfermedad Catastrofica</th>
                          <th role='columnheader'>Sector</th>                         
                          <th role='columnheader'>Oficio</th>
                          <th role='columnheader'>Detalle Oficio</th>
                          <th role='columnheader'>Observaciones</th>
                          <th role='columnheader'>Fecha Inicio</th>
                          <th role='columnheader'>Fecha Fin</th>
                          <th role='columnheader'>Cargo Asignado</th>
                          <th role='columnheader'>Celular</th>
                          <th role='columnheader'>Salió</th>
                          <!-- <th scope="col" data-label="Actions">  <i class="fas fa-cogs"></i></th> -->
                        </tr>
                      </thead>
                     
                    </table>
              </div><!-- /.card-body -->
            </div>


    </div>

       <!-- /.modal -->

       <div class="modal fade" id="personal-single-modal">
        <div class="modal-dialog personal-single-modal">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="nombre"></h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
                    <form action="" method="POST" id="form-personal" class="m-0 p-0" enctype='multipart/form-data'>
                   
                        @csrf
                        <input type="text" name="id" hidden id="id">
                        <div class="card-body">
                          @if(Auth::user()->id==1)
                          <div class="mb-3">
                              <label for="grupo" class="form-label">Grupo:</label>
                              <select name="grupo" id="grupo" class="form-control form-select" required>
                                  <option value="">Seleccione Grupo</option>
                                  @foreach(["1" => "1", "2" => "2", "3" => "3", "4" => "4"] as $value => $label )
                                      <option value="{{ $value }}">{{ $label }}</option>
                                  @endforeach
                              </select>
                          </div>
                          @endif

                          <div class="mb-3">
                              <label for="novedad_id" class="form-label">Novedad:</label>
                              <select name="novedad_id" id="novedad_id" class="form-control form-select" >
                                  <option value="">Seleccione Novedad</option>
                                  @foreach($novedades as $novedad )
                                      <option value="{{ $novedad->id }}">{{ $novedad->novedad }}</option>
                                  @endforeach
                              </select>
                          </div>                                         
                          <div class="mb-3">
                              <label for="posee_discapacidad" class="form-label">Posee Discapacidad:</label>
                              <select name="posee_discapacidad" id="posee_discapacidad" class="form-control form-select" >
                                  <option value="">Seleccione Posee Discapacidad</option>
                                  @foreach(["Si" => "Si", "No" => "No"] as $value => $label )
                                      <option value="{{ $value }}">{{ $label }}</option>
                                  @endforeach
                              </select>
                                  </div>
                          <div class="mb-3">
                              <label for="describa_discapacidad" class="form-label">Describa Discapacidad:</label>
                              <input type="text" name="describa_discapacidad" id="describa_discapacidad" class="form-control" value="" />
                          </div>
                          <div class="mb-3">
                              <label for="posee_enfermedad_catastrofica" class="form-label">Posee Enfermedad Catastrofica:</label>
                              <select name="posee_enfermedad_catastrofica" id="posee_enfermedad_catastrofica" class="form-control form-select" >
                                  <option value="">Seleccione Posee Enfermedad Catastrofica</option>
                                  @foreach(["Si" => "Si", "No" => "No"] as $value => $label )
                                      <option value="{{ $value }}">{{ $label }}</option>
                                  @endforeach
                              </select>
                          </div>
                          <div class="mb-3">
                              <label for="describa_enfermedad_catastrofica" class="form-label">Describa Enfermedad Catastrofica:</label>
                              <input type="text" name="describa_enfermedad_catastrofica" id="describa_enfermedad_catastrofica" class="form-control" value="" />
                          </div>
                          <div class="mb-3">
                              <label for="direccion" class="form-label">Sector:</label>
                              <select name="direccion" id="direccion" class="form-control form-select" >
                                <option value="">Seleccione Sector</option>
                                    @foreach(["NORTE" => "Norte", "SUR" => "Sur", "CENTRO" => "Centro", "VALLE LOS CHILLOS" => "Valle Los Chillos", "VALLE DE TUMBACO" => "Valle de Tumbaco"] as $value => $label )
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                          </div>

                          <div class="mb-3">
                              <label for="oficio" class="form-label">Tipo Documento:</label>
                              <select name="oficio" id="oficio" class="form-control form-select" >
                                  <option value="">Seleccione Oficio</option>
                                  @foreach(["MEMO" => "Memo", "OFICIO" => "Oficio", "TELEGRAMA" => "Telegrama", "DELEGACION" => "Delegacion"] as $value => $label )
                                      <option value="{{ $value }}" >{{ $label }}</option>
                                  @endforeach
                              </select>
                
                          </div>
                          <div class="mb-3">
                              <label for="detalle_oficio" class="form-label">Detalle Documento:</label>
                              <textarea name="detalle_oficio" id="detalle_oficio" class="form-control" >{{@old('detalle_oficio', $personal->detalle_oficio)}}</textarea>
                             
                          </div>
                          <div class="mb-3">
                              <label for="documento" class="form-label">Link del Documento:</label>
                              <input type="text" name="documento" id="documento" class="form-control" value="" />
                          </div>
                          <div class="mb-3">
                              <label for="observaciones" class="form-label">Observaciones:</label>
                              <textarea name="observaciones" id="observaciones" class="form-control" ></textarea>
                              
                          </div>
                          <div class="mb-3">
                              <label for="fecha_inicio" class="form-label">Fecha Inicio:</label>
                              <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control" value="" />
                              
                          </div>
                          <div class="mb-3">
                              <label for="fecha_fin" class="form-label">Fecha Fin:</label>
                              <input type="date" name="fecha_fin" id="fecha_fin" class="form-control" value="" />
                             
                          </div>
                          <div class="mb-3">
                              <label for="departamento" class="form-label">Departamento:</label>
                              <input type="text" name="departamento" id="departamento" class="form-control" value="" />
                             
                          </div>
                          <div class="mb-3">
                              <label for="cargo_asignado" class="form-label">Cargo Asignado:</label>
                              <input type="text" name="cargo_asignado" id="cargo_asignado" class="form-control" value="" />
                              
                          </div>
                          <div class="mb-3">
                              <label for="celular" class="form-label">Celular:</label>
                              <input type="text" name="celular" id="celular" class="form-control" value="" />
                              
                          </div>
                          <div class="mb-3">
                              <label for="libre" class="form-label">Libre:</label>
                              <select name="libre" id="libre" class="form-control form-select" >
                                  <option value="">Seleccione Libre</option>
                                  @foreach(["NAVIDAD" => "NAVIDAD", "FIN DE AÑO" => "FIN DE AÑO"] as $value => $label )
                                      <option value="{{ $value }}">{{ $label }}</option>
                                  @endforeach
                              </select>
                             
                          </div>

                        </div>

                    
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
              <button type="submit" class="btn btn-primary" >Actualizar</button>
            </div>
            </form>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
@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 () {
   
    
  const table =  $("#unidad-table").DataTable({  
      "responsive": true, "lengthChange": false, "autoWidth": false,"searching": true,"paging": false,
      "buttons": ["excel", "pdf", "print", "colvis"],
      order: [[0, 'asc']],

      ajax: '/unidad/data/{{$unidad->id}}',
        columns: [
                    { data: null,    
                          "render": function (data, type, row, meta) {
                          return meta.row+1; // This contains the row index
                      }},
                    {
                        targets: 1,
                        data: 'cedula',
                        render: function (data, type, row, meta) {
                            return '<a href="' + '#' + '" onclick="updatePersonal('+data+')">'+ data +'</a>';
                        }
                    },
                    { data: null, render: 'grupo' },
                    { data: 'grado'},
                    { data: 'nombre'},
                    { data: 'cargo'},
                    { data: 'sexo'},
                    { data: 'tipo'},
                    { data: 'direccion'},
                    {
                      targets: 8, // O el target correcto según tu estructura
                      data: 'novedad',
                      render: function (data, type, row, meta) {
                          if (row.novedad && row.novedad.novedad) {
                            console.log(row)
                              return row.documento ? 
                                  '<a href="' + row.documento + '" target="_blank"> '+row.novedad.novedad+'</a>' : 
                                  row.novedad.novedad; // Retorna el valor de novedad
                          }
                          return "No disponible"; // Valor por defecto si no hay novedad
                      }
                  },
                    //{ data: 'novedad.novedad'},
                    { data: 'designacion'},
                    { data: 'funcion'},                 
                    { data: 'posee_discapacidad'},
                    { data: 'describa_discapacidad'},
                    { data: 'posee_enfermedad_catastrofica'},
                    { data: 'describa_enfermedad_catastrofica'},
                    { data: 'sector_vive'},
                    { data: 'oficio'},
                    { data: 'detalle_oficio'},
                    { data: 'observaciones'},
                    { data: 'fecha_inicio'},
                    { data: 'fecha_fin'},
                    { data: 'cargo_asignado'},
                    { data: 'celular'},
                    { data: 'libre'}
        ]

    }).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(); 
        console.log(idpersonal, datos)
        $.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