@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-user-plus text-primary me-2"></i>Registrar Cliente
                </h1>
                <h2 class="fs-base lh-base fw-medium text-muted mb-0">
                    Grupo de Contrato #<span class="text-primary fw-bold">{{ $nuevoGrupo }}</span>
                </h2>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="block block-rounded block-bordered">
        <div class="block-header block-header-default">
            <h3 class="block-title">Formulario de Ingreso</h3>
            <div class="block-options">
                <input type="text" id="tipo-display" class="form-control form-control-sm fw-bold text-primary text-center" 
                       value="Titular" readonly style="width: 120px; background-color: #f0f8ff;">
            </div>
        </div>
        <div class="block-content">
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
                </div>
            @endif

            <div class="row g-3 mb-4">
                <div class="col-md-2">
                    <label class="form-label">Código</label>
                    <input type="text" id="codcliente" class="form-control" value="{{ $nuevoId }}" readonly>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Nombres <span class="text-danger">*</span></label>
                    <input type="text" id="nombre" class="form-control" maxlength="25" style="text-transform:uppercase" autofocus>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Ap. Paterno</label>
                    <input type="text" id="paterno" class="form-control" maxlength="15" style="text-transform:uppercase">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Ap. Materno</label>
                    <input type="text" id="materno" class="form-control" maxlength="15" style="text-transform:uppercase" onblur="verificarExistencia()">
                </div>

                <div class="col-md-3">
                    <label class="form-label">CI / NIT <span class="text-danger">*</span></label>
                    <input type="text" id="ci" class="form-control" maxlength="15">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Departamento</label>
                    <select id="cboCiudades" class="form-select">
                        <option value="0">Seleccione</option>
                        @foreach($ciudades as $c)
                            <option value="{{ $c->codigociu }}">{{ $c->nombreciu }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Dirección <span class="text-danger">*</span></label>
                    <input type="text" id="direccion" class="form-control" maxlength="60" style="text-transform:uppercase">
                </div>

                <div class="col-md-2">
                    <label class="form-label">Sexo</label>
                    <select id="sexo" class="form-select">
                        <option value="0">Seleccione</option>
                        <option value="1">Femenino</option>
                        <option value="2">Masculino</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Estado Civil</label>
                    <select id="estadocivil" class="form-select">
                        <option value="0">Seleccione</option>
                        <option value="1">Soltero/a</option>
                        <option value="2">Casado/a</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Celular</label>
                    <input type="text" id="celular" class="form-control" maxlength="8">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Observaciones</label>
                    <input type="text" id="observaciones" class="form-control" style="text-transform:uppercase">
                </div>

                <div class="col-12" id="alerta-existe" style="display:none;">
                    <div class="alert alert-warning d-flex align-items-center justify-content-between mb-0">
                        <span><i class="fa fa-exclamation-triangle me-2"></i><span id="alerta-texto"></span></span>
                        <button type="button" class="btn btn-sm btn-warning" onclick="usarExistente()">Usar este registro</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="block-content block-content-full block-content-sm bg-body-light border-top text-end">
            <button type="button" class="btn btn-alt-secondary me-1" onclick="limpiarFormulario()">
                <i class="fa fa-eraser me-1"></i> Limpiar
            </button>
            <button type="button" class="btn btn-primary" onclick="agregarCliente()">
                <i class="fa fa-plus me-1"></i> Agregar al Grupo
            </button>
        </div>
    </div>

    <div class="block block-rounded block-bordered mt-4">
        <div class="block-header block-header-default bg-dark">
            <h3 class="block-title text-white">Clientes a Registrar</h3>
            <div class="block-options">
                <span class="badge bg-light text-dark" id="contador-badge">0 clientes</span>
            </div>
        </div>
        <div class="block-content p-0">
            <table class="table table-vcenter table-striped mb-0" id="tabla-lineas">
                <thead>
                    <tr>
                        <th class="text-center" style="width: 100px;">Código</th>
                        <th>Nombre</th>
                        <th>CI</th>
                        <th>Dirección</th>
                        <th class="text-center">Tipo</th>
                        <th class="text-center" style="width: 50px;"></th>
                    </tr>
                </thead>
                <tbody id="tbody-lineas">
                    <tr id="fila-vacia">
                        <td colspan="6" class="text-center text-muted py-4">Aún no se han agregado clientes</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="block-content block-content-full block-content-sm bg-body-light border-top text-end">
            <a href="{{ route('clientes.index') }}" class="btn btn-alt-secondary me-1" onclick="return confirm('¿Cancelar el registro?')">Cancelar</a>
            <button type="button" class="btn btn-success" onclick="generarContrato()" id="btn-contrato" disabled>
                <i class="fa fa-file-contract me-1"></i> Generar Contrato
            </button>
        </div>
    </div>
</div>

<form method="POST" action="{{ route('clientes.confirmar-grupo') }}" id="form-confirmar">
    @csrf
    <input type="hidden" name="idgrupo" value="{{ $nuevoGrupo }}">
</form>

<script>
// SweetAlert2 — instalado localmente vía npm (public/vendor/sweetalert2)
// import desde asset() para no depender de CDN
</script>
@push('js')
<script src="{{ asset('vendor/sweetalert2/sweetalert2.all.min.js') }}"></script>
@endpush

<script>
const IDGRUPO  = {{ $nuevoGrupo }};
const CSRF     = '{{ csrf_token() }}';
let   nuevoId  = {{ $nuevoId }};
let   tipActual = 'Titular';
let   clienteExistente = null;

function verificarExistencia() {
    const nombre = buildNombre();
    if (!nombre) return;
    fetch(`{{ route('clientes.comprobar') }}?nombre=${encodeURIComponent(nombre)}&tipo=${tipActual}`)
        .then(r => r.json())
        .then(data => {
            if (data.existe) {
                clienteExistente = data;
                document.getElementById('alerta-texto').textContent = `YA EXISTE: ${data.nombre} — CI: ${data.ci}`;
                document.getElementById('alerta-existe').style.display = 'flex';
            } else {
                clienteExistente = null;
                document.getElementById('alerta-existe').style.display = 'none';
            }
        });
}

function usarExistente() {
    if (!clienteExistente) return;
    agregarLineaTabla(clienteExistente.idcliente, clienteExistente.nombre, clienteExistente.ci, '', tipActual, true);
    document.getElementById('alerta-existe').style.display = 'none';
    limpiarFormulario();
}

function agregarCliente() {
    const nombre = buildNombre();
    const ci = document.getElementById('ci').value.trim();
    const direccion = document.getElementById('direccion').value.trim();

    if (!nombre || !ci || !direccion) {
        Swal.fire({
            icon: 'warning',
            title: 'Campos incompletos',
            text: 'Por favor complete los campos obligatorios: Nombre, CI y Dirección.',
            confirmButtonColor: '#4c78dd',
        });
        return;
    }

    const payload = {
        _token: CSRF,
        nombre: document.getElementById('nombre').value.trim(),
        paterno: document.getElementById('paterno').value.trim(),
        materno: document.getElementById('materno').value.trim(),
        ci,
        cboCiudades: document.getElementById('cboCiudades').value,
        direccion,
        sexo: document.getElementById('sexo').value,
        estadocivil: document.getElementById('estadocivil').value,
        celular: document.getElementById('celular').value,
        observaciones: document.getElementById('observaciones').value,
        tipo: tipActual,
        idgrupo: IDGRUPO,
    };

    fetch('{{ route("clientes.store-tmp") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            nuevoId = data.nuevoId;
            document.getElementById('codcliente').value = nuevoId;
            renderLineas(data.lineas);
            limpiarFormulario();
            tipActual = 'Codeudor';
            document.getElementById('tipo-display').value = 'Codeudor';

            Swal.fire({
                icon: 'success',
                title: 'Cliente agregado',
                text: `${nombre} fue agregado al grupo.`,
                timer: 1800,
                showConfirmButton: false,
                toast: true,
                position: 'top-end',
            });
        }
    });
}

function renderLineas(lineas) {
    const tbody = document.getElementById('tbody-lineas');
    const btnContrato = document.getElementById('btn-contrato');
    const badge = document.getElementById('contador-badge');

    if (!lineas || lineas.length === 0) {
        tbody.innerHTML = '<tr id="fila-vacia"><td colspan="6" class="text-center text-muted py-4">Aún no se han agregado clientes</td></tr>';
        btnContrato.disabled = true;
        badge.textContent = '0 clientes';
        return;
    }

    tbody.innerHTML = lineas.map(l => `
        <tr>
            <td class="text-center fw-bold">${l.id}</td>
            <td>${l.nombre}</td>
            <td>${l.ci}</td>
            <td>${l.direccion}</td>
            <td class="text-center">
                <span class="badge bg-${l.tipo === 'Titular' ? 'primary' : 'info'}">${l.tipo}</span>
            </td>
            <td class="text-center">
                ${l.tipo !== 'Titular' ? `<button class="btn btn-sm btn-alt-danger" onclick="eliminarLinea(${l.id}, '${l.nombre}')"><i class="fa fa-trash"></i></button>` : ''}
            </td>
        </tr>
    `).join('');

    btnContrato.disabled = false;
    badge.textContent = `${lineas.length} cliente${lineas.length > 1 ? 's' : ''}`;
}

function eliminarLinea(id, nombre) {
    Swal.fire({
        icon: 'warning',
        title: '¿Eliminar codeudor?',
        html: `Se eliminará a <strong>${nombre}</strong> del grupo.`,
        showCancelButton: true,
        confirmButtonColor: '#e04f1a',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar',
    }).then(result => {
        if (!result.isConfirmed) return;
        fetch('{{ route("clientes.destroy-tmp") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ _token: CSRF, id, idgrupo: IDGRUPO }),
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                renderLineas(data.lineas);
                Swal.fire({
                    icon: 'success',
                    title: 'Eliminado',
                    timer: 1200,
                    showConfirmButton: false,
                    toast: true,
                    position: 'top-end',
                });
            }
        });
    });
}

function agregarLineaTabla(id, nombre, ci, direccion, tipo, esExistente) {
    fetch('{{ route("clientes.store-tmp") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ _token: CSRF, id, nombre, ci, direccion, tipo, idgrupo: IDGRUPO, esExistente: true }),
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            renderLineas(data.lineas);
            tipActual = 'Codeudor';
            document.getElementById('tipo-display').value = 'Codeudor';
        }
    });
}

function generarContrato() {
    Swal.fire({
        icon: 'question',
        title: '¿Confirmar registro?',
        text: 'Se guardarán los clientes y se creará el contrato.',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, generar contrato',
        cancelButtonText: 'Cancelar',
    }).then(result => {
        if (result.isConfirmed) document.getElementById('form-confirmar').submit();
    });
}

function buildNombre() {
    const n = document.getElementById('nombre').value.trim();
    const p = document.getElementById('paterno').value.trim();
    const m = document.getElementById('materno').value.trim();
    return [n, p, m].filter(Boolean).join(' ').toUpperCase();
}

function limpiarFormulario() {
    ['nombre','paterno','materno','ci','direccion','celular','observaciones'].forEach(id => document.getElementById(id).value = '');
    ['cboCiudades','sexo','estadocivil'].forEach(id => document.getElementById(id).value = '0');
    clienteExistente = null;
    document.getElementById('alerta-existe').style.display = 'none';
    document.getElementById('nombre').focus();
}
</script>
@endsection