<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', config('app.name'))</title>
    @vite(['resources/css/app.css'])
    @livewireStyles
</head>

<body class="bg-gray-50 text-gray-800 antialiased">

<div x-data="{ sidebarOpen: false, sidebarCollapsed: false }" class="min-h-screen flex">

    {{-- DESKTOP SIDEBAR --}}
    <aside
        class="hidden lg:flex flex-col h-screen sticky top-0 transition-all duration-300 shrink-0"
        :class="sidebarCollapsed ? 'w-0 overflow-hidden' : 'w-64'"
    >
        <x-sidebar />
    </aside>

    {{-- MOBILE SIDEBAR OVERLAY --}}
    <div x-show="sidebarOpen"
         x-cloak
         x-transition.opacity
         class="fixed inset-0 z-50 flex lg:hidden">

        <div class="fixed inset-0 bg-black/40 backdrop-blur-sm" @click="sidebarOpen = false"></div>

        <div class="relative w-64 z-10">
            <x-sidebar />
        </div>
    </div>

    {{-- MAIN --}}
    <div class="flex-1 flex flex-col min-w-0">
        <x-header />
        <main class="flex-1 p-6">
            @hasSection('content')
                @yield('content')
            @else
                {{ $slot ?? '' }}
            @endif
        </main>
    </div>

</div>

@php $currentVersion = \App\Models\AppVersion::current('web'); @endphp
@if($currentVersion?->status === 'beta')
<span style="background:#FEF3C7;color:#B45309;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:0.5px;position:fixed;top:12px;right:12px;z-index:9999;">BETA</span>
@endif

<script>
(async function() {
  const STORAGE_KEY = 'aziros_seen_version';
  const seenVersion = localStorage.getItem(STORAGE_KEY);
  try {
    const res  = await fetch('/api/v1/version/current?platform=web');
    const data = await res.json();
    const current = data.data;
    if (!current) return;
    if (!current.show_popup) return;
    if (seenVersion === current.version) return;
    showVersionPopup(current.version, current.name, current.changelog);
    localStorage.setItem(STORAGE_KEY, current.version);
  } catch(e) {}
})();

function showVersionPopup(version, name, changelog) {
  const style = document.createElement('style');
  style.textContent = `@keyframes azSlideUp{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}`;
  document.head.appendChild(style);

  const popup = document.createElement('div');
  popup.style.cssText = 'position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:9999;background:#fff;border:1px solid #E5E7EB;border-radius:16px;padding:20px 24px;width:360px;box-shadow:0 8px 32px rgba(0,0,0,0.12);animation:azSlideUp 0.3s ease forwards;';
  popup.innerHTML = `
    <div style="display:flex;gap:12px;align-items:flex-start;">
      <div style="width:40px;height:40px;border-radius:12px;background:#EEF2FF;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <svg width="20" height="20" fill="none" stroke="#4F46E5" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
      </div>
      <div style="flex:1;">
        <p style="margin:0 0 2px;font-size:15px;font-weight:600;color:#111827;">${name}</p>
        <p style="margin:0;font-size:13px;color:#6B7280;">Version ${version}</p>
        ${changelog ? `<p style="margin:8px 0 0;font-size:13px;color:#374151;line-height:1.5;">${changelog}</p>` : ''}
      </div>
      <button onclick="this.closest('div[style]').parentElement.remove()" style="background:none;border:none;cursor:pointer;color:#9CA3AF;font-size:18px;padding:0;line-height:1;flex-shrink:0;">×</button>
    </div>
    <button onclick="this.parentElement.remove()" style="width:100%;margin-top:16px;background:#4F46E5;color:#fff;border:none;border-radius:10px;padding:10px;font-size:14px;font-weight:500;cursor:pointer;">Verstanden</button>
  `;
  document.body.appendChild(popup);
  setTimeout(() => popup?.remove(), 10000);
}
</script>

@livewireScripts
@livewire('wire-elements-modal')
@vite(['resources/js/app.js'])
</body>
</html>
