@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-receipt text-primary me-2"></i>Nuevo Recibo de Pago
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Registro de cobranzas y gestión de saldos pendientes.
                </h2>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <form method="POST" action="{{ route('recibos.store') }}" id="form-recibo">
        @csrf

        <div class="row">
            <div class="col-xl-8">
                <div class="block block-rounded block-bordered">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Información del Recibo</h3>
                        <div class="block-options">
                            <div class="btn-group" role="group">
                                <input type="radio" class="btn-check" name="tipo_recibo_sel" id="tipoAuto" value="auto" checked onchange="toggleTipoRecibo('auto')">
                                <label class="btn btn-sm btn-alt-primary" for="tipoAuto">Automático</label>
                                <input type="radio" class="btn-check" name="tipo_recibo_sel" id="tipoManual" value="manual" onchange="toggleTipoRecibo('manual')">
                                <label class="btn btn-sm btn-alt-primary" for="tipoManual">Manual</label>
                            </div>
                        </div>
                    </div>
                    <div class="block-content">
                        @if($errors->any())
                            <div class="alert alert-danger d-flex align-items-center" role="alert">
                                <div class="flex-shrink-0"><i class="fa fa-fw fa-times-circle"></i></div>
                                <div class="flex-grow-1 ms-3">
                                    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                                </div>
                            </div>
                        @endif

                        <div class="row g-3 mb-4">
                            <div class="col-md-4" id="campo-auto">
                                <label class="form-label">N° Recibo (Auto)</label>
                                <input type="text" name="idautomatico" id="id-automatico" class="form-control form-control-alt fw-bold" value="{{ $idAuto }}" readonly>
                            </div>
                            <div class="col-md-4" id="campo-manual" style="display:none;">
                                <label class="form-label">N° Recibo (Manual)</label>
                                <input type="number" name="idmanual" class="form-control border-primary" id="id-manual" placeholder="0000">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Fecha <span class="text-danger">*</span></label>
                                <input type="text" name="fecha" id="fecha" class="form-control" value="{{ $hoy }}" onchange="buscarTipoCambio(); buscarSaldos()">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">T.C.</label>
                                <input type="number" step="0.01" name="tc" id="tc" class="form-control fw-bold text-primary" onchange="calcularMontos()">
                                <div id="tc-info" class="fs-xs mt-1 text-muted"></div>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Cobrador <span class="text-danger">*</span></label>
                                <select name="cboCobradores" class="form-select" required>
                                    <option value="0">Seleccione un cobrador</option>
                                    @foreach($cobradores as $c)
                                        <option value="{{ $c->id }}">{{ $c->nombre }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="block block-rounded block-bordered">
                    <div class="block-header block-header-default border-bottom">
                        <h3 class="block-title">Cliente y Contrato</h3>
                    </div>
                    <div class="block-content">
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Buscar Cliente</label>
                                <div class="input-group">
                                    <input type="text" id="input-cliente" class="form-control" placeholder="Escriba código o nombre...">
                                    <span class="input-group-text"><i class="fa fa-search"></i></span>
                                </div>
                                <div id="lista-clientes" class="list-group mt-1 shadow-sm" style="display:none; position:absolute; z-index:100; width:90%; max-height:180px; overflow-y:auto;"></div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Cliente Seleccionado</label>
                                <input type="text" id="nombre-cliente" name="nombre" class="form-control form-control-alt fw-semibold" readonly>
                                <input type="hidden" name="codcliente" id="codcliente">
                            </div>
                            <div class="col-12">
                                <label class="form-label text-primary fw-bold">Contrato Asociado</label>
                                <select name="idcontrato" id="idcontrato" class="form-select border-primary" onchange="buscarSaldos()" disabled>
                                    <option value="0">---</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="block block-rounded block-bordered overflow-hidden">
                    <div class="block-header block-header-default bg-dark">
                        <h3 class="block-title text-white">Saldos Pendientes (USD)</h3>
                        <div class="block-options" id="cargando-saldos" style="display:none;">
                            <div class="spinner-border spinner-border-sm text-white" role="status"></div>
                        </div>
                    </div>
                    <div class="block-content p-0">
                        <table class="table table-vcenter table-striped mb-0">
                            <thead class="bg-body-dark">
                                <tr>
                                    <th class="text-center" style="width: 100px;">Concepto</th>
                                    <th class="text-end">Saldo Total</th>
                                    <th class="text-end">Saldo a la Fecha</th>
                                    <th class="text-end" style="width: 160px;">Monto a Pagar</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-cuotas">
                                @for($i = 0; $i < 5; $i++)
                                <tr id="fila-{{ $i }}" style="{{ $i > 0 ? 'display:none;' : '' }}">
                                    <td class="text-center fw-bold text-muted small">{{ $i == 0 ? 'Cuota' : "Ajuste $i" }}</td>
                                    <td class="text-end"><input type="text" name="t{{ $i }}" id="t{{ $i }}" class="form-control form-control-sm form-control-alt text-end" value="0" readonly></td>
                                    <td class="text-end"><input type="text" name="s{{ $i }}" id="s{{ $i }}" class="form-control form-control-sm form-control-alt text-end" value="0" readonly></td>
                                    <td class="text-end">
                                        <input type="number" step="0.01" name="p{{ $i }}" id="p{{ $i }}" class="form-control form-control-sm text-end border-success" 
                                               placeholder="0.00" onchange="validarMontoCuota({{ $i }}); sumarTotales()" {{ $i > 0 ? 'disabled' : '' }}>
                                    </td>
                                </tr>
                                @endfor
                            </tbody>
                            <tfoot>
                                <tr class="bg-success-light fw-bold">
                                    <td colspan="3" class="text-end text-success">Total a Pagar USD:</td>
                                    <td class="text-end">
                                        <input type="text" name="pagado" id="pagado" class="form-control form-control-sm text-end fw-bold bg-white text-success" value="0.00" readonly>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="block block-rounded block-bordered sticky-top" style="top: 20px;">
                    <div class="block-header block-header-default">
                        <h3 class="block-title">Caja y Conversión</h3>
                    </div>
                    <div class="block-content">
                        <div id="alerta-mora" class="alert alert-warning mb-4" style="display:none;">
                            <div class="d-flex align-items-center">
                                <i class="fa fa-exclamation-triangle me-2"></i>
                                <span class="fs-xs fw-bold text-uppercase">Mora > 90 días</span>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Fecha Saldo</label>
                            <input type="text" name="fsaldo" id="fsaldo" class="form-control" value="{{ $hoy }}" onchange="buscarSaldos()">
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Monto Pagado $us</label>
                            <input type="number" step="0.01" name="montosus" id="montosus" class="form-control form-control-lg fw-bold border-success text-success" placeholder="0.00" onchange="calcularBs()">
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Monto Pagado Bs</label>
                            <input type="number" step="0.01" name="montobs" id="montobs" class="form-control form-control-lg fw-bold border-primary text-primary" placeholder="0.00">
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Observaciones</label>
                            <textarea name="observaciones" class="form-control" rows="3" placeholder="Notas del recibo..."></textarea>
                        </div>
                    </div>
                    <div class="block-content block-content-full block-content-sm bg-body-light border-top">
                        <button type="submit" class="btn btn-primary w-100 py-3 mb-2" onclick="return validarFormulario()">
                            <i class="fa fa-save me-1"></i> Guardar Recibo
                        </button>
                        <a href="{{ route('recibos.index') }}" class="btn btn-alt-secondary w-100">
                            Cancelar
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <input type="hidden" name="urbanizacion" id="urbanizacion">
        <input type="hidden" name="distrito" id="distrito">
        <input type="hidden" name="manzano" id="manzano">
        <input type="hidden" name="lote" id="lote">
    </form>
</div>

<script>
const CSRF   = '{{ csrf_token() }}';
const HOY    = '{{ $hoy }}';
let clienteActual = null;

// ── Tipo de recibo ────────────────────────────────────────────────────────
function toggleTipoRecibo(tipo) {
  document.getElementById('campo-auto').style.display   = tipo === 'auto'   ? 'block' : 'none';
  document.getElementById('campo-manual').style.display = tipo === 'manual' ? 'block' : 'none';

  // Fix: limpiar el campo que NO está activo para que no se envíe su valor
  // (ambos inputs siempre están en el DOM y se envían con el form)
  if (tipo === 'manual') {
    document.getElementById('id-automatico').value = ''; // vaciar auto → controller detecta manual
    document.getElementById('id-manual').focus();
  } else {
    document.getElementById('id-automatico').value = '{{ $idAuto }}'; // restaurar auto
    document.getElementById('id-manual').value = '';
  }
}

// ── Buscar tipo de cambio por fecha ──────────────────────────────────────
function buscarTipoCambio() {
  const fecha = document.getElementById('fecha').value;
  if (!fecha) return;
  fetch(`{{ route('recibos.tc') }}?fecha=${encodeURIComponent(fecha)}`)
    .then(r => r.json())
    .then(data => {
      if (data.tc) {
        document.getElementById('tc').value = data.tc;
        document.getElementById('tc-info').textContent = `TC del ${fecha}`;
      } else {
        document.getElementById('tc-info').textContent = 'TC no encontrado — ingrese manualmente';
      }
    });
}

// ── Buscar cliente por NOMBRE (Fix: antes buscaba por código) ────────────
let timer = null;
document.getElementById('input-cliente').addEventListener('input', function() {
  clearTimeout(timer);
  const q = this.value.trim();
  const lista = document.getElementById('lista-clientes');
  if (q.length < 2) { lista.style.display = 'none'; return; }
  timer = setTimeout(() => buscarClientesPorNombre(q), 400);
});

function buscarClientesPorNombre(q) {
  // Llama al nuevo endpoint que busca por nombre/CI y solo devuelve
  // clientes con contratos vigentes (lote iteest=3)
  fetch(`/recibos/buscar-clientes?q=${encodeURIComponent(q)}`)
    .then(r => r.json())
    .then(clientes => {
      const lista = document.getElementById('lista-clientes');
      if (!clientes.length) {
        lista.innerHTML = '<a class="list-group-item list-group-item-action disabled py-1 small text-muted">No se encontraron clientes con contratos activos</a>';
        lista.style.display = 'block';
        return;
      }
      lista.innerHTML = clientes.map(c =>
        `<a href="#" class="list-group-item list-group-item-action py-1 small"
            onclick="seleccionarCliente(${c.id}, '${c.nombre.replace(/'/g,"\\'")}'); return false;">
          <strong>${c.nombre}</strong>
          <small class="text-muted ms-1">CI: ${c.ci || '—'} · ID: ${c.id}</small>
        </a>`
      ).join('');
      lista.style.display = 'block';
    })
    .catch(() => {
      document.getElementById('lista-clientes').style.display = 'none';
    });
}



function seleccionarClientePorId(id) {
  // Eliminamos la función route() de Laravel para evitar que falle al faltar el parámetro
  fetch(`/recibos/contratos-cliente/${id}`) 
    .then(r => r.json())
    .then(contratos => {
      if (contratos.length > 0) {
        const nombre = contratos[0]?.nombre || `Cliente ${id}`;
        seleccionarCliente(id, nombre);
      }
    });
}

function seleccionarCliente(id, nombre) {
  clienteActual = id;
  document.getElementById('codcliente').value = id;
  document.getElementById('nombre-cliente').value = nombre;
  document.getElementById('input-cliente').value = nombre; // mostrar nombre, no código
  document.getElementById('lista-clientes').style.display = 'none';

  // Cargar contratos
  cargarContratosCliente(id);
}

// ── Cargar contratos del cliente ──────────────────────────────────────────

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

  // Cambiamos route(...) por el string directo
  fetch(`/recibos/contratos-cliente/${idCliente}`)
    .then(r => r.json())
    .then(contratos => {
      sel.innerHTML = '<option value="0">Seleccione Contrato</option>';
      if (!contratos.length) {
        sel.innerHTML = '<option value="0">Sin contratos con saldo</option>';
        return;
      }
      contratos.forEach(c => {
        sel.innerHTML += `<option value="${c.idcontrato}"
          data-urb="${c.nom_urb}" data-dis="${c.nom_dis}"
          data-mzno="${c.manzano}" data-lote="${c.lote}">
          Contrato #${c.idcontrato} — Mzno. ${c.manzano} Lote ${c.lote}
        </option>`;
      });
      sel.disabled = false;
    });
}

// ── Buscar saldos AJAX (equivale a ver_saldos.php) ───────────────────────
function buscarSaldos() {
  const cliente   = document.getElementById('codcliente').value;
  const contrato  = document.getElementById('idcontrato').value;
  const fecha     = document.getElementById('fsaldo').value || document.getElementById('fecha').value;

  if (!cliente || !contrato || contrato == 0) return;

  document.getElementById('cargando-saldos').style.display = 'inline';

  const params = new URLSearchParams({ codcliente: cliente, idcontrato: contrato, fecha });
  fetch(`{{ route('recibos.saldos') }}?${params}`)
    .then(r => r.json())
    .then(data => {
      document.getElementById('cargando-saldos').style.display = 'none';

      // Cuota normal (fila 0)
      document.getElementById('t0').value = data.cargot || 0;
      document.getElementById('s0').value = data.saldo  || 0;

      // Ajustes (filas 1-4)
      for (let i = 1; i <= 4; i++) {
        const s = data[`s${i}`] || 0;
        const t = data[`t${i}`] || 0;
        document.getElementById(`t${i}`).value = t;
        document.getElementById(`s${i}`).value = s;
        const fila = document.getElementById(`fila-${i}`);
        const inp  = document.getElementById(`p${i}`);
        if (t > 0) {
          fila.style.display = '';
          inp.disabled = false;
        } else {
          fila.style.display = 'none';
          inp.disabled = true;
          inp.value = '';
        }
      }

      // Mora > 90 días
      document.getElementById('alerta-mora').style.display =
        data.swdias == 1 ? 'block' : 'none';
    });
}

// ── Validar monto de cuota ────────────────────────────────────────────────
function validarMontoCuota(i) {
  const saldo  = parseFloat(document.getElementById(`s${i}`).value) || 0;
  const pagado = parseFloat(document.getElementById(`p${i}`).value) || 0;

  if (pagado === 0) return; // vacío está OK

  if (!isNaN(pagado) && pagado > 0 && pagado > saldo) {
    alert(`El monto pagado no puede superar el saldo de $us ${saldo}`);
    document.getElementById(`p${i}`).value = '';
  }
}

// ── Sumar totales ────────────────────────────────────────────────────────
function sumarTotales() {
  let total = 0;
  for (let i = 0; i < 5; i++) {
    const v = parseFloat(document.getElementById(`p${i}`).value) || 0;
    total += v;
  }
  document.getElementById('pagado').value = total.toFixed(2);

  // Autocompletar montosus
  if (!document.getElementById('montosus').value) {
    document.getElementById('montosus').value = total.toFixed(2);
  }
  calcularBs();
}

// ── Calcular Bs desde USD ─────────────────────────────────────────────────
function calcularBs() {
  const usd = parseFloat(document.getElementById('montosus').value) || 0;
  const tc  = parseFloat(document.getElementById('tc').value) || 0;
  if (tc > 0) {
    document.getElementById('montobs').value = (usd * tc).toFixed(2);
  }
}

// ── Validar formulario antes de enviar ───────────────────────────────────
function validarFormulario() {
  const cliente  = document.getElementById('codcliente').value;
  const contrato = document.getElementById('idcontrato').value;
  const fecha    = document.getElementById('fecha').value;
  const tc       = document.getElementById('tc').value;
  const pagado   = parseFloat(document.getElementById('pagado').value) || 0;

  if (!cliente || cliente == 0) {
    alert('Seleccione un cliente.'); return false;
  }
  if (!contrato || contrato == 0) {
    alert('Seleccione un contrato.'); return false;
  }
  if (!fecha) {
    alert('Ingrese la fecha del recibo.'); return false;
  }
  if (!tc || parseFloat(tc) <= 0) {
    alert('Ingrese el tipo de cambio.'); return false;
  }
  if (pagado <= 0) {
    alert('Ingrese al menos un monto a pagar.'); return false;
  }

  // Verificar tipo de recibo
  const esManual = document.getElementById('tipoManual').checked;
  if (esManual) {
    const idManual = document.getElementById('id-manual').value;
    if (!idManual || isNaN(idManual)) {
      alert('Ingrese el número de recibo manual.'); return false;
    }
  }

  return confirm(`¿Guardar recibo por $us ${pagado.toFixed(2)}?`);
}

// ── Al cargar: buscar TC del día ──────────────────────────────────────────
window.addEventListener('load', () => buscarTipoCambio());

// ── Cerrar lista al hacer clic afuera ────────────────────────────────────
document.addEventListener('click', e => {
  if (!e.target.closest('#input-cliente') && !e.target.closest('#lista-clientes')) {
    document.getElementById('lista-clientes').style.display = 'none';
  }
});

// ── Contrato: cargar datos al cambiar ────────────────────────────────────
document.getElementById('idcontrato').addEventListener('change', function() {
  const opt = this.options[this.selectedIndex];
  if (opt) {
    document.getElementById('urbanizacion').value = opt.dataset.urb || '';
    document.getElementById('distrito').value     = opt.dataset.dis || '';
    document.getElementById('manzano').value      = opt.dataset.mzno || '';
    document.getElementById('lote').value         = opt.dataset.lote || '';
  }
  buscarSaldos();
});
</script>
@endsection