<!DOCTYPE html>
<html lang="id" class="h-full scroll-smooth">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Sysorder Owner Hub — laporan gabungan SysOrder & sysReflex">
    <title>@yield('title', config('portal.product_line'))</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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @stack('head')
</head>
<body class="h-full bg-slate-100 font-sans text-slate-900 antialiased">
    <div class="flex min-h-full flex-col md:flex-row">
        <aside class="border-b border-slate-200 bg-white shadow-sm md:w-60 md:shrink-0 md:border-b-0 md:border-r md:border-slate-200">
            <div class="flex items-center justify-between gap-2 px-4 py-4 md:flex-col md:items-stretch md:px-3">
                <a href="{{ route('owner.reports') }}" class="flex items-center gap-2 rounded-lg px-2 py-1 text-left transition hover:bg-slate-50">
                    <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-sky-600 text-lg font-bold text-white shadow-sm">S</span>
                    <span class="font-semibold leading-tight text-slate-900">{{ config('portal.product_line') }}</span>
                </a>
            </div>
            <nav class="flex gap-1 overflow-x-auto px-2 pb-3 md:flex-col md:overflow-visible md:px-2 md:pb-6" aria-label="Menu utama">
                <a href="{{ route('owner.dashboard') }}" @class([
                    'flex shrink-0 items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition md:w-full',
                    request()->routeIs('owner.dashboard') ? 'bg-sky-50 text-sky-800 ring-1 ring-sky-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900',
                ])>
                    <svg class="h-5 w-5 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 3h18v6H3V3zm0 8h18v10H3V11z"/></svg>
                    Dashboard
                </a>
                <a href="{{ route('owner.reports') }}" @class([
                    'flex shrink-0 items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition md:w-full',
                    ($rn = request()->route()?->getName()) && str_starts_with($rn, 'owner.reports') ? 'bg-sky-50 text-sky-800 ring-1 ring-sky-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900',
                ])>
                    <svg class="h-5 w-5 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
                    Laporan
                </a>
                <a href="{{ route('owner.settings') }}" @class([
                    'flex shrink-0 items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition md:w-full',
                    request()->routeIs('owner.settings') ? 'bg-sky-50 text-sky-800 ring-1 ring-sky-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900',
                ])>
                    <svg class="h-5 w-5 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    Pengaturan
                </a>
                <a href="{{ route('owner.access-guide') }}" @class([
                    'flex shrink-0 items-center gap-2 rounded-lg px-3 py-2.5 text-sm font-medium transition md:w-full',
                    request()->routeIs('owner.access-guide') ? 'bg-sky-50 text-sky-800 ring-1 ring-sky-200' : 'text-slate-600 hover:bg-slate-50 hover:text-slate-900',
                ])>
                    <svg class="h-5 w-5 opacity-80" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.546-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Panduan
                </a>
            </nav>
        </aside>

        <div class="flex min-w-0 flex-1 flex-col">
            <header class="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-white/95 px-4 py-3 backdrop-blur-md md:px-8">
                <div>
                    <h1 class="text-lg font-semibold tracking-tight text-slate-900 md:text-xl">@yield('page_heading')</h1>
                    @hasSection('page_subheading')
                        <p class="mt-0.5 max-w-2xl text-sm text-slate-600">@yield('page_subheading')</p>
                    @endif
                </div>
                <div class="flex items-center gap-3 text-sm">
                    <span class="hidden max-w-[200px] truncate text-slate-500 sm:inline" title="{{ Auth::user()->email }}">{{ Auth::user()->email }}</span>
                    <form method="post" action="{{ route('logout') }}" class="m-0">@csrf
                        <button type="submit" class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 shadow-sm transition hover:border-slate-400 hover:bg-slate-50">Keluar</button>
                    </form>
                </div>
            </header>

            <main class="flex-1 px-4 py-6 md:px-8 md:py-8">
                @if (session('success'))
                    <div class="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900" role="status">{{ session('success') }}</div>
                @endif
                @yield('content')
            </main>

            <footer class="border-t border-slate-200 bg-white px-4 py-4 text-center text-xs text-slate-500 md:px-8">
                Agregat untuk insight operasional — bukan laporan audit. Data transaksi tetap di SysOrder &amp; sysReflex.
            </footer>
        </div>
    </div>
    @stack('scripts')
</body>
</html>
