@extends('layouts.app')

@section('content')
<div class="bg-body-light">
    <div class="content content-full">
        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
            <div class="flex-grow-1">
                <h1 class="h3 fw-bold mb-2">
                    <i class="fa fa-sliders-h text-warning me-2"></i>Nuevo Ajuste de Extracto
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Registro de notas de débito y crédito manuales.
                </h2>
            </div>
            <div class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3">
                <a href="{{ route('ajustes.index') }}" class="btn btn-alt-secondary">
                    <i class="fa fa-arrow-left me-1"></i> Cancelar y Volver
                </a>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="row justify-content-center">
        <div class="col-md-11">
            <form method="POST" action="{{ route('ajustes.store') }}" id="formulario">
                @csrf
                <input type="hidden" name="idajuste" value="{{ $nuevoId }}">

                <div class="block block-rounded block-bordered">
                    <div class="block-header block-header-default border-bottom">
                        <h3 class="block-title">Formulario de Registro #{{ $nuevoId }}</h3>
                        <div class="block-options">
                            <span class="badge bg-dark px-3 py-2">FECHA: {{ $hoy }}</span>
                        </div>
                    </div>

                    <div class="block-content">
                        {{-- Errores de Validación --}}
                        @if($errors->any() || session('error'))
                            <div class="alert alert-danger d-flex align-items-center" role="alert">
                                <i class="fa fa-exclamation-triangle me-2"></i>
                                <ul class="mb-0">
                                    @foreach($errors->all() as $e) <li>{{ $e }}</li> @endforeach
                                    @if(session('error')) <li>{{ session('error') }}</li> @endif
                                </ul>
                            </div>
                        @endif

                        <div class="row g-4 mb-4">
                            {{-- SECCIÓN 1: CLIENTE Y CONTRATO --}}
                            <div class="col-xl-6">
                                <div class="bg-body-light p-3 rounded shadow-sm border">
                                    <h4 class="fs-sm text-uppercase text-muted border-bottom pb-2 mb-3">
                                        <i class="fa fa-user-tag me-1"></i> Selección de Beneficiario
                                    </h4>
                                    
                                    <div class="mb-3 position-relative">
                                        <label class="form-label fs-sm" for="input-buscar">Buscar Cliente</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-white"><i class="fa fa-search"></i></span>
                                            <input type="text" id="input-buscar" class="form-control" 
                                                   placeholder="Escriba código o nombre...">
                                        </div>
                                        {{-- Dropdown de resultados flotante --}}
                                        <div id="lista-clientes" class="list-group shadow-lg position-absolute w-100" 
                                             style="display:none; z-index:1050; max-height:250px; overflow-y:auto;"></div>
                                    </div>

                                    <div class="row g-2">
                                        <div class="col-md-4">
                                            <label class="form-label fs-xs text-muted">ID Sistema</label>
                                            <input type="text" id="codcliente_display" class="form-control form-control-alt" readonly placeholder="---">
                                            <input type="hidden" name="cliente" id="codcliente">
                                        </div>
                                        <div class="col-md-8">
                                            <label class="form-label fs-xs text-muted">Nombre Completo</label>
                                            <input type="text" id="nombre-cliente" class="form-control form-control-alt" readonly placeholder="No seleccionado">
                                            <input type="hidden" name="nombre" id="nombre-hidden">
                                        </div>
                                    </div>

                                    <div class="mt-3">
                                        <label class="form-label fs-sm" for="idcontrato">Contrato Aplicable <span class="text-danger">*</span></label>
                                        <select name="contrato" id="idcontrato" class="form-select border-primary" disabled required>
                                            <option value="0">Seleccione primero un cliente</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            {{-- SECCIÓN 2: DATOS DEL AJUSTE --}}
                            <div class="col-xl-6">
                                <div class="bg-body-light p-3 rounded shadow-sm border h-100">
                                    <h4 class="fs-sm text-uppercase text-muted border-bottom pb-2 mb-3">
                                        <i class="fa fa-coins me-1"></i> Configuración Financiera
                                    </h4>

                                    <div class="row g-3">
                                        <div class="col-12">
                                            <label class="form-label fs-sm d-block">Tipo de Ajuste <span class="text-danger">*</span></label>
                                            <div class="btn-group w-100" role="group">
                                                <input type="radio" class="btn-check" name="tipoajuste" id="tipoCargo" value="1" onchange="cambiarTipo(1)">
                                                <label class="btn btn-outline-danger" for="tipoCargo">
                                                    <i class="fa fa-arrow-up me-1"></i> CARGO (Deuda)
                                                </label>

                                                <input type="radio" class="btn-check" name="tipoajuste" id="tipoAbono" value="2" onchange="cambiarTipo(2)">
                                                <label class="btn btn-outline-success" for="tipoAbono">
                                                    <i class="fa fa-arrow-down me-1"></i> ABONO (Crédito)
                                                </label>
                                            </div>
                                        </div>

                                        <div class="col-md-6">
                                            <label class="form-label fs-sm" for="monto">Monto $us <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span class="input-group-text">$us</span>
                                                <input type="number" step="0.01" name="monto" id="monto" 
                                                       class="form-control fw-bold" placeholder="0.00" required>
                                            </div>
                                        </div>

                                        <div class="col-md-6" id="campo-fechaven" style="transition: opacity 0.3s ease;">
                                            <label class="form-label fs-sm" for="fechaven">Vencimiento</label>
                                            <input type="date" name="fechaven" id="fechaven" class="form-control">
                                            <small class="text-muted fs-xs">Solo para Cargos</small>
                                        </div>

                                        <div class="col-12">
                                            <label class="form-label fs-sm" for="observaciones">Glosa / Motivo <span class="text-danger">*</span></label>
                                            <textarea name="observaciones" id="observaciones" class="form-control" 
                                                      rows="3" placeholder="Ej: Ajuste por error en cobro de cuota #12..."></textarea>
                                            <div class="form-text fs-xs text-end">Max. 200 caracteres</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="block-content block-content-full block-content-sm bg-body-dark text-end">
                        <button type="button" class="btn btn-alt-secondary" onclick="limpiarFormulario()">
                            <i class="fa fa-eraser me-1"></i> Reiniciar
                        </button>
                        <button type="submit" class="btn btn-warning px-4" onclick="return validarFormulario()">
                            <i class="fa fa-save me-1"></i> Guardar Ajuste
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let timerBusqueda = null;

// Búsqueda con retardo (debounce)
document.getElementById('input-buscar').addEventListener('input', function() {
    clearTimeout(timerBusqueda);
    const q = this.value.trim();
    if (q.length < 2) {
        document.getElementById('lista-clientes').style.display = 'none';
        return;
    }
    timerBusqueda = setTimeout(() => buscarCliente(), 400);
});

function buscarCliente() {
    const q = document.getElementById('input-buscar').value.trim();
    if (!q) return;

    fetch(`/contratos/buscar-cliente?q=${encodeURIComponent(q)}`)
        .then(r => r.json())
        .then(clientes => {
            const lista = document.getElementById('lista-clientes');
            if (!clientes.length) { 
                lista.innerHTML = '<div class="list-group-item text-muted small">No se encontraron clientes</div>';
                lista.style.display = 'block';
                return; 
            }

            lista.innerHTML = clientes.map(c =>
                `<a href="#" class="list-group-item list-group-item-action py-2 fs-sm"
                    onclick="seleccionarCliente(${c.id}, '${c.nombre.replace(/'/g, "\\'")}'); return false;">
                    <div class="d-flex justify-content-between">
                        <span class="fw-bold text-primary">${c.id}</span>
                        <span class="text-muted fs-xs">CI: ${c.ci}</span>
                    </div>
                    <div>${c.nombre}</div>
                </a>`
            ).join('');
            lista.style.display = 'block';
        });
}

function seleccionarCliente(id, nombre) {
    document.getElementById('codcliente').value      = id;
    document.getElementById('codcliente_display').value = id;
    document.getElementById('nombre-cliente').value  = nombre;
    document.getElementById('nombre-hidden').value   = nombre;
    document.getElementById('input-buscar').value    = nombre;
    document.getElementById('lista-clientes').style.display = 'none';
    cargarContratos(id);
}

function cargarContratos(idCliente) {
    const sel = document.getElementById('idcontrato');
    sel.innerHTML = '<option value="0">Cargando...</option>';
    sel.disabled  = true;

    fetch(`/ajustes/contratos-cliente/${idCliente}`)
        .then(r => r.json())
        .then(contratos => {
            sel.innerHTML = '<option value="0">--- Seleccione el Contrato ---</option>';
            if (!contratos.length) {
                sel.innerHTML = '<option value="0 text-danger">⚠️ Sin contratos vigentes</option>';
                return;
            }
            contratos.forEach(c => {
                sel.innerHTML += `<option value="${c.idcontrato}">Contrato #${c.idcontrato} — Mzo. ${c.manzano} Lote ${c.lote} (${c.nom_urb ?? ''})</option>`;
            });
            sel.disabled = false;
        });
}

function cambiarTipo(tipo) {
    const campoFecha = document.getElementById('campo-fechaven');
    const inputFecha = document.getElementById('fechaven');
    if (tipo === 1) { // Cargo
        campoFecha.style.opacity = '1';
        inputFecha.disabled = false;
    } else { // Abono
        campoFecha.style.opacity = '0.4';
        inputFecha.value = '';
        inputFecha.disabled = true;
    }
}

function validarFormulario() {
    const cliente = document.getElementById('codcliente').value;
    if (!cliente) { alert('Debe seleccionar un cliente de la lista.'); return false; }
    
    const contrato = document.getElementById('idcontrato').value;
    if (!contrato || contrato == 0) { alert('Debe seleccionar un contrato válido.'); return false; }
    
    const tipo = document.querySelector('input[name=tipoajuste]:checked');
    if (!tipo) { alert('Seleccione si el ajuste es un Cargo o un Abono.'); return false; }
    
    const monto = parseFloat(document.getElementById('monto').value) || 0;
    if (monto <= 0) { alert('El monto debe ser mayor a cero.'); return false; }
    
    const obs = document.getElementById('observaciones').value.trim();
    if (obs.length < 5) { alert('Por favor, detalle el motivo del ajuste (mín. 5 caracteres).'); return false; }

    return confirm(`¿Confirma el registro del ajuste por $us ${monto.toFixed(2)}?`);
}

function limpiarFormulario() {
    if(confirm('¿Está seguro de limpiar todos los campos?')) {
        document.getElementById('formulario').reset();
        document.getElementById('idcontrato').innerHTML = '<option value="0">Seleccione primero un cliente</option>';
        document.getElementById('idcontrato').disabled  = true;
        document.getElementById('codcliente_display').value = '';
        cambiarTipo(0);
    }
}

// Cerrar lista al hacer clic fuera
document.addEventListener('click', e => {
    if (!e.target.closest('#input-buscar') && !e.target.closest('#lista-clientes')) {
        document.getElementById('lista-clientes').style.display = 'none';
    }
});
</script>
@endsection