@extends('layouts.appDispositivo')

@section('title', 'Gestión de Empresas')
@php 
    $active = 'empresas'; 
    $searchPlaceholder = 'Buscar empresas...'; 
@endphp

@section('content')
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
        <div>
            <h2 class="text-3xl font-black text-slate-900 dark:text-white tracking-tight">Gestión de Empresas</h2>
        </div>
        <div class="flex gap-4">
            <div class="bg-white dark:bg-dark-card px-4 py-3 rounded-xl border border-slate-200 dark:border-dark-border flex flex-col shadow-sm transition-colors duration-300">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-muted-gray">Total Empresas</span>
                <span class="text-xl font-black text-primary">{{ $totalEmpresas }}</span>
            </div>
            <div class="bg-white dark:bg-dark-card px-4 py-3 rounded-xl border border-slate-200 dark:border-dark-border flex flex-col shadow-sm transition-colors duration-300">
                <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-muted-gray">ESP32 Activos</span>
                <span class="text-xl font-black text-green-500">{{ number_format($totalDispositivos) }}</span>
            </div>
        </div>
    </div>

    <div class="flex items-center justify-between mb-6">
        <div class="flex gap-2">
            <button id="filter-btn" class="px-3 py-1.5 bg-white dark:bg-dark-card border border-slate-200 dark:border-dark-border rounded-lg text-xs font-bold text-slate-600 dark:text-slate-300 flex items-center gap-1 hover:border-primary dark:hover:border-primary transition-colors">
                <span class="material-symbols-outlined text-sm">filter_list</span>
                <span id="filter-text">Filtrar</span>
            </button>

            <button id="sort-btn" class="px-3 py-1.5 bg-white dark:bg-dark-card border border-slate-200 dark:border-dark-border rounded-lg text-xs font-bold text-slate-600 dark:text-slate-300 flex items-center gap-1 hover:border-primary dark:hover:border-primary transition-colors">
                <span class="material-symbols-outlined text-sm">sort</span>
                <span id="sort-text">Ordenar: A-Z</span>
            </button>
        </div>
        <p id="results-count" class="text-xs text-slate-400 dark:text-muted-gray font-medium">
            Mostrando {{ count($empresas) }} resultados
        </p>
    </div>

    <div id="empresas-list" class="space-y-3">
        @forelse($empresas as $empresa)
            <a href="{{ route('sucursales.index', $empresa['id_empresa']) }}?empresa={{ urlencode($empresa['razon_social']) }}" 
               class="empresa-card block group"
               data-name="{{ strtolower($empresa['razon_social']) }}"
               data-ruc="{{ $empresa['ruc_nit'] ?? '' }}"
               data-dispositivos="{{ $empresa['cantidad_dispositivos_total'] ?? 0 }}">
                <!-- (el HTML de la tarjeta se mantiene exactamente igual que antes) -->
                <div class="group bg-white dark:bg-dark-card border border-slate-200 dark:border-dark-border hover:border-primary dark:hover:border-primary rounded-xl p-4 flex items-center justify-between shadow-sm transition-all cursor-pointer">
                    <div class="flex items-center gap-5 flex-1">
                        <div class="size-14 rounded-lg bg-slate-50 dark:bg-dark-bg flex items-center justify-center text-slate-400 dark:text-muted-gray relative overflow-hidden">
                            <span class="material-symbols-outlined text-3xl">corporate_fare</span>
                            <div class="absolute top-1 right-1 size-2.5 bg-green-500 rounded-full border-2 border-white dark:border-dark-card"></div>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="text-base font-bold text-slate-900 dark:text-white group-hover:text-primary transition-colors truncate">
                                {{ $empresa['razon_social'] }}
                            </h3>
                        </div>
                    </div>

                    <div class="flex items-center gap-12 px-8 border-x border-slate-100 dark:border-dark-border mx-8">
                        <div class="flex flex-col items-center">
                            <span class="text-xs font-bold text-slate-400 dark:text-muted-gray uppercase tracking-tighter">SEDES</span>
                            <span class="text-sm font-black text-slate-900 dark:text-white">{{ $empresa['cantidad_sucursales'] ?? 0 }}</span>
                        </div>
                        <div class="flex flex-col items-center">
                            <span class="text-xs font-bold text-slate-400 dark:text-muted-gray uppercase tracking-tighter">DISPOSITIVOS</span>
                            <span class="text-sm font-black text-emerald-500">{{ $empresa['cantidad_dispositivos_total'] ?? 0 }}</span>
                        </div>
                    </div>

                    <div class="flex items-center">
                        <span class="material-symbols-outlined text-slate-300 dark:text-muted-gray group-hover:text-primary group-hover:translate-x-1 transition-all">chevron_right</span>
                    </div>
                </div>
            </a>
        @empty
            <div class="text-center py-16 text-slate-400 dark:text-muted-gray text-lg">
                No se encontraron empresas registradas.
            </div>
        @endforelse
    </div>
@endsection

@section('pagination-section')
    @include('partials.pagination')
@endsection

{{-- JS COMPLETO: búsqueda + filtro + ordenación --}}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const listContainer = document.getElementById('empresas-list');
    const filterBtn     = document.getElementById('filter-btn');
    const filterText    = document.getElementById('filter-text');
    const sortBtn       = document.getElementById('sort-btn');
    const sortText      = document.getElementById('sort-text');
    const resultsCount  = document.getElementById('results-count');

    // Detectamos la barra de búsqueda del layout automáticamente
    const searchInput   = document.querySelector('input[placeholder*="Buscar empresas"]');

    let allCards      = Array.from(listContainer.querySelectorAll('.empresa-card'));
    let currentSortDir = 'asc';
    let filterMode    = 'all';        // 'all' o 'with-devices'
    let searchTerm    = '';

    function updateCount(count) {
        resultsCount.textContent = `Mostrando ${count} resultados`;
    }

    function renderList() {
        let filtered = allCards.filter(card => {
            const nameLower = card.dataset.name;
            const ruc       = card.dataset.ruc || '';
            
            const matchesSearch = !searchTerm || 
                nameLower.includes(searchTerm) || 
                ruc.includes(searchTerm);

            const matchesFilter = filterMode === 'all' || 
                parseInt(card.dataset.dispositivos) > 0;

            return matchesSearch && matchesFilter;
        });

        // Ordenar
        filtered.sort((a, b) => {
            const nameA = a.dataset.name;
            const nameB = b.dataset.name;
            return currentSortDir === 'asc'
                ? nameA.localeCompare(nameB, 'es')
                : nameB.localeCompare(nameA, 'es');
        });

        // Limpiar y renderizar
        listContainer.innerHTML = '';

        if (filtered.length === 0) {
            listContainer.innerHTML = `
                <div class="text-center py-16 text-slate-400 dark:text-muted-gray text-lg">
                    No se encontraron empresas con esos filtros.
                </div>
            `;
        } else {
            filtered.forEach(card => listContainer.appendChild(card));
        }

        updateCount(filtered.length);
    }

    // Eventos
    if (searchInput) {
        searchInput.addEventListener('input', () => {
            searchTerm = searchInput.value.toLowerCase().trim();
            renderList();
        });
    }

    sortBtn.addEventListener('click', () => {
        currentSortDir = currentSortDir === 'asc' ? 'desc' : 'asc';
        sortText.textContent = `Ordenar: ${currentSortDir === 'asc' ? 'A-Z' : 'Z-A'}`;
        renderList();
    });

    filterBtn.addEventListener('click', () => {
        filterMode = filterMode === 'all' ? 'with-devices' : 'all';
        filterText.textContent = filterMode === 'all' ? 'Filtrar' : 'Con dispositivos';
        renderList();
    });

    // Render inicial
    renderList();
});
</script>