@extends('layouts.admin')

@section('content')
<div class="content-header p-0 mb-3">
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb bg-transparent p-0 mb-1">
                        <li class="breadcrumb-item"><a href="{{ route('admin.farmacia.dashboard') }}">Farmacia</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.farmacia.ventas.index') }}">Ventas</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Nueva Dispensación</li>
                    </ol>
                </nav>
                <h1 class="m-0 font-weight-bold" style="font-size: 1.55rem; color: var(--dm-text-main, #0f172a);">
                    <i class="bi bi-cart-plus-fill text-primary mr-2"></i> Punto de Venta y Dispensación
                </h1>
                <p class="text-muted mb-0 small">Dispensación rápida de medicamentos a pacientes o mostrador con descuento automático de inventario.</p>
            </div>
            <div>
                <span class="badge badge-light border px-3 py-2 font-weight-bold mr-2" style="font-size: 0.95rem;">
                    Nro. Comprobante: <span class="text-primary">{{ $proximoComprobante }}</span>
                </span>
                <a href="{{ route('admin.farmacia.ventas.index') }}" class="btn btn-outline-secondary font-weight-bold">
                    <i class="bi bi-arrow-left mr-1"></i> Volver a Ventas
                </a>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h6 class="font-weight-bold"><i class="bi bi-exclamation-triangle-fill mr-1"></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.farmacia.ventas.store') }}" method="POST" id="formVentaFarmacia">
        @csrf

        <div class="row">
            <!-- Columna Izquierda: Datos del Cliente y Selección de Medicamentos -->
            <div class="col-lg-8">
                <!-- Tarjeta 1: Datos del Paciente / Cliente -->
                <div class="card card-outline card-primary shadow-sm mb-3">
                    <div class="card-header py-2">
                        <h6 class="card-title font-weight-bold text-primary mb-0" style="font-size: 0.95rem;">
                            <i class="bi bi-person-bounding-box mr-1"></i> Datos del Paciente / Cliente
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-md-5 form-group mb-2">
                                <label class="small font-weight-bold">Paciente de la Clínica (Opcional):</label>
                                <select id="select_paciente" name="paciente_id" class="form-control form-control-sm">
                                    <option value="">-- Cliente General / Mostrador --</option>
                                    @foreach($pacientes as $pac)
                                        @php
                                            $hospActiva = $hospitalizacionesActivas->firstWhere('paciente_id', $pac->id);
                                        @endphp
                                        <option value="{{ $pac->id }}"
                                                data-nombre="{{ $pac->nombres }} {{ $pac->apellidos }}"
                                                data-documento="{{ $pac->cedula }}"
                                                data-hosp-id="{{ $hospActiva ? $hospActiva->id : '' }}"
                                                data-hosp-codigo="{{ $hospActiva ? $hospActiva->codigo : '' }}"
                                                data-hosp-cama="{{ $hospActiva && $hospActiva->cama ? $hospActiva->cama->codigo : '' }}"
                                                {{ (old('paciente_id') == $pac->id || ($hospitalizacionPrevia && $hospitalizacionPrevia->paciente_id == $pac->id) || ($recetaPrevia && $recetaPrevia->paciente_id == $pac->id)) ? 'selected' : '' }}>
                                            {{ $pac->apellidos }} {{ $pac->nombres }} (C.I: {{ $pac->cedula }}) {{ $hospActiva ? '· [INTERNADO CAMA ' . ($hospActiva->cama->codigo ?? 'S/C') . ']' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 form-group mb-2">
                                <label class="small font-weight-bold">Nombre del Cliente / Paciente <b>*</b>:</label>
                                <input type="text" id="cliente_nombre" name="cliente_nombre" class="form-control form-control-sm"
                                       value="{{ old('cliente_nombre', ($hospitalizacionPrevia && $hospitalizacionPrevia->paciente) ? ($hospitalizacionPrevia->paciente->nombres . ' ' . $hospitalizacionPrevia->paciente->apellidos) : (($recetaPrevia && $recetaPrevia->paciente) ? ($recetaPrevia->paciente->nombres . ' ' . $recetaPrevia->paciente->apellidos) : 'Consumidor Final')) }}" required>
                            </div>
                            <div class="col-md-3 form-group mb-2">
                                <label class="small font-weight-bold">Cédula / RUC:</label>
                                <input type="text" id="cliente_documento" name="cliente_documento" class="form-control form-control-sm"
                                       value="{{ old('cliente_documento', ($hospitalizacionPrevia && $hospitalizacionPrevia->paciente) ? $hospitalizacionPrevia->paciente->cedula : (($recetaPrevia && $recetaPrevia->paciente) ? $recetaPrevia->paciente->cedula : '9999999999')) }}" placeholder="C.I. o RUC">
                            </div>
                        </div>

                        <!-- Alerta Dinámica de Hospitalización Activa -->
                        <div id="alertaHospitalizacionActiva" class="alert alert-warning py-2 px-3 mt-1 mb-2 small shadow-xs" style="display: none; border-left: 4px solid #f59e0b;">
                            <div class="d-flex flex-wrap align-items-center justify-content-between">
                                <div class="mb-1 mb-md-0">
                                    <i class="fas fa-procedures text-danger mr-1" style="font-size: 1.1rem;"></i>
                                    <strong>Paciente Actualmente Internado:</strong>
                                    Ubicado en <span id="txtHospCama" class="badge badge-light border text-dark font-weight-bold">Cama</span>
                                    (<span id="txtHospCodigo" class="font-weight-bold text-dark">HOSP-</span>).
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="checkCargarHospitalizacion" name="cargar_hospitalizacion" value="1" {{ $hospitalizacionPrevia ? 'checked' : '' }}>
                                    <label class="custom-control-label font-weight-bold text-dark" for="checkCargarHospitalizacion" style="cursor: pointer;">
                                        Cargar a su Cuenta de Hospitalización
                                    </label>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="hospitalizacion_id" id="input_hospitalizacion_id" value="{{ $hospitalizacionPrevia ? $hospitalizacionPrevia->id : '' }}">

                        <div class="row">
                            <div class="col-md-6 form-group mb-0">
                                <label class="small font-weight-bold">Médico Prescriptor (Opcional):</label>
                                <select name="doctor_id" class="form-control form-control-sm">
                                    <option value="">-- Sin prescripción médica directa --</option>
                                    @foreach($doctores as $doc)
                                        <option value="{{ $doc->id }}" {{ (old('doctor_id') == $doc->id || ($hospitalizacionPrevia && $hospitalizacionPrevia->doctor_id == $doc->id) || ($recetaPrevia && $recetaPrevia->doctor_id == $doc->id)) ? 'selected' : '' }}>
                                            Dr(a). {{ $doc->nombres }} {{ $doc->apellidos }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 form-group mb-0">
                                <label class="small font-weight-bold">Método de Pago <b>*</b>:</label>
                                <select name="metodo_pago" id="select_metodo_pago" class="form-control form-control-sm" required>
                                    <option value="EFECTIVO" {{ old('metodo_pago') == 'EFECTIVO' ? 'selected' : '' }}>Efectivo</option>
                                    <option value="CARGO_HOSPITALIZACION" id="optCargoHospitalizacion" style="display: {{ $hospitalizacionPrevia ? 'block' : 'none' }}; font-weight: bold; color: #0284c7;" {{ (old('metodo_pago') == 'CARGO_HOSPITALIZACION' || $hospitalizacionPrevia) ? 'selected' : '' }}>
                                        Cargar a Cuenta de Hospitalización
                                    </option>
                                    <option value="TRANSFERENCIA" {{ old('metodo_pago') == 'TRANSFERENCIA' ? 'selected' : '' }}>Transferencia Bancaria</option>
                                    <option value="TARJETA DEBITO" {{ old('metodo_pago') == 'TARJETA DEBITO' ? 'selected' : '' }}>Tarjeta de Débito</option>
                                    <option value="TARJETA CREDITO" {{ old('metodo_pago') == 'TARJETA CREDITO' ? 'selected' : '' }}>Tarjeta de Crédito</option>
                                </select>
                            </div>
                        </div>

                        @if($recetaPrevia)
                            <input type="hidden" name="receta_id" value="{{ $recetaPrevia->id }}">
                            <div class="alert alert-info py-2 px-3 mt-2 mb-0 small">
                                <i class="bi bi-info-circle-fill mr-1"></i> Dispensación vinculada a la Receta Médica #{{ $recetaPrevia->numero_receta ?: $recetaPrevia->id }}
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Tarjeta 2: Selector de Medicamentos y Carrito -->
                <div class="card card-outline card-success shadow-sm mb-3">
                    <div class="card-header py-2 d-flex justify-content-between align-items-center">
                        <h6 class="card-title font-weight-bold text-success mb-0" style="font-size: 0.95rem;">
                            <i class="bi bi-capsule mr-1"></i> Agregar Medicamentos al Comprobante
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <div class="row align-items-end mb-3">
                            <div class="col-md-9 form-group mb-2 mb-md-0">
                                <label class="small font-weight-bold text-muted">Seleccionar Medicamento (Stock disponible):</label>
                                <select id="selector_medicamento" class="form-control">
                                    <option value="">-- Busque o seleccione medicamento... --</option>
                                    @foreach($medicamentos as $med)
                                        <option value="{{ $med->id }}"
                                                data-nombre="{{ $med->nombre_comercial }}"
                                                data-generico="{{ $med->nombre_generico }}"
                                                data-concentracion="{{ $med->concentracion }}"
                                                data-stock="{{ $med->stock }}"
                                                data-precio="{{ $med->precio_venta }}"
                                                data-codigo="{{ $med->codigo }}">
                                            [{{ $med->codigo }}] {{ $med->nombre_comercial }} ({{ $med->concentracion }}) - Stock: {{ $med->stock }} - ${{ number_format($med->precio_venta, 2) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button type="button" id="btnAgregarMed" class="btn btn-success btn-block font-weight-bold">
                                    <i class="bi bi-plus-lg mr-1"></i> Agregar Ítem
                                </button>
                            </div>
                        </div>

                        <!-- Tabla de Ítems a Dispensar -->
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm table-striped mb-0" id="tablaDetalles">
                                <thead>
                                    <tr class="bg-light">
                                        <th style="width: 40px;" class="text-center">#</th>
                                        <th>Medicamento</th>
                                        <th class="text-center" style="width: 100px;">Stock Disp.</th>
                                        <th class="text-center" style="width: 110px;">Cantidad</th>
                                        <th class="text-right" style="width: 110px;">P. Unit ($)</th>
                                        <th class="text-right" style="width: 120px;">Subtotal ($)</th>
                                        <th class="text-center" style="width: 50px;">Quitar</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyDetalles">
                                    <tr id="filaVacia">
                                        <td colspan="7" class="text-center py-4 text-muted">
                                            <i class="bi bi-cart-x text-muted" style="font-size: 2rem;"></i>
                                            <p class="mb-0 mt-2 font-weight-bold">No se han agregado medicamentos al comprobante.</p>
                                            <small>Utilice el selector superior para buscar y agregar medicamentos.</small>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Observaciones -->
                <div class="card shadow-sm mb-3">
                    <div class="card-body p-3">
                        <label class="small font-weight-bold text-muted">Notas o Instrucciones para el Paciente:</label>
                        <textarea name="notas" rows="2" class="form-control form-control-sm" placeholder="Observaciones especiales sobre la entrega o indicaciones de posología...">{{ old('notas') }}</textarea>
                    </div>
                </div>
            </div>

            <!-- Columna Derecha: Resumen de Totales y Cobro -->
            <div class="col-lg-4">
                <div class="card card-outline card-primary shadow-sm position-sticky" style="top: 20px;">
                    <div class="card-header bg-light py-2">
                        <h6 class="card-title font-weight-bold text-dark mb-0">
                            <i class="bi bi-calculator-fill mr-1 text-primary"></i> Resumen de Cuenta
                        </h6>
                    </div>
                    <div class="card-body p-3">
                        <!-- Subtotal -->
                        <div class="d-flex justify-content-between py-2 border-bottom">
                            <span class="text-muted font-weight-bold">Subtotal:</span>
                            <span class="font-weight-bold h6 mb-0" id="resumenSubtotal">$0.00</span>
                        </div>

                        <!-- Descuento -->
                        <div class="py-2 border-bottom">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="text-muted font-weight-bold">Descuento ($):</span>
                                <div style="width: 120px;">
                                    <input type="number" step="0.01" min="0" id="inputDescuento" name="descuento" class="form-control form-control-sm text-right font-weight-bold" value="{{ old('descuento', '0.00') }}">
                                </div>
                            </div>
                        </div>

                        <!-- TOTAL A COBRAR -->
                        <div class="p-3 my-3 rounded text-center" style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border: 1px solid #bfdbfe;">
                            <span class="text-uppercase font-weight-bold text-muted small">Total a Pagar</span>
                            <h2 class="display-4 font-weight-bold text-primary mb-0" id="resumenTotal">$0.00</h2>
                        </div>

                        <!-- Cálculo de Cambio en Efectivo -->
                        <div class="p-3 mb-3 rounded" style="background: #f8fafc; border: 1px solid #e2e8f0;">
                            <label class="small font-weight-bold text-muted">Calculadora de Cambio (Efectivo):</label>
                            <div class="form-group mb-2">
                                <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" id="inputEfectivo" class="form-control font-weight-bold text-right" placeholder="Monto recibido">
                                </div>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="small font-weight-bold text-muted">Cambio / Vuelto:</span>
                                <span class="h6 font-weight-bold text-success mb-0" id="resumenCambio">$0.00</span>
                            </div>
                        </div>

                        <!-- Botón de Envío -->
                        <button type="submit" id="btnConfirmarVenta" class="btn btn-primary btn-block btn-lg font-weight-bold shadow-sm" disabled>
                            <i class="bi bi-check-circle-fill mr-1"></i> Completar Dispensación
                        </button>
                        <a href="{{ route('admin.farmacia.ventas.index') }}" class="btn btn-outline-secondary btn-block mt-2 font-weight-bold">
                            Cancelar Operación
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const selectPaciente = document.getElementById('select_paciente');
        const inputClienteNombre = document.getElementById('cliente_nombre');
        const inputClienteDoc = document.getElementById('cliente_documento');
        const alertaHosp = document.getElementById('alertaHospitalizacionActiva');
        const txtHospCama = document.getElementById('txtHospCama');
        const txtHospCodigo = document.getElementById('txtHospCodigo');
        const checkCargarHosp = document.getElementById('checkCargarHospitalizacion');
        const inputHospId = document.getElementById('input_hospitalizacion_id');
        const selectMetodoPago = document.getElementById('select_metodo_pago');
        const optCargoHosp = document.getElementById('optCargoHospitalizacion');

        function verificarHospitalizacionPaciente() {
            if (!selectPaciente) return;
            const opt = selectPaciente.options[selectPaciente.selectedIndex];
            const hospId = opt ? opt.getAttribute('data-hosp-id') : '';
            const hospCodigo = opt ? opt.getAttribute('data-hosp-codigo') : '';
            const hospCama = opt ? opt.getAttribute('data-hosp-cama') : '';

            if (hospId) {
                alertaHosp.style.display = 'block';
                txtHospCama.textContent = hospCama ? 'Cama ' + hospCama : 'Internado';
                txtHospCodigo.textContent = hospCodigo;
                inputHospId.value = hospId;
                optCargoHosp.style.display = 'block';
                if (checkCargarHosp && checkCargarHosp.checked) {
                    selectMetodoPago.value = 'CARGO_HOSPITALIZACION';
                }
            } else {
                alertaHosp.style.display = 'none';
                inputHospId.value = '';
                if (checkCargarHosp) checkCargarHosp.checked = false;
                optCargoHosp.style.display = 'none';
                if (selectMetodoPago && selectMetodoPago.value === 'CARGO_HOSPITALIZACION') {
                    selectMetodoPago.value = 'EFECTIVO';
                }
            }
        }

        // Autocompletar datos del paciente
        if (selectPaciente) {
            selectPaciente.addEventListener('change', function () {
                const opt = this.options[this.selectedIndex];
                if (opt.value) {
                    inputClienteNombre.value = opt.getAttribute('data-nombre') || '';
                    inputClienteDoc.value = opt.getAttribute('data-documento') || '';
                } else {
                    inputClienteNombre.value = 'Consumidor Final';
                    inputClienteDoc.value = '9999999999';
                }
                verificarHospitalizacionPaciente();
            });

            // Verificar si viene con paciente preseleccionado
            verificarHospitalizacionPaciente();
        }

        if (checkCargarHosp) {
            checkCargarHosp.addEventListener('change', function() {
                if (this.checked) {
                    optCargoHosp.style.display = 'block';
                    selectMetodoPago.value = 'CARGO_HOSPITALIZACION';
                } else {
                    selectMetodoPago.value = 'EFECTIVO';
                }
            });
        }

        if (selectMetodoPago) {
            selectMetodoPago.addEventListener('change', function() {
                if (this.value === 'CARGO_HOSPITALIZACION') {
                    if (checkCargarHosp) checkCargarHosp.checked = true;
                } else {
                    if (checkCargarHosp) checkCargarHosp.checked = false;
                }
            });
        }

        const selectorMed = document.getElementById('selector_medicamento');
        const btnAgregarMed = document.getElementById('btnAgregarMed');
        const tbodyDetalles = document.getElementById('tbodyDetalles');
        const filaVacia = document.getElementById('filaVacia');
        const resumenSubtotal = document.getElementById('resumenSubtotal');
        const inputDescuento = document.getElementById('inputDescuento');
        const resumenTotal = document.getElementById('resumenTotal');
        const inputEfectivo = document.getElementById('inputEfectivo');
        const resumenCambio = document.getElementById('resumenCambio');
        const btnConfirmar = document.getElementById('btnConfirmarVenta');

        let itemsAgregados = new Set();

        btnAgregarMed.addEventListener('click', function () {
            const opt = selectorMed.options[selectorMed.selectedIndex];
            if (!opt || !opt.value) {
                alert('Por favor seleccione un medicamento para agregar.');
                return;
            }

            const medId = opt.value;
            if (itemsAgregados.has(medId)) {
                alert('Este medicamento ya está en la lista. Ajuste la cantidad directamente en la tabla.');
                return;
            }

            const nombre = opt.getAttribute('data-nombre');
            const generico = opt.getAttribute('data-generico') || '';
            const concentracion = opt.getAttribute('data-concentracion') || '';
            const stock = parseInt(opt.getAttribute('data-stock'), 10) || 0;
            const precio = parseFloat(opt.getAttribute('data-precio')) || 0;
            const codigo = opt.getAttribute('data-codigo') || '';

            if (stock <= 0) {
                alert('No hay stock disponible para este medicamento.');
                return;
            }

            if (filaVacia) {
                filaVacia.style.display = 'none';
            }

            itemsAgregados.add(medId);

            const tr = document.createElement('tr');
            tr.id = 'fila_med_' + medId;
            tr.innerHTML = `
                <td class="text-center align-middle font-weight-bold text-muted">${itemsAgregados.size}</td>
                <td class="align-middle">
                    <strong>${nombre}</strong> <span class="badge badge-light border">${codigo}</span>
                    <div class="small text-muted">${concentracion} ${generico ? ' - ' + generico : ''}</div>
                    <input type="hidden" name="medicamento_id[]" value="${medId}">
                </td>
                <td class="text-center align-middle">
                    <span class="badge badge-info">${stock} unids.</span>
                </td>
                <td class="text-center align-middle">
                    <input type="number" name="cantidad[]" class="form-control form-control-sm text-center font-weight-bold input-cantidad"
                           value="1" min="1" max="${stock}" data-precio="${precio}" style="max-width: 80px; margin: 0 auto;">
                </td>
                <td class="text-right align-middle font-weight-bold text-dark">
                    $${precio.toFixed(2)}
                    <input type="hidden" name="precio_unitario[]" value="${precio.toFixed(2)}">
                </td>
                <td class="text-right align-middle font-weight-bold text-success td-subtotal">
                    $${precio.toFixed(2)}
                </td>
                <td class="text-center align-middle">
                    <button type="button" class="btn btn-xs btn-outline-danger btn-quitar-fila" data-id="${medId}" title="Quitar ítem">
                        <i class="bi bi-trash"></i>
                    </button>
                </td>
            `;

            tbodyDetalles.appendChild(tr);
            selectorMed.selectedIndex = 0;

            // Listeners para la fila
            const inputCant = tr.querySelector('.input-cantidad');
            inputCant.addEventListener('input', function () {
                let val = parseInt(this.value, 10);
                if (isNaN(val) || val < 1) val = 1;
                if (val > stock) {
                    alert('La cantidad no puede superar el stock disponible (' + stock + ').');
                    val = stock;
                    this.value = stock;
                }
                const sub = (val * precio).toFixed(2);
                tr.querySelector('.td-subtotal').textContent = '$' + sub;
                recalcularTotales();
            });

            tr.querySelector('.btn-quitar-fila').addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                itemsAgregados.delete(id);
                tr.remove();
                if (itemsAgregados.size === 0 && filaVacia) {
                    filaVacia.style.display = '';
                }
                recalcularTotales();
            });

            recalcularTotales();
        });

        function recalcularTotales() {
            let subtotal = 0;
            const rows = tbodyDetalles.querySelectorAll('tr[id^="fila_med_"]');
            rows.forEach(r => {
                const cantInput = r.querySelector('.input-cantidad');
                if (cantInput) {
                    const cant = parseInt(cantInput.value, 10) || 0;
                    const prec = parseFloat(cantInput.getAttribute('data-precio')) || 0;
                    subtotal += (cant * prec);
                }
            });

            const desc = parseFloat(inputDescuento.value) || 0;
            const total = Math.max(0, subtotal - desc);

            resumenSubtotal.textContent = '$' + subtotal.toFixed(2);
            resumenTotal.textContent = '$' + total.toFixed(2);

            // Calcular cambio si hay efectivo
            const efectivo = parseFloat(inputEfectivo.value) || 0;
            if (efectivo > 0) {
                const cambio = Math.max(0, efectivo - total);
                resumenCambio.textContent = '$' + cambio.toFixed(2);
            } else {
                resumenCambio.textContent = '$0.00';
            }

            btnConfirmar.disabled = (rows.length === 0);
        }

        if (inputDescuento) {
            inputDescuento.addEventListener('input', recalcularTotales);
        }
        if (inputEfectivo) {
            inputEfectivo.addEventListener('input', recalcularTotales);
        }
    });
</script>
@endsection