{{-- Developer Dashboard (Embedded Full Access) --}}
@php
    $routeOr = function (string $name, string $fallback = '#') {
        return \Illuminate\Support\Facades\Route::has($name) ? route($name) : $fallback;
    };

    $viewExists = function (string $view) {
        return view()->exists($view);
    };

    $ordersIndexUrl = $routeOr('orders.index', url('/orders'));
    $ordersCreateUrl = $routeOr('orders.create', url('/orders/create'));
    $settingsIndexUrl = $routeOr('settings.index', url('/settings'));
    $usersIndexUrl = $routeOr('users.index', url('/users'));
    $rolesIndexUrl = $routeOr('roles.index', url('/roles'));
    $productsIndexUrl = $routeOr('products.items.index', url('/products/items'));
    $paymentAccountsIndexUrl = $routeOr('payment-accounts.index', url('/payment-accounts'));
    $financeIndexUrl = $routeOr('finance.index', url('/finance'));
    $backupsIndexUrl = $routeOr('backups.index', url('/backups'));
    $devQuickSettingsUrl = $routeOr('dev.quick-settings', url('/dev/quick-settings'));
@endphp

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

@if($viewExists('pages.dashboard.partials.developer-override-panel'))
    @include('pages.dashboard.partials.developer-override-panel')
@endif

<style>
    .dev-wrap{
        font-family:'Poppins',sans-serif;
        background:
            radial-gradient(900px 320px at 10% 0%, rgba(59,130,246,.16), transparent 60%),
            radial-gradient(800px 320px at 90% 10%, rgba(16,185,129,.13), transparent 60%),
            radial-gradient(700px 300px at 50% 100%, rgba(168,85,247,.11), transparent 60%);
    }
    .dev-glass{
        background: rgba(255,255,255,.74);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(148,163,184,.20);
        box-shadow: 0 14px 34px rgba(15,23,42,.07);
    }
    .dark .dev-glass{
        background: rgba(15,23,42,.50);
        border: 1px solid rgba(148,163,184,.12);
        box-shadow: 0 18px 40px rgba(2,6,23,.24);
    }
    .dev-card-title{
        font-size: 15px;
        font-weight: 700;
        color: rgb(15 23 42);
    }
    .dark .dev-card-title{
        color: rgb(248 250 252);
    }
    .dev-card-subtitle{
        font-size: 12px;
        line-height: 1.6;
        color: rgb(100 116 139);
    }
    .dark .dev-card-subtitle{
        color: rgb(148 163 184);
    }
    .dev-chip{
        display:inline-flex;
        align-items:center;
        gap:.45rem;
        border-radius:999px;
        padding:.5rem .85rem;
        font-size:11px;
        font-weight:700;
        border:1px solid rgba(148,163,184,.22);
        background:rgba(255,255,255,.8);
        color:rgb(51 65 85);
    }
    .dark .dev-chip{
        border-color:rgba(148,163,184,.14);
        background:rgba(255,255,255,.04);
        color:rgb(203 213 225);
    }
    .dev-hero{
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        padding: 1.25rem;
    }
    .dev-hero::before{
        content:"";
        position:absolute;
        inset:-20% auto auto -10%;
        width:220px;
        height:220px;
        border-radius:999px;
        background: radial-gradient(circle, rgba(59,130,246,.24), transparent 70%);
        pointer-events:none;
    }
    .dev-hero::after{
        content:"";
        position:absolute;
        right:-40px;
        bottom:-50px;
        width:220px;
        height:220px;
        border-radius:999px;
        background: radial-gradient(circle, rgba(16,185,129,.18), transparent 70%);
        pointer-events:none;
    }
    .dev-action{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:1rem;
        border-radius:18px;
        padding:1rem;
        border:1px solid rgba(148,163,184,.18);
        background:rgba(255,255,255,.65);
        transition:all .2s ease;
    }
    .dev-action:hover{
        transform:translateY(-2px);
        border-color:rgba(59,130,246,.28);
        box-shadow:0 12px 24px rgba(15,23,42,.06);
    }
    .dark .dev-action{
        background:rgba(255,255,255,.03);
        border-color:rgba(148,163,184,.10);
    }
    .dark .dev-action:hover{
        border-color:rgba(96,165,250,.26);
        box-shadow:0 14px 26px rgba(2,6,23,.20);
    }
    .dev-icon{
        display:flex;
        align-items:center;
        justify-content:center;
        height:2.9rem;
        width:2.9rem;
        border-radius:14px;
        background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(168,85,247,.16));
        color:rgb(37 99 235);
        flex-shrink:0;
    }
    .dark .dev-icon{
        background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(168,85,247,.16));
        color:rgb(147 197 253);
    }
    .dev-menu-tile{
        display:flex;
        flex-direction:column;
        gap:.55rem;
        min-height:138px;
        border-radius:18px;
        padding:1rem;
        border:1px solid rgba(148,163,184,.18);
        background:rgba(255,255,255,.62);
        transition:all .2s ease;
    }
    .dev-menu-tile:hover{
        transform:translateY(-2px);
        border-color:rgba(59,130,246,.26);
        box-shadow:0 12px 24px rgba(15,23,42,.06);
    }
    .dark .dev-menu-tile{
        background:rgba(255,255,255,.03);
        border-color:rgba(148,163,184,.10);
    }
    .dark .dev-menu-tile:hover{
        border-color:rgba(96,165,250,.26);
        box-shadow:0 14px 26px rgba(2,6,23,.20);
    }
    .dev-menu-badge{
        align-self:flex-start;
        border-radius:999px;
        padding:.32rem .65rem;
        font-size:10px;
        font-weight:700;
        letter-spacing:.02em;
        background:rgba(59,130,246,.10);
        color:rgb(37 99 235);
    }
    .dark .dev-menu-badge{
        background:rgba(96,165,250,.12);
        color:rgb(147 197 253);
    }
    .cmd-box{
        border-radius:18px;
        border:1px solid rgba(148,163,184,.18);
        background:rgba(255,255,255,.66);
        padding:.9rem 1rem;
    }
    .dark .cmd-box{
        background:rgba(255,255,255,.03);
        border-color:rgba(148,163,184,.10);
    }
    .cmd-input{
        outline:none;
        background:transparent;
    }
    .danger-note{
        border-radius:18px;
        border:1px solid rgba(248,113,113,.25);
        background:rgba(254,242,242,.9);
        padding:1rem;
    }
    .dark .danger-note{
        border-color:rgba(248,113,113,.18);
        background:rgba(127,29,29,.12);
    }
</style>

@php
    $developerMenus = [
        ['title' => 'Semua Order', 'desc' => 'Lihat seluruh transaksi dan masuk ke halaman edit atau hapus.', 'url' => route('orders.index'), 'badge' => 'Transaksi'],
        ['title' => 'Buat Order', 'desc' => 'Masuk cepat ke form pembuatan order.', 'url' => route('orders.create'), 'badge' => 'Create'],
        ['title' => 'Customers', 'desc' => 'Kelola seluruh pelanggan dan histori data.', 'url' => url('/customers'), 'badge' => 'Data'],
        ['title' => 'Users', 'desc' => 'Akses penuh user, akun, dan data login.', 'url' => url('/users'), 'badge' => 'Akses'],
        ['title' => 'Roles', 'desc' => 'Atur dan ubah hak akses semua role.', 'url' => url('/roles'), 'badge' => 'Permission'],
        ['title' => 'Products', 'desc' => 'Kelola produk, harga, layanan, dan kategori.', 'url' => url('/products'), 'badge' => 'Master'],
        ['title' => 'Payment Accounts', 'desc' => 'Kelola rekening dan akun pembayaran.', 'url' => url('/payment-accounts'), 'badge' => 'Finance'],
        ['title' => 'Finance', 'desc' => 'Masuk ke modul finance utama.', 'url' => url('/finance'), 'badge' => 'Finance'],
        ['title' => 'Backup DB', 'desc' => 'Backup sistem dan maintenance data.', 'url' => url('/backups'), 'badge' => 'System'],
        ['title' => 'Quick Settings', 'desc' => 'Ubah logo, nama toko, alamat, dan footer print.', 'url' => route('settings.index'), 'badge' => 'Branding'],
        ['title' => 'Tutorial', 'desc' => 'Panduan penggunaan dan dokumentasi.', 'url' => url('/tutorial'), 'badge' => 'Help'],
        ['title' => 'Laporan', 'desc' => 'Akses semua laporan penting dari satu klik.', 'url' => url('/reports'), 'badge' => 'Report'],
    ];

    $developerActions = [
        ['title' => 'Edit transaksi', 'desc' => 'Masuk ke daftar order untuk ubah invoice, status, total, file, atau customer.', 'url' => route('orders.index'), 'label' => 'Buka order', 'class' => 'bg-amber-500 hover:bg-amber-600 text-white'],
        ['title' => 'Hapus transaksi', 'desc' => 'Masuk ke daftar transaksi dan hapus data yang diperlukan langsung dari modul order.', 'url' => route('orders.index'), 'label' => 'Kelola hapus', 'class' => 'bg-rose-600 hover:bg-rose-700 text-white'],
        ['title' => 'Edit branding', 'desc' => 'Ubah logo, identitas toko, footer, dan kontak langsung dari dashboard.', 'url' => route('settings.index'), 'label' => 'Buka settings', 'class' => 'bg-brand-500 hover:bg-brand-600 text-white'],
        ['title' => 'Kontrol user & role', 'desc' => 'Ubah hak akses, tambah user, dan edit akun dalam satu jalur cepat.', 'url' => url('/users'), 'label' => 'Buka users', 'class' => 'bg-slate-900 hover:bg-slate-800 text-white dark:bg-slate-700 dark:hover:bg-slate-600'],
    ];
@endphp

<div class="dev-wrap rounded-3xl p-4 md:p-5" x-data="devFrontDashboard()">

    <div class="dev-glass dev-hero mb-5">
        <div class="relative z-10 grid grid-cols-1 gap-5 xl:grid-cols-[1.35fr_.95fr]">
            <div>
                <div class="mb-3 flex flex-wrap items-center gap-2">
                    <span class="dev-chip">Developer Dashboard</span>
                    <span class="dev-chip">Full Access Panel</span>
                    <span class="dev-chip">All Control in One Page</span>
                </div>

                <h1 class="text-2xl font-bold tracking-tight text-slate-900 dark:text-white md:text-3xl">
                    Semua akses developer ada langsung di dashboard ini.
                </h1>
                <p class="mt-3 max-w-3xl text-sm leading-7 text-slate-600 dark:text-slate-300">
                    Saya ubah dashboard ini jadi pusat kontrol utama developer. Fokusnya bukan penghasilan atau statistik,
                    tapi akses cepat untuk edit, ubah, hapus, branding, user management, master data, dan semua menu penting
                    tanpa perlu pindah ke halaman dashboard lain.
                </p>

                <div class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
                    @foreach($developerActions as $action)
                        <div class="rounded-2xl border border-slate-200 bg-white/70 p-4 dark:border-slate-700 dark:bg-white/[0.03]">
                            <div class="text-sm font-bold text-slate-900 dark:text-white">{{ $action['title'] }}</div>
                            <div class="mt-1 text-xs leading-6 text-slate-500 dark:text-slate-400">{{ $action['desc'] }}</div>
                            <a href="{{ $action['url'] }}" class="mt-4 inline-flex rounded-xl px-4 py-2 text-xs font-bold {{ $action['class'] }}">
                                {{ $action['label'] }}
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="rounded-3xl border border-slate-200/70 bg-white/70 p-4 shadow-sm dark:border-slate-700/60 dark:bg-white/[0.03]">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <h3 class="dev-card-title">Quick Command</h3>
                        <p class="dev-card-subtitle">Langsung lompat ke modul yang mau dibuka.</p>
                    </div>
                    <span class="dev-chip">Enter</span>
                </div>

                <div class="cmd-box mt-4">
                    <div class="flex items-center gap-3">
                        <span class="text-sm font-bold text-slate-500 dark:text-slate-400">⌘</span>
                        <input class="cmd-input w-full text-sm text-slate-800 dark:text-white/90"
                               placeholder="Ketik: orders, customers, users, roles, products, settings..."
                               x-model="cmd"
                               @keydown.enter.prevent="go()">
                        <button class="rounded-xl bg-brand-500 px-4 py-2 text-xs font-bold text-white hover:bg-brand-600" @click="go()">Buka</button>
                    </div>
                </div>

                <div class="mt-4 grid grid-cols-2 gap-2">
                    <a href="{{ $ordersIndexUrl }}" class="rounded-xl bg-amber-500 px-3 py-3 text-center text-xs font-bold text-white hover:bg-amber-600">Semua Order</a>
                    <a href="{{ $settingsIndexUrl }}" class="rounded-xl bg-brand-500 px-3 py-3 text-center text-xs font-bold text-white hover:bg-brand-600">Settings</a>
                    <a href="/users" class="rounded-xl border border-slate-300 px-3 py-3 text-center text-xs font-bold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800">Users</a>
                    <a href="/products" class="rounded-xl border border-slate-300 px-3 py-3 text-center text-xs font-bold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800">Products</a>
                </div>

                <div class="danger-note mt-4">
                    <div class="text-xs font-bold uppercase tracking-wide text-rose-600 dark:text-rose-300">Developer Notes</div>
                    <p class="mt-2 text-xs leading-6 text-rose-700 dark:text-rose-200">
                        Panel ini memang dibuat istimewa untuk developer: semua akses ditaruh di depan supaya lebih cepat
                        mengelola sistem, master data, transaksi, branding, dan user management.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-5 xl:grid-cols-[1.15fr_.85fr] mb-5">
        <div class="dev-glass rounded-3xl p-5" x-data="quickSettings()">
            <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                <div>
                    <h3 class="dev-card-title">Quick Branding & Identity</h3>
                    <p class="dev-card-subtitle">Ubah logo, nama toko, alamat, telepon, dan footer nota langsung dari dashboard yang sama.</p>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <span class="dev-chip">Embedded in Dashboard</span>
                    <span class="dev-chip" x-show="saving">Saving...</span>
                </div>
            </div>

            <div class="mt-5 grid grid-cols-1 gap-4 lg:grid-cols-[1.1fr_.9fr]">
                <div class="rounded-2xl border border-slate-200 bg-white/65 p-4 dark:border-slate-800 dark:bg-white/[0.03]">
                    <label class="text-xs font-semibold text-slate-600 dark:text-slate-400">Nama Toko</label>
                    <input x-model="form.shop_name" class="mt-1 h-11 w-full rounded-xl border border-slate-300 bg-transparent px-3 text-sm text-slate-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200/40 dark:border-slate-700 dark:text-white/90">

                    <label class="mt-3 block text-xs font-semibold text-slate-600 dark:text-slate-400">Alamat</label>
                    <textarea x-model="form.shop_address" rows="3" class="mt-1 w-full rounded-xl border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200/40 dark:border-slate-700 dark:text-white/90"></textarea>

                    <label class="mt-3 block text-xs font-semibold text-slate-600 dark:text-slate-400">No. Telp</label>
                    <input x-model="form.shop_phone" class="mt-1 h-11 w-full rounded-xl border border-slate-300 bg-transparent px-3 text-sm text-slate-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200/40 dark:border-slate-700 dark:text-white/90">

                    <label class="mt-3 block text-xs font-semibold text-slate-600 dark:text-slate-400">Footer Nota / Print</label>
                    <textarea x-model="form.shop_footer" rows="4" class="mt-1 w-full rounded-xl border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 focus:border-brand-300 focus:outline-none focus:ring focus:ring-brand-200/40 dark:border-slate-700 dark:text-white/90"></textarea>
                </div>

                <div class="rounded-2xl border border-slate-200 bg-white/65 p-4 dark:border-slate-800 dark:bg-white/[0.03]">
                    <div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50/70 p-4 text-center dark:border-slate-700 dark:bg-slate-900/30">
                        <div class="mx-auto flex h-24 w-24 items-center justify-center rounded-2xl border border-slate-200 bg-white p-3 dark:border-slate-800 dark:bg-white/[0.03]">
                            <img :src="previewUrl" alt="logo" class="h-full w-full object-contain" />
                        </div>
                        <h4 class="mt-4 text-sm font-semibold text-slate-800 dark:text-white/90">Logo Toko</h4>
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Upload cepat tanpa keluar dari dashboard.</p>

                        <input type="file" accept="image/*" @change="pickLogo($event)"
                               class="mt-4 block w-full text-xs text-slate-600 dark:text-slate-300
                                      file:mr-3 file:rounded-xl file:border-0 file:bg-brand-50 file:px-3 file:py-2
                                      file:text-xs file:font-semibold file:text-brand-700 hover:file:bg-brand-100
                                      dark:file:bg-brand-500/20 dark:file:text-brand-300">
                        <p class="mt-2 text-[11px] text-slate-500 dark:text-slate-400">PNG / JPG • rekomendasi background transparan</p>
                    </div>

                    <div class="mt-4 grid grid-cols-2 gap-2">
                        <button type="button"
                                class="rounded-xl border border-slate-300 px-4 py-3 text-xs font-bold text-slate-700 hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
                                @click="resetForm()">
                            Reset
                        </button>
                        <button type="button"
                                class="rounded-xl bg-brand-500 px-4 py-3 text-xs font-bold text-white hover:bg-brand-600"
                                @click="save()">
                            Simpan Cepat
                        </button>
                    </div>

                    <div class="mt-3 rounded-2xl border px-3 py-3 text-xs font-medium"
                         :class="ok ? 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300' : 'border-slate-200 bg-slate-50 text-slate-600 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-300'">
                        <span x-text="message"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="dev-glass rounded-3xl p-5">
            <div class="flex items-center justify-between gap-3">
                <div>
                    <h3 class="dev-card-title">Aksi Developer Paling Sering</h3>
                    <p class="dev-card-subtitle">Semua tombol inti yang biasa dipakai diletakkan di depan.</p>
                </div>
                <span class="dev-chip">1 Klik</span>
            </div>

            <div class="mt-5 space-y-3">
                <a href="{{ $ordersIndexUrl }}" class="dev-action">
                    <div class="flex items-center gap-3">
                        <div class="dev-icon">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12h6m-6 4h6m2 5H7a2 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>
                        </div>
                        <div>
                            <div class="text-sm font-bold text-slate-800 dark:text-white/90">Kelola Semua Transaksi</div>
                            <div class="text-xs text-slate-500 dark:text-slate-400">Masuk ke order untuk edit, revisi, atau hapus transaksi.</div>
                        </div>
                    </div>
                    <span class="text-xs font-bold text-brand-600 dark:text-brand-300">Open</span>
                </a>

                <a href="/customers" class="dev-action">
                    <div class="flex items-center gap-3">
                        <div class="dev-icon">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M17 20h5V9H2v11h5m10 0v-3a3 3 0 00-6 0v3m6 0H7m10-9a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <div>
                            <div class="text-sm font-bold text-slate-800 dark:text-white/90">Kelola Customer</div>
                            <div class="text-xs text-slate-500 dark:text-slate-400">Edit data pelanggan dan histori dari satu akses cepat.</div>
                        </div>
                    </div>
                    <span class="text-xs font-bold text-brand-600 dark:text-brand-300">Open</span>
                </a>

                <a href="/users" class="dev-action">
                    <div class="flex items-center gap-3">
                        <div class="dev-icon">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197"/></svg>
                        </div>
                        <div>
                            <div class="text-sm font-bold text-slate-800 dark:text-white/90">Kelola Users & Role</div>
                            <div class="text-xs text-slate-500 dark:text-slate-400">Tambah, edit, dan atur akses user langsung dari panel depan.</div>
                        </div>
                    </div>
                    <span class="text-xs font-bold text-brand-600 dark:text-brand-300">Open</span>
                </a>

                <a href="/products" class="dev-action">
                    <div class="flex items-center gap-3">
                        <div class="dev-icon">
                            <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M20 13V7a2 2 0 00-2-2h-3m-6 0H6a2 2 0 00-2 2v6m16 0v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4m16 0H4"/></svg>
                        </div>
                        <div>
                            <div class="text-sm font-bold text-slate-800 dark:text-white/90">Kelola Produk / Layanan</div>
                            <div class="text-xs text-slate-500 dark:text-slate-400">Atur master produk, harga, kategori, dan layanan.</div>
                        </div>
                    </div>
                    <span class="text-xs font-bold text-brand-600 dark:text-brand-300">Open</span>
                </a>
            </div>
        </div>
    </div>

    <div class="dev-glass rounded-3xl p-5 mb-5">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h3 class="dev-card-title">Semua Menu Penting</h3>
                <p class="dev-card-subtitle">Tidak perlu keliling sidebar. Semua modul inti developer langsung tampil di sini.</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <span class="dev-chip">Dashboard Embedded</span>
                <span class="dev-chip">{{ count($developerMenus) }} Menu</span>
            </div>
        </div>

        <div class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
            @foreach($developerMenus as $menu)
                <a href="{{ $menu['url'] }}" class="dev-menu-tile">
                    <span class="dev-menu-badge">{{ $menu['badge'] }}</span>
                    <div class="text-sm font-bold text-slate-800 dark:text-white/90">{{ $menu['title'] }}</div>
                    <div class="text-xs leading-6 text-slate-500 dark:text-slate-400">{{ $menu['desc'] }}</div>
                    <div class="mt-auto text-xs font-bold text-brand-600 dark:text-brand-300">Buka Menu →</div>
                </a>
            @endforeach
        </div>
    </div>

    <div class="dev-glass rounded-3xl p-5">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h3 class="dev-card-title">Panel Khusus Developer</h3>
                <p class="dev-card-subtitle">Bagian penghasilan dan statistik operasional saya hilangkan supaya fokusnya benar-benar ke kontrol penuh.</p>
            </div>
            <span class="dev-chip">No Revenue Summary</span>
        </div>

        <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
            <div class="rounded-2xl border border-slate-200 bg-white/65 p-4 dark:border-slate-800 dark:bg-white/[0.03]">
                <div class="text-sm font-bold text-slate-900 dark:text-white">Akses Master Data</div>
                <p class="mt-2 text-xs leading-6 text-slate-500 dark:text-slate-400">
                    Produk, customer, akun pembayaran, user, role, dan pengaturan sistem semua bisa dibuka dari dashboard utama.
                </p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white/65 p-4 dark:border-slate-800 dark:bg-white/[0.03]">
                <div class="text-sm font-bold text-slate-900 dark:text-white">Akses Edit Cepat</div>
                <p class="mt-2 text-xs leading-6 text-slate-500 dark:text-slate-400">
                    Quick branding tetap ada di sini supaya developer bisa ubah identitas toko tanpa pindah ke view lain.
                </p>
            </div>
            <div class="rounded-2xl border border-slate-200 bg-white/65 p-4 dark:border-slate-800 dark:bg-white/[0.03]">
                <div class="text-sm font-bold text-slate-900 dark:text-white">Akses Hapus / Ubah</div>
                <p class="mt-2 text-xs leading-6 text-slate-500 dark:text-slate-400">
                    Tombol diarahkan ke modul sumber agar developer bisa langsung mengubah dan mengelola data dari jalur paling cepat.
                </p>
            </div>
        </div>
    </div>

    <div class="mt-10 border-t border-slate-200 pt-6 text-center text-xs text-slate-500 dark:border-slate-800 dark:text-slate-400">
        <p>© {{ date('Y') }} <span class="font-semibold text-slate-700 dark:text-slate-300">Rio Ardiansyah</span>. Embedded developer dashboard control center.</p>
    </div>
</div>

<script>
function devFrontDashboard(){
    return {
        cmd: '',
        go(){
            const q = (this.cmd || '').toLowerCase().trim();
            if(!q) return;

            const map = [
                ['orders', '{{ $ordersIndexUrl }}'],
                ['transaksi', '{{ $ordersIndexUrl }}'],
                ['customers', '/customers'],
                ['pelanggan', '/customers'],
                ['users', '/users'],
                ['roles', '/roles'],
                ['products', '/products'],
                ['produk', '/products'],
                ['settings', '{{ $settingsIndexUrl }}'],
                ['logo', '{{ $settingsIndexUrl }}'],
                ['brand', '{{ $settingsIndexUrl }}'],
                ['backup', '/backups'],
                ['finance', '/finance'],
                ['rekening', '/payment-accounts'],
                ['laporan', '/reports'],
                ['tutorial', '/tutorial']
            ];

            const hit = map.find(([k]) => q.includes(k));
            window.location.href = hit ? hit[1] : '{{ $settingsIndexUrl }}';
        }
    }
}

function quickSettings(){
    return {
        saving: false,
        ok: false,
        message: 'Siap edit cepat dari dashboard.',
        logoFile: null,
        previewUrl: '{{ \App\Models\Setting::getShopLogo() ?? '' }}' || 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="60"><rect width="100%25" height="100%25" fill="%23eee"/><text x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" fill="%23999" font-size="12">LOGO</text></svg>',
        form: {
            shop_name: @json(\App\Models\Setting::getShopName() ?? ''),
            shop_address: @json(\App\Models\Setting::getShopAddress() ?? ''),
            shop_phone: @json(\App\Models\Setting::getShopPhone() ?? ''),
            shop_footer: @json(\App\Models\Setting::getShopFooter() ?? ''),
        },
        pickLogo(e){
            const f = e.target.files?.[0];
            if(!f) return;
            this.logoFile = f;
            this.previewUrl = URL.createObjectURL(f);
        },
        resetForm(){
            this.logoFile = null;
            this.previewUrl = '{{ \App\Models\Setting::getShopLogo() ?? '' }}' || this.previewUrl;
            this.form.shop_name = @json(\App\Models\Setting::getShopName() ?? '');
            this.form.shop_address = @json(\App\Models\Setting::getShopAddress() ?? '');
            this.form.shop_phone = @json(\App\Models\Setting::getShopPhone() ?? '');
            this.form.shop_footer = @json(\App\Models\Setting::getShopFooter() ?? '');
            this.ok = false;
            this.message = 'Form di-reset.';
        },
        async save(){
            this.saving = true;
            this.ok = false;
            this.message = 'Menyimpan perubahan...';

            const fd = new FormData();
            fd.append('shop_name', this.form.shop_name || '');
            fd.append('shop_address', this.form.shop_address || '');
            fd.append('shop_phone', this.form.shop_phone || '');
            fd.append('shop_footer', this.form.shop_footer || '');
            if(this.logoFile) fd.append('shop_logo', this.logoFile);

            const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';

            try{
                const res = await fetch('{{ $devQuickSettingsUrl }}', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': token },
                    body: fd
                });

                const data = await res.json().catch(() => null);

                if(!res.ok || !data?.success){
                    throw new Error(data?.message || 'Gagal menyimpan.');
                }

                this.ok = true;
                this.message = '✅ Tersimpan. Logo dan identitas toko sudah diperbarui.';
            }catch(err){
                this.ok = false;
                this.message = '❌ ' + (err?.message || 'Terjadi error');
            }finally{
                this.saving = false;
            }
        }
    }
}
</script>