<?php
/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\PaquetesPago $paquetePago
 * @var array $clientesFacturacion
 * @var int|null $clienteFacturacionId
 */
?>

<div class="container mt-4 mb-4">
    <div class="row">
        <div class="col-md-10 offset-md-1">
            <?= $this->Form->create($paquetePago, ['class' => 'row g-3', 'id' => 'paquete-form']) ?>

            <div class="col-12 mb-4">
                <h3 class="text-info">
                    <i class="fas fa-file-invoice-dollar"></i> Nuevo Paquete de Pago
                </h3>
            </div>

            <div class="col-md-12 mb-3">
                <?= $this->Form->control('cliente_facturacion_id', [
                    'label' => 'Cliente',
                    'type' => 'select',
                    'options' => collection($clientesFacturacion)->combine('id', 'nombre_razon_social')->toArray(),
                    'class' => 'form-control',
                    'required' => true,
                    'empty' => '-- Seleccionar Cliente --',
                ]) ?>
            </div>

            <div class="col-md-12 mb-3">
                <?= $this->Form->control('nombre', [
                    'label' => 'Nombre del Proyecto / Membresía',
                    'class' => 'form-control',
                    'required' => true,
                    'placeholder' => 'Ej: Desarrollo Landing Page, Membresía Software Dental',
                ]) ?>
            </div>

            <div class="col-md-12 mb-3">
                <?= $this->Form->control('descripcion', [
                    'label' => 'Descripción',
                    'type' => 'textarea',
                    'rows' => 3,
                    'class' => 'form-control',
                    'placeholder' => 'Detalle del proyecto o servicio',
                ]) ?>
            </div>

            <div class="col-md-6 mb-3">
                <label class="form-label" for="precio_total">Precio</label>
                <div class="input-group">
                    <span class="input-group-text">S/</span>
                    <input type="number" id="precio_total" name="precio_total" class="form-control precio-total-input"
                           step="0.01" placeholder="0.00"
                           value="<?= h($paquetePago->precio_total ?? '') ?>" required>
                </div>
                <small class="text-muted precio-hint">Monto total del proyecto.</small>
            </div>

            <!-- Forma de Pago -->
            <div class="col-12 mt-2">
                <hr class="my-3">
                <h5 class="text-info mb-3"><i class="fas fa-money-check-alt"></i> Forma de Pago</h5>
            </div>

            <div class="col-12 mb-3">
                <div class="row g-3 tipo-pago-selector">
                    <div class="col-md-4">
                        <input class="d-none tipo-pago-radio" type="radio" name="tipo_pago" id="pago_contado" value="contado" checked>
                        <label for="pago_contado" class="tipo-pago-card card h-100">
                            <div class="card-body text-center">
                                <i class="fas fa-hand-holding-usd fs-3 text-success mb-2 d-block"></i>
                                <strong>Al Contado</strong>
                                <p class="text-muted small mb-0 mt-1">Pago único</p>
                            </div>
                        </label>
                    </div>
                    <div class="col-md-4">
                        <input class="d-none tipo-pago-radio" type="radio" name="tipo_pago" id="pago_partes" value="partes">
                        <label for="pago_partes" class="tipo-pago-card card h-100">
                            <div class="card-body text-center">
                                <i class="fas fa-list-ol fs-3 text-info mb-2 d-block"></i>
                                <strong>En Partes</strong>
                                <p class="text-muted small mb-0 mt-1">Cuotas por avance</p>
                            </div>
                        </label>
                    </div>
                    <div class="col-md-4">
                        <input class="d-none tipo-pago-radio" type="radio" name="tipo_pago" id="pago_recurrente" value="recurrente">
                        <label for="pago_recurrente" class="tipo-pago-card card h-100">
                            <div class="card-body text-center">
                                <i class="fas fa-sync-alt fs-3 text-primary mb-2 d-block"></i>
                                <strong>Recurrente Mensual</strong>
                                <p class="text-muted small mb-0 mt-1">Membresía indefinida</p>
                            </div>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Sección Contado -->
            <div id="seccion-contado" class="col-12">
                <div class="col-md-5 mb-3">
                    <label class="form-label" for="fecha_recordatorio">Fecha del Recordatorio</label>
                    <input type="date" id="fecha_recordatorio" name="fecha_recordatorio"
                           class="form-control" value="<?= $paquetePago->fecha_recordatorio ? $paquetePago->fecha_recordatorio->format('Y-m-d') : '' ?>">
                </div>
            </div>

            <!-- Sección Partes (oculta por defecto) -->
            <div id="seccion-partes" class="col-12" style="display: none;">
                <div id="cuotas-container">
                    <div class="cuota-item card mb-3 border-start border-4 border-info">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="card-title mb-0">Cuota #<span class="numero-cuota">1</span></h6>
                                <button type="button" class="btn btn-sm btn-outline-danger eliminar-cuota-btn">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Título Referencial</label>
                                    <input type="text" name="cuotas[0][titulo_referencial]"
                                           class="form-control"
                                           placeholder="Ej: Cuota N° 01 (60%)"
                                           value="">
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">Monto</label>
                                    <div class="input-group">
                                        <span class="input-group-text">S/</span>
                                        <input type="number" name="cuotas[0][monto]"
                                               class="form-control monto-input"
                                               step="0.01"
                                               placeholder="0.00"
                                               value=""
                                               data-cuota-index="0">
                                    </div>
                                </div>
                                <div class="col-md-3 mb-3">
                                    <label class="form-label">Porcentaje</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control porcentaje-input"
                                               min="0" max="100" placeholder="0"
                                               data-cuota-index="0"
                                               readonly>
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Fecha de Recordatorio</label>
                                    <input type="date" name="cuotas[0][fecha_recordatorio]"
                                           class="form-control"
                                           value="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <button type="button" id="agregar-cuota-btn" class="btn btn-outline-info btn-sm">
                    <i class="fas fa-plus-circle"></i> Agregar Otra Cuota
                </button>

                <div class="alert alert-light border mt-4">
                    <h6>Resumen</h6>
                    <p class="mb-1">Precio Total del Paquete: <strong><span id="precio-total-display">S/ 0.00</span></strong></p>
                    <p class="mb-1">Total de Cuotas: <strong><span id="total-cuotas">S/ 0.00</span></strong></p>
                    <p class="mb-0">
                        <span id="diferencia-alerta" class="badge bg-warning" style="display: none;">⚠️ Diferencia: S/ 0.00</span>
                        <span id="diferencia-ok" class="badge bg-success" style="display: none;">✓ Cuotas correctas</span>
                    </p>
                </div>
            </div>

            <!-- Sección Recurrente (oculta por defecto) -->
            <div id="seccion-recurrente" class="col-12" style="display: none;">
                <div class="row">
                    <div class="col-md-5 mb-3">
                        <label class="form-label" for="fecha_inicio_cobro">Fecha de Inicio de Cobro</label>
                        <input type="date" id="fecha_inicio_cobro" name="fecha_inicio_cobro" class="form-control"
                               value="<?= $paquetePago->fecha_inicio_cobro ? $paquetePago->fecha_inicio_cobro->format('Y-m-d') : '' ?>">
                        <small class="text-muted">El día de esa fecha se repetirá cada mes (ej. si eliges el 1, se cobrará el 1 de cada mes).</small>
                    </div>
                    <div class="col-md-5 mb-3">
                        <label class="form-label" for="fecha_fin">Fecha de Fin <span class="text-muted">(opcional)</span></label>
                        <input type="date" id="fecha_fin" name="fecha_fin" class="form-control"
                               value="<?= $paquetePago->fecha_fin ? $paquetePago->fecha_fin->format('Y-m-d') : '' ?>">
                        <small class="text-muted">Dejar vacío si la membresía no tiene término definido.</small>
                    </div>
                </div>
                <div class="alert alert-info mb-0">
                    <i class="fas fa-info-circle me-1"></i>
                    Al guardar se generará automáticamente la primera cuota mensual pendiente.
                </div>
            </div>

            <div class="col-12 text-center mt-4">
                <?= $this->Form->button(__('Guardar Paquete'), ['class' => 'btn btn-info']) ?>
                <?php
                    if (!empty($clienteFacturacionId)) {
                        echo $this->Html->link(__('Cancelar'), ['controller' => 'ClientesFacturacion', 'action' => 'view', $clienteFacturacionId], ['class' => 'btn btn-secondary']);
                    } else {
                        echo $this->Html->link(__('Cancelar'), ['action' => 'index'], ['class' => 'btn btn-secondary']);
                    }
                ?>
            </div>

            <?= $this->Form->end() ?>
        </div>
    </div>
</div>

<style>
.tipo-pago-card {
    cursor: pointer;
    border: 2px solid var(--bs-border-color, #dee2e6);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tipo-pago-card:hover {
    border-color: #86b7fe;
}
.tipo-pago-radio:checked + .tipo-pago-card {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
}
</style>

<script>
let cuotasCount = 0;

function cambiarTipoPago(tipo) {
    const seccionContado = document.getElementById('seccion-contado');
    const seccionPartes = document.getElementById('seccion-partes');
    const seccionRecurrente = document.getElementById('seccion-recurrente');

    if (!seccionContado || !seccionPartes || !seccionRecurrente) {
        return;
    }

    seccionContado.style.display = tipo === 'contado' ? 'block' : 'none';
    seccionPartes.style.display = tipo === 'partes' ? 'block' : 'none';
    seccionRecurrente.style.display = tipo === 'recurrente' ? 'block' : 'none';

    _toggleCuotasInputs(tipo === 'partes');

    const precioHint = document.querySelector('.precio-hint');
    if (precioHint) {
        precioHint.textContent = tipo === 'recurrente' ? 'Monto que se cobrará cada mes.' : 'Monto total del proyecto.';
    }

    if (tipo === 'partes') {
        actualizarPrecioDisplay();
        actualizarTotales();
    }
}

function _toggleCuotasInputs(enabled) {
    const seccionPartes = document.getElementById('seccion-partes');
    if (!seccionPartes) return;
    seccionPartes.querySelectorAll('input, select, textarea').forEach(el => {
        el.disabled = !enabled;
    });
}

function agregarCuota() {
    const container = document.getElementById('cuotas-container');
    if (!container) return;

    const nuevoIndex = cuotasCount;

    const html = `
        <div class="cuota-item card mb-3 border-start border-4 border-info">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h6 class="card-title mb-0">Cuota #<span class="numero-cuota">${nuevoIndex + 1}</span></h6>
                    <button type="button" class="btn btn-sm btn-outline-danger eliminar-cuota-btn">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Título Referencial</label>
                        <input type="text" name="cuotas[${nuevoIndex}][titulo_referencial]" class="form-control" placeholder="Ej: Cuota N° ${nuevoIndex + 1}">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Monto</label>
                        <div class="input-group">
                            <span class="input-group-text">S/</span>
                            <input type="number" name="cuotas[${nuevoIndex}][monto]" class="form-control monto-input" step="0.01" placeholder="0.00" data-cuota-index="${nuevoIndex}">
                        </div>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label class="form-label">Porcentaje</label>
                        <div class="input-group">
                            <input type="number" class="form-control porcentaje-input" readonly data-cuota-index="${nuevoIndex}">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Fecha de Recordatorio</label>
                        <input type="date" name="cuotas[${nuevoIndex}][fecha_recordatorio]" class="form-control">
                    </div>
                </div>
            </div>
        </div>
    `;

    container.insertAdjacentHTML('beforeend', html);
    cuotasCount++;
    actualizarNumerosCuotas();
    actualizarTotales();
}

function eliminarCuotaByElement(btn) {
    const item = btn.closest('.cuota-item');
    if (document.querySelectorAll('.cuota-item').length > 1) {
        item.remove();
        actualizarNumerosCuotas();
        actualizarTotales();
    } else {
        alert('Debe haber al menos una cuota');
    }
}

function actualizarNumerosCuotas() {
    const container = document.getElementById('cuotas-container');
    if (!container) return;

    let idx = 0;
    container.querySelectorAll('.cuota-item').forEach((item, position) => {
        const numero = item.querySelector('.numero-cuota');
        if (numero) numero.textContent = position + 1;

        item.querySelectorAll('input, select').forEach(el => {
            if (el.name && el.name.match(/^cuotas\[\d+\]/)) {
                el.name = el.name.replace(/^cuotas\[\d+\]/, `cuotas[${idx}]`);
            }
            if (el.dataset.cuotaIndex !== undefined) {
                el.dataset.cuotaIndex = idx;
            }
        });
        idx++;
    });

    cuotasCount = idx;
}

function actualizarPrecioDisplay() {
    const precioTotalInput = document.querySelector('input[name="precio_total"]');
    if (!precioTotalInput) return;

    const precioTotal = parseFloat(precioTotalInput.value) || 0;
    const display = document.getElementById('precio-total-display');
    if (display) display.textContent = 'S/ ' + precioTotal.toFixed(2);
}

function actualizarTotales() {
    const precioTotalInput = document.querySelector('input[name="precio_total"]');
    if (!precioTotalInput) return;

    const precioTotal = parseFloat(precioTotalInput.value) || 0;
    let totalCuotas = 0;

    const montoInputs = document.querySelectorAll('.monto-input');
    const porcentajeInputs = document.querySelectorAll('.porcentaje-input');

    montoInputs.forEach((input, index) => {
        const monto = parseFloat(input.value) || 0;
        totalCuotas += monto;

        const porcentaje = precioTotal > 0 ? ((monto / precioTotal) * 100).toFixed(2) : 0;
        if (porcentajeInputs[index]) porcentajeInputs[index].value = porcentaje;
    });

    const totalCuotasEl = document.getElementById('total-cuotas');
    if (totalCuotasEl) totalCuotasEl.textContent = 'S/ ' + totalCuotas.toFixed(2);

    const precioDisplay = document.getElementById('precio-total-display');
    if (precioDisplay) precioDisplay.textContent = 'S/ ' + precioTotal.toFixed(2);

    const diferencia = precioTotal - totalCuotas;
    const diferenciaBadge = document.getElementById('diferencia-alerta');
    const diferenciaOk = document.getElementById('diferencia-ok');

    if (!diferenciaBadge || !diferenciaOk) return;

    if (Math.abs(diferencia) > 0.01) {
        diferenciaBadge.style.display = 'inline-block';
        diferenciaBadge.innerHTML = '⚠️ Diferencia: S/ ' + Math.abs(diferencia).toFixed(2);
        diferenciaOk.style.display = 'none';
    } else {
        diferenciaBadge.style.display = 'none';
        diferenciaOk.style.display = 'inline-block';
    }
}

function inicializarPaquetePago() {
    actualizarNumerosCuotas();
    actualizarPrecioDisplay();
    actualizarTotales();

    const tipoSeleccionado = document.querySelector('input[name="tipo_pago"]:checked');
    if (tipoSeleccionado) {
        cambiarTipoPago(tipoSeleccionado.value);
        _toggleCuotasInputs(tipoSeleccionado.value === 'partes');
    }
}

document.addEventListener('click', function(e) {
    const addBtn = e.target.closest('#agregar-cuota-btn');
    if (addBtn) {
        e.preventDefault();
        agregarCuota();
        return;
    }

    const deleteBtn = e.target.closest('.eliminar-cuota-btn');
    if (deleteBtn) {
        e.preventDefault();
        eliminarCuotaByElement(deleteBtn);
        return;
    }
});

document.addEventListener('input', function(e) {
    if (e.target.matches('.monto-input')) actualizarTotales();
    if (e.target.matches('.precio-total-input')) {
        actualizarPrecioDisplay();
        actualizarTotales();
    }
});

document.addEventListener('change', function(e) {
    if (e.target.matches('input[name="tipo_pago"]')) {
        cambiarTipoPago(e.target.value);
    }
});

document.addEventListener('wheel', function (e) {
    if (document.activeElement && document.activeElement.type === 'number') {
        e.preventDefault();
    }
}, { passive: false });

document.addEventListener('DOMContentLoaded', function() {
    inicializarPaquetePago();
});

// Evitar doble envío del formulario (doble clic o doble submit)
const paqueteForm = document.getElementById('paquete-form');

if (paqueteForm) {
    paqueteForm.addEventListener('submit', function() {
        const submitBtn = paqueteForm.querySelector('button[type="submit"]');
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Guardando...';
        }
    });
}
</script>
