<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#ff4a1c">
<title>@yield('title', $siteName ?? 'Befikreyy')</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="/assets/brand/logo.png">
<link rel="stylesheet" href="/assets/bfk.css?v=3">
<link rel="stylesheet" href="/assets/bfk-forms.css?v=1">
@stack('head')
</head>
<body>
@if (session('success'))
    <div class="alert alert-success" style="position:fixed; top:80px; right:20px; z-index:999; max-width:360px;">{{ session('success') }}</div>
@endif
@if (session('error'))
    <div class="alert alert-error" style="position:fixed; top:80px; right:20px; z-index:999; max-width:360px;">{{ session('error') }}</div>
@endif
@if (session('info'))
    <div class="alert alert-info" style="position:fixed; top:80px; right:20px; z-index:999; max-width:360px;">{{ session('info') }}</div>
@endif

<div class="app-overlay" id="appOverlay"></div>
<div class="app-shell">
    <aside class="app-aside" id="appAside">
        <a href="{{ route('home') }}" class="logo logo-img">
            <img src="/assets/brand/logo.png" alt="Befikreyy" class="logo-img-el">
        </a>
        <nav>
            @yield('sidebar')
        </nav>
    </aside>
    <div class="app-main">
        <div class="app-topbar">
            <div class="topbar-title" style="display: flex; align-items: center; gap: 10px;">
                <span>@yield('title', 'Dashboard')</span>
            </div>
            <div class="topbar-actions">
                <a href="{{ route('home') }}" class="btn btn-ghost btn-sm hidden-mobile">← View site</a>
                <div class="av">{{ strtoupper(substr(auth()->user()->name, 0, 1)) }}</div>
            </div>
        </div>
        <div class="app-content">
            @yield('content')
        </div>
        <nav class="app-bottomnav" aria-label="Primary">
            @yield('bottomnav')
            <button type="button" class="more-btn" id="moreBtn" aria-label="More menu">
                <span class="ic">⋯</span>
                <span>More</span>
            </button>
        </nav>
    </div>
</div>

@stack('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var btn = document.getElementById('moreBtn');
    var aside = document.getElementById('appAside');
    var overlay = document.getElementById('appOverlay');
    if (!btn || !aside || !overlay) return;
    function open() { aside.classList.add('is-open'); overlay.classList.add('is-open'); }
    function close() { aside.classList.remove('is-open'); overlay.classList.remove('is-open'); }
    btn.addEventListener('click', function() {
        if (aside.classList.contains('is-open')) close(); else open();
    });
    overlay.addEventListener('click', close);
    aside.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', close); });
});
</script>
</body>
</html>