@extends('../layouts/partials/header')

@section('content')

<div class="container mt-3">
    <br>
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs" id="tramiteTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" id="tab-datos-tab" data-bs-toggle="tab" href="#tab-datos" role="tab">
                        <i class="bi bi-person-vcard"></i> Nuevo trámite
                    </a>
                </li>
            </ul>
        </div>

        <div class="card-body">

            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>OK:</strong> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Por favor corrige los siguientes errores:</strong>
                    <ul class="mb-0 mt-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <form action="{{ route('tramites.store') }}" method="POST" id="formTramite">
                @csrf
                <input type="hidden" name="active_tab" id="active_tab" value="{{ old('active_tab', 'tab-datos') }}">

                <div class="tab-content mt-3" id="tramiteTabsContent">

                    {{-- ===== TAB 1: DATOS DEL TITULAR ===== --}}
                    <div class="tab-pane fade show active" id="tab-datos" role="tabpanel">
                        <p class="text-muted small">Los campos marcados con <span class="text-danger">*</span> son obligatorios.</p>
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label fw-bold">*Cliente (vinculado al sistema)</label>
                                <div class="position-relative">
                                    <div class="input-group">
                                        <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
                                        <input type="text" id="buscar_cliente" autocomplete="off"
                                            class="form-control @error('id_cliente') is-invalid @enderror"
                                            placeholder="Escriba nombre o RFC del cliente...">
                                    </div>
                                    <input type="hidden" name="id_cliente" id="id_cliente"
                                        value="{{ old('id_cliente') }}">
                                    <div id="lista_clientes"
                                        class="dropdown-menu w-100 shadow"
                                        style="max-height:220px;overflow-y:auto;"></div>
                                </div>
                                <div id="cliente_badge" class="mt-1 small text-success {{ old('id_cliente') ? '' : 'd-none' }}">
                                    <i class="bi bi-check-circle-fill"></i>
                                    <span id="cliente_badge_nombre">
                                        @if(old('id_cliente'))
                                            {{ $clientes->firstWhere('id', old('id_cliente'))?->nombre_completo }}
                                        @endif
                                    </span>
                                </div>
                                @error('id_cliente')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="row mt-4">
                                <div class="col-12 d-flex gap-2">
                                    <button type="submit" class="btn btn-primary btn-sm">
                                        <i class="bi bi-floppy"></i> Guardar
                                    </button>
                                    <a href="{{ route('tramites.index') }}" class="btn btn-secondary btn-sm">Cancelar</a>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>{{-- /tab-content --}}

                

            </form>
        </div>{{-- /card-body --}}
    </div>{{-- /card --}}
</div>


@php
    $clientesJs = $clientes->map(fn($c) => [
        'id'     => $c->id,
        'nombre' => $c->nombre_completo,
        'rfc'    => $c->ip_rfc ?? '',
    ]);
@endphp
<script>
document.addEventListener('DOMContentLoaded', function () {
    const clientes = @json($clientesJs);

    const inputTexto  = document.getElementById('buscar_cliente');
    const inputHidden = document.getElementById('id_cliente');
    const lista       = document.getElementById('lista_clientes');
    const badge       = document.getElementById('cliente_badge');
    const badgeNombre = document.getElementById('cliente_badge_nombre');

    // Si viene un valor old(), mostrar el nombre en el input
    const oldId = inputHidden.value;
    if (oldId) {
        const encontrado = clientes.find(c => String(c.id) === String(oldId));
        if (encontrado) inputTexto.value = encontrado.nombre + (encontrado.rfc ? ' (' + encontrado.rfc + ')' : '');
    }

    function mostrarLista(term) {
        lista.innerHTML = '';
        if (!term) { lista.classList.remove('show'); return; }

        const lower = term.toLowerCase();
        const resultados = clientes
            .filter(c => c.nombre.toLowerCase().includes(lower) || c.rfc.toLowerCase().includes(lower))
            .slice(0, 12);

        if (!resultados.length) { lista.classList.remove('show'); return; }

        resultados.forEach(function (c) {
            const btn = document.createElement('button');
            btn.type      = 'button';
            btn.className = 'dropdown-item';
            btn.innerHTML = c.nombre + (c.rfc ? ' <span class="text-muted small">(' + c.rfc + ')</span>' : '');
            btn.addEventListener('mousedown', function (e) {
                e.preventDefault();
                seleccionar(c);
            });
            lista.appendChild(btn);
        });
        lista.classList.add('show');
    }

    function seleccionar(c) {
        inputTexto.value  = c.nombre + (c.rfc ? ' (' + c.rfc + ')' : '');
        inputHidden.value = c.id;
        lista.classList.remove('show');
        badge.classList.remove('d-none');
        badgeNombre.textContent = c.nombre;
        inputTexto.classList.remove('is-invalid');
    }

    function limpiarSeleccion() {
        inputHidden.value = '';
        badge.classList.add('d-none');
        badgeNombre.textContent = '';
    }

    inputTexto.addEventListener('input', function () {
        limpiarSeleccion();
        mostrarLista(this.value.trim());
    });

    inputTexto.addEventListener('blur', function () {
        setTimeout(() => lista.classList.remove('show'), 150);
    });

    inputTexto.addEventListener('keydown', function (e) {
        const items = lista.querySelectorAll('.dropdown-item');
        const active = lista.querySelector('.dropdown-item.active');
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            const next = active ? active.nextElementSibling : items[0];
            if (active) active.classList.remove('active');
            if (next) next.classList.add('active');
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            const prev = active ? active.previousElementSibling : items[items.length - 1];
            if (active) active.classList.remove('active');
            if (prev) prev.classList.add('active');
        } else if (e.key === 'Enter' && active) {
            e.preventDefault();
            active.dispatchEvent(new MouseEvent('mousedown'));
        } else if (e.key === 'Escape') {
            lista.classList.remove('show');
        }
    });

    // Validar antes de enviar
    document.getElementById('formTramite').addEventListener('submit', function (e) {
        if (!inputHidden.value) {
            e.preventDefault();
            inputTexto.classList.add('is-invalid');
            inputTexto.focus();
        }
    });
});
</script>

@endsection

@extends('../layouts/partials/footer')