{{-- Developer Dashboard Final (Safe UI + Real Override Form) --}}
@php
    $routeOr = function (string $name, string $fallback = '#') {
        return \Illuminate\Support\Facades\Route::has($name) ? route($name) : $fallback;
    };

    $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">

<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);}
.override-card{border-radius:20px;border:1px solid rgba(245,158,11,.22);background:rgba(255,255,255,.72);padding:1rem;}
.dark .override-card{background:rgba(255,255,255,.03);border-color:rgba(245,158,11,.18);}
.override-label{display:block;margin-bottom:.35rem;font-size:12px;font-weight:700;color:rgb(71 85 105);}
.dark .override-label{color:rgb(148 163 184);}
.override-input,.override-select,.override-textarea{width:100%;border-radius:14px;border:1px solid rgba(148,163,184,.28);background:transparent;padding:.75rem .9rem;font-size:14px;color:rgb(15 23 42);outline:none;}
.override-input:focus,.override-select:focus,.override-textarea:focus{border-color:rgba(59,130,246,.5);box-shadow:0 0 0 4px rgba(59,130,246,.10);}
.dark .override-input,.dark .override-select,.dark .override-textarea{color:rgb(248 250 252);border-color:rgba(148,163,184,.18);}
</style>

@php
$developerMenus = [
['title'=>'Semua Order','desc'=>'Lihat seluruh transaksi dan masuk ke halaman edit atau hapus.','url'=>$ordersIndexUrl,'badge'=>'Transaksi'],
['title'=>'Buat Order','desc'=>'Masuk cepat ke form pembuatan order.','url'=>$ordersCreateUrl,'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'=>$productsIndexUrl,'badge'=>'Master'],
['title'=>'Payment Accounts','desc'=>'Kelola rekening dan akun pembayaran.','url'=>$paymentAccountsIndexUrl,'badge'=>'Finance'],
['title'=>'Finance','desc'=>'Masuk ke modul finance utama.','url'=>$financeIndexUrl,'badge'=>'Finance'],
['title'=>'Backup DB','desc'=>'Backup sistem dan maintenance data.','url'=>$backupsIndexUrl,'badge'=>'System'],
['title'=>'Quick Settings','desc'=>'Ubah logo, nama toko, alamat, dan footer print.','url'=>$settingsIndexUrl,'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' => $ordersIndexUrl,
            'label' => 'Buka order',
        ],
        [
            'title' => 'Hapus transaksi',
            'desc' => 'Masuk ke daftar transaksi dan hapus data yang diperlukan langsung dari modul order.',
            'url' => $ordersIndexUrl,
            'label' => 'Kelola hapus',
        ],
        [
            'title' => 'Edit branding',
            'desc' => 'Ubah logo, identitas toko, footer, dan kontak langsung dari dashboard.',
            'url' => $settingsIndexUrl,
            'label' => 'Buka settings',
        ],
        [
            'title' => 'Kontrol user & role',
            'desc' => 'Ubah hak akses, tambah user, dan edit akun dalam satu jalur cepat.',
            'url' => $usersIndexUrl,
            'label' => 'Buka users',
        ],
    ];
@endphp

<div class="dev-wrap rounded-3xl p-4 md:p-5" x-data="{ ...devFrontDashboard(), ...developerOverrideReal() }">
    <div class="mb-6 rounded-3xl border border-amber-200 bg-amber-50 p-5 dark:border-amber-500/20 dark:bg-amber-500/10">
        <div class="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
            <div>
                <h3 class="text-lg font-bold text-slate-900 dark:text-white">Developer Override</h3>
                <p class="text-sm text-slate-600 dark:text-slate-300">Panel akses cepat developer aktif langsung di dashboard utama.</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <a href="{{ $ordersIndexUrl }}" class="rounded-xl bg-brand-500 px-4 py-2 text-xs font-bold text-white hover:bg-brand-600">Kelola Order</a>
                <a href="{{ $settingsIndexUrl }}" class="rounded-xl bg-brand-500 px-4 py-2 text-xs font-bold text-white hover:bg-brand-600">Quick Settings</a>
            </div>
        </div>
    </div>

    <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">Dashboard ini difokuskan untuk developer: edit, ubah, branding, user management, master data, dan semua menu penting langsung dari halaman utama.</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] flex flex-col">
                            <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>
                            <div class="mt-4">
                                <a href="{{ $action['url'] }}" class="inline-flex items-center justify-center rounded-xl bg-brand-500 px-4 py-2 text-xs font-bold text-white hover:bg-brand-600">
                                    {{ $action['label'] }}
                                </a>
                            </div>
                        </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-brand-500 px-3 py-3 text-center text-xs font-bold text-white hover:bg-brand-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="{{ $usersIndexUrl }}" class="rounded-xl bg-brand-500 px-3 py-3 text-center text-xs font-bold text-white hover:bg-brand-600">Users</a>
                    <a href="{{ $productsIndexUrl }}" class="rounded-xl bg-brand-500 px-3 py-3 text-center text-xs font-bold text-white hover:bg-brand-600">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">Semua kontrol developer ditaruh di dashboard utama supaya tidak perlu cari menu lain.</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.</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">
                    </div>
                    <div class="mt-4 grid grid-cols-2 gap-2">
                        <button type="button" class="rounded-xl bg-brand-500 px-4 py-3 text-xs font-bold text-white hover:bg-brand-600" @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="{{ url('/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="{{ $usersIndexUrl }}" 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="{{ $productsIndexUrl }}" 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 mt-5">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h3 class="dev-card-title">Developer Override Tools</h3>
                <p class="dev-card-subtitle">Cari invoice, buka data, lalu lakukan koreksi order dan pembayaran langsung dari dashboard.</p>
            </div>
            <div class="flex flex-wrap gap-2">
                <span class="dev-chip">Real Override Form</span>
                <span class="dev-chip">Search + Update</span>
            </div>
        </div>

        <div class="mt-5 grid grid-cols-1 gap-5 xl:grid-cols-[1fr_1.15fr]">
            <div class="override-card">
                <div class="text-sm font-bold text-slate-900 dark:text-white">Cari Invoice / Customer / User</div>
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Gunakan pencarian cepat untuk menemukan data yang akan dikoreksi.</p>
                <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-[160px_1fr_auto]">
                    <div>
                        <label class="override-label">Tipe</label>
                        <select x-model="search.type" class="override-select">
                            <option value="orders">Order</option>
                            <option value="customers">Customer</option>
                            <option value="users">User</option>
                        </select>
                    </div>
                    <div>
                        <label class="override-label">Keyword</label>
                        <input type="text" x-model="search.keyword" @keydown.enter.prevent="searchNow()" class="override-input" placeholder="Invoice / nama / email / telepon">
                    </div>
                    <div class="sm:self-end">
                        <button type="button" @click="searchNow()" class="w-full rounded-xl bg-brand-500 px-4 py-3 text-sm font-bold text-white hover:bg-brand-600">Cari</button>
                    </div>
                </div>

                <div class="mt-4 space-y-2" x-show="results.length > 0" style="display:none;">
                    <template x-for="row in results" :key="row.id">
                        <button type="button" @click="pickResult(row)" class="block w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-left hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900/30 dark:hover:bg-slate-800/70">
                            <div class="text-sm font-semibold text-slate-900 dark:text-white" x-text="row.label"></div>
                            <div class="mt-1 text-xs text-slate-500 dark:text-slate-400" x-text="row.sub"></div>
                        </button>
                    </template>
                </div>

                <div x-show="searchDone && results.length === 0" style="display:none;" class="mt-4 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-300">Data tidak ditemukan.</div>
            </div>

            <div class="space-y-5">
                <form method="POST" :action="orderAction" class="override-card" x-show="search.type === 'orders' || selected.kind === 'orders'">
                    @csrf
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <div class="text-sm font-bold text-slate-900 dark:text-white">Override Order</div>
                            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Ubah customer pada order, status bayar, status produksi, pickup, cashier, operator, designer, dan catatan.</p>
                        </div>
                        <span class="dev-chip" x-text="selectedLabel || 'Belum pilih order'"></span>
                    </div>

                    <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
                        <div><label class="override-label">ID Customer Baru</label><input type="number" name="customer_id" x-model="forms.order.customer_id" class="override-input" placeholder="Contoh: 15"></div>
                        <div><label class="override-label">Payment Status</label><select name="payment_status" x-model="forms.order.payment_status" class="override-select"><option value="">-- pilih --</option><option value="unpaid">Unpaid</option><option value="partial">Partial</option><option value="paid">Paid</option></select></div>
                        <div><label class="override-label">Production Status</label><select name="production_status" x-model="forms.order.production_status" class="override-select"><option value="">-- pilih --</option><option value="pending">Pending</option><option value="proses_cetak">Proses Cetak</option><option value="finishing">Finishing</option><option value="selesai">Selesai</option></select></div>
                        <div><label class="override-label">Pickup Status</label><select name="pickup_status" x-model="forms.order.pickup_status" class="override-select"><option value="">-- pilih --</option><option value="not_picked_up">Belum Diambil</option><option value="picked_up">Sudah Diambil</option></select></div>
                        <div><label class="override-label">Cashier ID</label><input type="number" name="cashier_id" x-model="forms.order.cashier_id" class="override-input" placeholder="Contoh: 2"></div>
                        <div><label class="override-label">Operator ID</label><input type="number" name="operator_id" x-model="forms.order.operator_id" class="override-input" placeholder="Contoh: 3"></div>
                        <div><label class="override-label">Designer ID</label><input type="number" name="designer_id" x-model="forms.order.designer_id" class="override-input" placeholder="Contoh: 4"></div>
                        <div><label class="override-label">Jenis Transaksi Kredit</label><select name="is_credit" x-model="forms.order.is_credit" class="override-select"><option value="">-- pilih --</option><option value="1">Kredit</option><option value="0">Non Kredit</option></select></div>
                    </div>

                    <div class="mt-3"><label class="override-label">Catatan</label><textarea name="notes" x-model="forms.order.notes" rows="3" class="override-textarea" placeholder="Catatan koreksi order"></textarea></div>
                    <div class="mt-3"><label class="override-label">Alasan Override</label><textarea name="reason" x-model="forms.order.reason" rows="3" class="override-textarea" placeholder="Wajib diisi minimal 10 karakter"></textarea></div>
                    <div class="mt-3"><label class="override-label">Password Developer</label><input type="password" name="developer_password" x-model="forms.order.developer_password" class="override-input" placeholder="Password akun Anda"></div>

                    <div class="mt-4 flex flex-wrap gap-2">
                        <button type="submit" class="rounded-xl bg-brand-500 px-4 py-3 text-sm font-bold text-white hover:bg-brand-600">Simpan Override Order</button>
                        <a :href="selected.id ? '{{ url('/orders') }}/' + selected.id : '{{ $ordersIndexUrl }}'" class="rounded-xl bg-brand-500 px-4 py-3 text-sm font-bold text-white hover:bg-brand-600">Buka Detail Order</a>
                    </div>
                </form>

                <form method="POST" :action="paymentAction" class="override-card">
                    @csrf
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <div class="text-sm font-bold text-slate-900 dark:text-white">Override Payment</div>
                            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Koreksi nominal pembayaran, metode pembayaran, akun pembayaran, cashier, dan catatan pembayaran.</p>
                        </div>
                        <span class="dev-chip" x-text="paymentTargetLabel || 'Isi ID payment manual'"></span>
                    </div>

                    <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
                        <div><label class="override-label">Payment ID</label><input type="number" x-model="forms.payment.payment_id" class="override-input" placeholder="Contoh: 10"></div>
                        <div><label class="override-label">Amount</label><input type="number" step="0.01" name="amount" x-model="forms.payment.amount" class="override-input" placeholder="0"></div>
                        <div><label class="override-label">Payment Method</label><select name="payment_method" x-model="forms.payment.payment_method" class="override-select"><option value="">-- pilih --</option><option value="cash">Cash</option><option value="transfer">Transfer</option><option value="ewallet">E-Wallet</option></select></div>
                        <div><label class="override-label">Payment Account ID</label><input type="number" name="payment_account_id" x-model="forms.payment.payment_account_id" class="override-input" placeholder="Contoh: 2"></div>
                        <div><label class="override-label">Cashier ID</label><input type="number" name="cashier_id" x-model="forms.payment.cashier_id" class="override-input" placeholder="Contoh: 2"></div>
                        <div><label class="override-label">Catatan</label><input type="text" name="notes" x-model="forms.payment.notes" class="override-input" placeholder="Catatan koreksi payment"></div>
                    </div>
                    <div class="mt-3"><label class="override-label">Alasan Override</label><textarea name="reason" x-model="forms.payment.reason" rows="3" class="override-textarea" placeholder="Wajib diisi minimal 10 karakter"></textarea></div>
                    <div class="mt-3"><label class="override-label">Password Developer</label><input type="password" name="developer_password" x-model="forms.payment.developer_password" class="override-input" placeholder="Password akun Anda"></div>
                    <div class="mt-4"><button type="submit" class="rounded-xl bg-brand-500 px-4 py-3 text-sm font-bold text-white hover:bg-brand-600">Simpan Override Payment</button></div>
                </form>

                <div class="override-card">
                    <div class="text-sm font-bold text-slate-900 dark:text-white">Archive / Deactivate Entitas</div>
                    <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">Gunakan form di bawah untuk archive customer/product atau deactivate user/payment account.</p>

                    <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
                        <form method="POST" :action="customerArchiveAction">@csrf
                            <label class="override-label">Customer ID</label><input type="number" x-model="forms.customer.id" class="override-input" placeholder="Customer ID">
                            <label class="override-label mt-3">Alasan</label><textarea name="reason" x-model="forms.customer.reason" rows="2" class="override-textarea"></textarea>
                            <label class="override-label mt-3">Password Developer</label><input type="password" name="developer_password" x-model="forms.customer.developer_password" class="override-input">
                            <button type="submit" class="mt-3 rounded-xl bg-brand-500 px-4 py-3 text-sm font-bold text-white hover:bg-brand-600">Archive Customer</button>
                        </form>

                        <form method="POST" :action="userDeactivateAction">@csrf
                            <label class="override-label">User ID</label><input type="number" x-model="forms.user.id" class="override-input" placeholder="User ID">
                            <label class="override-label mt-3">Alasan</label><textarea name="reason" x-model="forms.user.reason" rows="2" class="override-textarea"></textarea>
                            <label class="override-label mt-3">Password Developer</label><input type="password" name="developer_password" x-model="forms.user.developer_password" class="override-input">
                            <button type="submit" class="mt-3 rounded-xl bg-brand-500 px-4 py-3 text-sm font-bold text-white hover:bg-brand-600">Deactivate User</button>
                        </form>

                        <form method="POST" :action="productArchiveAction">@csrf
                            <label class="override-label">Product ID</label><input type="number" x-model="forms.product.id" class="override-input" placeholder="Product ID">
                            <label class="override-label mt-3">Alasan</label><textarea name="reason" x-model="forms.product.reason" rows="2" class="override-textarea"></textarea>
                            <label class="override-label mt-3">Password Developer</label><input type="password" name="developer_password" x-model="forms.product.developer_password" class="override-input">
                            <button type="submit" class="mt-3 rounded-xl bg-brand-500 px-4 py-3 text-sm font-bold text-white hover:bg-brand-600">Archive Product</button>
                        </form>

                        <form method="POST" :action="paymentAccountDeactivateAction">@csrf
                            <label class="override-label">Payment Account ID</label><input type="number" x-model="forms.paymentAccount.id" class="override-input" placeholder="Payment Account ID">
                            <label class="override-label mt-3">Alasan</label><textarea name="reason" x-model="forms.paymentAccount.reason" rows="2" class="override-textarea"></textarea>
                            <label class="override-label mt-3">Password Developer</label><input type="password" name="developer_password" x-model="forms.paymentAccount.developer_password" class="override-input">
                            <button type="submit" class="mt-3 rounded-xl bg-brand-500 px-4 py-3 text-sm font-bold text-white hover:bg-brand-600">Deactivate Payment Account</button>
                        </form>
                    </div>
                </div>
            </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', '{{ url('/customers') }}'],
                ['pelanggan', '{{ url('/customers') }}'],
                ['users', '{{ $usersIndexUrl }}'],
                ['roles', '{{ $rolesIndexUrl }}'],
                ['products', '{{ $productsIndexUrl }}'],
                ['produk', '{{ $productsIndexUrl }}'],
                ['settings', '{{ $settingsIndexUrl }}'],
                ['logo', '{{ $settingsIndexUrl }}'],
                ['brand', '{{ $settingsIndexUrl }}'],
                ['backup', '{{ $backupsIndexUrl }}'],
                ['finance', '{{ $financeIndexUrl }}'],
                ['rekening', '{{ $paymentAccountsIndexUrl }}'],
                ['laporan', '{{ url('/reports') }}'],
                ['tutorial', '{{ url('/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;
            }
        }
    }
}

function developerOverrideReal(){
    return {
        search: { type: 'orders', keyword: '' },
        searchDone: false,
        results: [],
        selected: { id: null, label: '', kind: 'orders' },
        forms: {
            order: { customer_id:'', payment_status:'', production_status:'', pickup_status:'', cashier_id:'', operator_id:'', designer_id:'', is_credit:'', notes:'', reason:'', developer_password:'' },
            payment: { payment_id:'', amount:'', payment_method:'', payment_account_id:'', cashier_id:'', notes:'', reason:'', developer_password:'' },
            customer: { id:'', reason:'', developer_password:'' },
            user: { id:'', reason:'', developer_password:'' },
            product: { id:'', reason:'', developer_password:'' },
            paymentAccount: { id:'', reason:'', developer_password:'' },
        },
        get selectedLabel(){ return this.selected?.label || ''; },
        get paymentTargetLabel(){ return this.forms.payment.payment_id ? 'Payment #' + this.forms.payment.payment_id : ''; },
        get orderAction(){ return this.selected.id ? '{{ url('/developer-override/orders') }}/' + this.selected.id + '/update' : '{{ url('/developer-override/orders/0/update') }}'; },
        get paymentAction(){ const id = this.forms.payment.payment_id || 0; return '{{ url('/developer-override/payments') }}/' + id + '/update'; },
        get customerArchiveAction(){ const id = this.forms.customer.id || 0; return '{{ url('/developer-override/customers') }}/' + id + '/archive'; },
        get userDeactivateAction(){ const id = this.forms.user.id || 0; return '{{ url('/developer-override/users') }}/' + id + '/deactivate'; },
        get productArchiveAction(){ const id = this.forms.product.id || 0; return '{{ url('/developer-override/products') }}/' + id + '/archive'; },
        get paymentAccountDeactivateAction(){ const id = this.forms.paymentAccount.id || 0; return '{{ url('/developer-override/payment-accounts') }}/' + id + '/deactivate'; },
        async searchNow(){
            this.searchDone = false;
            this.results = [];
            if(!this.search.keyword.trim()) return;
            const url = new URL('{{ route('developer-override.search') }}', window.location.origin);
            url.searchParams.set('type', this.search.type);
            url.searchParams.set('keyword', this.search.keyword);
            try{
                const res = await fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                const data = await res.json();
                this.results = data.results || [];
            }catch(e){
                this.results = [];
            }finally{
                this.searchDone = true;
            }
        },
        pickResult(row){
            this.selected = { id: row.id, label: row.label, kind: this.search.type };
            if (this.search.type === 'orders') this.forms.payment.payment_id = '';
            if (this.search.type === 'customers') this.forms.customer.id = row.id;
            if (this.search.type === 'users') this.forms.user.id = row.id;
        }
    }
}
</script>
