@extends('menu/menu')
{{-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> --}}
<script src="{{ asset('js/jquery-3.4.1.min.js') }}" ></script>
<!--<link src="sftp://aya_pruebafinal@35.232.42.155/var/www/html/rendicion/css/_______a%26a_style.css" rel="stylesheet" type="text/css">-->
@section('content')

<div class="container mt-5">
  <div class="title-vista mt-4">API CAPACITACIONES</div>
</div>

<form action="{{route('filtro_capacitacion')}}" method="GET">
  <div class="container mt-5">

    <div class="seccion-filtro">Firltrar por</div> 
    <hr class="separador">

    <div class="row">
      <!--AQUI SE CARGA EL SELECT DE FECHA INICIO-->
      <div class="col-sm-3 form-group">
        <label for="datepicker">Fecha de inicio</label>
        <div class="input-group d-flex">
          <input type="date" class="form-control mayuscula" value="{{$fecha ?? ''}}" id="datepicker" name="datepicker">
          <div class="input-group-append">
            <button type="button" class="btn app-color" id="vaciar_fecha1" title="Borrar">
              <span class="material-icons-round">cancel</span>
            </button>
          </div>
        </div>
      </div>
      <!--AQUI SE CARGA EL SELECT DE FECHA FINAL-->
      <div class="col-sm-3 form-group">
        <label for="datepicker2">Fecha final</label>
        <div class="input-group d-flex">
          <input type="date" class="form-control mayuscula" value="{{$fecha2 ?? ''}}" id="datepicker2" name="datepicker2">
          <div class="input-group-append">
            <button type="button" class="btn app-color" id="vaciar_fecha1" title="Borrar">
              <span class="material-icons-round">cancel</span>
            </button>
          </div>
        </div>
      </div>
      <!--AQUI SE CARGA EL SELECT DE COMUNA-->
      <div class="col-sm-3 form-group" >        
        <label for="tecnicos">Técnico</label>
        <select id="tecnicos" name="tecnicos" class="custom-select mayuscula">
          <option selected value="">Seleccionar</option>
          @if (!empty($tecnico))
            @foreach ($tecnico as $tecnicos)
              @if ($tecnicos->nombre_uno != null)    
              @if($tecnicos->id == $id_persona )
                <option selected value="{{ $tecnicos->id }}">{{ucfirst(strtolower($tecnicos->nombre_uno))}} {{ucfirst(strtolower($tecnicos->apellido_uno))}}                         
              @else
                <option value="{{ $tecnicos->id }}">{{ucfirst(strtolower($tecnicos->nombre_uno))}} {{ucfirst(strtolower($tecnicos->apellido_uno))}}
              @endif            
            @endif                    
            @endforeach
          @endif
        </select>
      </div>
    </div>

    <div class="row">
      <!--AQUI SE CARGA EL SELECT DE ESTADO-->
      <div class="col-sm-3 form-group">
        <label for="estado">Estado de instalación</label>
        <select  id="estado" name="estado" class="custom-select mayuscula">
          <option  selected value="">Seleccionar</option>
            @if (!empty($carga_selectEstado))
              @foreach ($carga_selectEstado as $estados)
              @if ($estados->estado_capa != null)
              @if ($estados->estado_capa == $estado)
                            <option selected value="{{ $estados->estado_capa }}">{{ucfirst(strtolower($estados->estado_capa))}}</option>
                          @else
                            <option value="{{ $estados->estado_capa }}">{{ucfirst(strtolower($estados->estado_capa))}}</option>
                          @endif
              @endif      
            @endforeach
            @endif
          </select>
      </div>
      <!--AQUI SE CARGA EL SELECT DE ESTADO-->
      <div class="col-sm-3 form-group">
        <label for="clientes">Cliente</label>
        <select  class="custom-select mayuscula" id="clientes" name="clientes">
          <option  selected value="">Seleccionar</option>
          @if (!empty($carga_selectClientes))
            @foreach ($carga_selectClientes as $cliente)      
            @if ($cliente->sCliente != null)        
            @if($cliente->sCliente == $clientes) 
              <option selected value="{{ $cliente->sCliente }}">{{ucfirst(strtolower($cliente->sCliente ))}}</option> 
            @else
              <option  value="{{ $cliente->sCliente }}">{{ucfirst(strtolower($cliente->sCliente ))}}</option> 
            @endif
            @endif
          @endforeach
          @endif
        </select>
      </div>
      <!-- CUI -->
      <div class="col-sm-3 form-group" >
        <label for="cui">CUI</label>
        <input type="" class="form-control mayuscula" id="cui" placeholder="cui" name="cui">
      </div>

    </div>

    <div class="row bg-seccion-filtro rounded">
      <!--AQUI SE CARGA EL SELECT DE REGION-->
      <div class="col-sm-3 form-group">
        <label for="region">Región</label>
        @if (!empty($disable))
          <select id="region" name="region" class="custom-select mayuscula">
        @else 
          <select id="region" disabled  name="region" class="custom-select mayuscula">
          @endif
          <option  selected value="">Seleccionar</option>
          <option selected value="">Todos</option>
            @if (!empty($carga_selectRegion))
              @foreach ($carga_selectRegion as $regiones)
              @if ($regiones->sRegion != null)
              @if($regiones->sRegion == $region)
                <option selected value="{{ $regiones->sRegion }}">{{ucfirst(strtolower($regiones->sRegion))}} </option>
              @else
                <option value="{{ $regiones->sRegion }}">{{ucfirst(strtolower($regiones->sRegion))}} </option>
              @endif
                @endif
              @endforeach
            @endif
          </select>
      </div>
      <!--AQUI SE CARGA EL SELECT DE COMUNA-->
      <div class="col-sm-3 form-group">
        <label for="comuna">Comuna</label>
        @if (!empty($disable))
          <select id="comuna" name="comuna" class="custom-select mayuscula">
              @else 
                <select id="comuna" disabled  name="comuna" class="custom-select mayuscula">
            @endif
            <option selected value="">Seleccionar</option>
            <option selected value="">Todos</option>
            @if (!empty($carga_selectComuna))
              @foreach ($carga_selectComuna as $comunas)
                @if ($comunas->sComuna != null)                    
                  @if( $comunas->sComuna === $comuna)
                    <option selected value="{{ $comunas->sComuna }}">{{ucfirst(strtolower($comunas->sComuna))}}</option>
                  @else
                    <option value="{{ $comunas->sComuna }}">{{ucfirst(strtolower($comunas->sComuna))}}</option>
                  @endif
                @endif
              @endforeach
          @endif
        </select>    
      </div>
      <!--AQUI SE CARGA EL SELECT DE DIRECCION-->
      <div class="col-sm-3 form-group">
        <label for="direccion">Dirección</label>
        @if (!empty($disable))
                <select name="direccion" id="direccion" class="custom-select mayuscula">
              @else 
                  <select name="direccion" disabled id="direccion" class="custom-select mayuscula">
            @endif
            <option selected value="">Seleccionar</option>
            <option selected value="">Todos</option>
            @if(!empty($carga_selectDireccion))
              @foreach($carga_selectDireccion as $direcciones)
                @if ($direcciones->sDireccion != null)  
                  @if($direcciones->sDireccion == $direccion)
                    <option selected value="{{$direcciones->sDireccion}}">{{$direcciones->sDireccion}}</option>
                  @else
                    <option value="{{$direcciones->sDireccion}}">{{$direcciones->sDireccion}}</option>
                  @endif
                @endif
              @endforeach
            @endif
          </select>
      </div>
      <!--AQUI SE CARGA EL SELECT DE SUCURSAL-->
      <div class="col-sm-3 form-group">
        <label for="sucursal">Sucursal</label>
        @if (!empty($disable))
                <select name="sucursal" id="sucursal" class="custom-select mayuscula">
              @else 
                <select name="sucursal" disabled id="sucursal" class="custom-select mayuscula">
                @endif
            <option selected value="">Seleccionar</option>
            <option selected value="">Todos</option>
            @if (!empty($carga_selectSucursal))
              @foreach($carga_selectSucursal as $sucursales)
                @if ($sucursales->sTipo_sucursal != null)  
                  @if($sucursales->sTipo_sucursal == $sucursal)
                    <option selected value="{{$sucursales->sTipo_sucursal}}">{{$sucursales->sTipo_sucursal}}</option>
                  @else
                    <option value="{{$sucursales->sTipo_sucursal}}">{{$sucursales->sTipo_sucursal}}</option>
                  @endif
                @endif
              @endforeach
            @endif
          </select>
      </div>
      <div class="container">
        <a href="" onclick="actualizar_regiones()" class="btn btn-ter float-sm-right">
          <span class="material-icons-round">update</span>
          Actualizar datos de Región
        </a>
      </div>
    </div>
  </div>

  <div class="container mt-5">
    {{-- BOTON BUSCAR --}}
    <div class="text-center mb-5 mt-5">
      <button type="buscar" class="btn btn-pill btn-prim w-25">Buscar</button>  
  </div>
  </div>

  {{-- TABLA DE RESULTADOS --}}
  <div class="container table-responsive mt-5">
    <table class="table table-striped table-hover" id="mitable">
      <thead class="color-head">
        <tr>
          <th class="th-head border-th separador-v" colspan="1">CUI</th>
          <th class="th-head border-th separador-v" colspan="1">Fecha capacitación</th>
          <th class="th-head border-th separador-v" colspan="1">Estado</th>
          <th class="th-head border-th separador-v" colspan="1">Cliente</th>
          <th class="th-head border-th separador-v" colspan="1">Comuna</th>
          <th class="th-head border-th separador-v" colspan="1">Dirección</th>
          <th class="th-head border-th"><span class="material-icons">settings</span></th>
        </tr>
      </thead>
      <!-- FIN ENCABEZADO -->
    
      <!-- RESULTADOS -->
      <tbody>
    
        @foreach ($datos_instalacion as $capacitacion)
            <tr>
                <td>{{$capacitacion->sCui}}</td>
    
                <td>
    
                  @if ($capacitacion->fecha_capacitacion != "")
                  {{Carbon\Carbon::createFromDate($capacitacion->fecha_capacitacion)->format('d-m-Y')}}
    
                  @else 
                    No Informado
                  @endif
    
                </td>
                <td>
                  {{$capacitacion->estado_capa ?? 'No informado'}}
                  
                </td>
                <td>{{$capacitacion->sCliente}}</td>
                <td>{{$capacitacion->sComuna}}</td>
                <td>{{$capacitacion->sDireccion}}</td>
                <td class="td-val">
                  <div class="d-flex justify-content-around">
                    <a  role="button" title="Historial"><span class="material-icons btn-icon btn-icon-dd">history</span></a>
                    <a  href="#"  class="img1 asignar btn-icon btn-icon-dd" data-id="{{$capacitacion->sCui}}" data-toggle="modal" data-target="#modal_asignacion"  role="button" title="Asignar" ><span class="material-icons"> add_box </span></a>
                  

                    @if($capacitacion->estado_capa == "Finalizado")
                    <a class="btn-icon btn-icon-dd" href="{{  route('generar.pdfCordinadoraCapacitacion',Crypt::encryptString($capacitacion->id_capacitacion)) }}"  title="Visualizar PDF" > <span class="material-icons">picture_as_pdf</span></a>
                    @else 
                    <a class="btn-icon disabled" title="Sin PDF"><span class="material-icons">picture_as_pdf</span></a>


                    @endif
                  </div>    
                </td>
            </tr>
        @endforeach
      </tbody>
      </table>
  </div>
 </form>








     <!-- Modal -->
<div class="modal fade" id="modal_asignacion" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Asignar capacitación</h5>
        {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button> --}}
      </div>
      <div class="modal-body">
         <!--AQUI SE CARGA EL SELECT DE COMUNA-->
          <div class="container col-sm form-group" >
            <label for="tecnicos"><h2>Técnico</h2></label>
            <select id="m_tecnicos" name="m_tecnicos" class="custom-select mb-3" >
              <option selected disabled >seleccionar</option>
              @if (!empty($tecnico))
                @foreach ($tecnico as $tecnicos)
                  @if ($tecnicos->nombre_uno != null)
                  <option  value="{{ $tecnicos->id_trabajador }}">{{ucfirst(strtolower($tecnicos->nombre_uno))}} {{ucfirst(strtolower($tecnicos->apellido_uno))}}

                  @endif
                @endforeach

              @endif
            </select>
          </div>

          <div class="container col-sm form-group" >
            <label for="m_clientes"><h2>Proyecto</h2></label>
            <select id="m_clientes" name="m_clientes" class="custom-select mb-3" >
              <option selected disabled >seleccionar</option>
              @if (!empty($proyectos_sistema_propios))
              @foreach ($proyectos_sistema_propios as $clientes_)      
              @if ($clientes_->id_proyecto != null)        
                  <option  value="{{ $clientes_->id_proyecto }}">{{ucfirst(strtolower($clientes_->nombre ))}}
              @endif
            </option> 
            {{-- proyectos.nombre','clientes.razon_social' --}}
            @endforeach
            @endif
            </select>
          </div>


          <div class="container col-sm form-group" >
            <label for="datepicker"><h2>Fecha capacitación</h2></label>
            <input type="date" class="form-control" id="m_datepicker" name="m_datepicker">
            <input type="text" value="" id="md_id_cui" name="idcui" style="display:none">
        </div>
        <div id="result-username"></div>
      </div>
      <div class="modal-footer">
        <button id="btncerrar_crear" type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button type="submit" onclick="submitCrearAsignacion()" class="btn btn-guardar float-sm-right"> GUARDAR</button>
      </div>
    </div>
  </div>
</div>
</div>
<!-- Modal -->

@endsection

<script type="text/javascript">
  $(document).ready(function(){

      //script para cargar el modal
        $('.asignar').click(function() {

            $("#modal_asignacion").modal('show');
                var dcui2 = $(this).attr("data-id");
                $("#md_id_cui").val(dcui2);

          });

          $('#btncerrar_crear').click(function() {

          $("#modal_asignacion").modal('hide');
                location.reload();
          });

  });
</script>

<script>
function submitCrearAsignacion(){

    var id_trabajador = $('#m_tecnicos').val();
    var fecha = $('#m_datepicker').val();
     var m_clientes = $('#m_clientes').val();
    

    if(id_trabajador == null ){
        alert('Seleccionar técnico');
        $('#m_tecnicos').focus();
        return false;
    }else if(fecha.trim() == "" ){
        alert('Ingresar fecha');
        $('#m_datepicker').focus();
        return false;
    }

    var dcui = $("#md_id_cui").val();


    var _token = $('input[name="_token"]').val();

  /*   console.log(dcui);
    console.log(id_trabajador);
    console.log(fecha); */

    $.ajax({
                method: "POST",
                url: "{{ route('go.asginarCapacitacion') }}",
                data: {'scui': dcui, 'id_trabajador': id_trabajador, 'fecha': fecha , 'm_clientes': m_clientes ,  _token:_token},
                success: function(data) {

                    console.log(data);
            if(data != ""){

                    setTimeout(function() {
                        $('#result-username').html(data).fadeOut(10000);
                    },100);

            }else{
                alert("sin Datos");
            }


                }
            });
}
</script>

<script>
  $(document).ready(function(){
    $('#vaciar_fecha1').click(function() {
      $('#datepicker').val("");
    });
    $('#vaciar_fecha2').click(function() {
      $('#datepicker2').val("");
    });
  });
</script>



<script>


  function actualizar_regiones(){
             var _token = $('input[name="_token"]').val();
  
             $.ajax({
                    method:"GET",
  
                    url:"{{ route('go.actualizarregiones') }}",
  
                    data: {   _token:_token},
  
                success: function(data) {
                      alert("proceso Completado");
                      location.reload();
  
                  },
  
                error: function(xhr, status) {
                    alert('Disculpe, ha ocurrido un problema, intente mas tarde');
                 }
  
            });
  
  }
  
  
    
    $(document).ready(function(){


      $("#clientes").change(function(){
        
      
      
        cliente = $('select[id=clientes]').val();
          var _token = $('input[name="_token"]').val();
     
      $.ajax({
         method:"POST",

            url:"{{ route('buscarRegionClientes') }}",

            data: {  _token:_token,'cliente':cliente},

        success: function(data) {
          console.log(data);
          $("#comuna").empty();
          $("#direccion").empty();
          $("#sucursal").empty();
          $("#region").empty();
          

          $("#comuna").append('<option value="">Seleccionar</option>');
          $("#direccion").append('<option value="">Seleccionar</option>');
          $("#sucursal").append('<option value="">Seleccionar</option>');
          $("#region").append('<option value="">Seleccionar</option>');

          // $('#comuna').prop('disabled', true);
          // $('#direccion').prop('disabled', true);
          // $('#sucursal').prop('disabled', true);


          $(data).each(function(i, v){ // indice, valor
            //if(v.sComuna != null || v.sComuna != "null"  ){ 
                $("#region").append('<option value="' + v.sRegion + '">' + v.sRegion + '</option>');
                  })
            // }
            $('#region').prop('disabled', false);

       },

     error: function(xhr, status) {
         alert('Disculpe, ha ocurrido un problema, intente mas tarde');
      }

 });

});
  
  
      $("#region").change(function(){
  
      
             region = $('select[id=region]').val();
             var _token = $('input[name="_token"]').val();
  
             $.ajax({
                    method:"POST",
  
                    url:"{{ route('buscarComunas') }}",
  
                    data: { 'region': region,  _token:_token,'cliente':$("#clientes").val()},
  
                success: function(data) {
                  $("#comuna").empty();
                  $("#direccion").empty();
                  $("#sucursal").empty();
                 
                  $("#comuna").append('<option value="">Seleccionar</option>');
                  $("#direccion").append('<option value="">Seleccionar</option>');
                  $("#sucursal").append('<option value="">Seleccionar</option>');
                  $(data).each(function(i, v){ // indice, valor
                    //if(v.sComuna != null || v.sComuna != "null"  ){ 
                        $("#comuna").append('<option value="' + v.sComuna + '">' + v.sComuna + '</option>');
                          })
                   // }
                   $('#comuna').prop('disabled', false);

                  },
  
                error: function(xhr, status) {
                    alert('Disculpe, ha ocurrido un problema, intente mas tarde');
                 }
  
            });
    });
    $("#comuna").change(function(){
      comuna = $('select[id=comuna]').val();
             var _token = $('input[name="_token"]').val();
  
  
  
             $.ajax({
                    method:"POST",
  
                    url:"{{ route('buscardirecciones') }}",
  
                    data: { 'comuna': comuna,  _token:_token, 'cliente':$("#clientes").val()},
  
                success: function(data) {
                  $("#direccion").empty();
                  $("#sucursal").empty();
                  $("#direccion").append('<option value="">Seleccionar</option>');
                  $("#sucursal").append('<option value="">Seleccionar</option>');
  
                  $(data).each(function(i, v){ // indice, valor
                    //if(v.sdireccion != null || v.sdireccion != "null"  ){ 
                        $("#direccion").append('<option value="' + v.sDireccion + '">' + v.sDireccion + '</option>');
                          })
                   // }
                   $('#direccion').prop('disabled', false);
                  },
                 

                error: function(xhr, status) {
                    alert('Disculpe, ha ocurrido un problema, intente mas tarde');
                 }
  
            });
    });
  
    $("#direccion").change(function(){
      direccion = $('select[id=direccion]').val();
             var _token = $('input[name="_token"]').val();
  
  
             $.ajax({
                    method:"POST",
  
                    url:"{{ route('buscarsucursales') }}",
  
                    data: { 'direccion': direccion,  _token:_token, 'cliente':$("#clientes").val()},
  
                success: function(data) {
                  $("#sucursal").empty();
                  $("#sucursal").append('<option value="">Seleccionar</option>');
  
                  $(data).each(function(i, v){ // indice, valor
                    //if(v.ssucursal != null || v.ssucursal != "null"  ){ 
                        $("#sucursal").append('<option value="' + v.sTipo_sucursal + '">' + v.sTipo_sucursal + '</option>');
                          })
                   // }
                   $('#sucursal').prop('disabled', false);
                  },
                 

  
                error: function(xhr, status) {
                    alert('Disculpe, ha ocurrido un problema, intente mas tarde');
                 }
  
            });
    });
  
      });
  
      </script>