@extends('layouts.appDispositivo')

@section('title', 'Sucursales')
@php 
    $active = 'empresas'; 
    $searchPlaceholder = 'Buscar sucursales...'; 
@endphp

@section('content')
    <!-- Breadcrumb -->
    <nav class="flex items-center gap-2 text-sm mb-6">
        <a href="{{ route('empresas.index') }}" class="text-primary hover:underline flex items-center gap-1">
            <span class="material-symbols-outlined">business</span>
            Empresas
        </a>
        <span class="text-slate-400 material-symbols-outlined">chevron_right</span>
        <span class="font-bold text-slate-900 dark:text-white">{{ $empresaNombre }}</span>
    </nav>

    <div class="flex justify-between items-end mb-8">
        <div>
            <h1 class="text-4xl font-black text-slate-900 dark:text-white tracking-tight">
                Sucursales
            </h1>
            <p class="text-slate-500 dark:text-muted-gray mt-1">
                {{ $empresaNombre }}
            </p>
        </div>

        <!-- Botón + contador -->
        <div class="flex items-center gap-4">
            <button id="filter-btn"
                    class="px-5 py-2 bg-white dark:bg-dark-card border border-slate-200 dark:border-dark-border rounded-xl text-xs font-bold flex items-center gap-2 hover:border-primary transition-colors">
                <span class="material-symbols-outlined text-sm">filter_list</span>
                <span id="filter-text">Filtrar</span>
            </button>

            <p id="results-count" class="text-xs text-slate-400 dark:text-muted-gray font-medium">
                Mostrando {{ count($sucursales) }} resultados
            </p>
        </div>
    </div>

    <!-- LISTA -->
    <div id="sucursales-list" class="space-y-3">
        @forelse($sucursales as $sucursal)
            <div class="sucursal-card group bg-white dark:bg-dark-card border border-slate-200 dark:border-dark-border hover:border-primary rounded-2xl p-5 transition-all duration-300 grid grid-cols-[52px,1fr,130px,165px,135px,auto] gap-x-6 items-center shadow-sm hover:shadow"
                 data-name="{{ strtolower($sucursal['nombre']) }}"
                 data-direccion="{{ strtolower($sucursal['direccion_legible'] ?? $sucursal['direccion'] ?? '') }}"
                 data-dispositivos="{{ $sucursal['cantidadDispositivos'] ?? 0 }}">

                <!-- 1. Icono -->
                <div class="flex-shrink-0 relative">
                    <div class="size-12 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-400">
                        <span class="material-symbols-outlined text-3xl">store</span>
                    </div>
                    @if($sucursal['activo'])
                        <div class="absolute -top-0.5 -right-0.5 size-4 bg-emerald-500 rounded-full border-2 border-white dark:border-dark-card"></div>
                    @else
                        <div class="absolute -top-0.5 -right-0.5 size-4 bg-red-500 rounded-full border-2 border-white dark:border-dark-card"></div>
                    @endif
                </div>

                <!-- 2. Nombre + Dirección -->
                <div class="min-w-0">
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white group-hover:text-primary transition-colors truncate uppercase tracking-wider">
                        {{ $sucursal['nombre'] }}
                    </h3>
                    <div class="flex items-center gap-1.5 text-slate-500 dark:text-slate-400 text-sm mt-1">
                        <span class="material-symbols-outlined text-base">location_on</span>
                        <span class="truncate">{{ $sucursal['direccion_legible'] ?? $sucursal['direccion'] }}</span>
                    </div>
                </div>

                <!-- 3. Dispositivos -->
                <div class="text-center">
                    <div class="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-muted-gray">DISPOSITIVOS</div>
                    <div class="text-2xl font-black text-emerald-500 tabular-nums mt-0.5">
                        {{ $sucursal['cantidadDispositivos'] ?? 0 }}
                    </div>
                </div>

                <!-- 4. Gerente -->
                <div class="min-w-0">
                    <div class="text-[10px] font-bold uppercase tracking-widest text-slate-400 dark:text-muted-gray mb-1">GERENTE</div>
                    <div class="flex items-center gap-2 text-slate-700 dark:text-slate-300">
                        <span class="material-symbols-outlined text-slate-400">person</span>
                        <span class="font-medium truncate">{{ $sucursal['gerenteNombre'] ?? 'Sin asignar' }}</span>
                    </div>
                </div>

                <!-- 5. Estado -->
                <div>
                    <span class="inline-flex items-center px-5 py-1.5 rounded-2xl text-xs font-bold uppercase tracking-wider w-full justify-center
                        {{ $sucursal['activo'] 
                            ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30' 
                            : 'bg-red-500/10 text-red-400 border border-red-500/30' }}">
                        {{ $sucursal['activo'] ? 'En línea' : 'Offline' }}
                    </span>
                </div>

                <!-- 6. Botón -->
                <div class="flex justify-end">
                    <a href="{{ route('nodos.index', $sucursal['id']) }}?empresa={{ urlencode($empresaNombre) }}&sucursal={{ urlencode($sucursal['nombre']) }}&id_empresa={{ $id_empresa }}" 
                       class="flex items-center gap-2 px-7 py-3 bg-primary text-white text-sm font-bold rounded-2xl hover:bg-primary/90 transition-all group-hover:gap-3">
                        Ver Dispositivos
                        <span class="material-symbols-outlined text-lg transition-transform group-hover:translate-x-1">chevron_right</span>
                    </a>
                </div>
            </div>
        @empty
            <div class="text-center py-20 text-slate-400">No se encontraron sucursales.</div>
        @endforelse
    </div>
@endsection

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

    // Detecta la barra de búsqueda del layout
    const searchInput   = document.querySelector('input[placeholder*="Buscar sucursales"]');

    let allCards      = Array.from(listContainer.querySelectorAll('.sucursal-card'));
    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 dirLower  = card.dataset.direccion || '';

            const matchesSearch = !searchTerm ||
                nameLower.includes(searchTerm) ||
                dirLower.includes(searchTerm);

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

            return matchesSearch && matchesFilter;
        });

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

        if (filtered.length === 0) {
            listContainer.innerHTML = `
                <div class="text-center py-20 text-slate-400">No se encontraron sucursales 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();
        });
    }

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

    // Inicial
    renderList();
});
</script>