@extends('layouts.appDispositivo')

@section('title', 'Gestión de Dispositivos')

@php
    $active = 'dispositivos';
    $searchPlaceholder = 'Buscar dispositivos...';
@endphp

@section('content')
    <header class="p-8 pb-4">


        <div class="flex justify-between items-end">
            <div>
                <h1 class="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Gestión de Dispositivos</h1>
            </div>
        </div>
    </header>

    <div class="px-8 mt-4">
        <div class="flex border-b border-slate-200 dark:border-dark-border gap-8">
            <button onclick="switchTab('nuevos')" id="tab-nuevos"
                class="tab-btn pb-4 text-sm font-semibold text-primary relative transition-colors">
                Nuevos / Sin Configurar
                <div class="line-active absolute bottom-0 left-0 w-full h-0.5 bg-primary"></div>
            </button>
            <button onclick="switchTab('offline')" id="tab-offline"
                class="tab-btn pb-4 text-sm font-semibold text-slate-400 dark:text-muted-gray hover:text-slate-600 dark:hover:text-slate-300 transition-colors relative">
                Desconectados (Offline)
                <div class="line-active absolute bottom-0 left-0 w-full h-0.5 bg-primary hidden"></div>
            </button>
        </div>
    </div>

    {{-- ... (Header y Tabs se mantienen igual) ... --}}

<div class="flex-1 overflow-auto p-8 pt-6">
    <div class="bg-white dark:bg-dark-card border border-slate-200 dark:border-dark-border rounded-xl shadow-sm overflow-hidden flex flex-col transition-colors duration-300">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50 dark:bg-white/[0.02] border-b border-slate-200 dark:border-dark-border">
                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-muted-gray">Dispositivo</th>
                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-muted-gray">Dirección MAC</th>
                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-muted-gray">Batería</th>
                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-muted-gray">Estado / Ubicación</th>
                        <th class="px-6 py-4 text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-muted-gray text-right">Acciones</th>
                    </tr>
                </thead>

                <tbody id="lista-nuevos" class="tab-content divide-y divide-slate-100 dark:divide-dark-border">
                    @forelse ($dispositivosSinConfigurar as $device)
                        @php
                            $id_dispositivo = $device['id_dispositivo'] ?? '00';
                            $mac = $device['mac'] ?? '---';
                            $bateria = $device['estado_bateria'] ?? 0;
                        @endphp
                        <tr class="hover:bg-slate-50 dark:hover:bg-white/[0.03] transition-colors group">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="size-10 rounded-lg text-primary bg-primary/10 flex items-center justify-center">
                                        <span class="material-symbols-outlined text-xl">router</span>
                                    </div>
                                    <span class="font-semibold text-slate-900 dark:text-white">ESP32-New-{{ $id_dispositivo }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 font-mono text-sm text-slate-500">{{ $mac }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2 text-sm text-slate-500">
                                    <span class="material-symbols-outlined text-lg @if($bateria < 20) text-red-500 animate-bounce @endif">battery_full</span>
                                    {{ $bateria }}%
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-2.5 py-1 rounded-full text-xs font-bold bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
                                    Sin Configurar
                                </span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button class="btn-edit-device p-2 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg text-slate-400 hover:text-primary transition-all"
                                    data-device="{{ base64_encode(json_encode($device)) }}">
                                    <span class="material-symbols-outlined">add_link</span>
                                </button>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-slate-500">No hay dispositivos nuevos.</td>
                        </tr>
                    @endforelse
                </tbody>

                <tbody id="lista-offline" class="tab-content hidden divide-y divide-slate-100 dark:divide-dark-border">
                    @forelse ($dispositivosCriticos as $device)
                        @php
                            $id_dispositivo = $device['id_dispositivo'] ?? '00';
                            $mac = $device['mac'] ?? '---';
                            $bateria = $device['estado_bateria'] ?? 0;
                            $sucursal = $device['sucursal_nombre'] ?? 'Desconocida';
                            $mesa = $device['mesa_nombre'] ?? 'N/A';
                        @endphp
                        <tr class="hover:bg-red-50/50 dark:hover:bg-red-500/5 transition-colors group">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-3">
                                    <div class="size-10 rounded-lg text-red-500 bg-red-100 dark:bg-red-500/10 flex items-center justify-center">
                                        <span class="material-symbols-outlined text-xl">cloud_off</span>
                                    </div>
                                    <div class="flex flex-col">
                                        <span class="font-semibold text-slate-900 dark:text-white">ESP32-Crit-{{ $id_dispositivo }}</span>
                                        <span class="text-[10px] text-red-500 font-bold uppercase">{{ $sucursal }}</span>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 font-mono text-sm text-slate-500">{{ $mac }}</td>
                            <td class="px-6 py-4 text-sm text-slate-500">{{ $bateria }}%</td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-xs font-bold text-slate-700 dark:text-slate-300">Mesa {{ $mesa }}</span>
                                    <span class="text-[10px] text-slate-400">Offline: {{ \Carbon\Carbon::parse($device['ultimo_ping'])->diffForHumans() }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <a href="{{route('dispositivos.detalles',$device['id_dispositivo'])}}" class="p-2 hover:bg-red-100 dark:hover:bg-red-900/30 rounded-lg text-slate-400 hover:text-red-500 transition-all">
                                    <span class="material-symbols-outlined">visibility</span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center text-slate-500">¡Todo en orden! No hay dispositivos.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@section('modals')
    <div id="modal-overlay"
        class="fixed inset-0 bg-slate-900/40 dark:bg-black/60 backdrop-blur-[2px] z-50 transition-opacity duration-300 opacity-0 pointer-events-none">
    </div>

    <aside id="edit-side-panel"
        class="fixed right-0 top-0 h-screen w-full max-w-[480px] bg-white dark:bg-charcoal shadow-2xl z-[60] flex flex-col transition-transform duration-300 transform translate-x-full border-l border-slate-200 dark:border-dark-border">
        <div class="px-8 py-6 border-b border-slate-200 dark:border-dark-border flex items-center justify-between">
            <div>
                <h2 class="text-xl font-bold text-slate-900 dark:text-white">Asignar Dispositivo</h2>
                <p class="text-sm text-slate-500 dark:text-zinc-400">Vincula este equipo a una ubicación específica</p>
            </div>
            <button id="close-modal-btn"
                class="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-zinc-800 text-slate-500 dark:text-zinc-500 transition-colors">
                <span class="material-symbols-outlined">close</span>
            </button>
        </div>

        <div class="flex-1 overflow-y-auto px-8 py-8 space-y-8">
            <section class="space-y-4">
                <div class="flex items-center gap-2 mb-2">
                    <span class="material-symbols-outlined text-primary text-xl">info</span>
                    <h3 class="font-semibold text-slate-700 dark:text-zinc-300">Información General</h3>
                </div>
                <div class="space-y-4">
                    <label class="block">
                        <span class="block text-sm font-medium text-slate-700 dark:text-zinc-400 mb-1.5">Dirección
                            MAC</span>
                        <input id="modal-mac" readonly
                            class="block w-full rounded-lg font-mono h-12 px-4 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-dark-border text-slate-600 dark:text-white focus:outline-none"
                            type="text" />
                    </label>
                </div>
            </section>

            <section class="space-y-4">
                <div class="flex items-center gap-2 mb-2">
                    <span class="material-symbols-outlined text-primary text-xl">corporate_fare</span>
                    <h3 class="font-semibold text-slate-700 dark:text-zinc-300">Asignación</h3>
                </div>
                <div class="grid grid-cols-1 gap-6">
                    <label class="block">
                        <span class="block text-sm font-medium text-slate-700 dark:text-zinc-400 mb-1.5">Empresa</span>
                        <select id="modal-empresa"
                            class="block w-full rounded-lg h-12 px-4 bg-white dark:bg-white/5 border border-slate-200 dark:border-dark-border text-slate-900 dark:text-white cursor-pointer focus:ring-2 focus:ring-primary/20 outline-none transition-all">
                            <option value="">Cargando empresas...</option>
                        </select>
                    </label>

                    <label class="block">
                        <span class="block text-sm font-medium text-slate-700 dark:text-zinc-400 mb-1.5">Sucursal</span>
                        <select id="modal-sucursal" disabled
                            class="block w-full rounded-lg h-12 px-4 bg-white dark:bg-white/5 border border-slate-200 dark:border-dark-border text-slate-900 dark:text-white cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed outline-none transition-all">
                            <option value="">Seleccione una empresa primero</option>
                        </select>
                    </label>

                    <label class="block">
                        <span class="block text-sm font-medium text-slate-700 dark:text-zinc-400 mb-1.5">Mesa /
                            Recurso</span>
                        <select id="modal-mesa" disabled
                            class="block w-full rounded-lg h-12 px-4 bg-white dark:bg-white/5 border border-slate-200 dark:border-dark-border text-slate-900 dark:text-white cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed outline-none transition-all">
                            <option value="">Seleccione una sucursal primero</option>
                        </select>
                    </label>
                </div>
            </section>
        </div>

        <div
            class="px-8 py-6 border-t border-slate-200 dark:border-dark-border bg-slate-50 dark:bg-white/[0.02] flex items-center justify-end gap-3 mt-auto">
            <button id="cancel-modal-btn"
                class="px-6 py-2.5 rounded-lg text-slate-600 dark:text-zinc-300 font-semibold hover:bg-slate-200 dark:hover:bg-white/5 transition-colors">
                Cancelar
            </button>
            <button id="btn-save-device"
                class="bg-primary hover:bg-blue-600 text-white px-8 py-2.5 rounded-xl font-bold shadow-lg shadow-primary/25 transition-all active:scale-95">
                Vincular Dispositivo
            </button>
        </div>
    </aside>
@endsection

{{-- El script que ya tenías funciona perfectamente con estos IDs --}}
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modalOverlay = document.getElementById('modal-overlay');
            const sidePanel = document.getElementById('edit-side-panel');

            if (!modalOverlay || !sidePanel) return;

            const selectEmpresa = document.getElementById('modal-empresa');
            const selectSucursal = document.getElementById('modal-sucursal');
            const selectMesa = document.getElementById('modal-mesa');

            let currentDeviceId = null;

            // ==================== ABRIR MODAL ====================
            function openModal(device) {
                currentDeviceId = device.id_dispositivo || device.id;
                document.getElementById('modal-mac').value = device.mac || device['mac'] || 'Sin MAC';

                // Reset selects
                selectSucursal.innerHTML = '<option value="">Seleccione una empresa primero</option>';
                selectSucursal.disabled = true;
                selectMesa.innerHTML = '<option value="">Seleccione una sucursal primero</option>';
                selectMesa.disabled = true;

                // Cargar empresas (solo la primera vez)
                if (selectEmpresa.options.length <= 1) {
                    cargarEmpresas();
                }

                modalOverlay.classList.remove('opacity-0', 'pointer-events-none');
                sidePanel.classList.remove('translate-x-full');
            }

            // ==================== CARGAR EMPRESAS ====================
            async function cargarEmpresas() {
                try {
                    selectEmpresa.innerHTML = '<option value="">Cargando empresas...</option>';
                    const res = await fetch("{{ route('api.empresas') }}");
                    const empresas = await res.json();

                    selectEmpresa.innerHTML = '<option value="">-- Seleccione Empresa --</option>';
                    empresas.forEach(emp => {
                        const opt = document.createElement('option');
                        opt.value = emp.id_empresa || emp.id;
                        opt.textContent = emp.razon_social || emp.nombre;
                        selectEmpresa.appendChild(opt);
                    });
                } catch (e) {
                    console.error(e);
                    selectEmpresa.innerHTML = '<option value="">Error al cargar empresas</option>';
                }
            }

            // ==================== CARGAR SUCURSALES ====================
            async function cargarSucursales(empresaId) {
                if (!empresaId) return;

                selectSucursal.disabled = false;
                selectSucursal.innerHTML = '<option value="">Cargando sucursales...</option>';

                try {
                    const url = "{{ route('api.sucursales', ['empresa_id' => ':id']) }}".replace(':id',
                        empresaId);
                    const res = await fetch(url);
                    const sucursales = await res.json();

                    selectSucursal.innerHTML = '<option value="">-- Seleccione Sucursal --</option>';
                    sucursales.forEach(s => {
                        const opt = document.createElement('option');
                        opt.value = s.id;
                        opt.textContent = s.nombre;
                        selectSucursal.appendChild(opt);
                    });
                } catch (e) {
                    selectSucursal.innerHTML = '<option value="">Error al cargar sucursales</option>';
                }
            }

            // ==================== CARGAR MESAS ====================
            async function cargarMesas(sucursalId) {
                if (!sucursalId) return;

                selectMesa.disabled = false;
                selectMesa.innerHTML = '<option value="">Cargando mesas...</option>';

                try {
                    const res = await fetch(`/iot/mesas/${sucursalId}`);
                    const mesas = await res.json();

                    selectMesa.innerHTML = '<option value="">-- Seleccione Mesa --</option>';
                    mesas.forEach(m => {
                        const opt = document.createElement('option');
                        opt.value = m.id_recurso;
                        opt.textContent = m.nombre || m.nombre_mesa || 'Mesa sin nombre';
                        selectMesa.appendChild(opt);
                    });
                } catch (e) {
                    selectMesa.innerHTML = '<option value="">Error al cargar mesas</option>';
                }
            }

            // ==================== EVENTOS ====================
            document.addEventListener('click', e => {
                const btn = e.target.closest('.btn-edit-device');
                if (btn) {
                    try {
                        const device = JSON.parse(atob(btn.dataset.device));
                        openModal(device);
                    } catch (err) {
                        console.error(err);
                    }
                }
            });

            // Cerrar modal
            [document.getElementById('close-modal-btn'),
                document.getElementById('cancel-modal-btn'),
                modalOverlay
            ].forEach(el => el?.addEventListener('click', () => {
                sidePanel.classList.add('translate-x-full');
                modalOverlay.classList.add('opacity-0', 'pointer-events-none');
            }));

            // Cascada
            selectEmpresa.addEventListener('change', function() {
                const empresaId = this.value;
                cargarSucursales(empresaId);
                selectMesa.innerHTML = '<option value="">Seleccione una sucursal primero</option>';
                selectMesa.disabled = true;
            });

            selectSucursal.addEventListener('change', function() {
                const sucursalId = this.value;
                cargarMesas(sucursalId);
            });

            // Guardar (ya lo tenías)
            document.getElementById('btn-save-device').addEventListener('click', () => {
                const mesaId = selectMesa.value;
                if (!mesaId) return alert('⚠️ Debes seleccionar una mesa');

                fetch(`/iot/dispositivos/${currentDeviceId}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            recurso_id: mesaId
                        })
                    })
                    .then(r => r.json())
                    .then(res => res.success ? (alert('✅ Dispositivo vinculado'), location.reload()) :
                        alert('❌ Error'));
            });
        });
    </script>
@endpush