@extends('layouts.app')
@section('title', 'Comprobante ' . $comprobante->numero_completo)
@section('header', $comprobante->tipo_documento_nombre . ' ' . $comprobante->numero_completo)

@section('content')
@php
    $moneda = $empresaGlobal->moneda ?? '$';
    $color = $comprobante->estado_color;
    $esRetencion = $comprobante->tipo_documento === '07';
@endphp

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
    <!-- Lado izquierdo: detalle -->
    <div class="lg:col-span-2 space-y-5">
        <div class="bg-white rounded-2xl shadow-md p-6">
            <div class="flex flex-wrap justify-between items-start gap-3 pb-4 border-b border-slate-200">
                <div>
                    <p class="text-xs text-slate-500 uppercase">{{ $comprobante->tipo_documento_nombre }} electrónica</p>
                    <h2 class="text-2xl font-bold text-slate-800 font-mono">{{ $comprobante->numero_completo }}</h2>
                    <p class="text-sm text-slate-500 mt-1">Emitida el {{ $comprobante->fecha_emision->format('d/m/Y') }} • Ambiente: {{ $comprobante->ambiente_nombre }}</p>
                </div>
                <span class="inline-flex items-center gap-2 px-4 py-2 bg-{{ $color }}-100 text-{{ $color }}-700 rounded-full font-semibold">
                    <span class="w-2 h-2 bg-{{ $color }}-500 rounded-full"></span>
                    {{ str_replace('_', ' ', $comprobante->estado_sri) }}
                </span>
            </div>

            <!-- Emisor / Receptor -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-4">
                <div>
                    <h4 class="text-xs uppercase text-slate-500 font-semibold mb-2"><i class="fas fa-store mr-1"></i>Emisor</h4>
                    <p class="font-bold">{{ $comprobante->emisor_razon_social }}</p>
                    <p class="text-sm text-slate-600">RUC: {{ $comprobante->emisor_ruc }}</p>
                </div>
                <div>
                    <h4 class="text-xs uppercase text-slate-500 font-semibold mb-2"><i class="fas fa-user mr-1"></i>{{ $esRetencion ? 'Sujeto retenido' : 'Receptor' }}</h4>
                    <p class="font-bold">{{ $comprobante->receptor_razon_social }}</p>
                    <p class="text-sm text-slate-600">{{ $comprobante->receptor_tipo_label }}: {{ $comprobante->receptor_identificacion }}</p>
                    @if($comprobante->receptor_direccion)
                        <p class="text-xs text-slate-500">{{ $comprobante->receptor_direccion }}</p>
                    @endif
                </div>
            </div>

            <!-- Documento modificado / sustento -->
            @if($comprobante->num_doc_modificado)
            <div class="mt-4 p-3 bg-orange-50 border-l-4 border-orange-400 rounded">
                <p class="text-sm"><strong>Documento modificado:</strong> Factura {{ $comprobante->num_doc_modificado }}</p>
                <p class="text-sm"><strong>Motivo:</strong> {{ $comprobante->motivo }}</p>
            </div>
            @endif
            @if($esRetencion)
            <div class="mt-4 p-3 bg-teal-50 border-l-4 border-teal-400 rounded text-sm">
                <p><strong>Período fiscal:</strong> {{ $comprobante->periodo_fiscal }}</p>
                <p><strong>Documento de sustento:</strong> {{ $comprobante->doc_sustento_numero }}
                   ({{ $comprobante->doc_sustento_fecha?->format('d/m/Y') }})</p>
            </div>
            @endif

            <!-- Detalles -->
            @if($comprobante->detalles->count())
            <h4 class="font-bold mt-6 mb-3"><i class="fas fa-list mr-1 text-emerald-500"></i>Detalle</h4>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    @if($esRetencion)
                    <thead class="border-b border-slate-200 text-xs uppercase text-slate-500">
                        <tr>
                            <th class="text-left py-2 px-2">Impuesto</th>
                            <th class="text-right py-2 px-2">Base</th>
                            <th class="text-right py-2 px-2">%</th>
                            <th class="text-right py-2 px-2">Retenido</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($comprobante->detalles as $d)
                        <tr class="border-b border-slate-100">
                            <td class="py-2 px-2">{{ \App\Models\ComprobanteDetalle::CODIGOS_RETENCION[$d->ret_codigo] ?? $d->descripcion }}</td>
                            <td class="py-2 px-2 text-right">{{ $moneda }}{{ number_format($d->ret_base_imponible, 2) }}</td>
                            <td class="py-2 px-2 text-right">{{ number_format($d->ret_porcentaje, 2) }}%</td>
                            <td class="py-2 px-2 text-right font-semibold">{{ $moneda }}{{ number_format($d->ret_valor_retenido, 2) }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                    @else
                    <thead class="border-b border-slate-200 text-xs uppercase text-slate-500">
                        <tr>
                            <th class="text-left py-2 px-2">Producto</th>
                            <th class="text-right py-2 px-2">Cant.</th>
                            <th class="text-right py-2 px-2">P. Unit.</th>
                            <th class="text-right py-2 px-2">IVA</th>
                            <th class="text-right py-2 px-2">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($comprobante->detalles as $d)
                        <tr class="border-b border-slate-100">
                            <td class="py-2 px-2">
                                <p class="font-semibold">{{ $d->descripcion }}</p>
                                <p class="text-xs text-slate-400">{{ $d->codigo_principal }}</p>
                            </td>
                            <td class="py-2 px-2 text-right">{{ number_format($d->cantidad, 2) }}</td>
                            <td class="py-2 px-2 text-right">{{ $moneda }}{{ number_format($d->precio_unitario, 4) }}</td>
                            <td class="py-2 px-2 text-right text-xs">{{ number_format($d->impuesto_tarifa, 0) }}%</td>
                            <td class="py-2 px-2 text-right font-semibold">{{ $moneda }}{{ number_format($d->precio_total_sin_impuesto, 2) }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                    @endif
                </table>
            </div>
            @endif

            <!-- Totales -->
            <div class="mt-4 pt-4 border-t border-slate-200 space-y-2 text-right">
                @if($esRetencion)
                    <div class="flex justify-end gap-8 text-2xl pt-2"><span class="font-bold">TOTAL RETENIDO:</span><span class="font-bold w-32 text-teal-600">{{ $moneda }}{{ number_format($comprobante->total_retenido, 2) }}</span></div>
                @else
                    <div class="flex justify-end gap-8 text-sm"><span class="text-slate-600">Subtotal sin impuestos:</span><span class="w-32 font-semibold">{{ $moneda }}{{ number_format($comprobante->total_sin_impuestos, 2) }}</span></div>
                    @if($comprobante->total_descuento > 0)
                        <div class="flex justify-end gap-8 text-sm"><span class="text-slate-600">Descuento:</span><span class="w-32 font-semibold text-red-600">-{{ $moneda }}{{ number_format($comprobante->total_descuento, 2) }}</span></div>
                    @endif
                    <div class="flex justify-end gap-8 text-sm"><span class="text-slate-600">IVA:</span><span class="w-32 font-semibold">{{ $moneda }}{{ number_format($comprobante->total_iva, 2) }}</span></div>
                    <div class="flex justify-end gap-8 text-2xl pt-2 border-t"><span class="font-bold">TOTAL:</span><span class="font-bold w-32 text-emerald-600">{{ $moneda }}{{ number_format($comprobante->importe_total, 2) }}</span></div>
                @endif
            </div>
        </div>

        <!-- Respuesta del SRI -->
        @if(count($comprobante->mensajes))
        <div class="bg-white rounded-2xl shadow-md p-6">
            <h4 class="font-bold mb-3"><i class="fas fa-comment-dots mr-1 text-blue-500"></i>Mensajes del SRI</h4>
            @foreach($comprobante->mensajes as $m)
            <div class="bg-{{ $color }}-50 border-l-4 border-{{ $color }}-500 p-3 rounded mb-2">
                @if(!empty($m['identificador']))
                    <p class="text-xs text-{{ $color }}-600 font-semibold">[{{ $m['identificador'] }}] {{ $m['tipo'] ?? '' }}</p>
                @endif
                <p class="text-sm">{{ $m['mensaje'] ?? '' }}</p>
                @if(!empty($m['informacion']))
                    <p class="text-xs text-slate-500 mt-1">{{ $m['informacion'] }}</p>
                @endif
            </div>
            @endforeach
        </div>
        @endif
    </div>

    <!-- Lado derecho: acciones -->
    <div class="space-y-5">
        <div class="bg-white rounded-2xl shadow-md p-6">
            <h4 class="font-bold mb-3"><i class="fas fa-shield-alt mr-1 text-emerald-500"></i>Acciones SRI</h4>

            @if(in_array($comprobante->estado_sri, ['CREADO', 'FIRMADO', 'DEVUELTA', 'NO_AUTORIZADO', 'EXCEPCION']))
                <form method="POST" action="{{ route('facturacion.enviar', $comprobante->id) }}" class="mb-3">
                    @csrf
                    <button class="w-full bg-emerald-500 hover:bg-emerald-600 text-white py-3 rounded-lg font-bold flex items-center justify-center gap-2">
                        <i class="fas fa-paper-plane"></i> Firmar y enviar al SRI
                    </button>
                </form>
            @endif

            @if($comprobante->estado_sri === 'RECIBIDA')
                <form method="POST" action="{{ route('facturacion.reintentar', $comprobante->id) }}" class="mb-3">
                    @csrf
                    <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-bold flex items-center justify-center gap-2">
                        <i class="fas fa-sync"></i> Consultar autorización
                    </button>
                </form>
            @endif

            <div class="grid grid-cols-2 gap-2 mb-3">
                <a href="{{ route('facturacion.ride', $comprobante->id) }}" target="_blank" class="text-center bg-rose-500 hover:bg-rose-600 text-white py-2.5 rounded-lg font-semibold text-sm">
                    <i class="fas fa-file-pdf mr-1"></i> RIDE A4
                </a>
                <a href="{{ route('facturacion.ticket', $comprobante->id) }}" target="_blank" class="text-center bg-slate-700 hover:bg-slate-800 text-white py-2.5 rounded-lg font-semibold text-sm">
                    <i class="fas fa-receipt mr-1"></i> Ticket 80mm
                </a>
            </div>

            @if($comprobante->xml_path)
                <a href="{{ route('facturacion.xml', $comprobante->id) }}" class="block text-center bg-blue-50 hover:bg-blue-100 text-blue-700 py-2.5 rounded-lg font-semibold text-sm mb-2">
                    <i class="fas fa-file-code mr-1"></i> Descargar XML firmado
                </a>
            @endif

            @if($comprobante->xml_autorizado_path)
                <a href="{{ route('facturacion.xml-autorizado', $comprobante->id) }}" class="block text-center bg-green-50 hover:bg-green-100 text-green-700 py-2.5 rounded-lg font-semibold text-sm mb-2">
                    <i class="fas fa-check-circle mr-1"></i> Descargar XML autorizado
                </a>
            @endif

            @if($comprobante->estado_sri === 'AUTORIZADO' && $comprobante->tipo_documento === '01')
                <button onclick="document.getElementById('modal-nc').classList.remove('hidden')"
                        class="w-full bg-orange-50 hover:bg-orange-100 text-orange-700 py-2.5 rounded-lg font-semibold text-sm mb-2">
                    <i class="fas fa-file-invoice mr-1"></i> Emitir Nota de Crédito
                </button>
                <button onclick="document.getElementById('modal-nd').classList.remove('hidden')"
                        class="w-full bg-purple-50 hover:bg-purple-100 text-purple-700 py-2.5 rounded-lg font-semibold text-sm">
                    <i class="fas fa-file-invoice-dollar mr-1"></i> Emitir Nota de Débito
                </button>
            @endif
        </div>

        <!-- Clave de acceso -->
        @if($comprobante->clave_acceso)
        <div class="bg-white rounded-2xl shadow-md p-6 text-center">
            <h4 class="font-bold mb-3"><i class="fas fa-barcode mr-1 text-slate-700"></i>Clave de acceso</h4>
            <p class="font-mono text-[10px] break-all bg-slate-50 p-2 rounded">{{ $comprobante->clave_acceso }}</p>
        </div>
        @endif

        <!-- Datos técnicos -->
        <div class="bg-white rounded-2xl shadow-md p-6">
            <h4 class="font-bold mb-3"><i class="fas fa-info-circle mr-1 text-purple-500"></i>Datos técnicos</h4>
            <dl class="text-sm space-y-2">
                <div class="flex justify-between"><dt class="text-slate-500">Tipo:</dt><dd class="font-semibold">{{ $comprobante->tipo_documento }} - {{ $comprobante->tipo_documento_nombre }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Estab. - Pto:</dt><dd class="font-mono font-semibold">{{ $comprobante->estab }}-{{ $comprobante->pto_emi }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Secuencial:</dt><dd class="font-mono font-semibold">{{ $comprobante->secuencial }}</dd></div>
                <div class="flex justify-between"><dt class="text-slate-500">Ambiente:</dt><dd class="font-semibold">{{ $comprobante->ambiente_nombre }}</dd></div>
                @if($comprobante->numero_autorizacion)
                    <div><dt class="text-slate-500 text-xs">N° Autorización:</dt><dd class="font-mono text-[10px] break-all bg-slate-50 p-2 rounded mt-1">{{ $comprobante->numero_autorizacion }}</dd></div>
                @endif
                @if($comprobante->fecha_autorizacion)
                    <div class="flex justify-between"><dt class="text-slate-500">Fecha autorización:</dt><dd class="font-semibold">{{ $comprobante->fecha_autorizacion->format('d/m/Y H:i') }}</dd></div>
                @endif
            </dl>
        </div>

        <a href="{{ route('facturacion.index') }}" class="block text-center bg-slate-100 hover:bg-slate-200 py-2.5 rounded-lg text-slate-700 font-semibold">
            <i class="fas fa-arrow-left mr-1"></i> Volver al listado
        </a>
    </div>
</div>

<!-- Modal Nota de Crédito -->
<div id="modal-nc" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6">
        <h3 class="text-xl font-bold mb-3 text-orange-600"><i class="fas fa-file-invoice mr-1"></i>Emitir Nota de Crédito</h3>
        <p class="text-sm text-slate-600 mb-4">Se generará una Nota de Crédito que modifica esta factura.</p>
        <form method="POST" action="{{ route('facturacion.nota-credito', $comprobante->id) }}" class="space-y-3">
            @csrf
            <div>
                <label class="block text-sm font-semibold mb-1">Motivo</label>
                <select name="motivo" class="w-full px-3 py-2 border border-slate-300 rounded-lg">
                    @foreach(\App\Models\ComprobanteElectronico::MOTIVOS_NC as $m)
                        <option value="{{ $m }}">{{ $m }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex gap-2 pt-2">
                <button type="button" onclick="document.getElementById('modal-nc').classList.add('hidden')" class="flex-1 py-2.5 bg-slate-200 rounded-lg">Cancelar</button>
                <button type="submit" class="flex-1 py-2.5 bg-orange-500 text-white rounded-lg font-semibold">Emitir</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal Nota de Débito -->
<div id="modal-nd" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6">
        <h3 class="text-xl font-bold mb-3 text-purple-600"><i class="fas fa-file-invoice-dollar mr-1"></i>Emitir Nota de Débito</h3>
        <p class="text-sm text-slate-600 mb-4">Genera una Nota de Débito por un valor adicional a esta factura.</p>
        <form method="POST" action="{{ route('facturacion.nota-debito', $comprobante->id) }}" class="space-y-3">
            @csrf
            <div>
                <label class="block text-sm font-semibold mb-1">Motivo</label>
                <textarea name="motivo" rows="2" required class="w-full px-3 py-2 border border-slate-300 rounded-lg" placeholder="Ej: Interés por mora"></textarea>
            </div>
            <div>
                <label class="block text-sm font-semibold mb-1">Valor total (IVA incluido)</label>
                <input type="number" step="0.01" min="0.01" name="valor" required class="w-full px-3 py-2 border border-slate-300 rounded-lg" placeholder="0.00">
            </div>
            <div class="flex gap-2 pt-2">
                <button type="button" onclick="document.getElementById('modal-nd').classList.add('hidden')" class="flex-1 py-2.5 bg-slate-200 rounded-lg">Cancelar</button>
                <button type="submit" class="flex-1 py-2.5 bg-purple-500 text-white rounded-lg font-semibold">Emitir</button>
            </div>
        </form>
    </div>
</div>
@endsection