@extends('layouts.app')

@section('title', 'Clientes')

@section('content')

<div class="card">
    <div class="card-body pb-0">
        <div class="filtros-wrapper">
            <div class="d-flex flex-wrap gap-2 mb-3" id="filtros-estatus">
                <button type="button" class="btn filtro-estatus btn-sm" data-estatus="Whats App" style="background-color: #25D366; color: white; border-color: #25D366;">
                    WhatsApp sin leer
                    <span class="badge bg-light text-success ms-1 count-whatsapp" id="count-whatsapp2">0</span>
                </button>

                <button type="button" class="btn btn-sm btn-outline-secondary filtro-estatus active" data-estatus="">
                    Todos
                    <span class="badge bg-secondary ms-1" id="count-todos">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-sin-contrasena btn-sm" data-estatus="Sin Contraseña">
                    Sin Contraseña
                    <span class="badge bg-white text-dark ms-1" id="count-sin-contrasena">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-posible-pago btn-sm" data-estatus="Posible pago">
                    Posible pago
                    <span class="badge bg-white text-dark ms-1" id="count-posible-pago">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-iniciar-contabilidad btn-sm" data-estatus="Iniciar contabilidad">
                    Iniciar contabilidad
                    <span class="badge bg-white text-dark ms-1" id="count-iniciar-contabilidad">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-pre-cierre btn-sm" data-estatus="Pre cierre">
                    Pre cierre
                    <span class="badge bg-white text-dark ms-1" id="count-pre-cierre">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-pendiente btn-sm" data-estatus="Pendiente">
                    Pendiente
                    <span class="badge bg-white text-dark ms-1" id="count-pendiente">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-autoriza-cierre btn-sm" data-estatus="Autoriza cierre">
                    Autoriza cierre
                    <span class="badge bg-white text-dark ms-1" id="count-autoriza-cierre">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-referenciado btn-sm" data-estatus="Referenciado">
                    Referenciado
                    <span class="badge bg-white text-dark ms-1" id="count-referenciado">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-conta-terminada btn-sm" data-estatus="Conta terminada">
                    Conta terminada
                    <span class="badge bg-white text-dark ms-1" id="count-conta-terminada">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-deudores btn-sm" data-estatus="Deudores">
                    Deudores
                    <span class="badge bg-white text-dark ms-1" id="count-deudores">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-anuales btn-sm" data-estatus="Anuales">
                    Anuales
                    <span class="badge bg-white text-dark ms-1" id="count-anuales">0</span>
                </button>

                <button type="button" class="btn filtro-estatus badge-sin-atender btn-sm d-none" data-estatus="Sin Atender">
                    Sin Atender
                    <span class="badge bg-white text-dark ms-1" id="count-sin-atender">0</span>
                </button>
            </div>
        </div>
    </div>

    <div class="table-responsive">
        <table class="datatables-basic table table-sm table-bordered tabla-fuente-xs" id='tabla_registros'>
            <thead>
                <tr>
                    <th style="width: 3%;"></th>
                    <th style="width: 15%;">Nombre</th>
                    <th style="width: 7%;">RFC</th>
                    <th style="width: 8%;">Celular</th>
                    <th style="width: 10%;">Asesor</th>
                    <th style="width: 37%;">Último comentario</th>
                    <th style="width: 10%;">Estatus</th>
                    <th style="width: 15%;">Acciones</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<style>
    .filtros-wrapper {
        position: relative;
        z-index: 1;
    }

    #filtros-estatus {
        transition: all 0.3s ease;
    }

    #filtros-estatus.is-fixed {
        position: fixed;
        top: 0;
        left: 260px;
        /* Ajusta según el ancho de tu sidebar */
        right: 0;
        z-index: 1030;
        background-color: white;
        padding: 1rem;
        margin: 0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-bottom: 1px solid #e9ecef;
    }

    /* Ajuste cuando el menú está colapsado */
    .layout-menu-collapsed #filtros-estatus.is-fixed {
        left: 80px;
    }

    /* Ajuste para móvil */
    @media (max-width: 1199px) {
        #filtros-estatus.is-fixed {
            left: 0;
        }
    }

    /* Placeholder para mantener el espacio cuando los filtros se fijan */
    .filtros-placeholder {
        display: none;
    }

    .filtros-placeholder.active {
        display: block;
    }

    .tabla-fuente-xs tbody {
        font-size: 0.8rem !important;
    }

    .tabla-fuente-xs thead th {
        font-size: 0.85rem !important;
    }

    div.dt-container div.dt-length select {
        margin-inline: .5rem;
        width: auto;
        display: inline-block;
        margin-right: .5em;
    }

    /* Estilo para botón activo */
    .filtro-estatus.active {
        font-weight: 600;
        box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25);
    }

    .filtro-estatus {
        transition: all 0.2s ease;
    }

    .filtro-estatus:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    #count-todos,
    #count-whatsapp {
        color: white
    }

    @keyframes highlight-fade {
        0% {
            background-color: #fff3cd;
        }

        100% {
            background-color: transparent;
        }
    }

    tr.ultimo-editado {
        animation: highlight-fade 3s ease-in-out;
    }
</style>

<script>
    var urlborrar = '{{ route("$type.index") }}';
    var tablaClientes;
    var estatusFiltrado = '';
    const STORAGE_KEY = 'clientes_table_state';
    const LAST_EDITED_KEY = 'clientes_last_edited';
    const CONTEXT_ROWS_KEY = 'clientes_context_rows';

    // Guardar estado en localStorage
    function guardarEstado() {
        const searchValue = $('.dt-search input[type="search"]').val() || '';

        const estado = {
            filtroEstatus: estatusFiltrado,
            busqueda: searchValue,
            pagina: tablaClientes.page.info().page,
            longitudPagina: tablaClientes.page.info().length,
            timestamp: Date.now()
        };

        localStorage.setItem(STORAGE_KEY, JSON.stringify(estado));
    }

    // Cargar estado desde localStorage
    function cargarEstado() {
        const estadoStr = localStorage.getItem(STORAGE_KEY);
        if (!estadoStr) return null;

        const estado = JSON.parse(estadoStr);

        // Verificar que no sea muy antiguo (más de 30 minutos)
        const tiempoTranscurrido = Date.now() - estado.timestamp;
        if (tiempoTranscurrido > 30 * 60 * 1000) {
            localStorage.removeItem(STORAGE_KEY);
            return null;
        }

        return estado;
    }

    // Limpiar estado
    function limpiarEstado() {
        localStorage.removeItem(STORAGE_KEY);
    }

    // Marcar último registro editado Y su contexto
    function marcarUltimoEditado(clienteId) {
        // Obtener todas las filas visibles en orden
        const filasVisibles = [];
        $('#tabla_registros tbody tr').each(function() {
            const checkbox = $(this).find('input.dt-checkboxes');
            if (checkbox.length) {
                filasVisibles.push(checkbox.val());
            }
        });

        // Encontrar índice del registro editado
        const indiceEditado = filasVisibles.indexOf(clienteId.toString());

        if (indiceEditado !== -1) {
            // Obtener 3 antes y 3 después
            const contexto = {
                editado: clienteId,
                antes: [],
                despues: [],
                timestamp: Date.now() // Guardar cuándo se marcó
            };

            // 3 registros antes
            for (let i = indiceEditado - 1; i >= Math.max(0, indiceEditado - 2); i--) {
                if (i >= 0) {
                    contexto.antes.unshift(filasVisibles[i]); // unshift para mantener orden
                }
            }

            // 3 registros después
            for (let i = indiceEditado + 1; i <= Math.min(filasVisibles.length - 1, indiceEditado + 2); i++) {
                if (i < filasVisibles.length) {
                    contexto.despues.push(filasVisibles[i]);
                }
            }

            localStorage.setItem(CONTEXT_ROWS_KEY, JSON.stringify(contexto));
            localStorage.setItem(LAST_EDITED_KEY, clienteId);
        }
    }

    // Resaltar fila del último registro editado CON CONTEXTO
    function resaltarUltimoEditado() {
        const ultimoEditado = localStorage.getItem(LAST_EDITED_KEY);
        const contextStr = localStorage.getItem(CONTEXT_ROWS_KEY);

        if (!ultimoEditado || !contextStr) return;

        const contexto = JSON.parse(contextStr);

        // Verificar si han pasado más de 30 minutos
        const tiempoTranscurrido = Date.now() - contexto.timestamp;
        if (tiempoTranscurrido > 30 * 60 * 1000) {
            localStorage.removeItem(LAST_EDITED_KEY);
            localStorage.removeItem(CONTEXT_ROWS_KEY);
            return;
        }

        setTimeout(() => {
            // Colores naranjas para registros ANTES (de menor a mayor intensidad)
            const coloresAntes = [
                'rgba(255, 152, 0, 0.4)', // Naranja medio (2 antes)
                'rgba(255, 111, 0, 0.6)' // Naranja intenso (1 antes)
            ];

            const colorEditado = 'rgba(255, 235, 59, 0.9)'; // Amarillo brillante

            // Colores naranjas para registros DESPUÉS (de mayor a menor intensidad)
            const coloresDespues = [
                'rgba(255, 111, 0, 0.6)', // Naranja intenso (1 después)
                'rgba(255, 152, 0, 0.4)', // Naranja medio (2 después)
            ];

            // Resaltar registros ANTES
            contexto.antes.forEach((id, index) => {
                const $fila = $(`#tabla_registros tbody tr`).filter(function() {
                    const checkbox = $(this).find('input.dt-checkboxes');
                    return checkbox.val() == id;
                });

                if ($fila.length) {
                    $fila.css({
                        'background-color': coloresAntes[index],
                        'transition': 'background-color 0.3s ease',
                        'border-left': '3px solid rgba(255, 152, 0, 0.5)'
                    });
                }
            });

            // Resaltar registro EDITADO
            const $filaEditada = $(`#tabla_registros tbody tr`).filter(function() {
                const checkbox = $(this).find('input.dt-checkboxes');
                return checkbox.val() == ultimoEditado;
            });

            if ($filaEditada.length) {
                $filaEditada.css({
                    'background-color': colorEditado,
                    'transition': 'background-color 0.3s ease',
                    'font-weight': '600',
                    'border-left': '4px solid #FFC107',
                    'box-shadow': '0 2px 8px rgba(255, 193, 7, 0.3)'
                });

                // Scroll hacia la fila editada
                $('html, body').animate({
                    scrollTop: $filaEditada.offset().top - 200
                }, 500);
            }

            // Resaltar registros DESPUÉS
            contexto.despues.forEach((id, index) => {
                const $fila = $(`#tabla_registros tbody tr`).filter(function() {
                    const checkbox = $(this).find('input.dt-checkboxes');
                    return checkbox.val() == id;
                });

                if ($fila.length) {
                    $fila.css({
                        'background-color': coloresDespues[index],
                        'transition': 'background-color 0.3s ease',
                        'border-left': '3px solid rgba(255, 152, 0, 0.5)'
                    });
                }
            });

        }, 500);
    }

    // Limpiar resaltado manualmente
    function limpiarResaltado() {
        $('#tabla_registros tbody tr').css({
            'background-color': '',
            'font-weight': '',
            'border-left': '',
            'box-shadow': ''
        });
    }

    // Función para cargar contadores
    function cargarContadores() {
        $.ajax({
            url: '{{ route("clientes.contadores") }}',
            method: 'GET',
            success: function(data) {
                $('#count-todos').text(data.total || 0);
                $('#count-sin-contrasena').text(data['Sin Contraseña'] || 0);
                $('#count-posible-pago').text(data['Posible pago'] || 0);
                $('#count-iniciar-contabilidad').text(data['Iniciar contabilidad'] || 0);
                $('#count-pre-cierre').text(data['Pre cierre'] || 0);
                $('#count-pendiente').text(data['Pendiente'] || 0);
                $('#count-autoriza-cierre').text(data['Autoriza cierre'] || 0);
                $('#count-referenciado').text(data['Referenciado'] || 0);
                $('#count-conta-terminada').text(data['Conta terminada'] || 0);
                $('#count-deudores').text(data['Deudores'] || 0);
                $('#count-anuales').text(data['Anuales'] || 0);
                $('#count-sin-atender').text(data['Sin Atender'] || 0);
                $('#count-whatsapp2').text(data['Whats App'] || 0);
            },
            error: function(xhr) {
                console.error('Error cargando contadores:', xhr);
            }
        });
    }

    // Evento de click en los filtros
    $(document).on('click', '.filtro-estatus', function() {
        const estatus = $(this).data('estatus');

        // Actualizar clase activa
        $('.filtro-estatus').removeClass('active');
        $(this).addClass('active');

        // Guardar estatus filtrado
        estatusFiltrado = estatus;

        // Guardar estado
        guardarEstado();

        // Recargar tabla con filtro
        if (tablaClientes) {
            tablaClientes.ajax.reload();
        }
    });

    $(document).ready(function() {
        // Cargar estado previo si existe
        const estadoPrevio = cargarEstado();

        if (estadoPrevio) {
            estatusFiltrado = estadoPrevio.filtroEstatus;

            // Restaurar filtro activo visualmente
            if (estatusFiltrado) {
                $('.filtro-estatus').removeClass('active');
                $(`.filtro-estatus[data-estatus="${estatusFiltrado}"]`).addClass('active');
            }
        }

        tablaClientes = $('#tabla_registros').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,
            pageLength: estadoPrevio ? estadoPrevio.longitudPagina : 10,
            displayStart: estadoPrevio ? (estadoPrevio.pagina * (estadoPrevio.longitudPagina || 10)) : 0,
            search: {
                search: estadoPrevio ? estadoPrevio.busqueda : ''
            },
            ajax: {
                url: '{{ route("$type.index") }}',
                data: function(d) {
                    d.estatus_filtro = estatusFiltrado;
                }
            },
            initComplete: function(settings, json) {
                $('.card-header').after('<hr class="my-0">');
                cargarContadores();

                // Restaurar el valor del input de búsqueda visualmente
                if (estadoPrevio && estadoPrevio.busqueda) {
                    $('.dt-search input[type="search"]').val(estadoPrevio.busqueda);
                }

                // Resaltar último editado si existe
                resaltarUltimoEditado();
            },
            language: {
                url: "{{ asset('js/dataTables.spanish.json') }}"
            },
            columns: [{
                    data: 'id',
                    orderable: false,
                    searchable: false,
                    title: `<input type="checkbox" id="checkbox-general" class="form-check-input">`,
                    render: function(data, type, row) {
                        return `<input type="checkbox" class="dt-checkboxes form-check-input" value="${row.id}">`;
                    }
                },
                {
                    data: 'nombre',
                    name: 'clientes.nombre'
                },
                {
                    data: 'rfc',
                    name: 'clientes.rfc'
                },
                {
                    data: 'celular',
                    name: 'clientes.celular'
                },
                {
                    data: 'name',
                    name: 'users.name'
                },
                {
                    data: 'comentario',
                    name: 'cliente_comentarios.comentario',
                    title: 'Último comentario',
                    searchable: false,
                    render: function(data, type, row) {
                        if (!data) return '';
                        const partes = data.split('|F|');
                        let fecha = '';
                        let comentario = partes.length > 1 ? partes[1] : partes[0];

                        if (partes.length === 2) {
                            fecha = partes[0];
                        }
                        const fechaBadge = fecha ?
                            `<span class="badge bg-secondary me-2 p-1 badge-autoriza-cierre" style="font-size: 0.9em;">${fecha}</span>` : '';

                        return `
                        <div style="white-space: normal; word-wrap: break-word;">
                            ${comentario}<br>    
                            ${fechaBadge}
                        </div>
                    `;
                    }
                },
                {
                    data: 'estatus_contable',
                    name: 'clientes.estatus_contable',
                    render: function(data) {
                        const claseMap = {
                            'Sin Contraseña': 'badge-sin-contrasena',
                            'Posible pago': 'badge-posible-pago',
                            'Iniciar contabilidad': 'badge-iniciar-contabilidad',
                            'Pre cierre': 'badge-pre-cierre',
                            'Pendiente': 'badge-pendiente',
                            'Autoriza cierre': 'badge-autoriza-cierre',
                            'Referenciado': 'badge-referenciado',
                            'Conta terminada': 'badge-conta-terminada',
                            'Deudores': 'badge-deudores',
                            'Anuales': 'badge-anuales',
                            'Sin Atender': 'badge-sin-atender'
                        };

                        const clase = claseMap[data] || 'badge-secondary';
                        return `<span class="badge rounded-pill ${clase}">${data}</span>`;
                    }
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                },
            ],
            drawCallback: function() {
                cargarContadores();
                guardarEstado();

                // Limpiar resaltado antes de re-aplicar
                limpiarResaltado();

                // Re-aplicar resaltado si existe
                resaltarUltimoEditado();
            }
        });

        // Guardar estado cuando se escribe en el buscador
        $(document).on('keyup change', '.dt-search input[type="search"]', function() {
            clearTimeout(window.searchTimeout);
            window.searchTimeout = setTimeout(function() {
                guardarEstado();
            }, 500);
        });

        // Guardar estado cuando cambia la longitud de página
        $('#tabla_registros').on('length.dt', function() {
            guardarEstado();
        });

        // Interceptar clicks en botones de editar
        $(document).on('click', 'a[href*="/edit"]', function(e) {
            const href = $(this).attr('href');
            const clienteId = href.split('/').slice(-2, -1)[0];

            marcarUltimoEditado(clienteId);
            guardarEstado();
        });
    });

    // Limpiar estado cuando se sale de la página de clientes
    $(window).on('beforeunload', function() {
        const currentPath = window.location.pathname;
        if (!currentPath.includes('clientes')) {
            limpiarEstado();
        }
    });
</script>
@if(request()->has('estatus'))
<script>
    $(document).ready(function() {
        // Mapear parámetro URL a data-estatus
        const mapaEstatus = {
            'wapp': 'Whats App',
            'whatsapp': 'Whats App',
            'sin-contrasena': 'Sin Contraseña',
            'posible-pago': 'Posible pago',
            'iniciar-contabilidad': 'Iniciar contabilidad',
            'pre-cierre': 'Pre cierre',
            'pendiente': 'Pendiente',
            'autoriza-cierre': 'Autoriza cierre',
            'referenciado': 'Referenciado',
            'conta-terminada': 'Conta terminada',
            'deudores': 'Deudores',
            'anuales': 'Anuales',
            'sin-atender': 'Sin Atender'
        };

        const estatusURL = '{{ request()->get("estatus") }}';
        const estatusFiltrar = mapaEstatus[estatusURL.toLowerCase()] || estatusURL;

        // Esperar a que la tabla esté lista
        setTimeout(function() {
            $(`.filtro-estatus[data-estatus="${estatusFiltrar}"]`).trigger('click');

            // Limpiar URL
            window.history.replaceState({}, document.title, window.location.pathname);
        }, 500);
    });
</script>
@endif
@endsection