@extends('fragments.fullTemplate')
@section('titulo')
    Documentación Legal
@endsection
@section('contenido')
    @php
        use App\Constants\Api;
        $baseUrl = Api::BASE_URL;
    @endphp
    <div class="ui big breadcrumb">
        <div class="section">Catálogos</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Documentación Legal</div>
    </div>
    <div class="ui divider"></div>
    <div data-module-notifications-anchor></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">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>

    {{-- @if ($permisos->crear == 1) --}}
    <div class="ui grid">
        <div class="sixteen wide column">
            <a class="ui button fluid primary" data-toggle="modal" data-target="#modalDocumento" onclick="resetModalDocumento()"><i class="add alternate icon"></i> Nuevo documento</a>
        </div>
    </div>

    {{-- @endif --}}
    <div class="ui divider"></div>
    <div class="sx-autorender">
        <div class="sx-scroll-x">
            <table id="tablaDocumentos" class="ui celled table unstackable">
                <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>Documento</th>
                        <th>Descripción</th>
                        <th>Documento</th>
                        <th>Activo</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade" id="modalDocumento" tabindex="-1">
        <div class="modal-dialog">
            <form id="formDocumento" class="modal-content">

                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Nuevo Documento</h5>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="documento_id">
                    <input type="hidden" id="accion_template" value="descargar">

                    <fieldset class="border p-3 rounded">
                        <legend class="w-auto px-2">Datos del documento</legend>

                        {{-- ESTATUS --}}
                        <div class="form-group">
                            <label>Estatus</label>
                            <select class="form-control" id="active">
                                <option value="1">Activo</option>
                                <option value="0">Inactivo</option>
                            </select>
                        </div>

                        {{-- NOMBRE DOCUMENTO --}}
                        <div class="form-group">
                            <label>Documento</label>
                            <input type="text" class="form-control" id="nombre_documento" required>
                        </div>

                        {{-- DESCRIPCIÓN --}}
                        <div class="form-group mt-3">
                            <label>Descripción</label>
                            <input type="text" class="form-control" id="descripcion_documento">
                        </div>

                        {{-- TEMPLATE SOLO NUEVO --}}
                        <div class="form-group" id="contenedorTemplateNuevo">
                            <label>Template del documento</label>
                            <input type="file"
                                class="form-control"
                                id="template_nuevo"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp">
                            <small class="text-muted">Al seleccionar el archivo se detecta automáticamente la extensión.</small>
                        </div>

                        {{-- EXTENSIÓN DETECTADA (AUTOMÁTICA) --}}
                        <div class="form-group mt-3" id="contenedorExtension">
                            <label>Extensión detectada</label>
                            <input type="text"
                                class="form-control"
                                id="extensiones"
                                readonly
                                placeholder="(Se llenará al seleccionar el archivo)">
                        </div>

                        <div class="form-check mt-2">
                            <input class="form-check-input" type="checkbox" id="sin_template">
                            <label class="form-check-label" for="sin_template">
                                Este documento NO lleva template (por seguridad)
                            </label>
                        </div>
                        <small class="text-muted d-block">
                        Si activas esta opción, podrás guardar el registro sin subir archivo.
                        </small>
                        <br>

                        {{-- CHECKBOX --}}
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="requerido">
                            <label class="form-check-label">Documento requerido</label>
                        </div>

                        {{-- SECCIÓN TEMPLATE SOLO EDICIÓN --}}
                        <div id="seccionTemplateEdicion" style="display:none">

                            <div class="form-group mt-3">
                                <label>Template</label><br>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input"
                                        type="radio"
                                        name="template_action"
                                        id="radioDescargar"
                                        value="descargar"
                                        checked>
                                    <label class="form-check-label">Descargar template</label>
                                </div>

                                <div class="form-check form-check-inline">
                                    <input class="form-check-input"
                                        type="radio"
                                        name="template_action"
                                        id="radioActualizar"
                                        value="actualizar">
                                    <label class="form-check-label">Actualizar template</label>
                                </div>
                            </div>

                            <div id="contenedorDescarga" class="mb-3">
                                <a href="#"
                                id="btnDescargarTemplate"
                                class="btn btn-primary btn-block">
                                    <i class="download icon"></i> Descargar template del documento
                                </a>
                            </div>

                        </div>

                        {{-- INPUT FILE ACTUALIZAR --}}
                        <div id="contenedorUpload" class="form-group" style="display:none">
                            <label>Nuevo template</label>
                            <input type="file"
                                class="form-control"
                                id="template_actualizar"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.webp">
                            <small class="text-muted">Al seleccionar el archivo se actualizará la extensión detectada.</small>
                        </div>

                    </fieldset>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-primary">Guardar</button>
                </div>

            </form>
        </div>
    </div>
    <script>
        /** =========================================================
         *  CONFIG
         * ========================================================= */
        const DOCS_BASE = @json(url('documentoslegales'));
        const EXT_PERMITIDAS = ['pdf','doc','docx','xls','xlsx','jpg','jpeg','png','gif','webp'];

        function isEditing() {
            return ($('#documento_id').val() || '').toString().trim() !== '';
        }

        /** =========================================================
         *  Detectar extensión automáticamente y mostrarla en #extensiones
         * ========================================================= */
        function detectarYMostrarExtension(fileInput) {
            const file = fileInput.files && fileInput.files[0] ? fileInput.files[0] : null;

            if (!file) {
                $('#extensiones').val('');
                return null;
            }

            const ext = file.name.split('.').pop().toLowerCase();

            if (!EXT_PERMITIDAS.includes(ext)) {
                showAlert(`Extensión no permitida. Permitidas: ${EXT_PERMITIDAS.join(', ')}`, 'warning');
                fileInput.value = '';
                $('#extensiones').val('');
                return null;
            }

            $('#extensiones').val(ext);
            return ext;
        }

        /** =========================================================
         *  Checkbox: guardar SIN template
         * ========================================================= */
        $(document).on('change', '#sin_template', function () {
            const checked = $(this).is(':checked');

            if (checked) {
                // Limpia archivos y extensión
                $('#template_nuevo').val('');
                $('#template_actualizar').val('');
                $('#extensiones').val('');

                // Oculta inputs de template y extensión
                $('#contenedorTemplateNuevo').hide();
                $('#contenedorExtension').hide();

                // En edición, bloquea upload
                $('#contenedorUpload').hide();
                $('#accion_template').val('descargar');
                $('#radioDescargar').prop('checked', true);
            } else {
                // Si se desmarca, mostrar extensión
                $('#contenedorExtension').show();

                if (isEditing()) {
                    // ✅ En edición: NUNCA mostrar template_nuevo
                    $('#contenedorTemplateNuevo').hide();

                    // Forzar actualización para que el usuario suba en el input correcto
                    $('#radioActualizar').prop('checked', true).trigger('change');
                    $('#contenedorUpload').show();
                } else {
                    // En nuevo: sí mostrar input de template nuevo
                    $('#contenedorTemplateNuevo').show();
                }
            }
        });

        /** =========================================================
         *  Cambio de archivos (nuevo / actualizar)
         * ========================================================= */
        $(document).on('change', '#template_nuevo', function () {
            // Si está marcado sin_template, no permitir
            if ($('#sin_template').is(':checked')) {
                showAlert('Este documento está marcado como "sin template". Desmarca para subir archivo.', 'warning');
                $(this).val('');
                return;
            }

            // ✅ En edición NO se usa template_nuevo
            if (isEditing()) {
                showAlert('En edición, sube el archivo en "Actualizar template".', 'warning');
                $(this).val('');
                return;
            }

            detectarYMostrarExtension(this);
        });

        $(document).on('change', '#template_actualizar', function () {
            if ($('#sin_template').is(':checked')) {
                showAlert('Este documento está marcado como "sin template". Desmarca para subir archivo.', 'warning');
                $(this).val('');
                return;
            }
            detectarYMostrarExtension(this);
        });

        /** =========================================================
         *  Reset modal
         * ========================================================= */
        window.resetModalDocumento = function resetModalDocumento() {
            $('#formDocumento')[0].reset();
            $('#documento_id').val('');
            $('#modalDocumento .modal-title').text('Nuevo Documento');

            $('#active').val('1');
            $('#requerido').prop('checked', false);

            $('#sin_template').prop('checked', false);

            $('#extensiones').val('');
            $('#template_nuevo').val('');
            $('#template_actualizar').val('');

            // Mostrar inputs por defecto en NUEVO
            $('#contenedorTemplateNuevo').show();
            $('#contenedorExtension').show();

            $('#seccionTemplateEdicion').hide();
            $('#radioDescargar').prop('checked', true);
            $('#contenedorDescarga').hide();
            $('#contenedorUpload').hide();
            $('#accion_template').val('descargar');
        };

        $('#modalDocumento').on('hidden.bs.modal', function () {
            window.resetModalDocumento();
        });

        /** =========================================================
         *  Radios template action
         * ========================================================= */
        $(document).on('change', 'input[name="template_action"]', function () {
            const accion = $(this).val();
            $('#accion_template').val(accion);

            if (accion === 'descargar') {
                $('#contenedorUpload').hide();
                $('#template_actualizar').val('');
            } else {
                if ($('#sin_template').is(':checked')) {
                    showAlert('El documento está marcado como "sin template". Desmarca para actualizar template.', 'warning');
                    $('#radioDescargar').prop('checked', true);
                    $('#accion_template').val('descargar');
                    $('#contenedorUpload').hide();
                    return;
                }
                $('#contenedorUpload').show();
            }
        });

        /** =========================================================
         *  DataTable + CRUD
         * ========================================================= */
        $(function () {

            const tabla = $('#tablaDocumentos').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("documentos.data") }}',
                columns: [
                    { data: 'id', name: 'id', visible: false },
                    { data: 'document', name: 'Documento', visible: false },
                    { data: 'description', name: 'Descripcion', visible: false },
                    { data: 'informacion', name: 'Informacion', orderable: false, searchable: false },
                    { data: 'active_html', name: 'Activo', orderable: false, searchable: false, width: '70px' },
                    { data: 'acciones', name: 'Acciones', orderable: false, searchable: false, width: '100px' }
                ],
                language: TableConfigEspanol,
            });

            $('#tablaDocumentos').on('change', '.toggle-active', async function () {
                const check = this;
                const id = $(this).data('id');

                const confirmado = await showConfirmModal(
                    `¿Seguro que deseas ${check.checked ? 'activar' : 'desactivar'} este documento?`
                );

                if (!confirmado) {
                    check.checked = !check.checked;
                    return;
                }

                showLoader();
                $.ajax({
                    url: `${DOCS_BASE}/active`,
                    method: 'POST',
                    data: {
                        id: id,
                        active: check.checked ? 1 : 0,
                        _token: '{{ csrf_token() }}',
                    },
                    success: function (response) {
                        showAlert(response.message || 'Estatus actualizado', 'success');
                        hideLoader();
                        $('#tablaDocumentos').DataTable().ajax.reload(null, false);
                    },
                    error: function () {
                        hideLoader();
                        showAlert('No se pudo actualizar el estatus', 'error');
                        check.checked = !check.checked;
                        $('#tablaDocumentos').DataTable().ajax.reload(null, false);
                    }
                });
            });

            /** =========================
             *  Guardar / Actualizar
             * ========================= */
            $('#formDocumento').submit(function (e) {
                e.preventDefault();

                const id = $('#documento_id').val();
                const url = id ? `${DOCS_BASE}/${id}` : `${DOCS_BASE}`;
                const sinTemplate = $('#sin_template').is(':checked');

                let archivoNuevo = $('#template_nuevo')[0].files[0];
                let archivoActualizar = $('#template_actualizar')[0].files[0];

                // CREATE: permitir sin template
                if (!id && !archivoNuevo && !sinTemplate) {
                    showAlert('Debes seleccionar un template o marcar "sin template".', 'warning');
                    return;
                }

                // UPDATE: si actualizar, requiere archivoActualizar
                if (id && $('#accion_template').val() === 'actualizar') {
                    if (sinTemplate) {
                        showAlert('Desmarca "sin template" para poder actualizar el archivo.', 'warning');
                        return;
                    }
                    if (!archivoActualizar) {
                        showAlert('Selecciona el nuevo template para actualizar.', 'warning');
                        return;
                    }
                }

                // Si hay archivo, detecta extensión
                if (!id && archivoNuevo) {
                    if (!detectarYMostrarExtension($('#template_nuevo')[0])) return;
                }
                if (id && archivoActualizar) {
                    if (!detectarYMostrarExtension($('#template_actualizar')[0])) return;
                }

                // Extensión detectada
                let extensionDetectada = ($('#extensiones').val() || '').trim().toLowerCase();

                // Si hay archivo, debe existir extensión
                if ((archivoNuevo || archivoActualizar) && !extensionDetectada) {
                    showAlert('No se detectó la extensión del documento.', 'warning');
                    return;
                }

                // Si sin template, limpiar extensión
                if (sinTemplate) extensionDetectada = '';

                const formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                if (id) formData.append('_method', 'PUT');

                formData.append('document', $('#nombre_documento').val());
                formData.append('description', $('#descripcion_documento').val());
                formData.append('active', $('#active').val());
                formData.append('requerido', $('#requerido').is(':checked') ? 1 : 0);

                // solo como indicador para backend si lo llegas a usar
                formData.append('sin_template', sinTemplate ? 1 : 0);

                // extensión única (o vacío)
                formData.append('extensiones', extensionDetectada);

                // Adjuntar archivo correcto
                if (!id && archivoNuevo && !sinTemplate) {
                    formData.append('template', archivoNuevo);
                }
                if (id && $('#accion_template').val() === 'actualizar' && archivoActualizar && !sinTemplate) {
                    formData.append('template', archivoActualizar);
                }

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        $('#modalDocumento').modal('hide');
                        showAlert(response.message || 'Guardado correctamente', 'success');
                        tabla.ajax.reload(null, false);
                    },
                    error: function (xhr) {
                        console.log('ERROR:', xhr.responseJSON);
                        let msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Error al guardar';
                        showAlert(msg, 'error');
                    }
                });
            });

            /** =========================
             *  Editar
             * ========================= */
            $('#tablaDocumentos').on('click', '.editar', function () {
                const fila = tabla.row($(this).parents('tr')).data();
                const id = fila.id;

                window.resetModalDocumento();

                showLoader();
                $.ajax({
                    url: `${DOCS_BASE}/${id}`,
                    type: 'GET',
                    success: function (doc) {
                        hideLoader();

                        $('#documento_id').val(doc.id);
                        $('#nombre_documento').val(doc.document);
                        $('#descripcion_documento').val(doc.description);

                        $('#active').val(String(doc.active ?? 1));
                        $('#requerido').prop('checked', doc.requerido == 1);

                        // ✅ En edición siempre ocultar template_nuevo
                        $('#contenedorTemplateNuevo').hide();
                        $('#seccionTemplateEdicion').show();

                        // Si NO hay template_path => sin_template
                        const noTieneTemplate = !doc.template_path;
                        $('#sin_template').prop('checked', noTieneTemplate).trigger('change');

                        $('#extensiones').val((doc.extensiones || '').toString().toLowerCase());

                        if (doc.template_path) {
                            $('#btnDescargarTemplate').off('click').on('click', function (e) {
                                e.preventDefault();
                                window.location.href = `${DOCS_BASE}/download/${doc.id}`;
                            });
                            $('#contenedorDescarga').show();
                        } else {
                            $('#contenedorDescarga').hide();
                        }

                        $('#radioDescargar').prop('checked', true).trigger('change');

                        $('#modalDocumento .modal-title').text('Editar Documento');
                        $('#modalDocumento').modal('show');
                    },
                    error: function () {
                        hideLoader();
                        showAlert('No se pudo cargar el documento', 'error');
                    }
                });
            });
            // Eliminar
            $('#tablaDocumentos').on('click', '.eliminar', async function(){
                let id = $(this).data('id');
                let fila = tabla.row($(this).parents('tr')).data();
                let confirm = await showConfirmModal(`¿Desea eliminar este documento '${fila.document}'?`);
                if(confirm){
                    showLoader();
                    $.ajax({
                        url: `{{$baseUrl}}/documentoslegales/${id}`,
                        type: 'DELETE',
                        data: {_token: '{{ csrf_token() }}'},
                        success: function(response){
                            hideLoader();
                            showAlert(response.message,'success');
                            tabla.ajax.reload();
                        },
                        error: function (xhr, status, error) {
                            hideLoader();
                        }
                    });
                }
            });
        });

    </script>
@endsection