@extends('../padre.padre')

@section('styles')
<style>
    /* Estilos personalizados para Grupos de Clientes */
    .header-grupos {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0369a1 100%);
        color: #ffffff;
        padding: 10px 18px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-bottom: 1rem;
    }
    .header-grupos #botonRegresar {
        margin: 0 !important;
        padding: 0 !important;
    }
    .header-grupos #botonRegresar img.inicio {
        width: 36px !important;
        height: 36px !important;
        vertical-align: middle;
        transition: transform 0.2s ease;
    }
    .header-grupos #botonRegresar img.inicio:hover {
        transform: scale(1.1);
    }

    .btn-nuevo-header {
        height: 36px;
        font-size: 0.82rem;
        padding: 0 14px;
        border-radius: 6px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .stat-card {
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        padding: 0.75rem 1rem;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    }
    .stat-icon {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.15rem;
    }

    .table-grupos {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
    }
    .table-grupos thead th {
        background: #f1f5f9;
        color: #334155;
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 12px 14px;
        border-bottom: 2px solid #cbd5e1;
        white-space: nowrap;
    }
    .table-grupos tbody td {
        padding: 12px 14px;
        vertical-align: middle;
        border-bottom: 1px solid #e2e8f0;
        font-size: 0.9rem;
    }
    .table-grupos tbody tr:hover {
        background-color: #f8fafc;
    }

    .badge-pill-custom {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 600;
    }
    .badge-politica {
        background: #e0f2fe;
        color: #0369a1;
        border: 1px solid #bae6fd;
    }
    .badge-lista {
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #fde68a;
    }
    .badge-count {
        background: #ecfdf5;
        color: #065f46;
        border: 1px solid #a7f3d0;
        cursor: pointer;
    }
    .badge-count:hover {
        background: #d1fae5;
    }

    /* Soporte modo oscuro */
    [data-theme='dark'] .stat-card {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #f1f5f9 !important;
    }
    [data-theme='dark'] .table-grupos thead th {
        background: #0f172a !important;
        color: #cbd5e1 !important;
        border-color: #334155 !important;
    }
    [data-theme='dark'] .table-grupos tbody td {
        border-color: #334155 !important;
        color: #f1f5f9 !important;
    }
    [data-theme='dark'] .table-grupos tbody tr:hover {
        background-color: #1e293b !important;
    }
    [data-theme='dark'] .badge-politica {
        background: #082f49;
        color: #7dd3fc;
        border-color: #0369a1;
    }
    [data-theme='dark'] .badge-lista {
        background: #451a03;
        color: #fde68a;
        border-color: #78350f;
    }
    [data-theme='dark'] .badge-count {
        background: #022c22;
        color: #6ee7b7;
        border-color: #047857;
    }
    [data-theme='dark'] .modal-content {
        background: #1e293b !important;
        color: #f1f5f9 !important;
        border-color: #334155 !important;
    }
    [data-theme='dark'] .modal-header,
    [data-theme='dark'] .modal-footer {
        border-color: #334155 !important;
    }

    /* Modal ancho y responsivo para que los botones nunca se pierdan */
    #modalGrupo .modal-dialog,
    #modalClientes .modal-dialog {
        max-width: 780px !important;
        margin: 1.5rem auto !important;
    }
    #modalGrupo .modal-content,
    #modalClientes .modal-content {
        max-height: calc(100vh - 3rem) !important;
        display: flex !important;
        flex-direction: column !important;
    }
    #modalGrupo .modal-body,
    #modalClientes .modal-body {
        overflow-y: auto !important;
        max-height: calc(100vh - 170px) !important;
    }
    #modalGrupo .modal-footer,
    #modalClientes .modal-footer {
        flex-shrink: 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
    }
</style>
@endsection

@section('contenido')
<div class="container-fluid px-3 px-md-4 py-3">

    {{-- Encabezado Principal --}}
    <div class="header-grupos d-flex flex-wrap justify-content-between align-items-center gap-2">
        <div class="d-flex align-items-center gap-2">
            <span style="font-size: 1.4rem;">👥</span>
            <div>
                <h5 class="mb-0 fw-bold text-white fs-6">ADMINISTRACIÓN &gt;&gt; GRUPOS DE CLIENTES</h5>
                <span class="text-white-50" style="font-size: 0.78rem;">Segmentación de clientes, políticas comerciales y listas de precios</span>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <button type="button" class="btn btn-sm btn-success btn-nuevo-header shadow-sm" onclick="abrirModalCrear()">
                <span>➕</span> Nuevo Grupo
            </button>
            @include('menu.botonRegresar')
        </div>
    </div>

    {{-- Tarjetas de Estadísticas Rápidas --}}
    <div class="row g-2 mb-3">
        <div class="col-12 col-md-4">
            <div class="stat-card d-flex align-items-center justify-content-between">
                <div>
                    <div class="text-muted small fw-bold" style="font-size: 0.72rem;">TOTAL DE GRUPOS</div>
                    <div class="fs-4 fw-bold text-primary">{{ $totalGrupos }}</div>
                </div>
                <div class="stat-icon bg-primary bg-opacity-10 text-primary">📁</div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="stat-card d-flex align-items-center justify-content-between">
                <div>
                    <div class="text-muted small fw-bold" style="font-size: 0.72rem;">CLIENTES ASIGNADOS</div>
                    <div class="fs-4 fw-bold text-success">{{ $totalClientesConGrupo }}</div>
                </div>
                <div class="stat-icon bg-success bg-opacity-10 text-success">👥</div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="stat-card d-flex align-items-center justify-content-between">
                <div>
                    <div class="text-muted small fw-bold" style="font-size: 0.72rem;">CLIENTES SIN GRUPO</div>
                    <div class="fs-4 fw-bold text-warning">{{ $totalClientesSinGrupo }}</div>
                </div>
                <div class="stat-icon bg-warning bg-opacity-10 text-warning">⏳</div>
            </div>
        </div>
    </div>

    {{-- Contenedor de la Tabla Principal --}}
    <div class="card shadow-sm border-0 mb-4">
        <div class="card-header bg-white py-2 px-3 border-bottom d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div class="d-flex align-items-center gap-2">
                <span class="fs-5">📋</span>
                <span class="fw-bold" style="font-size: 0.88rem;">Listado de Grupos Registrados</span>
                <span class="badge bg-secondary rounded-pill">{{ count($grupos) }}</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <div class="input-group input-group-sm" style="max-width: 260px;">
                    <span class="input-group-text bg-light border-end-0">🔍</span>
                    <input type="text" id="buscadorGrupo" class="form-control border-start-0" placeholder="Buscar por nombre..." onkeyup="filtrarTabla()">
                </div>
                <button type="button" class="btn btn-sm btn-outline-primary fw-bold d-inline-flex align-items-center gap-1" style="height: 31px; font-size: 0.8rem; white-space: nowrap;" onclick="abrirModalCrear()">
                    <span>➕</span> Crear Grupo
                </button>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table-grupos" id="tablaGrupos">
                <thead>
                    <tr>
                        <th style="width: 70px;">ID</th>
                        <th>Nombre del Grupo</th>
                        <th>Dato Adicional 1</th>
                        <th>Dato Adicional 2</th>
                        <th class="text-center">Clientes</th>
                        <th class="text-end" style="width: 160px;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($grupos as $grupo)
                    <tr id="fila-grupo-{{ $grupo->idct }}">
                        <td class="fw-bold text-muted">#{{ $grupo->idct }}</td>
                        <td>
                            <div class="fw-bold text-dark">{{ $grupo->nombreGrupo }}</div>
                        </td>
                        <td>
                            <span class="text-muted">{{ $grupo->otroDatoc1 ?: '—' }}</span>
                        </td>
                        <td>
                            <span class="text-muted">{{ $grupo->otroDatoc2 ?: '—' }}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge-pill-custom badge-count" onclick="abrirModalClientes({{ $grupo->idct }}, '{{ addslashes($grupo->nombreGrupo) }}')" title="Ver y administrar clientes">
                                <span>👥</span> <strong>{{ $grupo->totalClientes }}</strong> clientes
                            </span>
                        </td>
                        <td class="text-end">
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-info" title="Ver clientes asociados" onclick="abrirModalClientes({{ $grupo->idct }}, '{{ addslashes($grupo->nombreGrupo) }}')">
                                    👥
                                </button>
                                <button type="button" class="btn btn-outline-primary" title="Editar grupo" onclick="abrirModalEditar({{ $grupo->idct }})">
                                    ✏️
                                </button>
                                <button type="button" class="btn btn-outline-danger" title="Eliminar grupo" onclick="confirmarEliminar({{ $grupo->idct }}, '{{ addslashes($grupo->nombreGrupo) }}', {{ $grupo->totalClientes }})">
                                    🗑️
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr id="fila-vacia">
                        <td colspan="6" class="text-center py-4 text-muted">
                            <div style="font-size: 2rem;" class="mb-2">📁</div>
                            <div class="fw-bold" style="font-size: 0.95rem;">No hay grupos de clientes creados aún</div>
                            <div class="small text-muted mb-3">Comience creando un nuevo grupo para clasificar sus clientes comerciales.</div>
                            <button type="button" class="btn btn-primary btn-sm px-3 fw-bold" onclick="abrirModalCrear()">
                                ➕ Crear Primer Grupo
                            </button>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- MODAL CREAR / EDITAR GRUPO --}}
<div class="modal fade" id="modalGrupo" tabindex="-1" aria-labelledby="modalGrupoLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white py-2 px-3">
                <h5 class="modal-title fw-bold mb-0" id="modalGrupoLabel">➕ Nuevo Grupo de Clientes</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formGrupo" onsubmit="guardarGrupo(event)">
                @csrf
                <input type="hidden" id="grupo_id" name="idct" value="">
                {{-- Campos ocultos con valores por defecto para tabla gruposclientes --}}
                <input type="hidden" id="policaDes" name="policaDes" value="0%">
                <input type="hidden" id="listapClie" name="listapClie" value="sistema">

                <div class="modal-body p-3">
                    <div class="row g-3">
                        {{-- Campo: nombreGrupo --}}
                        <div class="col-12 col-md-6">
                            <label for="nombreGrupo" class="form-label fw-bold small text-muted mb-1">
                                NOMBRE DEL GRUPO <span class="text-danger">*</span> (Máx. 20 car.)
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="nombreGrupo" 
                                   name="nombreGrupo" 
                                   maxlength="20" 
                                   placeholder="Ej: MAYORISTAS, VIP, TIENDAS" 
                                   required
                                   autocomplete="off">
                            <div class="form-text small" style="font-size: 0.75rem;">Identificador único del segmento.</div>
                        </div>

                        {{-- Campo: otroDatoc1 --}}
                        <div class="col-12 col-md-6">
                            <label for="otroDatoc1" class="form-label fw-bold small text-muted mb-1">
                                DATO ADICIONAL 1 (Máx. 20 car.)
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="otroDatoc1" 
                                   name="otroDatoc1" 
                                   maxlength="20" 
                                   placeholder="Ej: Zona Norte, Canal Directo, etc."
                                   autocomplete="off">
                            <div class="form-text small" style="font-size: 0.75rem;">Zona geográfica, canal comercial, etc.</div>
                        </div>

                        {{-- Campo: otroDatoc2 --}}
                        <div class="col-12">
                            <label for="otroDatoc2" class="form-label fw-bold small text-muted mb-1">
                                DATO ADICIONAL 2 (Máx. 20 car.)
                            </label>
                            <input type="text" 
                                   class="form-control" 
                                   id="otroDatoc2" 
                                   name="otroDatoc2" 
                                   maxlength="20" 
                                   placeholder="Ej: 30 días crédito, Cupo Alto, Observación interna"
                                   autocomplete="off">
                            <div class="form-text small" style="font-size: 0.75rem;">Plazo de pago, condición o nota interna.</div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer bg-light py-2 px-3 d-flex justify-content-end gap-2 border-top">
                    <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">
                        ✕ Cancelar
                    </button>
                    <button type="submit" id="btnGuardar" class="btn btn-primary btn-sm fw-bold px-4">
                        💾 Guardar Grupo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

                <div class="modal-footer bg-light py-2 px-3 d-flex justify-content-end gap-2 border-top">
                    <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">
                        ✕ Cancelar
                    </button>
                    <button type="submit" id="btnGuardar" class="btn btn-primary btn-sm fw-bold px-4">
                        💾 Guardar Grupo
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- MODAL ADMINISTRAR CLIENTES DEL GRUPO --}}
<div class="modal fade" id="modalClientes" tabindex="-1" aria-labelledby="modalClientesLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white py-3">
                <div>
                    <h5 class="modal-title fw-bold" id="modalClientesLabel">👥 Clientes del Grupo</h5>
                    <div class="small text-white-50" id="subtituloGrupoClientes">Grupo: <span id="nombreGrupoTitulo" class="text-warning fw-bold"></span></div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3">
                <input type="hidden" id="grupo_id_activo" value="">

                {{-- Buscador para agregar clientes --}}
                <div class="card bg-light border-0 p-3 mb-3">
                    <label class="form-label fw-bold small text-muted mb-1">➕ ASIGNAR NUEVO CLIENTE A ESTE GRUPO</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white">🔍</span>
                        <input type="text" id="inputBuscarCliente" class="form-control" placeholder="Escriba cédula, nombre o teléfono para buscar..." oninput="buscarClientesParaAsignar(this.value)">
                    </div>
                    <div id="resultadoBusquedaClientes" class="list-group mt-2 shadow-sm" style="display:none; max-height: 200px; overflow-y: auto;">
                        {{-- Resultados AJAX --}}
                    </div>
                </div>

                {{-- Listado de clientes actuales --}}
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="fw-bold small text-muted text-uppercase">Clientes actualmente vinculados:</span>
                    <span class="badge bg-primary" id="contadorClientesGrupo">0</span>
                </div>

                <div class="table-responsive" style="max-height: 350px;">
                    <table class="table table-sm table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Cédula / NIT</th>
                                <th>Nombre Completo</th>
                                <th>Teléfono</th>
                                <th class="text-end">Acción</th>
                            </tr>
                        </thead>
                        <tbody id="cuerpoTablaClientesGrupo">
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">Cargando clientes...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer bg-light py-2 px-3">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pie')
{{-- SweetAlert2 local --}}
<script src="{{ asset('js/sweetalert2@11.js') }}"></script>

<script>
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const modalGrupoEl = document.getElementById('modalGrupo');
    const modalGrupo = new bootstrap.Modal(modalGrupoEl);

    const modalClientesEl = document.getElementById('modalClientes');
    const modalClientes = new bootstrap.Modal(modalClientesEl);

    /**
     * Filtrar la tabla de grupos en tiempo real
     */
    function filtrarTabla() {
        const texto = document.getElementById('buscadorGrupo').value.toLowerCase().trim();
        const filas = document.querySelectorAll('#tablaGrupos tbody tr:not(#fila-vacia)');

        filas.forEach(fila => {
            const contenido = fila.textContent.toLowerCase();
            fila.style.display = contenido.includes(texto) ? '' : 'none';
        });
    }

    /**
     * Abrir modal para crear nuevo grupo
     */
    function abrirModalCrear() {
        document.getElementById('formGrupo').reset();
        document.getElementById('grupo_id').value = '';
        document.getElementById('policaDes').value = '0%';
        document.getElementById('listapClie').value = 'sistema';
        document.getElementById('modalGrupoLabel').innerHTML = '➕ Nuevo Grupo de Clientes';
        document.getElementById('btnGuardar').innerHTML = '💾 Guardar Grupo';
        modalGrupo.show();
    }

    /**
     * Abrir modal para editar grupo existente
     */
    function abrirModalEditar(idct) {
        fetch(`{{ url('/gruposClientes/obtener') }}/${idct}`, {
            headers: { 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            if (!data.success) {
                Swal.fire('Error', data.message || 'No se pudo cargar el grupo', 'error');
                return;
            }
            const g = data.grupo;
            document.getElementById('grupo_id').value = g.idct;
            document.getElementById('nombreGrupo').value = g.nombreGrupo || '';
            document.getElementById('policaDes').value = g.policaDes || '';
            document.getElementById('listapClie').value = g.listapClie || 'sistema';
            document.getElementById('otroDatoc1').value = g.otroDatoc1 || '';
            document.getElementById('otroDatoc2').value = g.otroDatoc2 || '';

            document.getElementById('modalGrupoLabel').innerHTML = `✏️ Editar Grupo: ${g.nombreGrupo}`;
            document.getElementById('btnGuardar').innerHTML = '💾 Actualizar Grupo';
            modalGrupo.show();
        })
        .catch(err => {
            Swal.fire('Error', 'Hubo un error de conexión al cargar el grupo', 'error');
        });
    }

    /**
     * Guardar o actualizar grupo (AJAX)
     */
    function guardarGrupo(event) {
        event.preventDefault();

        const form = document.getElementById('formGrupo');
        const idct = document.getElementById('grupo_id').value;
        const url = idct ? "{{ url('/gruposClientes/actualizar') }}" : "{{ url('/gruposClientes/guardar') }}";

        const formData = new FormData(form);

        const btn = document.getElementById('btnGuardar');
        btn.disabled = true;
        btn.innerHTML = '⏳ Guardando...';

        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = idct ? '💾 Actualizar Grupo' : '💾 Guardar Grupo';

            if (data.success) {
                modalGrupo.hide();
                Swal.fire({
                    icon: 'success',
                    title: '¡Operación Exitosa!',
                    text: data.message,
                    timer: 1500,
                    showConfirmButton: false
                }).then(() => {
                    window.location.reload();
                });
            } else {
                Swal.fire('Atención', data.message || 'Error al procesar la solicitud', 'warning');
            }
        })
        .catch(err => {
            btn.disabled = false;
            btn.innerHTML = idct ? '💾 Actualizar Grupo' : '💾 Guardar Grupo';
            Swal.fire('Error', 'Error inesperado al conectar con el servidor', 'error');
        });
    }

    /**
     * Confirmar y eliminar grupo
     */
    function confirmarEliminar(idct, nombre, totalClientes) {
        let advertencia = `¿Está seguro de eliminar el grupo "${nombre}"?`;
        if (totalClientes > 0) {
            advertencia += `\n\n⚠️ Este grupo tiene ${totalClientes} clientes asociados. Quedarán sin grupo asignado.`;
        }

        Swal.fire({
            title: '¿Eliminar Grupo?',
            text: advertencia,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, Eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch("{{ url('/gruposClientes/eliminar') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ idct: idct })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Eliminado',
                            text: data.message,
                            timer: 1500,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire('Error', data.message || 'No se pudo eliminar el grupo', 'error');
                    }
                })
                .catch(err => {
                    Swal.fire('Error', 'Error de comunicación al eliminar', 'error');
                });
            }
        });
    }

    /**
     * Abrir modal para administrar clientes de un grupo
     */
    function abrirModalClientes(idct, nombreGrupo) {
        document.getElementById('grupo_id_activo').value = idct;
        document.getElementById('nombreGrupoTitulo').textContent = nombreGrupo;
        document.getElementById('inputBuscarCliente').value = '';
        document.getElementById('resultadoBusquedaClientes').style.display = 'none';
        document.getElementById('resultadoBusquedaClientes').innerHTML = '';

        cargarClientesDelGrupo(idct);
        modalClientes.show();
    }

    /**
     * Cargar clientes del grupo activo
     */
    function cargarClientesDelGrupo(idct) {
        const cuerpo = document.getElementById('cuerpoTablaClientesGrupo');
        cuerpo.innerHTML = '<tr><td colspan="4" class="text-center py-3 text-muted">Cargando clientes...</td></tr>';

        fetch(`{{ url('/gruposClientes/clientes') }}/${idct}`, {
            headers: { 'Accept': 'application/json' }
        })
        .then(res => res.json())
        .then(data => {
            if (!data.success) {
                cuerpo.innerHTML = '<tr><td colspan="4" class="text-center text-danger py-3">Error al cargar clientes</td></tr>';
                return;
            }

            document.getElementById('contadorClientesGrupo').textContent = data.clientes.length;

            if (data.clientes.length === 0) {
                cuerpo.innerHTML = '<tr><td colspan="4" class="text-center py-4 text-muted">No hay clientes asignados a este grupo aún. Use el buscador arriba para agregar.</td></tr>';
                return;
            }

            let html = '';
            data.clientes.forEach(c => {
                const nombreCompleto = `${c.Nombre || ''} ${c.apellido || ''}`.trim() || 'Sin Nombre';
                html += `
                    <tr>
                        <td class="fw-bold">${c.cedula}</td>
                        <td>${nombreCompleto}</td>
                        <td>${c.telefono || '—'}</td>
                        <td class="text-end">
                            <button type="button" class="btn btn-outline-danger btn-sm py-0 px-2" title="Quitar de este grupo" onclick="removerClienteDelGrupo('${c.cedula}', '${nombreCompleto}')">
                                ❌ Quitar
                            </button>
                        </td>
                    </tr>
                `;
            });
            cuerpo.innerHTML = html;
        })
        .catch(err => {
            cuerpo.innerHTML = '<tr><td colspan="4" class="text-center text-danger py-3">Error de conexión</td></tr>';
        });
    }

    let timeoutBusqueda = null;
    function buscarClientesParaAsignar(termino) {
        clearTimeout(timeoutBusqueda);
        const contenedor = document.getElementById('resultadoBusquedaClientes');

        if (!termino || termino.trim().length < 2) {
            contenedor.style.display = 'none';
            contenedor.innerHTML = '';
            return;
        }

        timeoutBusqueda = setTimeout(() => {
            fetch(`{{ url('/gruposClientes/buscar-clientes') }}?q=${encodeURIComponent(termino)}`, {
                headers: { 'Accept': 'application/json' }
            })
            .then(res => res.json())
            .then(data => {
                if (!data.clientes || data.clientes.length === 0) {
                    contenedor.innerHTML = '<div class="list-group-item text-muted small py-2">No se encontraron clientes con ese término.</div>';
                    contenedor.style.display = 'block';
                    return;
                }

                const grupoActivo = document.getElementById('grupo_id_activo').value;
                let html = '';
                data.clientes.forEach(c => {
                    const nombreCompleto = `${c.Nombre || ''} ${c.apellido || ''}`.trim() || 'Sin Nombre';
                    const yaAsignado = c.grupoCliente == grupoActivo;

                    html += `
                        <div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-2">
                            <div>
                                <strong>${c.cedula}</strong> - ${nombreCompleto}
                                <span class="text-muted small">(${c.telefono || 'Sin tel'})</span>
                            </div>
                            <div>
                                ${yaAsignado ? '<span class="badge bg-success">Ya en grupo</span>' : `
                                    <button type="button" class="btn btn-primary btn-sm py-0 px-2" onclick="asignarClienteAlGrupo('${c.cedula}')">
                                        ➕ Asignar
                                    </button>
                                `}
                            </div>
                        </div>
                    `;
                });
                contenedor.innerHTML = html;
                contenedor.style.display = 'block';
            });
        }, 300);
    }

    /**
     * Asignar cliente seleccionado al grupo
     */
    function asignarClienteAlGrupo(cedula) {
        const idct = document.getElementById('grupo_id_activo').value;

        fetch("{{ url('/gruposClientes/asignar-cliente') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ idct: idct, cedula: cedula })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                document.getElementById('inputBuscarCliente').value = '';
                document.getElementById('resultadoBusquedaClientes').style.display = 'none';
                cargarClientesDelGrupo(idct);
            } else {
                Swal.fire('Error', data.message || 'No se pudo asignar el cliente', 'error');
            }
        });
    }

    /**
     * Remover cliente del grupo
     */
    function removerClienteDelGrupo(cedula, nombre) {
        const idct = document.getElementById('grupo_id_activo').value;

        Swal.fire({
            title: '¿Desvincular cliente?',
            text: `¿Desea quitar a ${nombre} de este grupo?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, Quitar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                fetch("{{ url('/gruposClientes/remover-cliente') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ cedula: cedula })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        cargarClientesDelGrupo(idct);
                    } else {
                        Swal.fire('Error', data.message || 'No se pudo desvincular el cliente', 'error');
                    }
                });
            }
        });
    }
</script>
@endsection