<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        @include('partials.head')
    </head>
    <body class="setel-app-body antialiased">
        {{-- Plegado del menú en escritorio (más espacio para el contenido) --}}
        <input type="checkbox" id="setel-sidebar-rail" class="setel-sidebar-rail-checkbox sr-only" autocomplete="off" />

        <input type="checkbox" id="setel-sidebar-toggle" class="setel-sidebar-toggle sr-only" aria-label="Abrir o cerrar menú" />

        <label for="setel-sidebar-toggle" class="setel-sidebar-overlay lg:hidden" aria-hidden="true"></label>

        <aside class="setel-sidebar" aria-label="Navegación principal">
            <a href="{{ route('dashboard') }}" class="setel-sidebar-brand shrink-0" wire:navigate>
                <span class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-[var(--setel-primary)] text-white">
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="M12 2v4M12 18v4M8 6l-2-2M16 6l2-2M6 10H4M20 10h-2M8 14l-2 2M16 14l2 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                        <path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4Z" stroke="currentColor" stroke-width="1.5" />
                    </svg>
                </span>
                <span class="setel-sidebar-brand-text flex min-w-0 flex-col leading-tight">
                    <span class="truncate text-base font-bold text-white">Setelsat</span>
                    <span class="truncate text-xs font-medium text-[var(--setel-sidebar-muted)]">Gilat Manager</span>
                </span>
            </a>

            <nav class="setel-sidebar-scroll flex flex-col gap-1 px-3">
                <details class="setel-nav-group setel-nav-group--first" open>
                    <summary class="setel-nav-group__summary">
                        <span class="setel-nav-group__label">Principal</span>
                        <flux:icon.chevron-down class="setel-nav-group__chevron size-5 shrink-0" />
                    </summary>
                    <div class="setel-nav-group__panel">
                        <a
                            href="{{ route('dashboard') }}"
                            wire:navigate
                            title="Dashboard"
                            class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('dashboard') ? 'setel-nav-link--active' : '' }}"
                        >
                            <flux:icon.layout-grid class="size-5 shrink-0" />
                            <span class="setel-nav-link__text">Dashboard</span>
                        </a>
                    </div>
                </details>

                @if (auth()->user()->isTechnician())
                    <details class="setel-nav-group" open>
                        <summary class="setel-nav-group__summary">
                            <span class="setel-nav-group__label">Técnico</span>
                            <flux:icon.chevron-down class="setel-nav-group__chevron size-5 shrink-0" />
                        </summary>
                        <div class="setel-nav-group__panel">
                            <a
                                href="{{ route('assignments.index') }}"
                                wire:navigate
                                title="Asignaciones"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('assignments.*') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.clipboard-document-check class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Asignaciones</span>
                            </a>
                        </div>
                    </details>
                @endif

                @if (auth()->user()->isNoc())
                    <details class="setel-nav-group" open>
                        <summary class="setel-nav-group__summary">
                            <span class="setel-nav-group__label">NOC</span>
                            <flux:icon.chevron-down class="setel-nav-group__chevron size-5 shrink-0" />
                        </summary>
                        <div class="setel-nav-group__panel">
                            <a
                                href="{{ route('noc.tracking.open') }}"
                                wire:navigate
                                title="OT pendientes y observadas"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('noc.tracking.open') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.signal class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">OT pendientes / observadas</span>
                            </a>
                            <a
                                href="{{ route('noc.tracking.review') }}"
                                wire:navigate
                                title="OT cerradas"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('noc.tracking.review') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.clipboard-document-check class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">OT cerradas (revisión)</span>
                            </a>
                        </div>
                    </details>
                @endif

                @if (auth()->user()->canAccessOperations())
                    <details class="setel-nav-group" open>
                        <summary class="setel-nav-group__summary">
                            <span class="setel-nav-group__label">Operaciones</span>
                            <flux:icon.chevron-down class="setel-nav-group__chevron size-5 shrink-0" />
                        </summary>
                        <div class="setel-nav-group__panel">
                            <a
                                href="{{ route('projects.index') }}"
                                wire:navigate
                                title="Proyectos"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('projects.*') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.folder class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Proyectos</span>
                            </a>
                            <a
                                href="{{ route('sites.index') }}"
                                wire:navigate
                                title="Sitios"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('sites.*') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.map-pin class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Sitios</span>
                            </a>
                            <a
                                href="{{ route('work-types.index') }}"
                                wire:navigate
                                title="Tipos de trabajo"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('work-types.*') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.wrench class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Tipos de Trabajo</span>
                            </a>
                            <a
                                href="{{ route('works.index') }}"
                                wire:navigate
                                title="Trabajos"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('works.index', 'works.create', 'works.export', 'works.export.operational', 'works.export.observed-incidents', 'works.show') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.clipboard-document-list class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Trabajos</span>
                            </a>
                            <a
                                href="{{ route('works.assignments') }}"
                                wire:navigate
                                title="Asignaciones"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('works.assignments') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.calendar-days class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Asignaciones</span>
                            </a>
                        </div>
                    </details>
                @endif

                @if (auth()->user()->isAdministrator())
                    <details class="setel-nav-group" open>
                        <summary class="setel-nav-group__summary">
                            <span class="setel-nav-group__label">Administración</span>
                            <flux:icon.chevron-down class="setel-nav-group__chevron size-5 shrink-0" />
                        </summary>
                        <div class="setel-nav-group__panel">
                            <a
                                href="{{ route('users.index') }}"
                                wire:navigate
                                title="Usuarios"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('users.index') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.users class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Usuarios</span>
                            </a>
                            <a
                                href="{{ route('departments.index') }}"
                                wire:navigate
                                title="Departamentos"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('departments.index') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.building-office-2 class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Departamentos</span>
                            </a>
                            <a
                                href="{{ route('provinces.index') }}"
                                wire:navigate
                                title="Provincias"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('provinces.index') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.map class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Provincias</span>
                            </a>
                            <a
                                href="{{ route('districts.index') }}"
                                wire:navigate
                                title="Distritos"
                                class="setel-nav-link setel-nav-link--sub {{ request()->routeIs('districts.index') ? 'setel-nav-link--active' : '' }}"
                            >
                                <flux:icon.rectangle-group class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Distritos</span>
                            </a>
                        </div>
                    </details>
                @endif

                <details class="setel-nav-group setel-nav-group--footer" open>
                    <summary class="setel-nav-group__summary">
                        <span class="setel-nav-group__label">Mi cuenta</span>
                        <flux:icon.chevron-down class="setel-nav-group__chevron size-5 shrink-0" />
                    </summary>
                    <div class="setel-nav-group__panel">
                        <a href="{{ route('profile.edit') }}" wire:navigate class="setel-nav-link setel-nav-link--sub" title="Perfil">
                            <flux:icon.user class="size-5 shrink-0" />
                            <span class="setel-nav-link__text">Perfil</span>
                        </a>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button
                                type="submit"
                                title="Cerrar sesión"
                                class="setel-nav-link setel-nav-link--sub w-full cursor-pointer border-0 bg-transparent text-start font-medium"
                                data-test="logout-button"
                            >
                                <flux:icon.arrow-right-start-on-rectangle class="size-5 shrink-0" />
                                <span class="setel-nav-link__text">Cerrar Sesión</span>
                            </button>
                        </form>
                    </div>
                </details>
            </nav>
        </aside>

        <div class="setel-main-wrap">
            <header class="setel-mobile-bar lg:hidden" aria-label="Barra móvil">
                <label for="setel-sidebar-toggle" class="setel-hamburger cursor-pointer">
                    <flux:icon.bars-2 class="size-6" />
                </label>
                <span class="text-sm font-bold text-[var(--setel-text)]">Setelsat</span>
                <flux:dropdown position="bottom" align="end">
                    <button type="button" class="flex items-center gap-2 rounded-lg p-1 hover:bg-[var(--setel-content-bg)]">
                        <x-user-avatar :user="auth()->user()" size="sm" />
                    </button>
                    <flux:menu>
                        <div class="flex items-center gap-2 px-2 py-2">
                            <x-user-avatar :user="auth()->user()" size="sm" />
                            <div class="min-w-0 text-start">
                                <p class="truncate text-sm font-medium text-[var(--setel-text)]">{{ auth()->user()->name }}</p>
                                <p class="truncate text-xs text-[var(--setel-text-muted)]">{{ auth()->user()->roles->pluck('name')->join(', ') ?: 'Sin rol' }}</p>
                            </div>
                        </div>
                        <flux:menu.separator />
                        <flux:menu.item :href="route('profile.edit')" icon="user" wire:navigate>Perfil</flux:menu.item>
                        <flux:menu.separator />
                        <form method="POST" action="{{ route('logout') }}" class="w-full">
                            @csrf
                            <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full cursor-pointer">
                                Cerrar sesión
                            </flux:menu.item>
                        </form>
                    </flux:menu>
                </flux:dropdown>
            </header>

            {{ $slot }}
        </div>

        @persist('toast')
            <flux:toast.group>
                <flux:toast />
            </flux:toast.group>
        @endpersist

        @stack('scripts')

        <script>
            (function () {
                var key = 'setel-sidebar-rail';
                var el = document.getElementById('setel-sidebar-rail');
                if (!el) return;
                try {
                    if (localStorage.getItem(key) === '1') el.checked = true;
                } catch (e) {}
                el.addEventListener('change', function () {
                    try {
                        localStorage.setItem(key, el.checked ? '1' : '0');
                    } catch (e) {}
                });
            })();
        </script>

        @fluxScripts
    </body>
</html>
