@extends('layouts.admin')

@section('content')
    <div class="row mb-3 align-items-center">
        <div class="col-md-8">
            <h1 class="m-0 font-weight-bold text-dark" style="font-size: 1.8rem;">
                <i class="bi bi-file-earmark-plus text-primary mr-2"></i> Emitir Factura Electrónica
            </h1>
            <p class="text-muted mb-0">Emisión de comprobante tributario válido ante el Servicio de Rentas Internas (SRI)</p>
        </div>
        <div class="col-md-4 text-md-right mt-3 mt-md-0">
            <a href="{{ route('admin.facturas.index') }}" class="btn btn-outline-secondary shadow-sm">
                <i class="fas fa-arrow-left mr-1"></i> Volver al Listado
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show shadow-sm" role="alert">
            <h6 class="font-weight-bold"><i class="fas fa-exclamation-circle mr-2"></i> Por favor verifique los siguientes errores:</h6>
            <ul class="mb-0 pl-3">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <form action="{{ route('admin.facturas.store') }}" method="POST" id="facturaForm">
        @csrf

        @if($pagoSeleccionado)
            <input type="hidden" name="pago_id" value="{{ $pagoSeleccionado->id }}">
        @endif

        <!-- TARJETA 1: ENCABEZADO TRIBUTARIO Y SERIE -->
        <div class="card card-outline card-primary shadow-sm mb-4">
            <div class="card-header py-3 bg-light">
                <div class="row align-items-center">
                    <div class="col-md-7">
                        <h5 class="card-title font-weight-bold text-dark m-0">
                            <i class="fas fa-landmark text-primary mr-2"></i> Datos de Emisión y Punto de Venta
                        </h5>
                    </div>
                    <div class="col-md-5 text-md-right">
                        @if($config->ambiente == '1')
                            <span class="badge badge-warning px-3 py-2 text-dark font-weight-bold shadow-xs">
                                <i class="fas fa-vial mr-1"></i> AMBIENTE SRI: PRUEBAS
                            </span>
                        @else
                            <span class="badge badge-success px-3 py-2 font-weight-bold shadow-xs">
                                <i class="fas fa-shield-alt mr-1"></i> AMBIENTE SRI: PRODUCCIÓN
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="font-weight-bold text-muted small text-uppercase">Punto de Emisión / Caja: <span class="text-danger">*</span></label>
                            <select name="punto_emision_id" id="punto_emision_id" class="form-control select2bs4" required onchange="actualizarNumeroFactura()">
                                @foreach($puntos as $punto)
                                    <option value="{{ $punto->id }}" 
                                            data-serie="{{ $punto->serie_completa }}" 
                                            data-secuencial="{{ $punto->getProximoSecuencialFormateado() }}"
                                            data-numero="{{ $punto->proximo_numero_factura }}"
                                            {{ (old('punto_emision_id', $puntoPrincipal->id ?? '') == $punto->id) ? 'selected' : '' }}>
                                        {{ $punto->serie_completa }} - {{ $punto->nombre }} (Siguiente: {{ $punto->getProximoSecuencialFormateado() }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="font-weight-bold text-muted small text-uppercase">Secuencial Factura SRI:</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light font-weight-bold"><i class="fas fa-hashtag text-primary"></i></span>
                                </div>
                                <input type="text" id="displayNumeroFactura" class="form-control font-weight-bold bg-white text-primary" style="font-size: 1.1rem; letter-spacing: 1px;" value="{{ $proximoNumero }}" readonly>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="font-weight-bold text-muted small text-uppercase">Fecha de Emisión: <span class="text-danger">*</span></label>
                            <input type="date" name="fecha_emision" id="fecha_emision" class="form-control font-weight-bold" value="{{ old('fecha_emision', date('Y-m-d')) }}" required>
                        </div>
                    </div>
                </div>

                <!-- Info rápida del emisor -->
                <div class="p-3 mt-2 rounded border bg-light d-flex flex-wrap justify-content-between align-items-center text-muted small">
                    <div><b>Emisor:</b> {{ $config->razon_social }}</div>
                    <div><b>RUC:</b> {{ $config->ruc }}</div>
                    <div><b>Obligado a Contabilidad:</b> {{ $config->obligado_contabilidad }}</div>
                    <div><b>Régimen:</b> {{ str_replace('_', ' ', $config->regimen) }}</div>
                    <div><b>IVA Configurado:</b> <span class="badge badge-primary px-2 py-1 font-weight-bold">{{ number_format($config->iva_porcentaje, 2) }}%</span></div>
                </div>
            </div>
        </div>

        <!-- TARJETA 2: DATOS DEL RECEPTOR / CLIENTE / PACIENTE -->
        <div class="card card-outline card-info shadow-sm mb-4">
            <div class="card-header py-3 bg-light d-flex justify-content-between align-items-center">
                <h5 class="card-title font-weight-bold text-dark m-0">
                    <i class="fas fa-user-tag text-info mr-2"></i> Datos del Comprador / Paciente
                </h5>
                <div>
                    <button type="button" class="btn btn-outline-primary btn-sm font-weight-bold mr-1" onclick="cargarConsumidorFinal()">
                        <i class="fas fa-users mr-1"></i> Consumidor Final
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="limpiarCliente()">
                        <i class="fas fa-eraser mr-1"></i> Limpiar
                    </button>
                </div>
            </div>

            <div class="card-body">
                <!-- Selector rápido de pacientes existentes -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        <label class="font-weight-bold text-muted small text-uppercase">Seleccionar Paciente Registrado (Opcional para autocompletar):</label>
                        <select id="select_paciente_registrado" class="form-control" onchange="seleccionarPaciente(this)">
                            <option value="">-- Buscar paciente registrado en el sistema --</option>
                            @foreach($pacientes as $p)
                                <option value="{{ $p->id }}"
                                        data-nombres="{{ $p->nombres }} {{ $p->apellidos }}"
                                        data-cedula="{{ $p->cedula }}"
                                        data-email="{{ $p->email }}"
                                        data-telefono="{{ $p->telefono }}"
                                        data-direccion="{{ $p->direccion }}"
                                        {{ ($pacienteSeleccionado && $pacienteSeleccionado->id == $p->id) ? 'selected' : '' }}>
                                    {{ $p->apellidos }} {{ $p->nombres }} - Cédula: {{ $p->cedula }}
                                </option>
                            @endforeach
                        </select>
                        <input type="hidden" name="paciente_id" id="paciente_id" value="{{ old('paciente_id', $pacienteSeleccionado->id ?? '') }}">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="font-weight-bold text-muted small text-uppercase">Tipo Identificación: <span class="text-danger">*</span></label>
                            <select name="tipo_identificacion_comprador" id="tipo_identificacion_comprador" class="form-control" required>
                                <option value="05" {{ old('tipo_identificacion_comprador', '05') == '05' ? 'selected' : '' }}>05 - Cédula</option>
                                <option value="04" {{ old('tipo_identificacion_comprador') == '04' ? 'selected' : '' }}>04 - RUC</option>
                                <option value="06" {{ old('tipo_identificacion_comprador') == '06' ? 'selected' : '' }}>06 - Pasaporte</option>
                                <option value="07" {{ old('tipo_identificacion_comprador') == '07' ? 'selected' : '' }}>07 - Consumidor Final</option>
                                <option value="08" {{ old('tipo_identificacion_comprador') == '08' ? 'selected' : '' }}>08 - Identificación del Exterior</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="font-weight-bold text-muted small text-uppercase">N° Identificación / Cédula: <span class="text-danger">*</span></label>
                            <input type="text" name="identificacion_comprador" id="identificacion_comprador" class="form-control" 
                                   value="{{ old('identificacion_comprador', $pacienteSeleccionado->cedula ?? '') }}" required placeholder="Ej: 1712345678">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="font-weight-bold text-muted small text-uppercase">Razón Social / Nombres y Apellidos: <span class="text-danger">*</span></label>
                            <input type="text" name="razon_social_comprador" id="razon_social_comprador" class="form-control" 
                                   value="{{ old('razon_social_comprador', $pacienteSeleccionado ? ($pacienteSeleccionado->nombres . ' ' . $pacienteSeleccionado->apellidos) : '') }}" required placeholder="Nombre completo del paciente o empresa">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="font-weight-bold text-muted small text-uppercase">Dirección:</label>
                            <input type="text" name="direccion_comprador" id="direccion_comprador" class="form-control" 
                                   value="{{ old('direccion_comprador', $pacienteSeleccionado->direccion ?? '') }}" placeholder="Dirección del domicilio">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="font-weight-bold text-muted small text-uppercase">Correo Electrónico (Para envío de RIDE y XML):</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                </div>
                                <input type="email" name="email_comprador" id="email_comprador" class="form-control" 
                                       value="{{ old('email_comprador', $pacienteSeleccionado->email ?? '') }}" placeholder="cliente@correo.com">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label class="font-weight-bold text-muted small text-uppercase">Teléfono / Celular:</label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                </div>
                                <input type="text" name="telefono_comprador" id="telefono_comprador" class="form-control" 
                                       value="{{ old('telefono_comprador', $pacienteSeleccionado->telefono ?? '') }}" placeholder="Ej: 0991234567">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TARJETA 3: DETALLE DE SERVICIOS / ÍTEMS -->
        <div class="card card-outline card-success shadow-sm mb-4">
            <div class="card-header py-3 bg-light d-flex justify-content-between align-items-center">
                <h5 class="card-title font-weight-bold text-dark m-0">
                    <i class="fas fa-cubes text-success mr-2"></i> Detalle de Servicios Médicos y Productos
                </h5>
                <button type="button" class="btn btn-success btn-sm font-weight-bold shadow-sm" onclick="agregarItem()">
                    <i class="fas fa-plus mr-1"></i> Agregar Servicio / Ítem
                </button>
            </div>

            <div class="card-body p-0 table-responsive">
                <table class="table table-bordered table-striped mb-0" id="tablaItems">
                    <thead class="thead-light">
                        <tr>
                            <th style="width: 120px;">Código</th>
                            <th>Descripción del Servicio o Producto</th>
                            <th style="width: 100px;" class="text-center">Cantidad</th>
                            <th style="width: 130px;" class="text-right">Precio Unitario ($)</th>
                            <th style="width: 110px;" class="text-right">Desc. ($)</th>
                            <th style="width: 120px;" class="text-center">IVA ({{ number_format($config->iva_porcentaje, 0) }}%)</th>
                            <th style="width: 130px;" class="text-right">Subtotal ($)</th>
                            <th style="width: 60px;" class="text-center">Quitar</th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody">
                        @if($pagoSeleccionado)
                            <!-- Fila pre-cargada con el pago del paciente -->
                            <tr class="item-row">
                                <td>
                                    <input type="text" name="items[0][codigo]" class="form-control form-control-sm" value="SRV-001">
                                </td>
                                <td>
                                    <input type="text" name="items[0][descripcion]" class="form-control form-control-sm item-desc" 
                                           value="{{ $pagoSeleccionado->descripcion ?: 'Atención Médica / Consulta' }}" required>
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0.01" name="items[0][cantidad]" class="form-control form-control-sm text-center item-cant" value="1.00" oninput="calcularFila(this)" required>
                                </td>
                                <td>
                                    <input type="number" step="0.0001" min="0" name="items[0][precio_unitario]" class="form-control form-control-sm text-right item-precio" value="{{ number_format($pagoSeleccionado->monto, 2, '.', '') }}" oninput="calcularFila(this)" required>
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0" name="items[0][descuento]" class="form-control form-control-sm text-right item-desc-val" value="0.00" oninput="calcularFila(this)">
                                </td>
                                <td class="text-center align-middle">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input item-iva-check" id="ivaSwitch0" name="items[0][aplica_iva]" value="1" onchange="calcularFila(this)">
                                        <label class="custom-control-label small" for="ivaSwitch0">0%</label>
                                    </div>
                                </td>
                                <td class="text-right font-weight-bold item-subtotal align-middle">
                                    ${{ number_format($pagoSeleccionado->monto, 2) }}
                                </td>
                                <td class="text-center align-middle">
                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="eliminarFila(this)" title="Eliminar ítem">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                        @else
                            <!-- Fila inicial por defecto -->
                            <tr class="item-row">
                                <td>
                                    <input type="text" name="items[0][codigo]" class="form-control form-control-sm" value="CONS-001">
                                </td>
                                <td>
                                    <input type="text" name="items[0][descripcion]" class="form-control form-control-sm item-desc" 
                                           value="Consulta Médica General" required placeholder="Descripción del servicio...">
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0.01" name="items[0][cantidad]" class="form-control form-control-sm text-center item-cant" value="1.00" oninput="calcularFila(this)" required>
                                </td>
                                <td>
                                    <input type="number" step="0.0001" min="0" name="items[0][precio_unitario]" class="form-control form-control-sm text-right item-precio" value="25.00" oninput="calcularFila(this)" required>
                                </td>
                                <td>
                                    <input type="number" step="0.01" min="0" name="items[0][descuento]" class="form-control form-control-sm text-right item-desc-val" value="0.00" oninput="calcularFila(this)">
                                </td>
                                <td class="text-center align-middle">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input item-iva-check" id="ivaSwitch0" name="items[0][aplica_iva]" value="1" onchange="calcularFila(this)">
                                        <label class="custom-control-label small" for="ivaSwitch0">0%</label>
                                    </div>
                                </td>
                                <td class="text-right font-weight-bold item-subtotal align-middle">
                                    $25.00
                                </td>
                                <td class="text-center align-middle">
                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="eliminarFila(this)" title="Eliminar ítem">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                        @endif
                    </tbody>
                </table>
            </div>

            <!-- Accesos rápidos a servicios comunes -->
            <div class="card-footer bg-light py-2">
                <small class="text-muted font-weight-bold mr-2"><i class="fas fa-bolt text-warning mr-1"></i> Servicios frecuentes:</small>
                <button type="button" class="btn btn-xs btn-outline-primary mr-1 mb-1" onclick="agregarServicioRapido('CONS-001', 'Consulta Médica General', 25.00, false)">+ Consulta General</button>
                <button type="button" class="btn btn-xs btn-outline-primary mr-1 mb-1" onclick="agregarServicioRapido('CONS-002', 'Consulta Médica Especializada', 35.00, false)">+ Especialidad</button>
                <button type="button" class="btn btn-xs btn-outline-primary mr-1 mb-1" onclick="agregarServicioRapido('CTRL-001', 'Control Médico / Revaloración', 15.00, false)">+ Control Médico</button>
                <button type="button" class="btn btn-xs btn-outline-primary mr-1 mb-1" onclick="agregarServicioRapido('PROC-001', 'Procedimiento Clínico / Curación', 20.00, false)">+ Procedimiento</button>
                <button type="button" class="btn btn-xs btn-outline-primary mr-1 mb-1" onclick="agregarServicioRapido('CERT-001', 'Emisión de Certificado Médico', 10.00, false)">+ Certificado</button>
            </div>
        </div>

        <!-- TARJETA 4: PAGO, OBSERVACIONES Y TOTALES -->
        <div class="row">
            <!-- Formas de pago y observaciones -->
            <div class="col-md-7">
                <div class="card card-outline card-secondary shadow-sm mb-4">
                    <div class="card-header py-3 bg-light">
                        <h5 class="card-title font-weight-bold text-dark m-0">
                            <i class="fas fa-money-bill-wave text-secondary mr-2"></i> Forma de Pago e Información Adicional
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="font-weight-bold text-muted small text-uppercase">Forma de Pago SRI: <span class="text-danger">*</span></label>
                                    <select name="forma_pago" class="form-control" required>
                                        <option value="01" {{ (old('forma_pago') == '01' || ($pagoSeleccionado && in_array(strtoupper($pagoSeleccionado->forma_pago), ['EFECTIVO', '01']))) ? 'selected' : '' }}>
                                            01 - Sin utilización del sistema financiero (Efectivo)
                                        </option>
                                        <option value="16" {{ (old('forma_pago') == '16' || ($pagoSeleccionado && in_array(strtoupper($pagoSeleccionado->forma_pago), ['DEBITO', 'TARJETA DE DEBITO', '16']))) ? 'selected' : '' }}>
                                            16 - Tarjeta de Débito
                                        </option>
                                        <option value="19" {{ (old('forma_pago') == '19' || ($pagoSeleccionado && in_array(strtoupper($pagoSeleccionado->forma_pago), ['CREDITO', 'TARJETA DE CREDITO', '19']))) ? 'selected' : '' }}>
                                            19 - Tarjeta de Crédito
                                        </option>
                                        <option value="20" {{ (old('forma_pago') == '20' || ($pagoSeleccionado && in_array(strtoupper($pagoSeleccionado->forma_pago), ['TRANSFERENCIA', 'DEPOSITO', '20']))) ? 'selected' : '' }}>
                                            20 - Otros con utilización del sistema financiero (Transferencia)
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="font-weight-bold text-muted small text-uppercase">Plazo:</label>
                                    <input type="number" name="plazo" class="form-control" value="{{ old('plazo', 0) }}" min="0">
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="font-weight-bold text-muted small text-uppercase">Tiempo:</label>
                                    <select name="unidad_tiempo" class="form-control">
                                        <option value="DIAS" {{ old('unidad_tiempo') == 'DIAS' ? 'selected' : '' }}>Días</option>
                                        <option value="MESES" {{ old('unidad_tiempo') == 'MESES' ? 'selected' : '' }}>Meses</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-0">
                            <label class="font-weight-bold text-muted small text-uppercase">Observaciones / Notas Adicionales:</label>
                            <textarea name="observacion" class="form-control" rows="3" placeholder="Información clínica o comercial opcional que aparecerá en el RIDE...">{{ old('observacion', $pagoSeleccionado ? ('Pago Recibo #' . ($pagoSeleccionado->numero_recibo ?: $pagoSeleccionado->id)) : '') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Desglose de Totales -->
            <div class="col-md-5">
                <div class="card card-outline card-primary shadow-sm mb-4">
                    <div class="card-header py-3 bg-light">
                        <h5 class="card-title font-weight-bold text-dark m-0">
                            <i class="fas fa-calculator text-primary mr-2"></i> Resumen de Totales SRI
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        <table class="table mb-0">
                            <tbody>
                                <tr>
                                    <td class="font-weight-bold text-muted py-2">Subtotal Sin Impuestos:</td>
                                    <td class="text-right font-weight-bold py-2" id="resumenSubtotalSinImp">$0.00</td>
                                </tr>
                                <tr>
                                    <td class="text-muted py-2">Subtotal Tarifa 0%:</td>
                                    <td class="text-right py-2" id="resumenSubtotal0">$0.00</td>
                                </tr>
                                <tr>
                                    <td class="text-muted py-2">Subtotal Tarifa {{ number_format($config->iva_porcentaje, 0) }}%:</td>
                                    <td class="text-right py-2" id="resumenSubtotal15">$0.00</td>
                                </tr>
                                <tr>
                                    <td class="text-muted py-2">Total Descuento:</td>
                                    <td class="text-right text-danger py-2" id="resumenDescuento">-$0.00</td>
                                </tr>
                                <tr>
                                    <td class="font-weight-bold text-muted py-2">IVA {{ number_format($config->iva_porcentaje, 0) }}%:</td>
                                    <td class="text-right font-weight-bold text-primary py-2" id="resumenIva">$0.00</td>
                                </tr>
                                <tr>
                                    <td class="text-muted py-2 align-middle">Propina / Otros:</td>
                                    <td class="text-right py-2" style="max-width: 140px;">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-prepend"><span class="input-group-text">$</span></div>
                                            <input type="number" step="0.01" min="0" name="propina" id="inputPropina" class="form-control text-right" value="0.00" oninput="recalcularTotales()">
                                        </div>
                                    </td>
                                </tr>
                                <tr class="bg-light border-top" style="border-top: 2px solid #2563eb !important;">
                                    <td class="font-weight-bold text-dark py-3" style="font-size: 1.25rem;">VALOR TOTAL:</td>
                                    <td class="text-right font-weight-bold text-success py-3" style="font-size: 1.4rem;" id="resumenTotal">$0.00</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="card-footer bg-white p-3">
                        <div class="row">
                            <div class="col-6 pr-1">
                                <button type="submit" name="accion" value="borrador" class="btn btn-warning btn-block font-weight-bold shadow-sm">
                                    <i class="fas fa-save mr-1"></i> Guardar Borrador
                                </button>
                            </div>
                            <div class="col-6 pl-1">
                                <button type="submit" name="accion" value="autorizar" class="btn btn-success btn-block font-weight-bold shadow-sm">
                                    <i class="fas fa-paper-plane mr-1"></i> Emitir y Autorizar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <script>
        const PORCENTAJE_IVA = {{ (float)($config->iva_porcentaje ?: 15.00) }};
        let filaIndex = {{ $pagoSeleccionado ? 1 : 1 }};

        function actualizarNumeroFactura() {
            const select = document.getElementById('punto_emision_id');
            const selectedOption = select.options[select.selectedIndex];
            if (selectedOption) {
                const numero = selectedOption.getAttribute('data-numero');
                document.getElementById('displayNumeroFactura').value = numero;
            }
        }

        function seleccionarPaciente(select) {
            const selectedOption = select.options[select.selectedIndex];
            if (!selectedOption || !selectedOption.value) return;

            document.getElementById('paciente_id').value = selectedOption.value;
            document.getElementById('identificacion_comprador').value = selectedOption.getAttribute('data-cedula') || '';
            document.getElementById('razon_social_comprador').value = selectedOption.getAttribute('data-nombres') || '';
            document.getElementById('email_comprador').value = selectedOption.getAttribute('data-email') || '';
            document.getElementById('telefono_comprador').value = selectedOption.getAttribute('data-telefono') || '';
            document.getElementById('direccion_comprador').value = selectedOption.getAttribute('data-direccion') || '';

            const ced = selectedOption.getAttribute('data-cedula') || '';
            const tipoSelect = document.getElementById('tipo_identificacion_comprador');
            if (ced.length === 10) {
                tipoSelect.value = '05'; // Cédula
            } else if (ced.length === 13) {
                tipoSelect.value = '04'; // RUC
            }
        }

        function cargarConsumidorFinal() {
            document.getElementById('select_paciente_registrado').value = '';
            document.getElementById('paciente_id').value = '';
            document.getElementById('tipo_identificacion_comprador').value = '07'; // Consumidor Final
            document.getElementById('identificacion_comprador').value = '9999999999999';
            document.getElementById('razon_social_comprador').value = 'CONSUMIDOR FINAL';
            document.getElementById('direccion_comprador').value = 'CIUDAD';
            document.getElementById('email_comprador').value = '';
            document.getElementById('telefono_comprador').value = '9999999999';
        }

        function limpiarCliente() {
            document.getElementById('select_paciente_registrado').value = '';
            document.getElementById('paciente_id').value = '';
            document.getElementById('tipo_identificacion_comprador').value = '05';
            document.getElementById('identificacion_comprador').value = '';
            document.getElementById('razon_social_comprador').value = '';
            document.getElementById('direccion_comprador').value = '';
            document.getElementById('email_comprador').value = '';
            document.getElementById('telefono_comprador').value = '';
        }

        function agregarItem() {
            const tbody = document.getElementById('itemsBody');
            const newRow = document.createElement('tr');
            newRow.className = 'item-row';
            newRow.innerHTML = `
                <td>
                    <input type="text" name="items[${filaIndex}][codigo]" class="form-control form-control-sm" value="SRV-00${filaIndex + 1}">
                </td>
                <td>
                    <input type="text" name="items[${filaIndex}][descripcion]" class="form-control form-control-sm item-desc" required placeholder="Descripción del servicio...">
                </td>
                <td>
                    <input type="number" step="0.01" min="0.01" name="items[${filaIndex}][cantidad]" class="form-control form-control-sm text-center item-cant" value="1.00" oninput="calcularFila(this)" required>
                </td>
                <td>
                    <input type="number" step="0.0001" min="0" name="items[${filaIndex}][precio_unitario]" class="form-control form-control-sm text-right item-precio" value="0.00" oninput="calcularFila(this)" required>
                </td>
                <td>
                    <input type="number" step="0.01" min="0" name="items[${filaIndex}][descuento]" class="form-control form-control-sm text-right item-desc-val" value="0.00" oninput="calcularFila(this)">
                </td>
                <td class="text-center align-middle">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input item-iva-check" id="ivaSwitch${filaIndex}" name="items[${filaIndex}][aplica_iva]" value="1" onchange="calcularFila(this)">
                        <label class="custom-control-label small" for="ivaSwitch${filaIndex}">0%</label>
                    </div>
                </td>
                <td class="text-right font-weight-bold item-subtotal align-middle">
                    $0.00
                </td>
                <td class="text-center align-middle">
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="eliminarFila(this)" title="Eliminar ítem">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </td>
            `;
            tbody.appendChild(newRow);
            filaIndex++;
            recalcularTotales();
        }

        function agregarServicioRapido(codigo, descripcion, precio, conIva) {
            const tbody = document.getElementById('itemsBody');
            const newRow = document.createElement('tr');
            newRow.className = 'item-row';
            newRow.innerHTML = `
                <td>
                    <input type="text" name="items[${filaIndex}][codigo]" class="form-control form-control-sm" value="${codigo}">
                </td>
                <td>
                    <input type="text" name="items[${filaIndex}][descripcion]" class="form-control form-control-sm item-desc" value="${descripcion}" required>
                </td>
                <td>
                    <input type="number" step="0.01" min="0.01" name="items[${filaIndex}][cantidad]" class="form-control form-control-sm text-center item-cant" value="1.00" oninput="calcularFila(this)" required>
                </td>
                <td>
                    <input type="number" step="0.0001" min="0" name="items[${filaIndex}][precio_unitario]" class="form-control form-control-sm text-right item-precio" value="${precio.toFixed(2)}" oninput="calcularFila(this)" required>
                </td>
                <td>
                    <input type="number" step="0.01" min="0" name="items[${filaIndex}][descuento]" class="form-control form-control-sm text-right item-desc-val" value="0.00" oninput="calcularFila(this)">
                </td>
                <td class="text-center align-middle">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input item-iva-check" id="ivaSwitch${filaIndex}" name="items[${filaIndex}][aplica_iva]" value="1" ${conIva ? 'checked' : ''} onchange="calcularFila(this)">
                        <label class="custom-control-label small" for="ivaSwitch${filaIndex}">${conIva ? PORCENTAJE_IVA + '%' : '0%'}</label>
                    </div>
                </td>
                <td class="text-right font-weight-bold item-subtotal align-middle">
                    $${precio.toFixed(2)}
                </td>
                <td class="text-center align-middle">
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="eliminarFila(this)" title="Eliminar ítem">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </td>
            `;
            tbody.appendChild(newRow);
            filaIndex++;
            recalcularTotales();
        }

        function eliminarFila(btn) {
            const rows = document.querySelectorAll('#itemsBody tr.item-row');
            if (rows.length <= 1) {
                alert('La factura debe tener al menos un ítem o servicio.');
                return;
            }
            const row = btn.closest('tr');
            row.remove();
            recalcularTotales();
        }

        function calcularFila(elem) {
            const row = elem.closest('tr');
            const cant = parseFloat(row.querySelector('.item-cant').value) || 0;
            const precio = parseFloat(row.querySelector('.item-precio').value) || 0;
            const desc = parseFloat(row.querySelector('.item-desc-val').value) || 0;
            const ivaCheck = row.querySelector('.item-iva-check');
            const ivaLabel = row.querySelector('.custom-control-label');

            if (ivaCheck.checked) {
                ivaLabel.textContent = PORCENTAJE_IVA + '%';
            } else {
                ivaLabel.textContent = '0%';
            }

            let subtotalFila = (cant * precio) - desc;
            if (subtotalFila < 0) subtotalFila = 0;

            row.querySelector('.item-subtotal').textContent = '$' + subtotalFila.toFixed(2);
            recalcularTotales();
        }

        function recalcularTotales() {
            let subtotalSinImp = 0;
            let subtotal0 = 0;
            let subtotal15 = 0;
            let totalDescuento = 0;
            let totalIva = 0;

            const rows = document.querySelectorAll('#itemsBody tr.item-row');
            rows.forEach(row => {
                const cant = parseFloat(row.querySelector('.item-cant').value) || 0;
                const precio = parseFloat(row.querySelector('.item-precio').value) || 0;
                const desc = parseFloat(row.querySelector('.item-desc-val').value) || 0;
                const conIva = row.querySelector('.item-iva-check').checked;

                let subFila = (cant * precio) - desc;
                if (subFila < 0) subFila = 0;

                subtotalSinImp += subFila;
                totalDescuento += desc;

                if (conIva) {
                    subtotal15 += subFila;
                    totalIva += subFila * (PORCENTAJE_IVA / 100);
                } else {
                    subtotal0 += subFila;
                }
            });

            const propina = parseFloat(document.getElementById('inputPropina').value) || 0;
            const total = subtotalSinImp + totalIva + propina;

            document.getElementById('resumenSubtotalSinImp').textContent = '$' + subtotalSinImp.toFixed(2);
            document.getElementById('resumenSubtotal0').textContent = '$' + subtotal0.toFixed(2);
            document.getElementById('resumenSubtotal15').textContent = '$' + subtotal15.toFixed(2);
            document.getElementById('resumenDescuento').textContent = '-$' + totalDescuento.toFixed(2);
            document.getElementById('resumenIva').textContent = '$' + totalIva.toFixed(2);
            document.getElementById('resumenTotal').textContent = '$' + total.toFixed(2);
        }

        // Inicializar cálculos al cargar
        document.addEventListener('DOMContentLoaded', function() {
            recalcularTotales();
        });
    </script>
@endsection