<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ $title ?? config('app.name') }}</title>

    <x-pwa-meta theme-color="#07377f" />

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800&family=plus-jakarta-sans:600,700,800&display=swap" rel="stylesheet">

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    @stack('head')
</head>
<body class="ap-mobile-app font-sans antialiased h-full bg-mesh-light text-ink-900">

    <div class="min-h-full flex" x-data="{ sidebarOpen: false }" x-effect="document.body.classList.toggle('ap-sidebar-open', sidebarOpen)">

        {{-- Sidebar --}}
        <aside
            :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'"
            class="ap-mobile-sidebar fixed md:sticky top-0 inset-y-0 left-0 z-50 md:z-30 w-72 bg-white border-r border-ink-100 transform transition-transform duration-200 ease-out flex flex-col h-screen"
        >
            {{ $sidebar ?? '' }}
        </aside>

        {{-- Backdrop móvil --}}
        <div x-show="sidebarOpen" x-cloak x-transition.opacity
             @click="sidebarOpen = false"
             class="fixed inset-0 bg-ink-900/40 backdrop-blur-sm z-40 md:hidden"></div>

        {{-- Main column --}}
        <div class="flex-1 flex flex-col min-w-0 min-h-screen">

            <header class="relative h-16 bg-white/90 backdrop-blur-md border-b border-ink-100 flex items-center justify-between px-4 md:px-6 sticky top-0 z-10">

                <div class="relative z-10 flex items-center gap-3 min-w-0 flex-1">
                    <button @click="sidebarOpen = !sidebarOpen" class="md:hidden p-2 rounded-lg hover:bg-ink-100" aria-label="Menú">
                        <svg class="w-5 h-5 text-ink-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                    </button>

                    @isset($pageTitle)
                        <h2 class="hidden md:block text-base font-semibold text-ink-900 truncate">{{ $pageTitle }}</h2>
                    @endisset

                    <div class="hidden lg:block ml-auto mr-4 max-w-sm w-full">
                        <div class="relative">
                            <svg class="w-4 h-4 text-ink-400 absolute left-3.5 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                            <input type="search" placeholder="Buscar reservas, clientes…"
                                   class="w-full pl-10 pr-4 py-2 text-sm bg-ink-50 border border-ink-100 rounded-full text-ink-900 placeholder:text-ink-400 focus:bg-white focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 transition">
                        </div>
                    </div>
                </div>

                <div class="relative z-10 flex items-center gap-1.5">
                    {{ $topbarRight ?? '' }}

                    @if (! auth()->user()?->isEmployee() || auth()->user()?->isCompanyAdmin())
                        <a href="{{ route('tenant.reports.index') }}" class="hidden md:inline-flex w-10 h-10 items-center justify-center rounded-full text-ink-600 hover:bg-ink-100" aria-label="Informes">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 19V9m5 10V5m5 14v-7m5 7V3"/></svg>
                        </a>
                        <a href="{{ route('tenant.promotions.index') }}" class="hidden md:inline-flex w-10 h-10 items-center justify-center rounded-full text-ink-600 hover:bg-ink-100" aria-label="Marketing">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </a>
                    @endif

                    {{-- PWA install button (oculto hasta que beforeinstallprompt dispare) --}}
                    <button data-pwa-install hidden type="button"
                            class="hidden md:inline-flex items-center gap-1.5 text-xs font-medium text-brand-700 bg-brand-50 hover:bg-brand-100 px-3 py-1.5 rounded-full transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        Instalar app
                    </button>

                    <button data-push-enable hidden type="button"
                            class="inline-flex items-center gap-1.5 text-xs font-semibold text-ink-700 bg-white hover:bg-ink-50 border border-ink-100 px-2.5 md:px-3 py-2 md:py-1.5 rounded-full transition shadow-soft"
                            aria-label="Activar notificaciones push">
                        <svg class="w-4 h-4 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.857 17.082A23.848 23.848 0 0112 17.25c-.976 0-1.93-.057-2.857-.168M18 8a6 6 0 10-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9m-6 13a2.25 2.25 0 002.25-2.25h-4.5A2.25 2.25 0 0012 21z"/></svg>
                        <span data-push-label class="hidden lg:inline">Activar avisos</span>
                    </button>

                    @auth
                        @livewire('notification-bell')
                    @endauth

                    {{-- User dropdown --}}
                    @php
                        $user = auth()->user();
                        $showTenantSettings = $user?->isCompanyAdmin();
                    @endphp
                    <div class="relative" x-data="{ open: false }">
                        <button @click="open = !open" class="flex items-center gap-2 hover:bg-ink-100/70 rounded-full px-1.5 py-1.5 transition">
                            <div class="w-9 h-9 rounded-full bg-grad-brand text-white flex items-center justify-center text-sm font-semibold shadow-soft">
                                {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                            </div>
                            <div class="hidden sm:block text-left leading-tight pr-1">
                                <p class="text-sm font-semibold text-ink-900">{{ explode(' ', auth()->user()->name)[0] }}</p>
                                <p class="text-[11px] text-ink-500">{{ auth()->user()->roles->first()?->name === 'super_admin' ? 'Súper admin' : (auth()->user()->company?->name ?? 'Usuario') }}</p>
                            </div>
                            <svg class="w-4 h-4 text-ink-400 hidden sm:block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </button>
                        <div x-show="open" x-cloak @click.outside="open = false"
                             x-transition:enter="transition ease-out duration-150"
                             x-transition:enter-start="opacity-0 translate-y-1"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="absolute right-0 top-full mt-2 w-60 bg-white rounded-2xl shadow-soft-lg border border-ink-100 py-1.5 z-50">
                            <div class="px-4 py-3 border-b border-ink-100">
                                <p class="text-sm font-semibold text-ink-900 truncate">{{ auth()->user()->name }}</p>
                                <p class="text-xs text-ink-500 truncate">{{ auth()->user()->email }}</p>
                            </div>
                            <a href="{{ route('profile.edit') }}" class="flex items-center gap-2 px-4 py-2 text-sm text-ink-700 hover:bg-ink-50">
                                <svg class="w-4 h-4 text-ink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                                Mi perfil
                            </a>
                            @if ($showTenantSettings)
                                <div class="border-t border-ink-100 my-1"></div>
                                <p class="px-4 pt-2 pb-1 text-[10px] font-bold uppercase tracking-[0.18em] text-ink-400">Configuración</p>
                                <a href="{{ route('tenant.workspace.index') }}" class="flex items-center gap-2 px-4 py-2 text-sm text-ink-700 hover:bg-ink-50">
                                    <svg class="w-4 h-4 text-ink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                    Ajustes
                                </a>
                                <a href="{{ route('tenant.clinical-settings.index') }}" class="flex items-center gap-2 px-4 py-2 text-sm text-ink-700 hover:bg-ink-50">
                                    <svg class="w-4 h-4 text-ink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-1.125 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z"/></svg>
                                    Módulo Clínico
                                </a>
                            @endif
                            <div class="border-t border-ink-100 my-1"></div>
                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="w-full text-left flex items-center gap-2 px-4 py-2 text-sm text-rose-600 hover:bg-rose-50">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                                    Cerrar sesión
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </header>

            {{-- Flash --}}
            @if (session('success') || session('error') || session('warning'))
                <div class="px-4 md:px-8 pt-4 animate-fade-in">
                    @if (session('success'))
                        <div class="rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-3 text-sm flex items-center gap-2">
                            <svg class="w-5 h-5 text-emerald-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <span>{{ session('success') }}</span>
                        </div>
                    @endif
                    @if (session('error'))
                        <div class="rounded-xl bg-rose-50 border border-rose-200 text-rose-800 px-4 py-3 text-sm">{{ session('error') }}</div>
                    @endif
                    @if (session('warning'))
                        <div class="rounded-xl bg-amber-50 border border-amber-200 text-amber-800 px-4 py-3 text-sm">{{ session('warning') }}</div>
                    @endif
                </div>
            @endif

            <main class="flex-1 px-4 md:px-8 py-6 animate-slide-up bg-mesh-light">
                {{ $slot }}
            </main>

            <footer class="px-4 md:px-8 py-4 text-[11px] text-ink-400 border-t border-ink-100 bg-white/70">
                <div class="flex flex-col md:flex-row items-center justify-between gap-2">
                    <span>© {{ date('Y') }} AsignaPro · Todos los derechos reservados</span>
                    <span>v1.0 · Hecho en Colombia</span>
                </div>
            </footer>
        </div>
    </div>

    @auth
        @php
            $mobileUser = auth()->user();
            $mobileIsEmployee = $mobileUser?->isEmployee() && ! $mobileUser?->isCompanyAdmin();
            $mobileNavItems = $mobileIsEmployee
                ? [
                    ['label' => 'Inicio', 'href' => route('employee.dashboard'), 'active' => request()->routeIs('employee.dashboard'), 'icon' => 'home'],
                    ['label' => 'Agenda', 'href' => route('employee.agenda'), 'active' => request()->routeIs('employee.agenda'), 'icon' => 'calendar'],
                    ['label' => 'Servicios', 'href' => route('employee.services.index'), 'active' => request()->routeIs('employee.services.*'), 'icon' => 'briefcase'],
                    ['label' => 'Perfil', 'href' => route('profile.edit'), 'active' => request()->routeIs('profile.*'), 'icon' => 'user'],
                ]
                : [
                    ['label' => 'Inicio', 'href' => route('tenant.dashboard'), 'active' => request()->routeIs('tenant.dashboard'), 'icon' => 'home'],
                    ['label' => 'Agenda', 'href' => route('tenant.bookings.agenda'), 'active' => request()->routeIs('tenant.bookings.agenda'), 'icon' => 'calendar'],
                    ['label' => 'Reservas', 'href' => route('tenant.bookings.index'), 'active' => request()->routeIs('tenant.bookings.index') || request()->routeIs('tenant.bookings.show'), 'icon' => 'clipboard'],
                    ['label' => 'Clientes', 'href' => route('tenant.customers.index'), 'active' => request()->routeIs('tenant.customers.*') || request()->routeIs('tenant.patients.*'), 'icon' => 'users'],
                    ['label' => 'Perfil', 'href' => route('profile.edit'), 'active' => request()->routeIs('profile.*'), 'icon' => 'user'],
                ];
        @endphp

        @if (! $mobileUser?->isSuperAdmin())
            <nav class="ap-mobile-bottom-nav md:hidden" aria-label="Navegación principal móvil">
                @foreach ($mobileNavItems as $item)
                    <a href="{{ $item['href'] }}" @class(['ap-mobile-tab', 'is-active' => $item['active']])>
                        @switch($item['icon'])
                            @case('home')
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5 12 4l9 7.5M5.5 10.5V20h13v-9.5"/></svg>
                                @break
                            @case('calendar')
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V4m8 3V4M5 10h14M6 20h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2Z"/></svg>
                                @break
                            @case('clipboard')
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5h6m-6 4h6m-6 4h6M8 3h8a2 2 0 0 1 2 2v15H6V5a2 2 0 0 1 2-2Z"/></svg>
                                @break
                            @case('users')
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 19a4 4 0 0 0-8 0m12 0a3 3 0 0 0-4.5-2.6M4 19a3 3 0 0 1 4.5-2.6M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6-1a3 3 0 1 0 0-6m-12 6a3 3 0 1 1 0-6"/></svg>
                                @break
                            @case('briefcase')
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6V5a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1m-8 0h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm-2 6h16"/></svg>
                                @break
                            @default
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm-7 8a7 7 0 0 1 14 0"/></svg>
                        @endswitch
                        <span>{{ $item['label'] }}</span>
                    </a>
                @endforeach
            </nav>
        @endif
    @endauth

    {{-- PWA install banner (mobile-friendly, oculto hasta beforeinstallprompt) --}}
    @auth
        <x-pwa-install-banner />
    @endauth

    @livewireScriptConfig
    @if (session('success') || session('error') || session('warning'))
        <script>
            window.addEventListener('DOMContentLoaded', () => {
                @if (session('success'))
                    window.sileo?.success(@js(session('success')), 'Actualizado');
                @endif
                @if (session('error'))
                    window.sileo?.error(@js(session('error')), 'Error');
                @endif
                @if (session('warning'))
                    window.sileo?.warning(@js(session('warning')), 'Atención');
                @endif
            });
        </script>
    @endif
    @stack('scripts')
</body>
</html>
