@extends('layouts.app')

@section('title', 'Subir Factura DIAN — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn" x-data="invoiceUploader()">
    
    <div class="page-header" style="margin-bottom: 24px;">
        <div style="display: flex; align-items: center; gap: 10px;">
            <a href="{{ route('invoices.index') }}" class="btn btn-ghost" style="padding: 8px; color: var(--text-muted);"><i class="ph ph-arrow-left" style="font-size: 1.5rem;"></i></a>
            <div>
                <h1 class="page-title" style="margin: 0;">Subir Factura DIAN</h1>
                <p class="text-muted" style="margin-top: 4px; font-size: 0.95rem;">El sistema intentará extraer los datos automáticamente del PDF.</p>
            </div>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 350px; gap: 24px; align-items: start;">
        
        <div class="card-glass">
            <form action="{{ route('invoices.store') }}" method="POST" enctype="multipart/form-data" id="invoiceForm">
                @csrf
                
                <div class="form-group" style="margin-bottom: 20px;">
                    <label class="form-label" style="font-weight: 600;">Paso 1: Sube el PDF de la DIAN *</label>
                    <div style="border: 2px dashed var(--border-color); padding: 30px; text-align: center; border-radius: var(--radius-md); background: rgba(0,0,0,0.02); cursor: pointer; transition: all 0.3s;" 
                         id="dropzone"
                         @click="$refs.fileInput.click()"
                         @dragover.prevent="$el.style.borderColor = 'var(--primary)'; $el.style.background = 'var(--primary-light)'"
                         @dragleave.prevent="$el.style.borderColor = 'var(--border-color)'; $el.style.background = 'rgba(0,0,0,0.02)'"
                         @drop.prevent="handleDrop($event, $el)">
                        
                        <i class="ph ph-upload-simple" style="font-size: 3rem; color: var(--primary); margin-bottom: 10px;"></i>
                        <h3 style="margin-bottom: 5px; color: var(--text-primary);">Arrastra el PDF aquí o haz clic</h3>
                        <p style="color: var(--text-muted); font-size: 0.9rem;" x-text="fileName ? fileName : 'Tamaño máximo: 5MB'"></p>
                        
                        <input type="file" name="file" x-ref="fileInput" accept=".pdf" style="display: none;" @change="handleFileSelect">
                    </div>
                </div>

                <div x-show="isParsing" style="text-align: center; padding: 20px; color: var(--primary); font-weight: 600; display: none;">
                    <i class="ph ph-spinner ph-spin" style="font-size: 2rem; margin-bottom: 10px;"></i><br>
                    Analizando documento y extrayendo datos...
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;" x-show="!isParsing">
                    <div class="form-group" style="grid-column: span 2;">
                        <label class="form-label" style="font-weight: 600;">Cliente / Empresa *</label>
                        <select x-model="formData.client_id" required class="form-control" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                            <option value="">Selecciona el cliente al que pertenece esta factura...</option>
                            <optgroup label="Empresas">
                                @foreach($companies as $company)
                                    <option value="company_{{ $company->id }}">{{ $company->name }}</option>
                                @endforeach
                            </optgroup>
                            <optgroup label="Clientes Particulares">
                                @foreach($customers as $customer)
                                    <option value="customer_{{ $customer->id }}">{{ $customer->name }}</option>
                                @endforeach
                            </optgroup>
                        </select>
                        <input type="hidden" name="company_id" :value="formData.client_id.startsWith('company_') ? formData.client_id.split('_')[1] : ''">
                        <input type="hidden" name="customer_id" :value="formData.client_id.startsWith('customer_') ? formData.client_id.split('_')[1] : ''">
                    </div>

                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600;">Número de Factura *</label>
                        <input type="text" name="document_number" x-model="formData.document_number" required class="form-control" placeholder="Ej: FE-1234" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                    </div>

                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600;">Fecha de Emisión *</label>
                        <input type="date" name="issue_date" x-model="formData.issue_date" required class="form-control" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                    </div>

                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600;">Valor Total *</label>
                        <div style="position: relative;">
                            <span style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted);">$</span>
                            <input type="number" name="total_amount" x-model="formData.total_amount" required min="0" step="0.01" class="form-control" placeholder="0.00" style="width: 100%; padding: 10px 10px 10px 30px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600;">Estado de la Factura *</label>
                        <select name="status" required class="form-control" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                            <option value="Sin Pagar">Sin Pagar (Pendiente)</option>
                            <option value="Pagado">Pagado</option>
                        </select>
                    </div>
                </div>

                <div style="margin-top: 30px; display: flex; justify-content: flex-end;">
                    <button type="submit" class="btn btn-primary" style="padding: 12px 24px; border-radius: 50px; font-weight: 600; font-size: 1.05rem; display: flex; align-items: center; gap: 8px;">
                        <i class="ph ph-floppy-disk"></i> Guardar Factura
                    </button>
                </div>
            </form>
        </div>

        <div class="card-glass" style="background: var(--primary-light);">
            <h3 style="margin-top: 0; color: var(--primary); display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin-bottom: 15px;">
                <i class="ph ph-info"></i> Información
            </h3>
            <p style="font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 15px;">
                El sistema de lectura inteligente ("Parseador") leerá el PDF de la DIAN y llenará los campos automáticamente por ti.
            </p>
            <p style="font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 15px;">
                <strong>Verifica siempre</strong> que los datos extraídos sean correctos antes de guardar, ya que el formato de las facturas puede variar.
            </p>
            <p style="font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 0;">
                Al guardar la factura, estará disponible en el Portal del Cliente para que ellos la descarguen o reporten su pago.
            </p>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('invoiceUploader', () => ({
            fileName: '',
            isParsing: false,
            formData: {
                document_number: '',
                issue_date: '{{ date('Y-m-d') }}',
                total_amount: '',
                client_id: ''
            },

            handleDrop(e, el) {
                el.style.borderColor = 'var(--border-color)';
                el.style.background = 'rgba(0,0,0,0.02)';
                if (e.dataTransfer.files.length > 0) {
                    this.$refs.fileInput.files = e.dataTransfer.files;
                    this.handleFileSelect();
                }
            },

            async handleFileSelect() {
                const file = this.$refs.fileInput.files[0];
                if (!file) return;
                
                if (file.type !== 'application/pdf') {
                    Swal.fire('Error', 'Solo se permiten archivos PDF', 'error');
                    this.$refs.fileInput.value = '';
                    return;
                }

                this.fileName = file.name;
                this.isParsing = true;

                const formData = new FormData();
                formData.append('file', file);
                formData.append('_token', '{{ csrf_token() }}');

                try {
                    const response = await fetch('{{ route('invoices.parse-pdf') }}', {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json'
                        },
                        body: formData
                    });
                    
                    const responseText = await response.text();
                    let result;
                    try {
                        result = JSON.parse(responseText);
                    } catch (e) {
                        console.error('Non-JSON response:', responseText);
                        throw new Error('El servidor devolvió un error inesperado (500). Es posible que falte un componente en el servidor.');
                    }
                    
                    if (!response.ok) {
                        throw new Error(result.message || result.error || 'Error del servidor');
                    }
                    
                    if (result.success && result.data) {
                        let successMsg = 'Datos extraídos correctamente';
                        
                        if (result.data.document_number) this.formData.document_number = result.data.document_number;
                        if (result.data.total_amount) this.formData.total_amount = result.data.total_amount;
                        if (result.data.issue_date) this.formData.issue_date = result.data.issue_date;
                        if (result.data.company_id) {
                            this.formData.client_id = 'company_' + result.data.company_id;
                            successMsg += ' y Empresa asignada';
                        } else if (result.data.customer_id) {
                            this.formData.client_id = 'customer_' + result.data.customer_id;
                            successMsg += ' y Cliente asignado';
                        }
                        
                        if (result.data.already_exists) {
                            Swal.fire({
                                icon: 'warning',
                                title: '¡Factura Duplicada!',
                                text: 'El sistema detectó que la factura N° ' + result.data.document_number + ' ya fue subida previamente. Revisa si es correcto antes de guardar.',
                                confirmButtonColor: '#f59e0b',
                                confirmButtonText: 'Entendido'
                            });
                        } else {
                            Swal.fire({
                                toast: true,
                                position: 'top-end',
                                icon: 'success',
                                title: successMsg,
                                showConfirmButton: false,
                                timer: 3000
                            });
                        }
                    } else {
                        console.error('Parse error:', result);
                        Swal.fire({
                            toast: true,
                            position: 'top-end',
                            icon: 'warning',
                            title: 'No se pudieron leer todos los datos. Por favor llena los campos manualmente.',
                            showConfirmButton: false,
                            timer: 5000
                        });
                    }
                } catch (error) {
                    console.error('Fetch error:', error);
                    Swal.fire('Error', error.message || 'Hubo un problema al leer el PDF. Por favor llena los datos manualmente.', 'error');
                } finally {
                    this.isParsing = false;
                }
            }
        }));
    });
</script>
@endpush
@endsection