@extends('admin.app')
@section('content')
    <div class="row g-4">
        <div class="col-12 col-md-4">
            <div class="glass-card h-100">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <p class="label mb-0">Dealers - Total</p> <i class="bi bi-shield-fill"></i>
                </div>
                <p class="value">{{ $total }}</p>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="glass-card h-100">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <p class="label mb-0">Dealers - Online</p> <i class="bi bi-shield-fill-check"></i>
                </div>
                <p class="value">{{ $online }}</p>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="glass-card h-100">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <p class="label mb-0">Dealers - Offline</p> <i class="bi bi-shield-fill-x"></i>
                </div>
                <p class="value">{{ $offline }}</p>
            </div>
        </div>
    </div>

    <div class="glass-card mt-4 groups-card">
        <div class="d-flex align-items-center gap-2 mb-3">
            <i class="bi bi-people"></i>
            <p class="label mb-0">Grupos</p>
        </div>

        <!-- Input de filtro -->
        <div class="input-wrapper mb-3">
            <input type="text" id="groupFilter" class="form-control" placeholder="Filtrar grupos..." />
            <i class="bi bi-search search-icon"></i>
        </div>

        <!-- Lista de grupos -->
        <div class="groups-list" id="groupsList">
            @forelse ($grupos as $slug => $grupo)
                <div class="group-item d-flex justify-content-between align-items-center" data-name="{{ $grupo['name'] }}"
                    data-dn="{{ $grupo['dealers']->pluck('dn')->filter()->implode(', ') }}"
                    data-dealer-names="{{ $grupo['dealers']->pluck('name')->filter()->implode(', ') }}">
                    <span class="group-name">{{ $grupo['name'] }}</span>
                    <a href="{{ route('grupos.show', $slug) }}" class="btn btn-sm btn-primary">
                        Visualizar
                    </a>
                </div>
            @empty
                <p class="text-muted" id="noGroups">Nenhum grupo encontrado.</p>
            @endforelse
        </div>

    </div>

    <style>
        .group-item {
            display: flex;
        }

        .group-item.hidden {
            display: none !important;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const filterInput = document.getElementById('groupFilter');
            const groupsList = document.getElementById('groupsList');
            const groupItems = groupsList.querySelectorAll('.group-item');
            const noGroupsMessage = document.getElementById('noGroups');

            // Log para depuração
            console.log('Itens encontrados:', groupItems.length);

            // Função de filtro
            function filterGroups() {
                const filterText = filterInput.value
                    .toLowerCase()
                    .normalize('NFD')
                    .replace(/[\u0300-\u036f]/g, '')
                    .trim();
                let visibleCount = 0;

                groupItems.forEach(item => {
                    const groupName = item.getAttribute('data-name') || '';
                    const dn = item.getAttribute('data-dn') || '';
                    const dealerNames = item.getAttribute('data-dealer-names') || '';

                    const searchable = (groupName + ' ' + dn + ' ' + dealerNames)
                        .toLowerCase()
                        .normalize('NFD')
                        .replace(/[\u0300-\u036f]/g, '')
                        .trim();

                    const isVisible = searchable.includes(filterText);
                    item.classList.toggle('hidden', !isVisible);
                    if (isVisible) visibleCount++;
                });

                if (noGroupsMessage) {
                    noGroupsMessage.style.display = visibleCount === 0 && groupItems.length > 0 ? 'block' : 'none';
                }
            }


            // Adiciona debounce para melhorar performance
            let debounceTimeout;
            filterInput.addEventListener('input', function() {
                clearTimeout(debounceTimeout);
                debounceTimeout = setTimeout(filterGroups, 300);
            });

            // Executa o filtro inicialmente
            filterGroups();
        });
    </script>
@endsection