@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)
@section('plugins.inputmask', true)

@section('title', 'Editar Firma | Guiñez Ingeniería')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="card card-aspen">
                    <div class="card-header">
                        <h3 class="card-title">Editar Firma </h3>
                    </div>

                    <form id="formularioDeUsuario" method="POST" action="{{ route('usuario.update-firma', $usuario) }}" enctype="multipart/form-data">
                        @csrf
                        @method('put')

                        <div class="card-body">
                            <div class="contenedor-dos-campos-por-fila">
                                <div class="form-group">
                                    <label for="nombre">Nombre</label>
                                    <input type="text" class="form-control" name="name" value="{{ old('name', $usuario->name) }}" disabled="true">
                                </div>
    
                                <div class="form-group">
                                    <label for="correo">Correo</label>
                                    <input type="text" class="form-control" name="email" value="{{ old('email', $usuario->email) }}" disabled="true">
                                </div>
    
                                <div class="form-group">
                                    <label for="telefono">Teléfono</label>
                                    <input type="text" class="form-control" name="telefono" value="{{ old('telefono', $usuario->telefono) }}" disabled="true">
                                </div>
    
                                @isset($usuario->empresa)
                                    <div class="form-group">
                                        <label for="id_empresa">Empresa</label>
                                        <input type="text" class="form-control" name="id_empresa" value="{{ old('id_empresa', $usuario->empresa->nombre) }}" disabled="true">
                                    </div>
                                @endisset
                            </div>

                            <div class="signature-section mb-2">
                                <div class="signature-container">
                                    <div class="signature-title">FIRMA DEL USUARIO</div>
                                    <div class="signature-img">
                                        @if (isset($usuario->firma))
                                            <img src="{{asset('storage/firma/'.$usuario->id.'/'.$usuario->firma)}}" alt="Firma del usuario">
                                        @else
                                            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNTAiIGhlaWdodD0iMTUwIiB2aWV3Qm94PSIwIDAgMjUwIDE1MCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjI1MCIgaGVpZ2h0PSIxNTAiIGZpbGw9IiNmNWY1ZjUiLz48cGF0aCBkPSJNNDAgNjBDNTAgNDUgODAgMzAgMTAwIDQwQzEyMCA1MCAxMzAgODAgMTEwIDEwMEM5MCAxMjAgNjAgMTMwIDQwIDExMEMyMCA5MCAzMCA2NSA0MCA2MFoiIGZpbGw9IiNlMWUxZTEiLz48dGV4dCB4PSI3MCIgeT0iODAiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxOCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IiM5OTk5OTkiPlNpbiBGaXJtYTwvdGV4dD48L3N2Zz4=" alt="Firma del usuario">
                                        @endif
                                    </div>
                                    <p>Firma autorizada para el control topografico</p>
                                </div>
                            </div>

                            <div class="form-group" id="contenedorDeLosCamposDeTipoArchivo">
                                <label>Seleccionar Archivos</label>
                                <input type="file" class="form-control-file" id="campoFirma" name="firma" accept="image/png, image/jpeg, image/jpg" onchange="guardarArchivo(this)">
                            </div>
                            @if ($errors->any())
                                @error('firma')
                                    <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            @endif

                            <div class="dt-responsive table-responsive mt-3">
                                <table class="table table-striped table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-archivo-firma">
                                    <thead>
                                        <tr role="row">
                                            <th>Acción</th>
                                            <th>Archivo</th>
                                            <th>Tipo</th>
                                        </tr>
                                    </thead>
                                    <tbody id="registrosDeArchivos">
                                        <tr id="archivosNoDisponibleEnLaTabla">
                                            <td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class=" card-footer">
                            <button type="button" onclick="EnviarCamposParaProcesarlo()"class="btn btn-aspen" id="botonDeEdicion"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Firma </button>
                            <a href="{{ route('usuario.index') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalVisualizarArchivo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <form>
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #007bff; color:white;">
                        <h5 class="modal-title" id="modalTituloVisualizarArchivo"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="modalContenidoModalVisualizarArchivo" style="text-align: center;">

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/generico.css') }}">
    <style>
        .signature-section {
            flex: 1;
            min-width: 300px;
            background: #f9f9f9;
            padding: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .signature-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            width: 100%;
            max-width: 300px;
            text-align: center;
        }
        
        .signature-title {
            font-weight: 600;
            color: #2575fc;
            margin-bottom: 15px;
        }
        
        .signature-img {
            width: 100%;
            height: 150px;
            background: #f1f1f1;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px dashed #ccc;
            border-radius: 5px;
            margin-bottom: 15px;
            overflow: hidden;
        }
        
        .signature-img img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
@stop

@section('js')
    <script src="{{ asset('js/generico.js') }}"></script>

    <script>
        function obtenerAccionesDelArchivoGuardado(extensionDelArchivo, base64, archivo) {
            if (
                extensionDelArchivo.toLowerCase() == "png" ||
                extensionDelArchivo.toLowerCase() == "jpeg" ||
                extensionDelArchivo.toLowerCase() == "gif" ||
                extensionDelArchivo.toLowerCase() == "jpg" ||
                extensionDelArchivo.toLowerCase() == "bmp"
            ) {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarArchivo(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp3" ||
                extensionDelArchivo.toLowerCase() == "wav" ||
                extensionDelArchivo.toLowerCase() == "wma" ||
                extensionDelArchivo.toLowerCase() == "ogg"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "zip" ||
                extensionDelArchivo.toLowerCase() == "rar" ||
                extensionDelArchivo.toLowerCase() == "tgz" ||
                extensionDelArchivo.toLowerCase() == "tar"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "pdf") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarArchivo(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "xlsx" ||
                extensionDelArchivo.toLowerCase() == "xls"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "pptx" ||
                extensionDelArchivo.toLowerCase() == "ppt"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "docx" ||
                extensionDelArchivo.toLowerCase() == "doc"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (extensionDelArchivo.toLowerCase() == "txt") {
                accionesDelArchivo =
                    '<a class="dropdown-item" href="#" onclick="visualizarArchivo(\'' + base64 + '\',\'' + extensionDelArchivo + '\',\'' + archivo.files[0].name + '\')"><i class="fas fa-eye" aria-hidden="true"></i> Visualizar Archivo</a>' +
                    '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else if (
                extensionDelArchivo.toLowerCase() == "mp4" ||
                extensionDelArchivo.toLowerCase() == "webm" ||
                extensionDelArchivo.toLowerCase() == "avi" ||
                extensionDelArchivo.toLowerCase() == "asf" ||
                extensionDelArchivo.toLowerCase() == "dvd" ||
                extensionDelArchivo.toLowerCase() == "m1v" ||
                extensionDelArchivo.toLowerCase() == "movie" ||
                extensionDelArchivo.toLowerCase() == "mpeg" ||
                extensionDelArchivo.toLowerCase() == "wn" ||
                extensionDelArchivo.toLowerCase() == "wmv"
            ) {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            } else {
                accionesDelArchivo = '<a class="dropdown-item" href="#" onclick="eliminarArchivo(this.parentElement.parentElement.parentElement.parentElement,\'' + archivo.id + '\')"><i class="fas fa-trash" aria-hidden="true"></i> Eliminar Archivo</a>';
            }

            return accionesDelArchivo;
        }

        function eliminarArchivo(registro, archivo) {
            document.getElementById(archivo).remove();
            registro.remove();

            document.getElementById("contenedorDeLosCamposDeTipoArchivo").innerHTML=
            `<label>Seleccionar Archivos</label>
            <input type="file" class="form-control-file" id="campoFirma" name="firma" accept="image/png, image/jpeg, image/jpg" onchange="guardarArchivo(this)">`;
            document.getElementById("contenedorDeLosCamposDeTipoArchivo").style.display = "block";

            let filasDeArchivos = document.getElementById('tabla-archivo-firma').tBodies[0].querySelectorAll("tr");
            if (filasDeArchivos.length == 0) {
                document.getElementById("registrosDeArchivos").innerHTML =
                    '<tr id="archivosNoDisponibleEnLaTabla">' +
                    '<td colspan="4" class="text-center">No hay archivos disponibles en la tabla</td>' +
                    '</tr>';
            }
        }

        function visualizarArchivo(archivo, tipo, nombreArchivo) {
            if (tipo.toLowerCase() == "png" ||
                tipo.toLowerCase() == "jpeg" ||
                tipo.toLowerCase() == "gif" ||
                tipo.toLowerCase() == "jpg" ||
                tipo.toLowerCase() == "bmp") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<img src="' + archivo + '" style="max-width: 100%;">';
            } else if (tipo.toLowerCase() == "pdf") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + archivo + '" style="width:95%; height:600px;"></iframe>';
            } else if (tipo.toLowerCase() == "txt") {
                document.getElementById("modalContenidoModalVisualizarArchivo").innerHTML =
                    '<iframe src="' + archivo + '" style="width:95%; height:600px;"></iframe>';
            }
            document.getElementById("modalTituloVisualizarArchivo").innerHTML = nombreArchivo;
            $("#modalVisualizarArchivo").modal("show");
        }

        function guardarArchivo(archivo) {
            let nombreArchivo = archivo.files[0].name;
            let extensionDelArchivo = nombreArchivo.split('.');
            extensionDelArchivo = extensionDelArchivo[extensionDelArchivo.length - 1];

            if (document.getElementById("archivosNoDisponibleEnLaTabla")) {
                document.getElementById("archivosNoDisponibleEnLaTabla").remove();
            }

            let reader = new FileReader();
            reader.readAsDataURL(archivo.files[0]);
            reader.onload = function() {
                let base64 = reader.result;
                accionesDelArchivo = obtenerAccionesDelArchivoGuardado(extensionDelArchivo, base64, archivo);
                NombreDeLaExtensionDelArchivo = obtenerNombreDelTipoArchivo(extensionDelArchivo);
                estiloCss = obtenerEstiloDelTipoArchivo(extensionDelArchivo);

                document.getElementById("registrosDeArchivos").innerHTML +=
                    '<tr>' +
                    '<td>' +
                    '<div class="btn-group ">' +
                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
                    'Acciones' +
                    '</button>' +
                    '<div class="dropdown-menu">' +
                    accionesDelArchivo +
                    '</div>' +
                    '</div>' +
                    '</td>' +
                    '<td class="' + estiloCss + '">' + nombreArchivo + '</td>' +
                    '<td>' + NombreDeLaExtensionDelArchivo + '</td>' +
                    '</tr>';

                document.getElementById("contenedorDeLosCamposDeTipoArchivo").style.display = "none";
            };
            reader.onerror = function(error) {

            };
        }
    </script>

    <script>
        function EnviarCamposParaProcesarlo() {
            document.getElementById("botonDeEdicion").setAttribute("disabled", true);
            document.getElementById("preloader").removeAttribute("style");
            document.getElementById("img-preloader").style.display = "block";
            document.getElementById("formularioDeUsuario").submit();
        }
    </script>

    @if (session('alerta') != null)
        <script>
            Swal.fire({
                icon: 'success',
                title: '¡Firma Editada!',
                text: '{{ session('alerta') }}',
                confirmButtonColor: "#448aff",
                confirmButtonText: "Confirmar"
            })
        </script>
    @endif
@stop