@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-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-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-sin-atender btn-sm" 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
    }
</style>

<script>
    var urlborrar = '{{ route("$type.index") }}';
    var tablaClientes;
    var estatusFiltrado = '';

    // Sticky filters functionality
    $(document).ready(function() {
        const filtros = $('#filtros-estatus');
        const filtrosWrapper = $('.filtros-wrapper');
        let filtrosTop = 0;
        let filtrosHeight = 0;

        function initStickyFilters() {
            filtrosTop = filtrosWrapper.offset().top;
            filtrosHeight = filtros.outerHeight();
        }

        function handleScroll() {
            const scrollTop = $(window).scrollTop();

            if (scrollTop > filtrosTop) {
                if (!filtros.hasClass('is-fixed')) {
                    filtros.addClass('is-fixed');
                    // Crear placeholder para mantener el espacio
                    filtrosWrapper.css('height', filtrosHeight + 'px');
                }
            } else {
                if (filtros.hasClass('is-fixed')) {
                    filtros.removeClass('is-fixed');
                    filtrosWrapper.css('height', 'auto');
                }
            }
        }

        // Inicializar
        setTimeout(initStickyFilters, 500);

        // Escuchar scroll
        $(window).on('scroll', handleScroll);

        // Reinicializar en resize
        $(window).on('resize', function() {
            if (!filtros.hasClass('is-fixed')) {
                initStickyFilters();
            }
        });
    });

    $(document).on('change', '#tabla_registros tbody input.dt-checkboxes', function() {
        const total = $('#tabla_registros tbody input.dt-checkboxes').length;
        const checked = $('#tabla_registros tbody input.dt-checkboxes:checked').length;
        $('#checkbox-general').prop('checked', total === checked);
    });

    $(document).on('change', '#checkbox-general', function() {
        const isChecked = $(this).is(':checked');
        $('#tabla_registros tbody input.dt-checkboxes').prop('checked', isChecked);
    });

    // Función para cargar contadores
    function cargarContadores() {
        $.ajax({
            url: '{{ route("clientes.contadores") }}',
            method: 'GET',
            success: function(data) {
                console.log('Contadores recibidos:', data);

                // Actualizar todos los contadores
                $('#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-whatsapp').text(data['Whats App'] || 0);
            },
            error: function(xhr) {
                console.error('Error cargando contadores:', xhr);
                console.error('Response:', xhr.responseText);
            }
        });
    }

    // 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;

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

    $(document).ready(function() {
        tablaClientes = $('#tabla_registros').DataTable({
            processing: true,
            serverSide: true,
            responsive: false,
            ajax: {
                url: '{{ route("$type.index") }}',
                data: function(d) {
                    d.estatus_filtro = estatusFiltrado;
                }
            },
            initComplete: function(settings, json) {
                $('.card-header').after('<hr class="my-0">');
                // Cargar contadores al inicializar
                cargarContadores();
            },
            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 class="" 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() {
                // Recargar contadores después de cada draw
                cargarContadores();
            }
        });
    });
</script>
@endsection