@extends('layouts.app', ['activePage' => 'configuracion', 'menuParent' => '', 'titlePage' => ''])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <!-- Formulario Principal -->
        <div class="row">
            <div class="col-lg-8">
                <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-6">
                    <div class="flex items-start justify-between mb-1">
                        <div id="tourHeader">
                            <h4 class="text-2xl uppercase font-semibold text-slate-900">Configuración de Descargas XML</h4>
                            <p class="text-sm text-slate-500">Configura los datos de tu empresa y credenciales FIEL para descargar comprobantes fiscales del SAT.</p>
                        </div>
                    </div>
                    <form id="formConfiguracion" enctype="multipart/form-data" class="space-y-5">

                        <!-- Sección: Datos de la Empresa -->
                        <section id="tourDatosEmpresa" class="bg-gray-25 rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center gap-3 mb-4">
                                <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900"><i class="material-icons">business</i></span>
                                <div>
                                    <h6 class="text-base font-semibold text-slate-900">Datos de la empresa</h6>
                                    <p class="text-sm text-slate-500">Información básica de tu organización.</p>
                                </div>
                            </div>
                            <div class="grid lg:grid-cols-2 gap-3">
                                <div data-intro="Aquí puedes crear un nuevo registro">
                                    <label for="rfc" class="block text-sm font-medium text-gray-700 mb-2">RFC: <span class="text-red-500">*</span></label>
                                    <input type="text" id="rfc" name="rfc" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#0A415F]" placeholder="ej: ABC123456XYZ" required>
                                </div>
                                <div>
                                    <label for="razonSocial" class="block text-sm font-medium text-gray-700 mb-2">Razón social: <span class="text-red-500">*</span></label>
                                    <input type="text" id="razonSocial" name="razon_social" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#0A415F]" placeholder="ej: Mi Empresa S.A. de C.V." required>
                                </div>
                            </div>
                            <div class="grid lg:grid-cols-2 gap-3 mt-3">
                                <div>
                                    <label for="nombreComercial" class="block text-sm font-medium text-gray-700 mb-2">Nombre comercial:</label>
                                    <input type="text" id="nombreComercial" name="nombre_comercial" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#0A415F]" placeholder="ej: Mi Marca">
                                </div>
                                <div>
                                    <label for="logo" class="block text-sm font-medium text-gray-700 mb-2">Logo:</label>
                                    <input type="file" id="logo" name="logo" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#0A415F]" accept="image/*">
                                    <div id="logoPreview" class="hidden mt-2"></div>
                                </div>
                            </div>
                        </section>

                        <!-- Sección: Datos FIEL -->
                        <section id="tourCredencialesFiel" class="bg-gray-25 rounded-lg border border-gray-200 p-3">
                            <div class="flex items-center gap-3 mb-4">
                                <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900"><i class="material-icons">security</i></span>
                                <div>
                                    <h6 class="text-base font-semibold text-slate-900">Credenciales FIEL</h6>
                                    <p class="text-sm text-slate-500">Certificado digital para autenticación en el SAT.</p>
                                </div>
                            </div>
                            <div class="grid lg:grid-cols-1 gap-3">
                                <div>
                                    <label for="cerFiel" class="block text-sm font-medium text-slate-700 mb-2">Certificado (.cer):</label>
                                    <input type="file" id="cerFiel" name="cer_fiel" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#0A415F]" accept=".cer">
                                    <small class="text-gray-500">Archivo de certificado FIEL en formato .cer</small>
                                    <div id="cerFielInfo" class="hidden mt-2"></div>
                                </div>
                            </div>
                            <div class="grid lg:grid-cols-1 gap-3 mt-3">
                                <div>
                                    <label for="llaveFiel" class="block text-sm font-medium text-slate-700 mb-2">Llave privada (.key):</label>
                                    <input type="file" id="llaveFiel" name="llave_fiel" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#0A415F]" accept=".key">
                                    <small class="text-gray-500">Archivo de llave privada FIEL en formato .key</small>
                                    <div id="llaveFielInfo" class="hidden mt-2"></div>
                                </div>
                            </div>
                            <div class="grid lg:grid-cols-1 gap-3 mt-3">
                                <div>
                                    <label for="claveFiel" class="block text-sm font-medium text-slate-700 mb-2">Contraseña FIEL:</label>
                                    <input type="text" id="claveFiel" name="clave_fiel" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#0A415F]" placeholder="Ingresa la contraseña de acceso a tu FIEL">
                                </div>
                            </div>
                        </section>

                        <!-- Botón Guardar -->
                        <div class="flex flex-col items-end pt-2">
                            <button id="tourGuardarConfiguracion" type="button" onclick="guardarConfiguracion()" class="inline-flex items-center gap-3 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                                <span class="spinner-border hidden h-4 w-4 border-2 border-white border-t-transparent rounded-full animate-spin" aria-hidden="true"></span>
                                <span class="btn-text inline-flex items-center gap-2">
                                    <i class="material-icons align-middle text-sm">save</i>
                                    <span class="btn-text-label">Guardar configuración</span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Panel de Ayuda -->
            <div class="col-lg-4">
                <div id="tourPanelAyuda" class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 sticky top-4">
                    <div class="flex items-center gap-2 mb-3">
                        <h6 class="text-base font-semibold text-slate-900"> Información importante</h6>
                    </div>
                    <div class="space-y-3">
                        <div class="flex gap-2 group">
                            <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">1</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Datos requeridos</p>
                                <p class="text-xs text-slate-600 mb-0">RFC y Razón social son obligatorios. El Nombre comercial es opcional pero recomendado.</p>
                            </div>
                        </div>
                        <div class="flex gap-2 group">
                            <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">2</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Archivos FIEL</p>
                                <p class="text-xs text-slate-600 mb-0">Carga tu certificado (.cer) y llave privada (.key) generados por el SAT.</p>
                            </div>
                        </div>
                        <div class="flex gap-2 group">
                            <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">3</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Logo empresa</p>
                                <p class="text-xs text-slate-600 mb-0">Sube una imagen para identificar visualmente tu empresa en los documentos.</p>
                            </div>
                        </div>
                        <div class="flex gap-2 group">
                            <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">4</div>
                            <div>
                                <p class="font-semibold text-sm mb-1">Seguridad</p>
                                <p class="text-xs text-slate-600 mb-0">Tus credenciales FIEL se almacenan de forma segura. No se compartirán con terceros.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
<script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>
<script src="{{ asset('js/tours/manager.js') }}"></script>
<script src="{{ asset('js/tours/config.js') }}"></script>

@push('js')
<script>
    // Cargar configuración actual al cargar la página
    $(document).ready(function() {
        if (window.TourManager) {
            window.TourManager.start('descargaXml');
        }
        cargarConfiguracion();
    });

    function cargarConfiguracion() {
        $.ajax({
            url: "{{ route('configuracion.get-configuracion') }}",
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                if (response.success && response.data) {
                    const data = response.data;
                    $('#rfc').val(data.rfc || '');
                    $('#razonSocial').val(data.razon_social || '');
                    $('#nombreComercial').val(data.nombre_comercial || '');
                    $('#claveFiel').val(data.clave_fiel || '');
                    
                    // Mostrar logo si existe
                    if (data.logoempresa) {
                        const logoPath = '{{ asset("material/img") }}/' + data.logoempresa;
                        $('#logoPreview').html(`<img src="${logoPath}" alt="Logo" class="h-16 rounded border border-gray-300">`).removeClass('hidden');
                    }
                    
                    // Mostrar info de archivos FIEL si existen
                    if (data.cer_fiel) {
                        $('#cerFielInfo').html(`<p class="text-xs text-green-600">✓ Certificado guardado: ${data.cer_fiel}</p>`).removeClass('hidden');
                    }
                    if (data.llave_fiel) {
                        $('#llaveFielInfo').html(`<p class="text-xs text-green-600">✓ Llave privada guardada: ${data.llave_fiel}</p>`).removeClass('hidden');
                    }
                }
            },
            error: function(xhr) {
                console.log('No hay configuración previa o error al cargar');
            }
        });
    }

    function guardarConfiguracion() {
        const rfc = $('#rfc').val().trim();
        const razonSocial = $('#razonSocial').val().trim();
        const $btn = $('button[onclick="guardarConfiguracion()"]');
        const $spinner = $btn.find('.spinner-border');
        const $btnLabel = $btn.find('.btn-text-label');
        const defaultBtnLabel = $btnLabel.text();

        if (!rfc || !razonSocial) {
            Swal.fire({
                icon: 'warning',
                title: 'Campos Requeridos',
                text: 'RFC y Razón Social son obligatorios',
                confirmButtonColor: '#0A415F'
            });
            return;
        }

        const formData = new FormData($('#formConfiguracion')[0]);

        $btn.prop('disabled', true);
        $spinner.removeClass('hidden');
        $btnLabel.text('Guardando...');

        $.ajax({
            url: "{{route('configuracion.save-configuracion')}}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: 'Éxito',
                    text: 'Configuración guardada correctamente',
                    confirmButtonColor: '#0A415F'
                });
            },
            error: function(xhr) {
                const response = xhr.responseJSON;
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response?.message || 'Error al guardar la configuración',
                    confirmButtonColor: '#0A415F'
                });
            },
            complete: function() {
                $btn.prop('disabled', false);
                $spinner.addClass('hidden');
                $btnLabel.text(defaultBtnLabel);
            }
        });
    }
</script>
@endpush