@extends('fragments.fullTemplate')
@php
    $id_usuario = session('id_usuario');
    if (! session('id_usuario')) {
            header('location: /');
            die();
    }
    use App\Constants\Api;
    $baseUrl = Api::BASE_URL;
@endphp
@section('contenido')
    <div class="ui big breadcrumb">
        <div class="section">Sistema</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Usuarios</div>
    </div>

    <div class="ui divider"></div>

    <div data-module-notifications-anchor></div>
    @include('fragments.navs', [
    "navs" => [
        [
            "active" => 1,
            "url" => "usuarios",
            "name" => "Usuarios"
        ],
        [
            "active" => 0,
            "url" => "areas",
            "name" => "Áreas"
        ]

    ]
    ])

    <div class="ui divider"></div>
    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if (session()->has('success'))
                <div class="alert alert-success text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('success') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if (session()->has('warning'))
                <div class="alert alert-warning text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('warning') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if (session()->has('error'))
                <div class="alert alert-danger text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('error') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if (count($errors) > 0)
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>
    @include('Requisicion_compra.Notificacion.notificacion_requisicion_modal')
    @include('Control_documentos.Notificacion.notificacion_documento_version')
    @include('Modificaciones.notificacion_modificacion')
    @include('Modificaciones.Notificacion.notificacion_modificacion_firma_modal')
	@if ($permisos->crear == 1 || $permisos->gerente == 1)
    <button class="ui button fluid primary create_modal_usuario">
        <i class="plus icon"></i> Nuevo usuario(a)
    </button>    
	@endif
    <div class="ui divider"></div>

    <div class="sx-autorender">
        <div class="sx-scroll-x">
            <table id="lang-dt" class="ui celled table unstackable">
                <thead>
                    <tr>
                        <th>Nombre de usuario</th>
                        <th>Nombre y apellidos</th>
                        <th>Correo electrónico</th>
                        <th>Área y rol</th>
                        <th class="collapsing">Activo</th>
                        <th class="collapsing">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @if($usuarios->count())
                    @foreach ($usuarios as $usuario)
                        @php
                        $nombreUsuario = $usuario->usuario;
                        $nombre = $usuario->nombre;
                        $apellidos = $usuario->apellidos;
                        $email = $usuario->email;
                        $id_tipo_usuario = $usuario->id_tipo_usuario;
                        @endphp
                        <tr>
                            <td>{{ $nombreUsuario }}</td>
                            <td>{{ $nombre }} {{ $apellidos }}</td>
                            <td>{{ $email }}</td>
                            <td>{{ $usuario->rol->tipo_usuario }}</td>
                            <td>
                                @if ($permisos->actualizar == 1)
                                <div class="m-0 p-0">
                                    <input class="" type="checkbox" value="" id="flexCheckDefault" onchange="activateUser(this,{{$usuario->id_usuario}})" {{($usuario->activo == 1) ? 'checked' : ''}}><span> {{($usuario->activo == 1) ? 'Si' : 'No'}} </span>
                                </div>
                                @else
                                    {{($usuario->activo == 1) ? 'Si' : 'No'}}
                                @endif
                            </td>
                            <td>
                                <div class="ui tiny icon buttons">
                                    @if ($permisos->actualizar == 1 || $permisos->gerente == 1)
                                        <!-- Editar -->                                    
                                        <a class="ui button green edit" 
                                        title="Modifica" 
                                        id="usuario{{$usuario->id_usuario}}"
                                        
                                        data-id_usuario="{{$usuario->id_usuario}}">
                                            <i class="pencil alternate icon"></i>
                                        </a>
                                        <button class="ui button blue" onclick='openModalPassword(@json($usuario))'>
                                            <i class="key alternate icon"></i>
                                        </button>
                                    @endif
                                    @if ($usuario->id_usuario != $id_usuario)
                                        @if ($permisos->eliminar == 1 || $permisos->gerente == 1)
                                            <button class="ui button red eliminarUsuario" data-id_usuario="{{$usuario->id_usuario}}" data-nombre_completo="{{$nombre." ".$apellidos}}">
                                                <i class="trash alternate icon"></i>
                                            </button>
                                        @endif  
                                    @endif
                                    
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="8">No se encontraron registros</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            {{-- $usuarios->links("pagination::bootstrap-4") --}}
        </div>
    </div>
    @include('Usuarios.create_modal')
    <script>
        $(document).on('click','.create_modal_usuario',function(){
            $('#create_user_form')[0].reset();
            $('#create_modal').modal('show'); 
        });
    </script>
    @include('Usuarios.modify_modal')
    <script>
        var resultData = {};
        $(document).ready(function(){
            $('a.edit').on('click', function(){
                showLoader();
                idUsuario = $(this).attr('id');
                id_usuario = $('#'+idUsuario).data('id_usuario');
                $.ajax({
                    url:"show_usuarios",
                    method:"POST",
                    data:{'id_usuario': id_usuario, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        hideLoader();
                        result = JSON.parse(response); 
                        resultData = result.data;
                        $('#modify_modal').modal('show');
                    },
                    error:function(xhr, status, error){
                        hideLoader();
                    }
                });

                $('.principal').click(function (e) { 
                    //e.preventDefault();
                    val = $(this).val();
                    if ($(this).prop('checked')) {
                        // Selecciona cada input que tenga la clase .checar
                        $('.apagar_'+val).prop('checked', true);
                    } else {
                        // Deselecciona cada input que tenga la clase .checar
                        $('.apagar_'+val).prop('checked', false);
                    }
                });
        
            });
        });
        
        $('#modify_modal').on('show.bs.modal', function () {
            
            $('#create_user_form')[0].reset();
            $('#modify_user_form')[0].reset();
            $('#modify_user_form').validate().resetForm();
            $('.invalid-feedback').remove();
            $('.is-invalid').removeClass('is-invalid');

            $("#modal-form-modify :input").each(function(){
                
                input = $(this).attr('id'); // This is the jquery object of the input, do what you will
                if(input in resultData['usuario']){
                    if (input != "firma_digital") {
                        $('#modal-form-modify #'+input).val(resultData['usuario'][input]);
                     
                    }
                    
                }
            });

            
            if ('firma_digital' in resultData['usuario'] && resultData['usuario']['firma_digital'] != null) {
                //html +=
                //$('#table_firma_digitalizada').html(html);
                html = "";
                html += "<table class='ui celled table unstackable'>";
                html += "<thead>";
                html += "<tr>";
                html += "<th class='collapsing'>Imagen</th>";
                html += "<th>Nombre</th>";
                html += "<th class='collapsing'>Acciones</th>";
                html += "</tr>";
                html += "</thead>";
                html += "<tbody>";

                    asset_storage = "/"+resultData['usuario']['firma_digital'];
                    html += "<tr>";
                        html += "<td><img class='img-thumbnail' src='{{asset('storage/archivos_usuario/')}}"+asset_storage+"' alt='Firma_digital_usuario_"+resultData['usuario']['id_usuario']+"'></td>";
                        html += "<td>"+resultData['usuario']['firma_digital']+"</td>";
                        html += "<td>";
                        html += "<div class='ui tiny icon buttons'>"; 
                        html += "<a class='ui button red eliminarFirma' id='"+resultData['usuario']['id_usuario']+"' data-nombre_firma='"+resultData['usuario']['firma_digital']+"'>";
                        html += "<i class='trash alternate icon'></i>";
                        html += "</a>";
                        html += "</div>";
                        html += "</td>";                                
                        html += "</tr>";

                html += "</tbody>";
                html += "</table>";
                html += "<br>";
                $('#datos_firma_digitalizada').html(html);    
            }else{
                html = "";
                html += "<div class='form-group row'>";
                html += "<label for='firma_digital' class='col-sm-3 col-form-label text-left'>Firma digitalizada</label>";
                html += "<div class='col-sm-9'>";
                html += "<div class='custom-file'>";
                html += "<input type='file' class='custom-file-input' id='firma_digital' name='firma_digital'>";
                html += "<label class='custom-file-label' for='firma_digital'>Elegir archivo</label>";
                html += "</div></div></div>";   

                $('#datos_firma_digitalizada').html(html);                            
            } 
        });
    </script>
    @include('Usuarios.delete_modal')
    <script>
        $(document).on('click','.eliminarUsuario',function(){
            var id_usuario=$(this).attr('data-id_usuario');
            var nombre_completo=$(this).attr('data-nombre_completo');
           
            $('#id_usr').val(id_usuario);
            $('#nombre_usr').html(nombre_completo);

            $('#delete_usuario_mod').modal('show'); 
        });
    </script>
    @include('Usuarios.delete_firma_modal')
    @include('Usuarios.modal_change_password')
    <script>
        $(document).on('click','.eliminarFirma',function(){
            var id_usuario=$(this).attr('id');
            var nombre_firma=$(this).attr('data-nombre_firma');
           
            $('#id_usr_firma_delete').val(id_usuario);
            $('#nombre_firma_usr').html(nombre_firma);

            $('#delete_firma_mod').modal('show');
        });
        async function activateUser(check, id) {
            const confirmado = await showConfirmModal(`¿Seguro que deseas ${check.checked ? 'activar' : 'desactivar'} este registro?`);
            if (confirmado) {
                showLoader();
                $.ajax({
                    url: "{{$baseUrl}}/usuario/active",
                    method: "POST",
                    data: {
                        'id': id,
                        'active': check.checked ? 1 : 2,
                        '_token': _token = $('input[name="_token"]').val()
                    },
                    success: function (response) {
                        showAlert(response.message,'success');
                        if(response.success){
                            hideLoader();
                            window.location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        hideLoader();
                        window.location.reload();
                    }
                });
            }else{
                check.checked = !check.checked;
            }
        }

        // funciones para cambio de contraseña y generación
        async function openModalPassword(usuario){
            try {
                // llenamos los campos del usuario
                $('#modal_change_password #id_usuario').val(usuario.id_usuario);
                $('#modal_change_password #id_usuario').prop('disabled', true);
                $('#modal_change_password #nombre').val(`${usuario.nombre} ${usuario.apellidos}`);
                $('#modal_change_password #nombre').prop('disabled', true);
                $('#modal_change_password #usuario').val(`${usuario.usuario}`);
                $('#modal_change_password #usuario').prop('disabled', true);
                $('#modal_change_password #email').val(usuario.email);
                $('#modal_change_password #email').prop('disabled', true);
                // generamos una contraseña
                password = generarContrasena();
                $('#modal_change_password #contra').val(password);
                $('#modal_change_password').modal('show');
            } catch (error) {
                console.log(error);
            }
        }
        // función del ocultar / mostrar contraseña
        $('#modal_change_password #togglePassword').on('click', function() {
            const input = $('#modal_change_password #contra');
            const icon = $(this).find('i');
            const type = input.attr('type') === 'password' ? 'text' : 'password';
            input.attr('type', type);
            // Cambia el icono según el tipo
            if (type === 'password') {
                icon.removeClass('eye slash').addClass('eye');
            } else {
                icon.removeClass('eye').addClass('eye slash');
            }
        });
        // función para copiar la contraseña
        $('#modal_change_password #copyPassword').on('click', function() {
            const passwordInput = $('#modal_change_password #contra');
            const passwordValue = passwordInput.val();
            navigator.clipboard.writeText(passwordValue).then(() => {
                $('#modal_change_password #copyPassword').html('Copiado(a) <i class="check icon"></i>');
                setTimeout(() => {
                    $('#modal_change_password #copyPassword').html('Copiar <i class="copy icon"></i>');
                },3000);
            }).catch(err => {
                console.error('Error al copiar la contraseña:', err);
            });
        });
        // función para generar una contraseña aleatoria
        $('#modal_change_password #generatePassword').on('click', function() {
            const newPassword = generarContrasena();
            $('#modal_change_password #contra').val(newPassword);
        });
        // funcion que se conecta al servicio para cambiar la contraseña
        async function changePassword() {
            let isValid = $('#form_change_password').valid();
            if(!isValid){
                return;
            }
            const confirmado = await showConfirmModal(`¿Seguro que deseas actualizar la contraseña de este usuario?`);
            if (confirmado) {
                showLoader();
                let datos = {
                    '_token': $('#form_change_password input[name="_token"]').val(),
                    'id_usuario': $('#form_change_password #id_usuario').val(),
                    'contra': $('#form_change_password #contra').val()
                };
                $.ajax({
                    url: "{{ url('/usuario/change/password') }}",
                    method: "POST",
                    data: datos,
                    success: function (response) {
                        showAlert(response.message,'success');
                        if(response.success){
                            hideLoader();
                            $('#modal_change_password').modal('hide');
                            // window.location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        hideLoader();
                        $('#modal_change_password').modal('hide');
                        // window.location.reload();
                    }
                });
            }else{
            }
        }

    </script>
    <script src="{{ url('assets/js/users/index.js') }}"></script>
@endsection