@extends('layouts.admin')
@section('usuarios', 'active bg-gradient-primary')


@section('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">

@endsection
@section('contenido')

    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">
                            <i class="fa fa-users"></i>
                            Usuarios
                        </h6>
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="container">
                        <div class="row">

                            <div>
                                <h2 class='page-head-line'>Usuarios
                                    <button class='btn btn-primary' data-bs-toggle="modal"
                                        data-bs-target="#modalAgregar">Agregar</button>
                                </h2>
                            </div>
                            @if (Session::has('mensaje'))
                                <p class="alert alert-success2 col-10 offset-1" align="center">
                                    <strong>{{ Session::get('mensaje') }}</strong>
                                    <button type="button" class="close2" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </p>
                            @endif
                            @if (Session::has('mensaje_error'))
                                <p class="alert alert-danger2 col-10 offset-1" align="center">
                                    <strong>{{ Session::get('mensaje_error') }}</strong>
                                    <button type="button" class="close2" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </p>
                            @endif
                            <table id="table_id" class="display config-table">
                                <thead>
                                    <tr>
                                        <th>Usuario</th>
                                        <th>Nombre</th>
                                        <th>Correo</th>
                                        <th>Perfil</th>
                                        <th>Zonal</th>
                                        <th>Estado</th>
                                        <th>Acciones</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($usuarios as $usuario)
                                        <tr>
                                            <td>{{ $usuario->usuario }}</td>
                                            <td>{{ $usuario->nombre }}</td>
                                            <td>{{ $usuario->email }}</td>
                                            <td>{{ $usuario->perfil['nombre'] }}</td>
                                            <td>{{ $usuario->zonal ? $usuario->zonal['codigo'] ?? 'NO APLICA' : 'NO APLICA' }}
                                            </td>
                                            <td class="text-xs">
                                                @if ($usuario->habilitado == 1)
                                                    <span class="badge badge-sm bg-gradient-success">Habilitado</span>
                                                @else
                                                    <span class="badge badge-sm bg-gradient-secondary">Deshabilitado</span>
                                                @endif
                                            </td>
                                            <td>
                                                <i style="color:orange" title="Editar datos del usuario"
                                                    class='fa fa-edit icon-editar'
                                                    onclick="abrirModalModificar({{ $usuario->id }})"></i>
                                                <i style="color:red" title="Eliminar usuario"
                                                    class='fa fa-xmark icon-eliminar'
                                                    onclick="ejecutarBorrar({{ $usuario->id }})"></i>
                                                <i style="color:rgb(110, 110, 2)" title="Actualizar contraseña"
                                                    class="fa-solid fa-key icon-editar"
                                                    onclick="abrirModalActualizarPassword({{ $usuario->id }})"></i>
                                                @if ($usuario->habilitado == 1)
                                                    <i style="color:red" title="Deshabilitar usuario"
                                                        class="icon-eliminar fa-solid fa-user-slash"
                                                        onclick="ejecutarDeshabilitar({{ $usuario->id }})"></i>
                                                @else
                                                    <i style="color:rgb(5, 122, 44)" title="Habilitar Usuario"
                                                        class="icon-permitir fa-solid fa-user-check"
                                                        onclick="ejecutarHabilitar({{ $usuario->id }})"></i>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>




                        </div>
                    </div>

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


    <!--Modal Agregar Usuario-->
    <div class="modal fade" id="modalAgregar" tabindex="-1" role="dialog" aria-labelledby="modalAgregar"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content col-md-12">


                <div class="modal-header col-md-12">
                    <h5 class="modal-title" id="modalAgregar">
                        Agregar usuario
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </h5>
                </div>

                <div class="modal-body col-md-12">
                    <form id="frmRegistrar" action="usuarios" method="POST" class="row">
                        @csrf
                        <div class="col-md-12">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Nombre</label>
                                <input id="nombre" name="nombre" type="text" class="form-control"
                                    value="{{ old('nombre') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Usuario</label>
                                <input id="usuario" name="usuario" type="text" class="form-control"
                                    value="{{ old('usuario') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Email</label>
                                <input id="email" name="email" type="email" class="form-control"
                                    value="{{ old('email') }}">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Password</label>
                                <input id="password" name="password" type="password" class="form-control col-md-6">
                                <span class="input-group-text passwd" id="togglePassword2" style="right:10px">
                                    <i class="fa fa-eye"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Confirmar Password</label>
                                <input id="password_confirmation" name="password_confirmation" type="password"
                                    class="form-control col-md-6">
                                <span class="input-group-text passwd" id="togglePassword3" style="right:10px">
                                    <i class="fa fa-eye"></i>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label"></label>
                                <select id="perfil_id" name="perfil_id" type="email" class="form-select"
                                    onchange="ocultarZonal()">
                                    <option>Seleccione Perfil</option>
                                    @foreach ($perfiles as $perfil)
                                        <option value="{{ $perfil->id }}">{{ $perfil->nombre }}
                                        </option>
                                    @endforeach

                                </select>
                            </div>
                        </div>
                        <div class="col-md-6" id="zonal_div" name="zonal_div">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label"></label>
                                <select id="zonal_id" name="zonal_id" type="email" class="form-select ">
                                    <option>Seleccione Zonal</option>
                                    @foreach ($zonales as $zonal)
                                        <option value="{{ $zonal->id }}">{{ $zonal->codigo }}
                                            - {{ $zonal->nombre }}
                                        </option>
                                    @endforeach

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

                    </form>

                </div>


                <div class="modal-footer col-md-12">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        aria-label="Close">Cerrar</button>
                    <button type="submit" form="frmRegistrar" class="btn btn-primary">Aceptar</button>
                </div>
            </div>

        </div>
    </div>

    <!--Modal Editar Usuario-->
    <div class="modal fade" id="modalModificar" tabindex="-1" role="dialog" aria-labelledby="modalModificar"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content col-md-12">
                <div class="modal-header col-md-12">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Editar usuario
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </h5>
                </div>
                <div class="modal-body col-md-12">
                    <form id="frmEditar" action="usuarios" method="POST" class="row">
                        @csrf
                        @method('PUT')
                        <input id="id_modificar" name="id_modificar" hidden>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3 is-focused">
                                <label class="form-label">Nombre</label>
                                <input id="nombre_modificar" name="nombre_modificar" type="text"
                                    class="form-control " value="{{ old('nombre_modificar') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3 is-focused">
                                <label class="form-label">Usuario</label>
                                <input id="usuario_modificar" name="usuario_modificar" type="text"
                                    class="form-control " value="{{ old('usuario_modificar') }}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3  is-focused">
                                <label class="form-label">Email</label>
                                <input id="email_modificar" name="email_modificar" type="email" class="form-control"
                                    value="{{ old('email_modificar') }}">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3  is-focused">
                                <label class="form-label"></label>
                                <select id="perfil_id_modificar" name="perfil_id_modificar" type="email"
                                    onchange="ocultarZonal2()" class="form-select">
                                    <option>Seleccione Perfil</option>
                                    @foreach ($perfiles as $perfil)
                                        <option value="{{ $perfil->id }}">{{ $perfil->nombre }}
                                        </option>
                                    @endforeach

                                </select>
                            </div>
                        </div>
                        <div class="col-md-6" id="zonal_div_modificar" name="zonal_div_modificar">
                            <div class="input-group input-group-outline my-3  is-focused">
                                <label class="form-label"></label>
                                <select id="zonal_id_modificar" name="zonal_id_modificar" type="email"
                                    class="form-select ">
                                    <option>Seleccione Zonal</option>
                                    @foreach ($zonales as $zonal)
                                        <option value="{{ $zonal->id }}">{{ $zonal->codigo }}
                                            - {{ $zonal->nombre }}
                                        </option>
                                    @endforeach

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

                    </form>
                </div>
                <div class="modal-footer col-md-12">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        aria-label="Close">Cerrar</button>
                    <button type="submit" form="frmEditar" class="btn btn-primary">Aceptar</button>
                </div>
            </div>
        </div>
    </div>

    <!--Modal Actualizar Password-->
    <div class="modal fade" id="modalActualizarPassword" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content col-md-12">
                <div class="modal-header col-md-12">
                    <h5 class="modal-title" id="exampleModalLabel">
                        Actualizar contraseña
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </h5>
                </div>
                <div class="modal-body col-md-12">
                    <form id="frmActualizar" action="actualizar_password" method="POST" class="row">
                        @csrf
                        @method('put')

                        <input id="id_password" name="id_password" value="{{ old('id_password') }}" hidden="hidden">
                        @if(session('error_modal') == 'password')
                        <label style="font-weight: bold; color: darkred;">
                        {{ $errors->first('password_update') }}
                    </label>

                        @endif
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Password</label>
                                <input id="password_update" name="password_update" type="password"
                                    class="form-control col-md-6">
                                <span class="input-group-text passwd" id="togglePassword4" style="right:10px">
                                    <i class="fa fa-eye"></i>
                                </span>

                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">Confirmar Password</label>
                                <input id="password_update_confirmation" name="password_update_confirmation"
                                    type="password" class="form-control col-md-6">
                                <span class="input-group-text passwd" id="togglePassword5" style="right:10px">
                                    <i class="fa fa-eye"></i>
                                </span>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer col-md-12">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" form="frmActualizar" class="btn btn-primary">Aceptar</button>
                </div>
            </div>
        </div>
    </div>


    <form method="POST" action="usuarios" name="frmBorrar" id="frmBorrar" hidden="hidden">
        @method('delete')
        @csrf
        <input hidden id="id_borrar" name="id_borrar">
    </form>
    <form method="POST" action="deshabilitar_usuario" name="frmDeshabilitar" id="frmDeshabilitar" hidden="hidden">
        @method('put')
        @csrf
        <input hidden id="id_deshabilitar" name="id_deshabilitar">
    </form>
    <form method="POST" action="habilitar_usuario" name="frmHabilitar" id="frmHabilitar" hidden="hidden">
        @method('put')
        @csrf
        <input hidden id="id_habilitar" name="id_habilitar">
    </form>
@endsection

@section('js')

    <!-- datatable-->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <script src="js/config_table.js"></script>

    <script>
        function abrirModalActualizarPassword(id) {
            $('#id_password').val(id);
            $("#modalActualizarPassword").modal('show');

            // $('#frmActualizarPassword').submit();
        }

        function abrirModalModificar(id) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "get",
                dataType: "json",
                url: "buscar_usuario_" + id,
                success: function(resultado) {
                    $('#id_modificar').val(resultado.usuario['id']);
                    $('#nombre_modificar').val(resultado.usuario['nombre']);
                    $('#usuario_modificar').val(resultado.usuario['usuario']);
                    $('#email_modificar').val(resultado.usuario['email']);
                    $('#perfil_id_modificar').val(resultado.usuario['perfil_id']);
                    $('#zonal_id_modificar').val(resultado.usuario['zonal_id']);
                    var zonalDiv = document.getElementById("zonal_div_modificar");
                    if (resultado.usuario['perfil_id'] === 1) {
                        zonalDiv.style.display = "none"; // Ocultar el campo Zonal
                    } else {

                        zonalDiv.style.display = "block"; // Mostrar el campo Zonal
                    }
                    console.log(resultado);
                },
                error: function() {
                    alert("error");
                }
            });
            $('#modalModificar').modal('show');
        }

        function ejecutarBorrar(id) {
            if (confirm(
                    "Al realizar está acción se eliminará de forma permanente la cuenta del usuario, ¿Desea continuar?") ==
                true
            ) {
                $('#id_borrar').val(id);
                $('#frmBorrar').submit();
            }
        }

        function ejecutarDeshabilitar(id) {
            if (confirm("Al realizar está acción el usuario no podrá acceder a su cuenta, ¿Desea continuar?") == true) {
                $('#id_deshabilitar').val(id);
                $('#frmDeshabilitar').submit();
            }
        }

        function ejecutarHabilitar(id) {
            if (confirm("Al realizar está acción el usuario podrá ingresar a su cuenta, ¿Desea continuar?") == true) {
                $('#id_habilitar').val(id);
                $('#frmHabilitar').submit();
            }
        }

        function ocultarZonal() {
            var perfilSelect = document.getElementById("perfil_id");
            var zonalDiv = document.getElementById("zonal_div");

            if (perfilSelect.value === "1") {
                zonalDiv.style.display = "none"; // Ocultar el campo Zonal
            } else {
                zonalDiv.style.display = "block"; // Mostrar el campo Zonal
            }
        }

        function ocultarZonal2() {
            var perfilSelect = document.getElementById("perfil_id_modificar");
            var zonalDiv = document.getElementById("zonal_div_modificar");

            if (perfilSelect.value === "1") {
                zonalDiv.style.display = "none"; // Ocultar el campo Zonal
            } else {
                zonalDiv.style.display = "block"; // Mostrar el campo Zonal
            }
        }
    </script>

    <script>
        $(document).ready(function() {
            $('#table_id').DataTable();

            @if (session('error_modal') == 'agregar')
                $("#modalAgregar").modal('show');
            @endif

            @if (session('error_modal') == 'modificar')
                $("#modalModificar").modal('show');
            @endif

            @if (session('error_modal') == 'password')
                $("#modalActualizarPassword").modal('show');
            @endif

        });

        $('#togglePassword2').click(function() {
            var passwordInput = $('#password');
            var icon = $(this).find('i');

            if (passwordInput.attr('type') === 'password') {
                passwordInput.attr('type', 'text');
                icon.removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                passwordInput.attr('type', 'password');
                icon.removeClass('fa-eye-slash').addClass('fa-eye');
            }
        });

        $('#togglePassword3').click(function() {
            var passwordInput = $('#password_confirmation');
            var icon = $(this).find('i');

            if (passwordInput.attr('type') === 'password') {
                passwordInput.attr('type', 'text');
                icon.removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                passwordInput.attr('type', 'password');
                icon.removeClass('fa-eye-slash').addClass('fa-eye');
            }
        });

        $('#togglePassword4').click(function() {
            var passwordInput = $('#password_update');
            var icon = $(this).find('i');

            if (passwordInput.attr('type') === 'password') {
                passwordInput.attr('type', 'text');
                icon.removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                passwordInput.attr('type', 'password');
                icon.removeClass('fa-eye-slash').addClass('fa-eye');
            }
        });

        $('#togglePassword5').click(function() {
            var passwordInput = $('#password_update_confirmation');
            var icon = $(this).find('i');

            if (passwordInput.attr('type') === 'password') {
                passwordInput.attr('type', 'text');
                icon.removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                passwordInput.attr('type', 'password');
                icon.removeClass('fa-eye-slash').addClass('fa-eye');
            }
        });
    </script>

@endsection