@extends('layouts.menu')

@section('title', 'Usuarios')

@section('contenido')

    <div class="card bg-light shadow-none p-3 mb-5 bg-light rounded">
        <div class="card-header card-header-pr77 mb-3">
            <div class="row justify-content-between">
                <div class="col-8">
                    <div class="row justify-content-between">
                        <div class="col-6">
                            <h2><b>Usuarios</b></h2>
                        </div>
                        <div class="col-6" style=" display: flex; justify-content: center; align-items: center; ">

                        </div>
                    </div>
                </div>
                <div class="col-2" style="display: flex; justify-content: end;">
                    <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal"
                            data-bs-target="#agregar_usuario_modal">
                        <i class="fa-solid fa-user me-1"></i>
                        Agregar
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table id="tabla_listado_usuarios" class="table table-striped compact">
                <thead class="table-dark">
                <tr class="text-center">
                    <th width="5%">ID</th>
                    <th width="20%">Usuario</th>
                    <th width="40%">Email</th>
                    <th width="10%">Rol</th>
                    <th width="30%" class="text-center">Opciones</th>
                </tr>
                </thead>
                <tbody>
                @if(!empty($usuarios))
                    @foreach ($usuarios as $key => $usuario)
                        <tr class="text-center">
                            <td align="center">{{$usuario->id}}</td>
                            <td>{{$usuario->usuario}}</td>
                            <td>{{$usuario->email}}</td>
                            <td>{{$usuario->rol->rol}}</td>
                            <td align="center">
                                <button type="button" class="btn btn-primary btn-sm me-3"
                                        onclick="editarUsuario({{$usuario->id}})">
                                    <i class="fa-solid fa-pen-to-square ms-2"></i>
                                    Editar
                                </button>
                                <button class="btn btn-danger btn-sm" onclick="eliminarUsuario({{$usuario->id}})">
                                    <i class="fa-solid fa-trash ms-1"></i> Eliminar
                                </button>
                            </td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>

        <!-- Modal Agregar Usuario-->
        <div class="modal fade " id="agregar_usuario_modal" tabindex="-1" aria-labelledby="agregar_usuario_modal_label"
             aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content bg-light">
                    <div class="modal-header card-header-pr77 pb-2 pt-4">
                        <h5 class="modal-title" id="agregar_usuario_modal_label" style="font-weight: 700;">
                            Agregar Usuario
                            <i class="fa-solid fa-user"></i>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form enctype="multipart/form-data" method="post" id="formulaario_agregar_usuario" novalidate>
                        @csrf
                        <div class="modal-body">
                            <div class="col-12 mb-2">
                                <label for="">Nombre de usuario</label>
                                <input type="text" name="usuario" id="usuario" class="form-control" required>
                                <div id="message_error_usuario">
                                    <span id='usuario_error'></span>
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <label for="">Email</label>
                                <input type="text" class="form-control" id="email" name="email" required>
                                <div id="message_error_email">
                                    <span id='email_error'></span>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <label for="">Contraseña</label>
                                <input type="password" class="form-control" id="contrasena" name="contrasena" required>
                                <div id="message_error_contrasena">
                                    <span id='contrasena_error'></span>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <label for="">Confirmar Contraseña</label>
                                <input type="password" class="form-control" id="confirmar_contrasena"
                                       name="confirmar_contrasena" required>
                                <div id="message_error_confirmar_contrasena">
                                    <span id='confirmar_contrasena_error'></span>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <label for="">Roles</label>
                                <select class="form-control" name="rol" id="rol" required>
                                    <option value="">Seleccione un rol</option>
                                    @foreach($roles as $rol)
                                        <option value="{{$rol->id}}">{{$rol->rol}}</option>
                                    @endforeach
                                </select>
                                <div id="message_error_rol">
                                    <span id='rol_error'></span>
                                </div>
                            </div>

                            <div class="col-md-12 mb-2">
                                <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                                    <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                                    </symbol>
                                </svg>
                                <div class="alert alert-primary d-flex align-items-center" role="alert">
                                    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img"
                                         aria-label="Info:">
                                        <use xlink:href="#info-fill"/>
                                    </svg>
                                    <div>
                                        En caso de que el usuario sea para un empleado marque la opcion si y seleccion
                                        al empleado
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <label for="empleado_check" class="form-label">Empleado</label>
                                <div class="input-group mb-3">
                                    <div class="form-check checkbox-pr77">
                                        <input class="form-check-input" type="checkbox" value="SI" id="empleado_check"
                                               name="empleado_check">
                                        <label class="form-check-label" for="empleado_check"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2" id="ver_empleados" style="display: none">
                                <label for="">Empleados</label>
                                <select name="empleado" id="empleado" class="form-control">

                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-primary btn-lg" onclick="agregarUsuario()">
                                <i class="fa-solid fa-floppy-disk"></i>
                                Guardar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Modal Editar Usuario-->
        <div class="modal fade " id="editar_usuario_modal" tabindex="-1" aria-labelledby="editar_usuario_modal_label"
             aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content bg-light">
                    <div class="modal-header card-header-pr77 pb-2 pt-4">
                        <h5 class="modal-title" id="editar_usuario_modal_label" style="font-weight: 700;">
                            Editar Usuario
                            <i class="fa-solid fa-user"></i>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form enctype="multipart/form-data" method="post" id="formulario_editar_usuario" novalidate>
                        @csrf
                        <input type="hidden" id="id_usuario_editar">
                        <div class="modal-body">
                            <div class="col-12 mb-2">
                                <label for="">Nombre de usuario</label>
                                <input type="text" name="usuario_editar" id="usuario_editar" class="form-control"
                                       required>
                                <div id="message_error_usuario_editar">
                                    <span id='usuario_editar_error'></span>
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <label for="">Email</label>
                                <input type="text" class="form-control" id="email_editar" name="email_editar" required>
                                <div id="message_error_email_editar">
                                    <span id='email_editar_error'></span>
                                </div>
                            </div>
                            <div class="col-md-12 mb-2">
                                <label for="">Nueva Contraseña</label>
                                <input type="password" class="form-control" id="contrasena_editar"
                                       name="contrasena_editar">
                            </div>
                            <div class="col-md-12 mb-2">
                                <label for="">Confirmar Nueva Contraseña</label>
                                <input type="password" class="form-control" id="confirmar_contrasena_editar"
                                       name="confirmar_contrasena_editar">
                            </div>
                            <div class="col-md-12 mb-2">
                                <label for="">Roles</label>
                                <select class="form-control" name="rol_editar" id="rol_editar" required>

                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-primary btn-lg" onclick="actualizarUsuario()">
                                <i class="fa-solid fa-floppy-disk"></i>
                                Guardar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
@stop

@section('scripts')
    <script>
        const token = document.head.querySelector('meta[name="csrf-token"]');
        $(document).ready(function () {
            CrearTabla('tabla_listado_usuarios');
            $("#empleado").select2({
                dropdownParent: $('#agregar_usuario_modal'),
                theme: "material",
                placeholder: "Buscar Empleado",
                language: {
                    noResults: function () {
                        return "No hay resultados";
                    },
                    searching: function () {
                        return "Buscando...";
                    },
                    errorLoading: function () {
                        return "No se pudieron cargar los resultados.";
                    },
                },
                tags: false,
                ajax: {
                    url: "{{route('personas.empleados')}}",
                    type: "POST",
                    dataType: "json",
                    delay: 250,
                    data: function (params) {
                        return {
                            _token: token.content,
                            search: params.term, // search term
                        };
                    },
                    processResults: function (response) {
                        console.log(response);
                        return {
                            results: response,
                        };
                    },
                    cache: true,
                }
            });
        })
        $('#empleado_check').change(function () {
            if ($(this).prop('checked') == true) {
                $("#ver_empleados").css("display", "block");

            }
            else {
                $("#ver_empleados").css("display", "none");

            }
        });

        function confirmarContrasena() {
            let contrasena = document.getElementById('contrasena').value
            let confirmar_contrasena = document.getElementById('confirmar_contrasena').value
            console.log(contrasena)
            console.log(confirmar_contrasena)
            if (contrasena != '' && confirmar_contrasena != '') {
                if (contrasena == confirmar_contrasena) {
                    message(true, 'success', 1500, 'Las contraseñas coinciden')
                    return true
                } else {
                    message(true, 'warning', 1500, 'Las contraseñas no coinciden')
                    return false
                }
            } else {
                message(true, 'warning', 1500, 'No puede dejar vacios los campos contraseña y confirmar contraseña')
                return false
            }

        }

        function confirmarContrasenaEditar() {
            let contrasena = document.getElementById('contrasena_editar').value
            let confirmar_contrasena = document.getElementById('confirmar_contrasena_editar').value
            console.log(contrasena)
            console.log(confirmar_contrasena)
            if (contrasena === "" && confirmar_contrasena === "") {
                return true
            } else if (contrasena != "" && confirmar_contrasena != "") {
                console.log('no estan vacios')
                if (contrasena == confirmar_contrasena) {
                    console.log('igual')
                    message(true, 'success', 1500, 'Las contraseñas coinciden')
                    return true
                } else {
                    console.log('diferente')
                    return false
                }
            }
        }

        function agregarUsuario() {
            if (confirmarContrasena() === true) {
                $('#Loader').fadeIn();
                //datos = new FormData($('#formulario_contrasena')[0]);
                let datos = new FormData();
                datos.append('usuario', document.getElementById('usuario').value)
                datos.append('email', document.getElementById('email').value)
                datos.append('contrasena', document.getElementById('contrasena').value)
                datos.append('confirmar_contrasena', document.getElementById('confirmar_contrasena').value)
                datos.append('rol', document.getElementById('rol').value)
                datos.append('empleado', document.getElementById('empleado').value)
                fetch("{{route('usuarios.crear')}}", {
                    headers: {
                        "X-CSRF-Token": '{{csrf_token()}}',
                    },
                    method: "post",
                    credentials: "same-origin",
                    body: datos
                }).then(res => res.json())
                    .catch(function (error) {
                        console.log(error.errors)
                    })
                    .then(function (response) {
                        $('#Loader').fadeOut();
                        console.log(response)
                        if (response.status == true) {
                            message(true, 'success', 1500, response.message)
                            setTimeout(function () {
                                location.reload()
                            }, 1500)
                        } else {
                            var errors = response.errors;
                            $.each(errors, function (key, val) {
                                console.log("#" + key + "_error")
                                console.log(val)
                                $("#" + key + "_error").text(val[0]);
                                var elemento = document.getElementById(`${key}`);
                                elemento.className += " is-invalid";
                                var elemento = document.getElementById("message_error_" + key);
                                elemento.className += " invalid-feedback";
                                setTimeout(function () {
                                    $(`#${key}`).removeClass("is-invalid")
                                    $(`#message_error_ + ${key}`).removeClass("invalid-feedback")
                                }, 3000);
                            });
                        }
                    })
            }

        }

        function editarUsuario(id) {
            $('#rol_editar').html("")
            $('#editar_usuario_modal').modal('show')
            fetch(`/infoUsuario/${btoa(id)}`, {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest",
                    "X-CSRF-Token": '{{csrf_token()}}',
                },
                method: "get",
                credentials: "same-origin",
            }).then(res => res.json())
                .catch(function (error) {
                    console.error('Error:', error);
                })
                .then(function (response) {
                    console.log(response)
                    document.getElementById('id_usuario_editar').value = response.info.id
                    document.getElementById('usuario_editar').value = response.info.usuario
                    document.getElementById('email_editar').value = response.info.email
                    let select_editar = document.getElementById('rol_editar');

                    response.roles.forEach(rol => {
                        newOption = document.createElement('option')
                        newOption.value = rol.id
                        newOption.text = rol.rol
                        if (response.info.id_rol == rol.id) {
                            newOption.selected = true
                        }
                        select_editar.appendChild(newOption)
                    })
                })
        }

        function actualizarUsuario() {
            console.log('dwad')
            console.log(confirmarContrasenaEditar())
            if (confirmarContrasenaEditar() === true) {
                $('#Loader').fadeIn();
                //datos = new FormData($('#formulario_contrasena')[0]);
                let datos = new FormData();
                datos.append('id', document.getElementById('id_usuario_editar').value)
                datos.append('usuario', document.getElementById('usuario_editar').value)
                datos.append('email', document.getElementById('email_editar').value)
                datos.append('contrasena', document.getElementById('contrasena_editar').value)
                datos.append('confirmar_contrasena', document.getElementById('confirmar_contrasena_editar').value)
                datos.append('rol', document.getElementById('rol_editar').value)
                fetch("{{route('usuarios.actualizar')}}", {
                    headers: {
                        "X-CSRF-Token": '{{csrf_token()}}',
                    },
                    method: "post",
                    credentials: "same-origin",
                    body: datos
                }).then(res => res.json())
                    .catch(function (error) {
                        console.log(error.errors)
                    })
                    .then(function (response) {
                        $('#Loader').fadeOut();
                        console.log(response)
                        if (response.status == true) {
                            message(true, 'success', 1500, response.message)
                            setTimeout(function () {
                                location.reload()
                            }, 1500)
                        } else {
                            var errors = response.errors;
                            $.each(errors, function (key, val) {
                                console.log("#" + key + "_error")
                                console.log(val)
                                $("#" + key + "_editar" + "_error").text(val[0]);
                                var elemento = document.getElementById(`${key}_editar`);
                                elemento.className += " is-invalid";
                                var elemento = document.getElementById("message_error_" + key + "_editar");
                                elemento.className += " invalid-feedback";
                                setTimeout(function () {
                                    $(`#${key}_editar`).removeClass("is-invalid")
                                    $(`#message_error_ + ${key} +_editar`).removeClass("invalid-feedback")
                                }, 3000);
                            });
                        }
                    })
            }
        }

        function eliminarUsuario(id) {
            Swal.fire({
                title: 'Esta seguro?',
                text: "Este proceso es irreversible!",
                icon: 'warning',
                toast: true,
                showCancelButton: true,
                cancelButtonColor: '#808080',
                confirmButtonColor: '#e62e1b',
                confirmButtonText: 'Si, eliminar!',
                cancelButtonText: 'Cancelar',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#Loader').fadeIn();
                    fetch(`/eliminarUsuario/${btoa(id)}`, {
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json",
                            "X-CSRF-Token": '{{csrf_token()}}',
                        },
                        method: "delete",
                        credentials: "same-origin",
                    }).then(res => res.json())
                        .catch(function (error) {
                            console.log(error)
                        })
                        .then(function (response) {
                            console.log(response)
                            $('#Loader').fadeOut();
                            message(true, 'success', 1500, response.message)
                            setTimeout(function () {
                                location.reload();
                            }, 1500);
                        })

                }
            });
        }
    </script>

@stop