@extends('layouts.app')
@section('titulo','Usuarios - '.config('app.name'))
@section('header','Usuarios')

@section('breadcrumb')
<ol class="breadcrumb float-sm-right">
  <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
  <li class="breadcrumb-item active">Ver Usuarios</li>
</ol>
@endsection
@section('content')
<div class="row">
  <div class="col-md-12">
    <div class="card card-info">
      <div class="card-header">
         <span class="float-right">
            <a class="btn btn-danger btn-sm" href="{{ route('user.create') }}" title="Registrar Usuario"><i class="fas fa-plus-square"></i></a>
          </span>
          
        <h3 class="card-title">Lista de Usuario
         
        </h3>
      </div>
      <div class="card-body">
        <table class="table table-condensed data-table">
          <thead>
            <tr>
              <th class="text-center">Identificación</th>
              <th class="text-center">Nombre</th>
              <th class="text-center">Email</th>
              <th class="text-center">Rol</th>
              <th class="text-center">Contraseña</th>
              <th class="text-center">Sede</th>
              <th class="text-center">Acción</th>
              {{-- <th>Estatus</th>
              <th>Acciones</th --}}
            </tr>
          </thead>
          <tbody id="user-content">
            @foreach($users as $u)
              <tr>
                <td class="text-center">{{ $u->identificacion }}
                  {!! $u->userButtonStatus() !!}
                </td>
                <td class="text-center">{{ $u->nombres.' '.$u->apellidos }}</td>
                <td class="text-center">{{ $u->email }}</td>
                <td class="text-center">{{ $u->rol == 0 ? 'Administrador' : 'Empleado'}}</td>
                <td class="text-center">{{ $u->password_view }} 
                  <button class="btn btn-sm btn-info btnSendPassword" title="Enviar nueva contraseña" data-id="{{ $u->id }}" data-nombres="{{ $u->nombres }}">
                    <i class="fa fa-key"></i>
                  </button>
                </td>
                <td class="text-center">{{ $u->sede }}</td>
                <td class="text-center">
                  <a href="{{ route('user.edit',encrypt($u->id)) }}" title="Editar Usuario" class="btn btn-sm btn-warning">
                    <i class="fa fa-edit"></i>
                  </a>
                </td>
                {{-- <td><input type="checkbox" class="toggle-button"></td> --}}
                {{-- <td><button class="btn btn-sm btn-primary">Editar</button></td> --}}
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>
<!-- /row -->

<div class="modal fade" id="modal-password">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Enviar nueva contraseña</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="{{ route('send.password.change') }}" method="POST">
          @csrf
          <input type="hidden" name="user_id" id="user_id">
          <h5 class="text-center">¿Quiere enviar una contraseña nueva a <span id="nombre_user"></span>?</h5>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="submit" class="btn btn-primary">Enviar</button>
        </form>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modal-deshabilitar">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Deshabilitar Usuario</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="{{ route('user.status') }}" method="POST">
          @csrf
          @method('PUT')
          <input type="hidden" name="status" value="0">
          <input type="hidden" name="user_id" id="user_id_deshabilitar">
          <input type="hidden" name="type" value="Deshabilito">
          <h5 class="text-center">¿Quiere <strong class="text-danger">Deshabilitar</strong> a <span id="nombre_user_deshabilitar"></span>?</h5>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="submit" class="btn btn-primary">Si</button>
        </form>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<div class="modal fade" id="modal-habilitar">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Habilitar Usuario</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="{{ route('user.status') }}" method="POST">
          @csrf
          @method('PUT')
          <input type="hidden" name="status" value="1">
          <input type="hidden" name="user_id" id="user_id_habilitar">
          <input type="hidden" name="type" value="Habilito">
          <h5 class="text-center">¿Quiere <strong class="text-success">Habilitar</strong> a <span id="nombre_user_habilitar"></span>?</h5>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="submit" class="btn btn-primary">Si</button>
        </form>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
@endsection

@section('scripts')
<script type="text/javascript">

  $("#user-content").on('click', '.btnSendPassword', function(event) {
    var user_id = $(this).data('id');
    var nombre = $(this).data('nombres');
    $("#user_id").val(user_id);
    $("#nombre_user").text(nombre);

    $("#modal-password").modal('show');
  });

  $("#user-content").on('click', '.deshabilitarUser', function(event) {
    var user_id = $(this).data('id');
    var nombre = $(this).data('nombres');
    $("#user_id_deshabilitar").val(user_id);
    $("#nombre_user_deshabilitar").text(nombre);

    $("#modal-deshabilitar").modal('show');
  });

  $("#user-content").on('click', '.habilitarUser', function(event) {
    var user_id = $(this).data('id');
    var nombre = $(this).data('nombres');
    $("#user_id_habilitar").val(user_id);
    $("#nombre_user_habilitar").text(nombre);

    $("#modal-habilitar").modal('show');
  });
</script>
@endsection