@extends('adminlte::page')

@section('title', $reportConfigId ? 'Editar Configuración de Reporte' : 'Nueva Configuración de Reporte')

@section('content_header')
    <div class="d-flex align-items-center">
        <a href="{{ route('report-configs.index') }}" class="btn btn-sm btn-outline-secondary mr-3" title="Volver a Configuración de Reportes">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h1 x-data="{ title: '{{ $reportConfigId ? 'Editar Configuración' : 'Nueva Configuración' }}' }" x-on:config-loaded.window="title = 'Editar: ' + $event.detail.name">
            <i class="fas fa-file-pdf text-primary"></i> <span x-text="title"></span>
        </h1>
    </div>
@stop

@section('content')
    <div x-data="reportConfigEdit({{ $reportConfigId ?? 'null' }})" x-init="initData()">
        <div x-show="loading" class="text-center py-5">
            <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
            <h5 class="mt-3">Cargando datos...</h5>
        </div>
        
        <div x-show="!loading" style="display: none;">
            {{-- Preview Card --}}
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-eye text-primary mr-2"></i> Vista Previa del PDF</h5>
                    <div>
                        <button type="button" @click="previewActive = !previewActive" class="btn btn-sm btn-outline-secondary mr-2" title="Mostrar/Ocultar Vista Previa">
                            <i class="fas" :class="previewActive ? 'fa-eye-slash' : 'fa-eye'"></i>
                            <span x-text="previewActive ? 'Ocultar' : 'Mostrar'"></span>
                        </button>
                        <button type="button" @click="refreshPreview()" class="btn btn-sm btn-outline-primary" title="Actualizar Vista Previa">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body" x-show="previewActive" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                    <div class="pdf-preview-sheet" :style="previewStyle">
                        {{-- Header --}}
                        <div class="pdf-preview-header" :style="headerStyle">
                            <table class="pdf-preview-header-table" :style="headerStyle">
                                <tr>
                                    <td x-show="form.header_show_logo == 1" class="pdf-preview-logo-cell" valign="middle" width="80">
                                        <div class="pdf-preview-logo">[LOGO]</div>
                                    </td>
                                    <td class="pdf-preview-info-cell" valign="middle">
                                        <div class="pdf-preview-company" x-text="company.business_name"></div>
                                        <div class="pdf-preview-rif" x-show="company.rif"><strong>RIF:</strong> <span x-text="company.rif"></span></div>
                                        <div class="pdf-preview-address" x-show="company.address" x-text="company.address"></div>
                                        <div class="pdf-preview-title" x-show="form.header_title" x-text="form.header_title"></div>
                                    </td>
                                </tr>
                            </table>
                        </div>

                        {{-- Content --}}
                        <div class="pdf-preview-content">
                            <div class="pdf-preview-content-label">[Contenido del Reporte]</div>
                        </div>

                        {{-- Footer --}}
                        <div class="pdf-preview-footer">
                            <table class="pdf-preview-footer-table">
                                <tr>
                                    <td class="pdf-preview-footer-left" width="40%">
                                        <span x-show="form.footer_show_phone == 1 || form.footer_show_email == 1">
                                            <span x-show="form.footer_show_phone == 1" x-text="company.phone_primary"></span>
                                            <span x-show="form.footer_show_phone == 1 && form.footer_show_email == 1"> | </span>
                                            <span x-show="form.footer_show_email == 1" x-text="company.email"></span>
                                        </span>
                                    </td>
                                    <td class="pdf-preview-footer-center" width="30%">
                                        <span x-show="form.footer_show_print_date == 1" x-text="now"></span>
                                        <span x-show="form.footer_show_print_date == 1 && form.footer_text"> | </span>
                                        <span x-show="form.footer_text" x-text="form.footer_text"></span>
                                    </td>
                                    <td class="pdf-preview-footer-right" width="30%">
                                        <span x-show="form.footer_show_control_number == 1"><strong>N° Control:</strong> <span x-text="controlNumber"></span></span>
                                        <span x-show="form.footer_show_control_number == 1 && form.footer_show_page_number == 1"> | </span>
                                        <span x-show="form.footer_show_page_number == 1">Pág. 1 de 1</span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <form @submit.prevent="save()">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0"><i class="fas fa-info-circle text-primary mr-2"></i> Información General</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label>Nombre de la Configuración <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file-signature"></i></span></div>
                                        <input type="text" class="form-control" x-model="form.name" :class="{'is-invalid': errors.name}" autofocus>
                                        <template x-if="errors.name"><div class="invalid-feedback" x-text="errors.name[0]"></div></template>
                                    </div>
                                </div>
                                <div class="mb-3 custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="is_default" x-model="form.is_default">
                                    <label class="custom-control-label" for="is_default">Configuración por Defecto</label>
                                </div>
                                <div class="mb-3">
                                    <label>Formato de Impresión</label>
                                    <select class="form-control" x-model="form.print_format" :class="{'is-invalid': errors.print_format}">
                                        <option value="PDF">PDF</option>
                                        <option value="A4">A4</option>
                                        <option value="Letter">Carta</option>
                                    </select>
                                    <template x-if="errors.print_format"><div class="invalid-feedback" x-text="errors.print_format[0]"></div></template>
                                </div>
                                <div class="mb-3">
                                    <label class="d-block">Tamaño de Fuente: <b x-text="form.font_size + 'pt'"></b></label>
                                    <input type="range" min="6" max="24" x-model.number="form.font_size" class="form-control-range w-100">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0"><i class="fas fa-arrows-alt-v text-primary mr-2"></i> Márgenes</h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label>Margen Superior (mm)</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-arrow-up"></i></span></div>
                                        <input type="number" step="0.1" class="form-control" x-model.number="form.margin_top" :class="{'is-invalid': errors.margin_top}">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label>Margen Inferior (mm)</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-arrow-down"></i></span></div>
                                        <input type="number" step="0.1" class="form-control" x-model.number="form.margin_bottom" :class="{'is-invalid': errors.margin_bottom}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Header --}}
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-header text-primary mr-2"></i> Encabezado (Header)</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label class="d-block">Mostrar Logo
                                    <select x-model="form.header_show_logo" class="form-control">
                                        <option value="1">Sí</option>
                                        <option value="0">No</option>
                                    </select>
                                </label>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="d-block">Alineación
                                    <select x-model="form.header_text_align" class="form-control">
                                        <option value="left">Izquierda</option>
                                        <option value="center">Centro</option>
                                        <option value="right">Derecha</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label>Título del Reporte</label>
                                <input type="text" class="form-control" x-model="form.header_title" :class="{'is-invalid': errors.header_title}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Logo (ruta, opcional)</label>
                                <input type="text" class="form-control" x-model="form.header_logo" :class="{'is-invalid': errors.header_logo}">
                            </div>
                        </div>
                        <div class="alert alert-info" x-show="company.business_name">
                            <small><i class="fas fa-info-circle"></i> Valores de Empresa: <strong x-text="company.business_name"></strong> — <span x-text="company.rif"></span></small>
                        </div>
                    </div>
                </div>

                {{-- Footer --}}
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-ellipsis-h text-primary mr-2"></i> Pie de Página (Footer)</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label class="d-block">Mostrar Teléfono
                                    <select x-model="form.footer_show_phone" class="form-control">
                                        <option value="1">Sí</option>
                                        <option value="0">No</option>
                                    </select>
                                </label>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="d-block">Mostrar Email
                                    <select x-model="form.footer_show_email" class="form-control">
                                        <option value="1">Sí</option>
                                        <option value="0">No</option>
                                    </select>
                                </label>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="d-block">Mostrar Paginación
                                    <select x-model="form.footer_show_page_number" class="form-control">
                                        <option value="1">Sí</option>
                                        <option value="0">No</option>
                                    </select>
                                </label>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="d-block">Mostrar Fecha Impresión
                                    <select x-model="form.footer_show_print_date" class="form-control">
                                        <option value="1">Sí</option>
                                        <option value="0">No</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="d-block">Mostrar N° Control SENIAT
                                    <select x-model="form.footer_show_control_number" class="form-control">
                                        <option value="1">Sí</option>
                                        <option value="0">No</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label>Texto Adicional en Footer</label>
                            <textarea class="form-control" rows="2" x-model="form.footer_text" :class="{'is-invalid': errors.footer_text}"></textarea>
                        </div>
                    </div>
                </div>

                {{-- Control Number SENIAT --}}
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-qrcode text-primary mr-2"></i> Numeración de Control (SENIAT)</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="d-block">Prefijo
                                    <input type="text" x-model="form.control_number_prefix" class="form-control" maxlength="20" :class="{'is-invalid': errors.control_number_prefix}">
                                </label>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="d-block">Reinicio de Secuencia
                                    <select x-model="form.control_number_reset" class="form-control">
                                        <option value="yearly">Anual</option>
                                        <option value="monthly">Mensual</option>
                                        <option value="never">Nunca</option>
                                    </select>
                                </label>
                            </div>
                            <div class="col-md-4 mb-3 d-flex align-items-end">
                                <div class="alert alert-secondary w-100 mb-0">
                                    <small><i class="fas fa-hashtag"></i> Ejemplo: <strong x-text="controlNumber"></strong></small>
                                </div>
                            </div>
                        </div>
                        <div class="alert alert-secondary" x-show="configId">
                            <small><i class="fas fa-hashtag"></i> Último número: <strong x-text="form.control_number_current"></strong></small>
                        </div>
                    </div>
                </div>

                <div class="text-right">
                    <a href="{{ route('report-configs.index') }}" class="btn btn-outline-secondary mr-2">
                        <i class="fas fa-times mr-1"></i> Cancelar
                    </a>
                    <button type="submit" class="btn btn-primary shadow-sm" :disabled="isSaving">
                        <span x-show="!isSaving"><i class="fas fa-save mr-1"></i> Guardar</span>
                        <span x-show="isSaving"><i class="fas fa-spinner fa-spin mr-1"></i> Guardando...</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/premium-ui.css') }}">
    <style>
        .pdf-preview-sheet {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 20px 25px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            font-family: 'DejaVu Sans', 'Arial', sans-serif;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
        }
        .pdf-preview-header { border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 15px; }
        .pdf-preview-header-table { width: 100%; }
        .pdf-preview-logo-cell { width: 80px; }
        .pdf-preview-logo {
            width: 70px; height: 70px; background: linear-gradient(135deg, #e0e0e0, #c0c0c0);
            border-radius: 6px; display: flex; align-items: center; justify-content: center;
            color: #888; font-size: 10pt; font-weight: bold;
        }
        .pdf-preview-company { font-size: 14pt; font-weight: bold; margin: 0; }
        .pdf-preview-rif, .pdf-preview-address { font-size: 9pt; color: #555; margin: 2px 0; }
        .pdf-preview-title { font-size: 10pt; font-weight: bold; margin-top: 4px; }
        .pdf-preview-content {
            min-height: 160px; border: 1px dashed #ddd; border-radius: 4px;
            display: flex; align-items: center; justify-content: center; margin-bottom: 15px; background: #fafafa;
        }
        .pdf-preview-content-label { color: #bbb; font-size: 9pt; }
        .pdf-preview-footer { border-top: 1px solid #999; padding-top: 6px; }
        .pdf-preview-footer-table { width: 100%; font-size: 8pt; color: #666; }
        .pdf-preview-footer-left { text-align: left; }
        .pdf-preview-footer-center { text-align: center; }
        .pdf-preview-footer-right { text-align: right; }
        .form-control-range { height: 6px; cursor: pointer; }
    </style>
@stop

@section('js')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('reportConfigEdit', (configId) => ({
            configId: configId,
            loading: true,
            isSaving: false,
            previewActive: true,
            now: '',
            company: {
                business_name: 'Mi Empresa',
                rif: 'J-00000000-0',
                address: 'Dirección Fiscal',
                phone_primary: '0000-0000000',
                email: 'contacto@empresa.com'
            },
            form: {
                name: '',
                is_default: false,
                print_format: 'PDF',
                font_size: 10,
                margin_top: 10.0,
                margin_bottom: 10.0,
                header_show_logo: 1,
                header_text_align: 'left',
                header_title: '',
                header_logo: '',
                footer_show_phone: 1,
                footer_show_email: 1,
                footer_show_page_number: 1,
                footer_show_print_date: 1,
                footer_show_control_number: 0,
                footer_text: '',
                control_number_prefix: 'NRO-',
                control_number_reset: 'yearly',
                control_number_current: 0
            },
            errors: {},

            get controlNumber() {
                let num = '00000001';
                let prefix = this.form.control_number_prefix || '';
                let d = new Date();
                let year = d.getFullYear();
                let month = (d.getMonth()+1).toString().padStart(2, '0');
                if (this.form.control_number_reset === 'yearly') return prefix + year + '-' + num;
                if (this.form.control_number_reset === 'monthly') return prefix + year + month + '-' + num;
                return prefix + num;
            },

            get headerStyle() {
                let align = this.form.header_text_align || 'left';
                let valid = ['left', 'center', 'right'];
                return { textAlign: valid.includes(align) ? align : 'left' };
            },

            get previewStyle() {
                let fs = Math.max(6, Math.min(24, Number(this.form.font_size) || 10));
                return { fontSize: fs + 'pt' };
            },

            refreshPreview() {
                this.now = new Date().toLocaleString('es-VE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
            },

            async initData() {
                this.refreshPreview();
                try {
                    const companyRes = await axios.get('/api/v1/company');
                    if (companyRes.data && companyRes.data.data) {
                        this.company = companyRes.data.data;
                    }

                    if (this.configId) {
                        const configRes = await axios.get('/api/v1/report-configs/' + this.configId);
                        const data = configRes.data.data;
                        
                        this.$dispatch('config-loaded', { name: data.name });
                        
                        // Map bools to 1/0 for selects
                        data.header_show_logo = data.header_show_logo ? 1 : 0;
                        data.footer_show_phone = data.footer_show_phone ? 1 : 0;
                        data.footer_show_email = data.footer_show_email ? 1 : 0;
                        data.footer_show_page_number = data.footer_show_page_number ? 1 : 0;
                        data.footer_show_print_date = data.footer_show_print_date ? 1 : 0;
                        data.footer_show_control_number = data.footer_show_control_number ? 1 : 0;

                        Object.assign(this.form, data);
                    }
                } catch (error) {
                    console.error("Error al cargar datos:", error);
                    Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudieron cargar los datos.' });
                } finally {
                    this.loading = false;
                }
            },

            async save() {
                this.isSaving = true;
                this.errors = {};
                try {
                    if (this.configId) {
                        await axios.put('/api/v1/report-configs/' + this.configId, this.form);
                    } else {
                        await axios.post('/api/v1/report-configs', this.form);
                    }
                    Swal.fire({
                        icon: 'success', title: '¡Éxito!',
                        text: 'Configuración guardada correctamente.',
                        timer: 2000, showConfirmButton: false
                    }).then(() => {
                        window.location.href = "{{ route('report-configs.index') }}";
                    });
                } catch (error) {
                    if (error.response && error.response.status === 422) {
                        this.errors = error.response.data.errors;
                        Swal.fire({ icon: 'error', title: 'Error de validación', text: 'Revisa los campos del formulario.' });
                    } else if (error.response && error.response.data && error.response.data.message) {
                        Swal.fire({ icon: 'error', title: 'Error', text: error.response.data.message });
                    } else {
                        Swal.fire({ icon: 'error', title: 'Error', text: 'Ocurrió un error al guardar.' });
                    }
                } finally {
                    this.isSaving = false;
                }
            }
        }));
    });
</script>
@stop