{{-- @extends('layouts.app') --}}
@extends('layouts.sidebar')

@section('content')
 <!-- content -->
<div class="titulos"> 
    <h2>Usuarios</h2>
    <hr />

</div>

@if(session('mensaje'))
    <div class="alert alert-success">
        {{ session('mensaje') }}
    </div>
@endif
 <div class="container-fluid botones-extremo " >
    <div class="d-flex justify-content-between">
        <a href="{{ route('usuarios.crear') }}" class=" btn  btn-success" title="" >Nuevo</a>
            
        
    </div>
</div>

 <div class="container-fluid table-responsive" >
  
    <div class="row">
      <div class="col-6 "> 
        <label for="">Sucursal</label>
      <select  class="form-control" name="" id="selecionar_sucursal">

        <option value="">Seleccionar</option>
        @if(!empty($sucursales))
                  @foreach($sucursales as $data)
                  <option  value="{{$data->id}}" {{(old('sucursal')==$data->id)? 'selected':''}}>{{$data->descripcion}}</option>

                  @endforeach
                  @endif

      </select>
      </div>
      <div class="col-6 "> 

        <label for="">Perfil usuario</label>
        <select  class="form-control" name="" id="">
          <option value="">Seleccionar</option>
          @if(!empty($tipos_usuarios))
                  @foreach($tipos_usuarios as $data)
                  <option  value="{{$data->id}}" {{(old('tipos_usuarios')==$data->id)? 'selected':''}}>{{$data->descripcion}}</option>
        
                  @endforeach
                  @endif
        </select>
      </div>
    </div>
    <div class="row">
      <div class="col bttn-buscar">
        <input type="text" class="form-control" placeholder="Buscar" id="buscarUsuario">
      </div>

      
  </div>
    <br>
    {{--INICIO TABLA --}}
    <div class="table-responsive mb-5">
        <table class="table table-striped table-hover" id="mitable">
          <thead class="color-head">
          
            <tr>

              <th class="th-subhead border-th text-uppercase">Nombre</th>
              <th class="th-subhead border-th text-uppercase separador-v">Rut</th>
              
              <th class="th-subhead border-th text-uppercase separador-v">Dirección</th>

              {{-- <th class="th-subhead border-th text-uppercase">Región</th> --}}
              <th class="th-subhead border-th text-uppercase">Comuna</th>
              <th class="th-subhead border-th text-uppercase">Teléfono</th>
              <th class="th-subhead border-th text-uppercase">Sucursal</th>
              <th class="th-subhead border-th text-uppercase">Tipo User</th>
              <th class="th-subhead border-th text-uppercase">#</th>


            </tr>
          </thead>
          <tbody id="tableUsuario"></tbody>
          <tbody id="tableUsuariosGeneral">            <tr>
                {{-- <td class="td-val">a</td> --}}
                
                
              </tr>
              {{-- {{$usuarios}} --}}
              {{-- [{"id_usuariio":2
              "id":1
              "nombre":"ariel"
              "apellido":"alejandro"
              "rut":"1-9"
              "fecha_nacimiento":"marzo"
              "direccion":"talca"
              "telefono":"53425865"
              "nacionalidades_id":1
              "direcciones_id":1
              "des_comuna":"Arica"
              "des_region":"Arica y Parinacota"}] --}}


            @if(!empty($usuarios))
             @foreach ($usuarios as $los_datos)
              <tr>


                
               
                <td class="td-val text-uppercase">{{$los_datos->nombre}} {{$los_datos->apellido}}</td>
                
                <td class="td-val text-uppercase">{{$los_datos->rut}}</td>
                {{-- <td class="td-val text-uppercase">{{$los_datos->giro}}</td> --}}
                <td class="td-val text-uppercase">{{$los_datos->nombredireccion}}</td>
                {{-- <td class="td-val text-uppercase">{{$los_datos->des_region}}</td> --}}
                <td class="td-val text-uppercase">{{$los_datos->des_comuna}}</td>
                <td class="td-val text-uppercase">{{$los_datos->telefono}}</td>

                <td class="td-val text-uppercase"> {{ \App\Models\User::nameBranchUserList($los_datos->sucursales_id) }} </td>
                <td class="td-val text-uppercase"> {{ \App\Models\User::tiposUserList($los_datos->tipos_usuarios_id) }} </td>

                
<td>
  <a href="{{ route('usuarios.editar', ['id' => $los_datos->id]) }}" >
    <span class="material-symbols-outlined">
      edit
      </span>
</a>
  <a>
    <span class="material-symbols-outlined" onclick="abrirModalEliminar({{$los_datos->id}})">
      delete
      </span>
    </a>


 
</td>
               
              </tr>
            @endforeach 

            @endif
          </tbody>
        </table>
        {{ $usuarios->links('pagination::bootstrap-4') }}

      </div>
      

    {{-- FIN TABLA --}}

</div>

<!-- The Modal -->
<div class="modal" id="modalEliminar">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Eliminar</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal" onclick="cerrarModal()"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body" style="text-align: center">

        <h3>
       ¿Esta seguro que desea eliminar el registro?

        </h3>

      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <form action="{{ route('usuarios.delet') }}" method="POST">

          @csrf
              <input type="text" hidden name="iduserdelet" value="" id="idUsuarioDelet" >
             <button type="submit" class="btn btn-success" onclick="cerrarModal()">Eliminar</button>

            </form>

        <button type="button" class="btn btn-danger" onclick="cerrarModal()">Cerrar</button>
      </div>

    </div>
  </div>
</div>

<script>



  var idUSer = 0;
  function abrirModalEliminar(idUsuario){

    $("#idUsuarioDelet").val(idUsuario);
    $("#modalEliminar").show();

  }

  function cerrarModal(){

$("#modalEliminar").hide();

}


$(document).ready(function() {



  $("#selecionar_sucursal").change(function() {
    // Obtiene el valor seleccionado
    var valorSeleccionado = $(this).val();

    // Hacer algo con el valor seleccionado, como imprimirlo en la consola
    console.log("Valor seleccionado: " + valorSeleccionado);
  });



$('#buscarUsuario').on('keyup', function() {
    var valorIngresado = $(this).val();
    var data = @json($usuariosAll);
    console.log("datasssssss");

    console.log(data);

    resultadoRepuestos = $.grep(data, function(servicio) {
        // Comparar el nombre y el SKU en minúsculas para que la búsqueda sea insensible a mayúsculas/minúsculas
        var nombreLowerCase = servicio.nombre.toLowerCase();
        var skuLowerCase = servicio.rut.toLowerCase();
        var letraBusqueda = valorIngresado.toLowerCase();

        return nombreLowerCase.includes(letraBusqueda) || skuLowerCase.includes(
            letraBusqueda);
    });

    $('#tableUsuario').empty();
    $('#tableUsuariosGeneral').css("display","none");
    if (valorIngresado != "") {

        $(resultadoRepuestos).each(function(i, v) {
            $('#tableUsuario').append(
                '<tr><td>'+v.nombre+" "+v.apellido+'</td>'  
                +'<td>'+v.rut+'</td>'  
                +'<td>'+v.nombredireccion+'</td>'  
                +'<td>'+v.des_comuna+'</td>'  
                +'<td>'+v.telefono+'</td>'  
                +'<td>'+v.nombre_sucursal+'</td>'  
                +'<td>'+v.nombre_tipo_user+'</td>'  

                
                
                 
                + '<td>' + '<a onclick="editarBuscador('+"'"+v.id+"'"+')"><span class="material-symbols-outlined">edit</span></a>' 

                +  '<a onclick="abrirModalEliminar('+"'"+v.id+"'"+')"><span class="material-symbols-outlined">delete</span></a>' + '</td>'

                
                +'</tr>');
        })
    } else {
    $("#tableUsuariosGeneral").css("display","");

        $('#tableUsuario').empty();

    }

});

// Nombre	sku	Precio neto	impuesto	Categoria

});


function editarBuscador(idUsuario){


 // Reemplaza esto con tu lógica para obtener el ID del usuario
    var urlEditarUsuario = @json(route('usuarios.editar')) + '/' + idUsuario;

    // Redirige a la URL generada en la misma pantalla
    window.location.href = urlEditarUsuario;
}

</script>

@endsection