@extends('layouts.appDispositivo')
@section('title', 'Dispositivos - ' . ($sucursalNombre ?? 'Sucursal'))

@php 
    $active = 'empresas'; 
@endphp

@section('content')
    <div class="mb-8">
        <nav aria-label="Breadcrumb" class="flex mb-4">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ route('empresas.index') }}" class="text-sm text-slate-500 dark:text-slate-400 hover:text-primary flex items-center gap-1">
                        <span class="material-symbols-outlined text-base">home</span>
                        Empresas
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <span class="material-symbols-outlined text-slate-400 text-sm">chevron_right</span>
                        @if(isset($id_empresa) && $id_empresa)
                            <a href="{{ route('sucursales.index', $id_empresa) }}?empresa={{ urlencode($empresaNombre) }}" class="ml-1 text-sm font-medium text-slate-500 dark:text-slate-400 hover:text-primary">{{ $empresaNombre }}</a>
                        @else
                            <span class="ml-1 text-sm font-medium text-slate-500">{{ $empresaNombre }}</span>
                        @endif
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <span class="material-symbols-outlined text-slate-400 text-sm">chevron_right</span>
                        <span class="ml-1 text-sm font-medium text-slate-900 dark:text-white">{{ $sucursalNombre }}</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h2 class="text-3xl font-extrabold text-slate-900 dark:text-white flex items-center gap-3">
                    {{ $sucursalNombre }}
                </h2>
                <p class="mt-1 text-slate-500 dark:text-muted-gray">Gestión de dispositivos ESP32 y mesas.</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div class="bg-white dark:bg-dark-card p-5 rounded-xl border border-slate-200 dark:border-dark-border shadow-sm">
            <div class="flex items-center justify-between mb-2">
                <span class="text-slate-500 dark:text-slate-400 text-sm font-medium">Total Dispositivos</span>
                <span class="material-symbols-outlined text-primary">sensors</span>
            </div>
            <div class="text-2xl font-bold dark:text-white">{{ $total }}</div>
        </div>

        <div class="bg-white dark:bg-dark-card p-5 rounded-xl border border-slate-200 dark:border-dark-border shadow-sm">
            <div class="flex items-center justify-between mb-2">
                <span class="text-slate-500 dark:text-slate-400 text-sm font-medium">Activos</span>
                <span class="material-symbols-outlined text-green-500">check_circle</span>
            </div>
            <div class="text-2xl font-bold dark:text-white">{{ $online }}</div>
        </div>

        <div class="bg-white dark:bg-dark-card p-5 rounded-xl border border-slate-200 dark:border-dark-border shadow-sm">
            <div class="flex items-center justify-between mb-2">
                <span class="text-slate-500 dark:text-slate-400 text-sm font-medium">Inactivos</span>
                <span class="material-symbols-outlined text-red-500">warning</span>
            </div>
            <div class="text-2xl font-bold dark:text-white">{{ $offline }}</div>
        </div>

        <div class="bg-white dark:bg-dark-card p-5 rounded-xl border border-slate-200 dark:border-dark-border shadow-sm">
            <div class="flex items-center justify-between mb-2">
                <span class="text-slate-500 dark:text-slate-400 text-sm font-medium">Configurados</span>
                <span class="material-symbols-outlined text-blue-500">settings</span>
            </div>
            <div class="text-2xl font-bold dark:text-white">{{ $configurado }}</div>
        </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" id="devices-grid">
        @php 
            $todos = array_merge($data['configurado']??[], $data['activo']??[], $data['offline']??[]); 
        @endphp

        @forelse($todos as $device)
            @php
                $estado = strtolower($device['estado'] ?? $device->estado ?? 'desconocido');
                $mac = $device['mac'] ?? $device->mac ?? 'Sin MAC';
                $bateria = $device['estado_bateria'] ?? $device->estado_bateria ?? 0;
                $ping = $device['ultimo_ping'] ?? $device->ultimo_ping;
                
                $fechaPing = $ping ? date('d/m/Y H:i', strtotime($ping)) : 'Sin datos';

                if ($estado === 'activo') {
                    $borderClass = 'border-slate-200 dark:border-dark-border hover:border-primary/50';
                    $badgeBg = 'bg-green-100 dark:bg-green-900/30';
                    $badgeText = 'text-green-800 dark:text-green-400';
                    $dotColor = 'bg-green-500';
                    $iconBg = 'bg-primary/10';
                    $iconColor = 'text-primary';
                } elseif ($estado === 'offline') {
                    $borderClass = 'border-red-200 dark:border-red-900 hover:border-red-500/50';
                    $badgeBg = 'bg-red-100 dark:bg-red-900/30';
                    $badgeText = 'text-red-800 dark:text-red-400';
                    $dotColor = 'bg-red-500';
                    $iconBg = 'bg-slate-100 dark:bg-slate-800';
                    $iconColor = 'text-slate-400';
                } else { 
                    $borderClass = 'border-slate-200 dark:border-dark-border hover:border-primary/50';
                    $badgeBg = 'bg-amber-100 dark:bg-amber-900/30';
                    $badgeText = 'text-amber-800 dark:text-amber-400';
                    $dotColor = 'bg-amber-500';
                    $iconBg = 'bg-primary/10';
                    $iconColor = 'text-primary';
                }
            @endphp

            <div class="device-card group bg-white dark:bg-dark-card rounded-xl border {{ $borderClass }} shadow-sm hover:shadow-lg transition-all flex flex-col cursor-pointer" 
                 data-device="{{ base64_encode(json_encode($device)) }}">
                <div class="p-5 flex-1 pointer-events-none">
                    <div class="flex justify-between items-start mb-4">
                        <div class="h-12 w-12 rounded-lg {{ $iconBg }} {{ $iconColor }} flex items-center justify-center">
                            <span class="material-symbols-outlined text-2xl">memory</span>
                        </div>
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold {{ $badgeBg }} {{ $badgeText }}">
                            <span class="h-1.5 w-1.5 rounded-full {{ $dotColor }} mr-1.5"></span>
                            {{ strtoupper($estado) }}
                        </span>
                    </div>
                    
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 group-hover:text-primary transition-colors truncate">{{ $mac }}</h3>

                    <div class="space-y-2">
                        <div class="flex items-center text-xs text-slate-500 dark:text-slate-400">
                            <span class="material-symbols-outlined text-sm mr-1.5">battery_full</span>
                            <span class="font-medium">Batería: {{ $bateria }}%</span>
                        </div>
                        <div class="flex items-center text-xs text-slate-500 dark:text-slate-400">
                            <span class="material-symbols-outlined text-sm mr-1.5">schedule</span>
                            Últ. conexión: {{ $fechaPing }}
                        </div>
                    </div>
                </div>

            </div>
        @empty
            <div class="col-span-full text-center py-20 text-slate-400">
                <span class="material-symbols-outlined text-4xl mb-2">device_unknown</span>
                <p>No hay dispositivos registrados en esta sucursal</p>
            </div>
        @endforelse
    </div>
@endsection

@section('modals')
    <div id="device-modal" class="fixed inset-0 bg-slate-900/70 dark:bg-black/70 backdrop-blur-sm z-[9999] hidden flex items-center justify-end transition-opacity duration-300">
        <div id="modal-panel" class="bg-white dark:bg-dark-card w-full max-w-md h-full shadow-[-10px_0_30px_rgba(0,0,0,0.5)] flex flex-col border-l border-slate-200 dark:border-dark-border translate-x-full transition-transform duration-300 ease-out">
            
            <div class="flex items-center justify-between p-5 border-b border-slate-200 dark:border-dark-border">
                <div class="flex items-center gap-3">
                    <span class="material-symbols-outlined text-primary text-2xl">edit</span>
                    <h2 class="text-xl font-bold text-slate-900 dark:text-off-white">Editar Dispositivo</h2>
                </div>
                <button onclick="closeModal()" class="p-2 hover:bg-slate-100 dark:hover:bg-dark-border rounded-full text-slate-500 transition-colors">
                    <span class="material-symbols-outlined text-2xl">close</span>
                </button>
            </div>

            <div class="flex-1 overflow-y-auto p-5 space-y-6">
                <div>
                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1">Dirección MAC / ID</label>
                    <div class="flex gap-2">
                        <input id="modal-mac" readonly class="flex-1 bg-slate-50 dark:bg-input-dark border border-slate-200 dark:border-dark-border rounded-lg px-4 py-2.5 text-sm font-mono text-slate-600 dark:text-off-white">
                        <button onclick="copyMac()" class="px-4 bg-slate-50 dark:bg-input-dark border border-slate-200 dark:border-dark-border rounded-lg hover:bg-slate-100 dark:hover:bg-dark-border transition-colors dark:text-off-white">
                            <span class="material-symbols-outlined">content_copy</span>
                        </button>
                    </div>
                </div>

                <div class="space-y-5">
                    <h3 class="text-xs font-bold uppercase tracking-widest text-primary">Estado y Energía</h3>
                    <div id="status-buttons" class="grid grid-cols-2 gap-2"></div>
                    
                    <div>
                        <div class="flex justify-between text-sm mb-1">
                            <span class="font-semibold text-slate-700 dark:text-slate-300">Batería</span>
                            <span id="modal-bateria" class="font-bold text-primary">0%</span>
                        </div>
                        <div class="h-2 bg-slate-200 dark:bg-dark-border rounded-full overflow-hidden">
                            <div id="battery-bar" class="h-full bg-gradient-to-r from-green-400 to-emerald-500 transition-all" style="width:0%"></div>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-1">Mesa Asignada</label>
                    <div class="relative">
                        <select id="modal-mesa-select" class="w-full bg-slate-50 dark:bg-input-dark border border-slate-200 dark:border-dark-border rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-primary text-sm appearance-none dark:text-off-white">
                        </select>
                    </div>
                </div>
            </div>

            <div class="p-5 border-t border-slate-200 dark:border-dark-border bg-slate-50 dark:bg-dark-card flex flex-col gap-3">
                <button onclick="saveChanges()" class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-lg transition-all">
                    Guardar Cambios
                </button>
                <div class="flex gap-2">
                    <button onclick="closeModal()" class="flex-1 py-2.5 text-sm font-semibold border border-slate-200 dark:border-dark-border rounded-lg hover:bg-slate-100 dark:hover:bg-dark-border dark:text-off-white">
                        Cancelar
                    </button>
                    <button onclick="deleteDevice()" class="px-6 py-2.5 text-sm font-semibold text-red-500 hover:bg-red-500/10 rounded-lg flex items-center gap-2">
                        <span class="material-symbols-outlined">delete</span>
                        Eliminar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="delete-confirm-modal" class="fixed inset-0 flex items-center justify-center z-[10000] hidden">
        <div class="absolute inset-0 bg-slate-900/40 dark:bg-black/60 backdrop-blur-sm"></div>
        <div class="relative bg-white dark:bg-dark-card w-full max-w-md rounded-2xl shadow-2xl border border-slate-200 dark:border-dark-border overflow-hidden">
            <div class="p-8 text-center">
                <div class="mx-auto w-16 h-16 bg-rose-100 dark:bg-red-500/10 rounded-full flex items-center justify-center mb-6">
                    <span class="material-symbols-outlined text-rose-600 dark:text-red-400 text-4xl">warning</span>
                </div>
                <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">¿Eliminar este dispositivo?</h3>
                <p class="text-slate-500 mb-8 dark:text-muted-gray">Esta acción no se puede deshacer.</p>
                <div class="flex gap-3">
                    <button onclick="closeDeleteModal()" class="flex-1 bg-slate-100 dark:bg-dark-card border border-slate-300 dark:border-dark-border text-slate-700 dark:text-off-white font-bold py-3 rounded-xl">Cancelar</button>
                    <button onclick="confirmDelete()" class="flex-1 bg-rose-600 hover:bg-red-700 text-white font-bold py-3 rounded-xl">Eliminar</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // El script se mantiene idéntico al anterior, pero actualicé las clases de los botones de estado del modal
    let currentDeviceId = null;

    function closeModal() {
        const modal = document.getElementById('device-modal');
        const panel = document.getElementById('modal-panel');
        panel.classList.add('translate-x-full');
        modal.style.opacity = '0';
        setTimeout(() => { modal.classList.add('hidden'); modal.style.opacity = ''; }, 300);
    }

    function copyMac() {
        const mac = document.getElementById('modal-mac').value;
        if (mac) navigator.clipboard.writeText(mac).then(() => alert('✅ MAC copiada'));
    }

    function saveChanges() {
        const recursoId = document.getElementById('modal-mesa-select').value;
        if (!recursoId) return alert('⚠️ Selecciona una mesa');
        
        fetch(`/iot/dispositivos/${currentDeviceId}`, {
            method: 'PUT',
            headers: {'Content-Type':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},
            body: JSON.stringify({recurso_id: recursoId})
        }).then(r=>r.json()).then(res=> res.success ? (alert('✅ Guardado'),location.reload()) : alert('❌ Error'));
    }

    function deleteDevice(){ 
        document.getElementById('delete-confirm-modal').classList.remove('hidden'); 
        document.getElementById('delete-confirm-modal').classList.add('flex'); 
    }

    function closeDeleteModal(){ 
        const m=document.getElementById('delete-confirm-modal'); 
        m.classList.add('hidden'); m.classList.remove('flex'); 
    }

    function confirmDelete(){
        fetch(`/iot/dispositivos/${currentDeviceId}`,{method:'DELETE',headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'}})
        .then(r=>r.json()).then(res=> res.success ? (alert('🗑️ Eliminado'),location.reload()) : alert('❌ Error'));
        closeDeleteModal();
    }

    document.addEventListener('DOMContentLoaded', function () {
        const sucursalId = "{{ $sucursal_id ?? '' }}";
        
        document.getElementById('devices-grid').addEventListener('click', function (e) {
            const card = e.target.closest('.device-card');
            if (!card) return;
            try {
                const device = JSON.parse(atob(card.dataset.device));
                openModal(device);
            } catch (err) { console.error(err); }
        });

        function openModal(device) {
            currentDeviceId = device.id_dispositivo || device.id || device['id_dispositivo'];
            document.getElementById('modal-mac').value = device.mac || device['mac'] || 'Sin MAC';
            
            const bateria = device.estado_bateria ?? 0;
            document.getElementById('modal-bateria').textContent = bateria + '%';
            document.getElementById('battery-bar').style.width = bateria + '%';
            
            const estadoActual = (device.estado || device['estado'] || '').toLowerCase();
            document.getElementById('status-buttons').innerHTML = `
                <button class="flex flex-col items-center p-3 rounded-xl border ${estadoActual==='activo'?'border-green-500 bg-green-500/10 text-green-500':'border-slate-200 dark:border-dark-border dark:text-off-white'}">
                    <span class="material-symbols-outlined">check_circle</span><span class="text-xs font-bold mt-1">Online</span>
                </button>
                <button class="flex flex-col items-center p-3 rounded-xl border ${estadoActual==='offline'?'border-red-500 bg-red-500/10 text-red-500':'border-slate-200 dark:border-dark-border dark:text-off-white'}">
                    <span class="material-symbols-outlined">error</span><span class="text-xs font-bold mt-1">Offline</span>
                </button>`;

            fetch(`/iot/mesas/${sucursalId}`).then(r=>r.json()).then(mesas => {
                const sel = document.getElementById('modal-mesa-select');
                sel.innerHTML = '<option value="">-- Selecciona mesa --</option>';
                mesas.forEach(m => {
                    const o = document.createElement('option');
                    o.value = m.id_recurso; 
                    o.textContent = m.nombre || 'Mesa sin nombre';
                    if (m.id_recurso == (device.recurso_id || device['recurso_id'])) o.selected = true;
                    sel.appendChild(o);
                });
            });

            const modal = document.getElementById('device-modal');
            const panel = document.getElementById('modal-panel');
            modal.classList.remove('hidden');
            requestAnimationFrame(() => {
                modal.style.opacity = '1';
                panel.classList.remove('translate-x-full');
            });
        }

        document.getElementById('device-modal').addEventListener('click', e => { 
            if(e.target.id === 'device-modal') closeModal(); 
        });
    });
</script>
@endpush