{{-- resources/views/livewire/facturacion/nueva-factura.blade.php --}}
<div class="screen" x-data>

    {{-- ── HEADER ──────────────────────────────────── --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;">
        <div>
            <div class="page-title">
                {{ $es_proforma ? '📋 Nueva proforma' : '➕ ' . $this->descripcionTipoDocumento() }}
            </div>
            <div class="page-sub">Comprobante electrónico · API Hacienda v4.4</div>
        </div>

        {{-- Selector de tipo de documento --}}
        <select wire:model.live="tipo_documento"
                style="font-size:13px;padding:9px 16px;border:1.5px solid var(--border);border-radius:50px;
                       background:#fff;color:var(--text);font-family:'Ubuntu',sans-serif;font-weight:600;outline:none;">
            @foreach($tipos_documento as $codigo => $nombre)
                <option value="{{ $codigo }}">{{ $nombre }}</option>
            @endforeach
        </select>
    </div>

    {{-- ── ERROR GLOBAL ────────────────────────────── --}}
    @if($error_formulario)
    <div class="alert alert-red">
        <span style="font-size:16px;flex-shrink:0;">❌</span>
        <span>{{ $error_formulario }}</span>
    </div>
    @endif

    {{-- ── ALERTA REP ──────────────────────────────── --}}
    @if($this->necesitaRep())
    <div class="alert alert-orange">
        <span style="font-size:16px;flex-shrink:0;">⚠️</span>
        <span>Crédito con IVA diferido: se generará un <strong>REP automático</strong>
              al registrar el pago efectivo (Art. 27, Ley IVA 9635).</span>
    </div>
    @endif

    {{-- ── ALERTA DEVOLUCIÓN IVA ───────────────────── --}}
    @if($totales['devolucion_iva_aplica'] && $totales['monto_devolucion_iva'] > 0)
    <div class="alert" style="background:rgba(52,199,89,.08);border:1.5px solid #86EFAC;color:#166534;">
        <span style="font-size:16px;flex-shrink:0;">💳</span>
        <span>Aplica devolución de IVA 4% salud por
              <strong>₡{{ number_format($totales['monto_devolucion_iva'], 2) }}</strong>
              al paciente (Art. 33, Ley 9635).</span>
    </div>
    @endif

    @if(!$totales['devolucion_iva_aplica'] && $totales['iva_4'] > 0)
    <div class="alert alert-orange">
        <span style="font-size:16px;flex-shrink:0;">ℹ️</span>
        <span>IVA 4% salud: el medio de pago seleccionado <strong>no genera devolución</strong>
              al paciente (Art. 33, Ley 9635). Solo aplica con tarjeta débito o crédito.</span>
    </div>
    @endif

    {{-- ── SECCIÓN: RECEPTOR ───────────────────────── --}}
    @if($tipo_documento !== '04')
    <div class="group-label">👤 Receptor</div>
    <div class="inset-card" style="margin-bottom:16px;">
        <div class="card-body" style="padding-top:16px;">

            {{-- Buscador de cliente --}}
            <div class="form-row full" style="position:relative;">
                <div class="field">
                    <label>Cliente · nombre o cédula</label>
                    <div style="display:flex;gap:8px;align-items:center;">
                        <input type="text"
                               wire:model.live.debounce.300ms="busqueda_cliente"
                               wire:keyup="buscarCliente"
                               placeholder="Buscar por nombre, cédula, DIMEX o NITE…"
                               style="flex:1;" />
                        @if($tercero_id)
                        <button wire:click="limpiarCliente" class="btn-plain"
                                style="font-size:12px;padding:7px 12px;white-space:nowrap;">
                            ✕ Cambiar
                        </button>
                        @endif
                    </div>

                    {{-- Dropdown resultados --}}
                    @if(count($resultados_cliente) > 0)
                    <div style="position:absolute;top:100%;left:0;right:0;z-index:50;
                                background:#fff;border-radius:12px;
                                box-shadow:0 8px 30px rgba(0,0,0,0.12);
                                border:1px solid var(--separator);margin-top:4px;overflow:hidden;">
                        @foreach($resultados_cliente as $cliente)
                        <div wire:click="seleccionarCliente({{ $cliente['id'] }})"
                             style="padding:11px 16px;cursor:pointer;border-bottom:.5px solid var(--separator);
                                    display:flex;align-items:center;gap:12px;"
                             onmouseover="this.style.background='#F2F2F7'"
                             onmouseout="this.style.background='#fff'">
                            <div style="width:32px;height:32px;border-radius:50%;
                                        background:var(--blue);display:flex;
                                        align-items:center;justify-content:center;
                                        color:#fff;font-size:12px;font-weight:700;flex-shrink:0;">
                                {{ strtoupper(substr($cliente['nombre'], 0, 1)) }}
                            </div>
                            <div>
                                <div style="font-size:13px;font-weight:600;">{{ $cliente['nombre'] }}</div>
                                <div style="font-size:11px;color:var(--label2);">
                                    {{ $cliente['cedula_numero'] }}
                                    @if($cliente['email']) · {{ $cliente['email'] }} @endif
                                </div>
                            </div>
                        </div>
                        @endforeach
                        <div style="padding:10px 16px;font-size:11px;color:var(--label2);
                                    background:var(--bg);cursor:pointer;text-align:center;"
                             wire:click="$set('mostrar_form_nuevo_cliente', true)">
                            ➕ Crear nuevo cliente
                        </div>
                    </div>
                    @endif
                </div>
            </div>

            {{-- Datos del receptor confirmados --}}
            @if($receptor_nombre)
            <div style="margin-top:12px;background:var(--bg);border-radius:12px;
                        padding:12px 16px;display:flex;gap:16px;flex-wrap:wrap;">
                <div>
                    <div style="font-size:10px;font-weight:600;color:var(--label2);
                                text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;">Cédula</div>
                    <div style="font-size:13px;font-weight:500;">
                        {{ $receptor_cedula_tipo }}-{{ $receptor_cedula }}
                    </div>
                </div>
                <div>
                    <div style="font-size:10px;font-weight:600;color:var(--label2);
                                text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;">Correo</div>
                    <div style="font-size:13px;">{{ $receptor_email ?: '—' }}</div>
                </div>
                @if($receptor_actividad)
                <div>
                    <div style="font-size:10px;font-weight:600;color:var(--label2);
                                text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;">Actividad</div>
                    <div style="font-size:13px;">{{ $receptor_actividad }}</div>
                </div>
                @endif
            </div>
            @endif

            {{-- Cliente nuevo · consulta de cédula en Hacienda --}}
            @if($mostrar_form_nuevo_cliente)
            <div style="margin-top:12px;background:var(--bg);border-radius:12px;padding:14px 16px;">
                <div class="form-row cols3">
                    <div class="field">
                        <label>Tipo</label>
                        <select wire:model="receptor_cedula_tipo">
                            <option value="01">Física</option>
                            <option value="02">Jurídica</option>
                            <option value="03">DIMEX</option>
                            <option value="04">NITE</option>
                        </select>
                    </div>
                    <div class="field">
                        <label>Cédula</label>
                        <div style="display:flex;gap:8px;">
                            <input type="text" wire:model="receptor_cedula" placeholder="Número de identificación" style="flex:1;" />
                            <button wire:click="consultarCedula" class="btn-plain" style="font-size:12px;padding:7px 12px;white-space:nowrap;">
                                🔍 Consultar Hacienda
                            </button>
                        </div>
                    </div>
                    <div class="field">
                        <label>Correo</label>
                        <input type="email" wire:model="receptor_email" placeholder="correo@cliente.com" />
                    </div>
                </div>
                <div class="field" style="margin-top:10px;">
                    <label>Nombre / razón social</label>
                    <input type="text" wire:model="receptor_nombre" placeholder="Se completa al consultar, o ingréselo manualmente" />
                </div>
                @if($consulta_cedula_mensaje)
                <div style="font-size:12px;color:var(--label2);margin-top:8px;">{{ $consulta_cedula_mensaje }}</div>
                @endif
                <div style="margin-top:10px;text-align:right;">
                    <button wire:click="$set('mostrar_form_nuevo_cliente', false)" class="btn-blue" style="font-size:12px;padding:8px 16px;">
                        Usar estos datos
                    </button>
                </div>
            </div>
            @endif

            {{-- Condiciones --}}
            <div class="form-row" style="margin-top:14px;">
                <div class="field">
                    <label>Condición de venta</label>
                    <select wire:model.live="condicion_venta">
                        <option value="01">Contado</option>
                        <option value="02">Crédito</option>
                        <option value="03">Consignación</option>
                        <option value="04">Apartado</option>
                        <option value="05">Arrendamiento con opción de compra</option>
                        <option value="06">Arrendamiento en función financiera</option>
                        <option value="07">Cobro a favor de un tercero</option>
                        <option value="08">Servicios prestados al Estado</option>
                        <option value="09">Pago del servicios prestado al Estado</option>
                    </select>
                </div>

                @if($condicion_venta === '02')
                <div class="field">
                    <label>Plazo de crédito (días)</label>
                    <select wire:model.live="plazo_credito_dias">
                        <option value="15">15 días</option>
                        <option value="30">30 días</option>
                        <option value="45">45 días</option>
                        <option value="60">60 días</option>
                        <option value="90">90 días</option>
                    </select>
                </div>
                @endif

                <div class="field">
                    <label>Medio de pago</label>
                    <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;">
                        @foreach($medios_pago_catalogo as $codigo => $nombre)
                        <label style="display:flex;align-items:center;gap:5px;
                                      background:var(--bg);border-radius:8px;
                                      padding:6px 10px;cursor:pointer;font-size:12px;
                                      {{ in_array($codigo, $medios_pago) ? 'background:rgba(0,122,255,.1);color:var(--blue);font-weight:600;' : '' }}">
                            <input type="checkbox"
                                   wire:model.live="medios_pago"
                                   value="{{ $codigo }}"
                                   style="display:none;" />
                            {{ $nombre }}
                        </label>
                        @endforeach
                    </div>
                </div>

                <div class="field">
                    <label>Bodega de salida</label>
                    <select wire:model="bodega_id">
                        @foreach($bodegas as $bodega)
                        <option value="{{ $bodega->id }}">{{ $bodega->nombre }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- ── SECCIÓN: REFERENCIA (NC/ND/REP) ────────── --}}
    @if($mostrar_referencia)
    <div class="group-label">🔗 Referencia del documento</div>
    <div class="inset-card" style="margin-bottom:16px;">
        <div class="card-body" style="padding-top:16px;">
            <div class="form-row">
                <div class="field">
                    <label>Clave Hacienda del documento original</label>
                    <input type="text" wire:model="referencia_clave"
                           placeholder="50 dígitos…" maxlength="50" />
                </div>
                <div class="field">
                    <label>Razón del ajuste</label>
                    <input type="text" wire:model="referencia_razon"
                           placeholder="Anula documento, error en precio…" />
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- ── SECCIÓN: LÍNEAS DE DETALLE ─────────────── --}}
    <div class="group-label">📝 Líneas de detalle</div>
    <div class="inset-card" style="margin-bottom:16px;">
        <div style="padding:16px 20px 0;display:flex;align-items:center;justify-content:space-between;">
            <span style="font-size:15px;font-weight:600;">Productos y servicios</span>
            <button wire:click="agregarLinea" class="btn-blue" style="font-size:12px;padding:7px 14px;">
                ➕ Agregar línea
            </button>
        </div>

        <div style="overflow-x:auto;margin-top:14px;">
            <table class="ios-table" style="min-width:900px;">
                <thead>
                    <tr>
                        <th style="width:200px;">Producto / CABYS</th>
                        <th>Descripción</th>
                        <th style="width:65px;text-align:right;">Cant.</th>
                        <th style="width:100px;text-align:right;">P. unitario</th>
                        <th style="width:85px;text-align:right;">Descuento</th>
                        <th style="width:75px;text-align:center;">IVA</th>
                        <th style="width:100px;text-align:right;">Total línea</th>
                        <th style="width:32px;"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($lineas as $i => $linea)
                    <tr wire:key="linea-{{ $i }}">
                        {{-- Búsqueda producto/CABYS --}}
                        <td style="position:relative;">
                            <input type="text"
                                   wire:model.live.debounce.300ms="busqueda_cabys_por_linea.{{ $i }}"
                                   wire:keyup="buscarProducto({{ $i }})"
                                   placeholder="Nombre, SKU o CABYS…"
                                   style="width:100%;font-size:12px;" />

                            @if(count($resultados_cabys_por_linea[$i] ?? []) > 0)
                            <div style="position:absolute;top:100%;left:0;z-index:40;
                                        background:#fff;border-radius:10px;min-width:280px;
                                        box-shadow:0 8px 24px rgba(0,0,0,0.12);
                                        border:1px solid var(--separator);margin-top:2px;overflow:hidden;">
                                @foreach($resultados_cabys_por_linea[$i] as $prod)
                                <div wire:click="{{ $prod['id'] ? "seleccionarProducto($i, {$prod['id']})" : "\$set('lineas.$i.cabys_codigo', '{$prod['cabys_codigo']}')" }}"
                                     style="padding:9px 14px;cursor:pointer;border-bottom:.5px solid var(--separator);"
                                     onmouseover="this.style.background='#F2F2F7'"
                                     onmouseout="this.style.background='#fff'">
                                    <div style="font-size:12px;font-weight:600;">{{ $prod['nombre'] }}</div>
                                    <div style="font-size:10px;color:var(--label2);">
                                        CABYS: {{ $prod['cabys_codigo'] }}
                                        · IVA {{ $prod['tarifa_iva'] }}%
                                        @if($prod['precio_venta'] > 0)
                                        · ₡{{ number_format($prod['precio_venta'], 2) }}
                                        @endif
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @endif

                            {{-- Código CABYS capturado --}}
                            @if($linea['cabys_codigo'])
                            <div style="font-size:10px;font-family:'Courier New',monospace;
                                        color:var(--label2);margin-top:3px;">
                                {{ $linea['cabys_codigo'] }}
                            </div>
                            @endif
                        </td>

                        {{-- Descripción --}}
                        <td>
                            <input type="text"
                                   wire:model.live="lineas.{{ $i }}.descripcion"
                                   placeholder="Descripción del servicio o producto"
                                   style="width:100%;font-size:12px;" />

                            {{-- Campos adicionales medicamento --}}
                            @if($linea['es_medicamento'] || $linea['registro_sanitario'])
                            <div style="display:flex;gap:6px;margin-top:4px;">
                                <input type="text"
                                       wire:model.live="lineas.{{ $i }}.registro_sanitario"
                                       placeholder="Reg. sanitario MS-XXXX"
                                       style="flex:1;font-size:10px;" />
                                <input type="text"
                                       wire:model.live="lineas.{{ $i }}.forma_farmaceutica"
                                       placeholder="Forma farmacéutica"
                                       style="flex:1;font-size:10px;" />
                            </div>
                            @endif
                        </td>

                        {{-- Cantidad --}}
                        <td>
                            <input type="number"
                                   wire:model.live="lineas.{{ $i }}.cantidad"
                                   min="0.0001" step="0.0001"
                                   style="width:60px;text-align:right;font-size:12px;" />
                        </td>

                        {{-- Precio unitario --}}
                        <td>
                            <input type="number"
                                   wire:model.live="lineas.{{ $i }}.precio_unitario"
                                   min="0" step="0.01"
                                   style="width:95px;text-align:right;font-size:12px;" />
                        </td>

                        {{-- Descuento --}}
                        <td>
                            <input type="number"
                                   wire:model.live="lineas.{{ $i }}.descuento_monto"
                                   min="0" step="0.01"
                                   style="width:80px;text-align:right;font-size:12px;" />
                        </td>

                        {{-- IVA --}}
                        <td>
                            <select wire:model.live="lineas.{{ $i }}.tarifa_iva"
                                    style="font-size:11px;padding:5px 6px;width:70px;">
                                @foreach($tarifas_iva as $tasa => $etiqueta)
                                <option value="{{ $tasa }}">{{ $tasa }}%</option>
                                @endforeach
                            </select>

                            {{-- Indicador devolución IVA --}}
                            @if($linea['_devolucion_aplica'])
                            <div style="font-size:9px;color:var(--green2);font-weight:600;
                                        margin-top:2px;text-align:center;">💳 Dev.</div>
                            @endif
                        </td>

                        {{-- Total línea --}}
                        <td style="text-align:right;font-weight:700;font-family:'Courier New',monospace;
                                   font-size:12px;">
                            ₡{{ number_format($linea['_total_linea'] ?? 0, 2) }}
                            @if($linea['_monto_iva'] > 0)
                            <div style="font-size:10px;color:var(--label2);font-weight:400;">
                                IVA: ₡{{ number_format($linea['_monto_iva'] ?? 0, 2) }}
                            </div>
                            @endif
                        </td>

                        {{-- Eliminar --}}
                        <td>
                            @if(count($lineas) > 1)
                            <span wire:click="eliminarLinea({{ $i }})"
                                  style="cursor:pointer;font-size:15px;">🗑️</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- ── TOTALES ──────────────────────────────── --}}
        <div style="display:flex;gap:16px;align-items:flex-start;padding:16px 20px 20px;">

            {{-- Notas --}}
            <div style="flex:1;">
                <div style="font-size:11px;font-weight:600;text-transform:uppercase;
                            letter-spacing:.4px;color:var(--label2);margin-bottom:6px;">
                    Notas (opcional)
                </div>
                <textarea wire:model="notas"
                          rows="3"
                          placeholder="Observaciones para el comprobante…"
                          style="width:100%;font-size:13px;padding:10px 12px;
                                 background:var(--bg);border:none;border-radius:10px;
                                 font-family:'Ubuntu',sans-serif;resize:none;outline:none;"></textarea>
            </div>

            {{-- Caja de totales --}}
            <div style="min-width:280px;background:var(--bg);border-radius:16px;padding:16px 18px;">
                @if($totales['base_gravada_13'] > 0)
                <div class="t-row">
                    <span class="t-lbl">Base 13%</span>
                    <span class="t-val">₡{{ number_format($totales['base_gravada_13'], 2) }}</span>
                </div>
                <div class="t-row">
                    <span class="t-lbl">IVA 13%</span>
                    <span class="t-val">₡{{ number_format($totales['iva_13'], 2) }}</span>
                </div>
                @endif

                @if($totales['base_gravada_4'] > 0)
                <div class="t-row">
                    <span class="t-lbl">Base 4% · salud</span>
                    <span class="t-val">₡{{ number_format($totales['base_gravada_4'], 2) }}</span>
                </div>
                <div class="t-row">
                    <span class="t-lbl">IVA 4%</span>
                    <span class="t-val">₡{{ number_format($totales['iva_4'], 2) }}</span>
                </div>
                @if($totales['devolucion_iva_aplica'])
                <div class="t-row" style="color:var(--green2);">
                    <span class="t-lbl">💳 Devolución IVA 4%</span>
                    <span class="t-val">−₡{{ number_format($totales['monto_devolucion_iva'], 2) }}</span>
                </div>
                @endif
                @endif

                @if($totales['base_gravada_2'] > 0)
                <div class="t-row">
                    <span class="t-lbl">IVA 2% · medicamentos</span>
                    <span class="t-val">₡{{ number_format($totales['iva_2'], 2) }}</span>
                </div>
                @endif

                @if($totales['total_descuentos'] > 0)
                <div class="t-row" style="color:var(--red);">
                    <span class="t-lbl">Descuentos</span>
                    <span class="t-val">−₡{{ number_format($totales['total_descuentos'], 2) }}</span>
                </div>
                @endif

                <div class="t-row grand">
                    <span>Total comprobante</span>
                    <span class="t-val">₡{{ number_format($totales['total_comprobante'], 2) }}</span>
                </div>
            </div>
        </div>

        {{-- ── BOTONES ──────────────────────────────── --}}
        <div style="display:flex;gap:10px;justify-content:flex-end;padding:0 20px 20px;">
            <button wire:click="guardarProforma"
                    wire:loading.attr="disabled"
                    class="btn-plain"
                    {{ $enviando ? 'disabled' : '' }}>
                <span wire:loading.remove wire:target="guardarProforma">💾 Guardar proforma</span>
                <span wire:loading wire:target="guardarProforma">Guardando…</span>
            </button>

            <button wire:click="enviarFactura"
                    wire:loading.attr="disabled"
                    class="btn-blue"
                    {{ $enviando ? 'disabled' : '' }}>
                <span wire:loading.remove wire:target="enviarFactura">
                    ✈️ {{ $es_proforma ? 'Guardar proforma' : 'Firmar y enviar a Hacienda' }}
                </span>
                <span wire:loading wire:target="enviarFactura">Enviando…</span>
            </button>
        </div>
    </div>

</div>