{{-- =============================================== --}}
{{-- SPV DASHBOARD — FUTURE CONTROL CENTER MODE      --}}
{{-- Replace full file                               --}}
{{-- =============================================== --}}

{{-- Optional font (boleh hapus kalau sudah global) --}}
<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=Poppins:wght@400;600&display=swap" rel="stylesheet">

<style>
    /* Future background: subtle gradient + soft pattern (bukan titik-titik) */
    .spv-future-bg {
        position: relative;
        overflow: hidden;
    }
    .spv-future-bg::before {
        content: "";
        position: absolute;
        inset: -2px;
        background:
            radial-gradient(900px 480px at 10% 10%, rgba(99,102,241,.18), transparent 55%),
            radial-gradient(820px 440px at 90% 0%, rgba(16,185,129,.14), transparent 55%),
            radial-gradient(900px 520px at 80% 90%, rgba(245,158,11,.12), transparent 55%),
            linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
        pointer-events: none;
        z-index: 0;
    }
    .spv-future-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
        background-size: 56px 56px;
        opacity: .10;
        pointer-events: none;
        z-index: 0;
    }
    .spv-future-bg > * { position: relative; z-index: 1; }

    /* Marquee (aman, ringan) */
    .spv-marquee {
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
    }
    .spv-marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: spvMarquee 16s linear infinite;
        will-change: transform;
    }
    @keyframes spvMarquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    @media (prefers-reduced-motion: reduce) {
        .spv-marquee span { animation: none; padding-left: 0; }
    }
</style>

@php
    $pending = (int) ($stats['pending_cancellations'] ?? 0);
    $ordersToday = (int) ($stats['orders_today'] ?? 0);
    $inProgress = (int) ($stats['in_progress'] ?? 0);
    $readyPickup = (int) ($stats['ready_for_pickup'] ?? 0);
@endphp

<div class="spv-future-bg rounded-3xl border border-gray-200 bg-white/80 p-5 shadow-sm backdrop-blur-xl dark:border-gray-800 dark:bg-white/[0.03] md:p-6 mb-6"
     style="font-family:Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;">
    <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div class="min-w-0">
            <div class="flex items-center gap-2">
                <div class="flex size-10 items-center justify-center rounded-2xl bg-brand-500/10 text-brand-600 dark:bg-brand-500/15 dark:text-brand-400">
                    <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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 class="min-w-0">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white/90 leading-tight">
                        SPV Control Center
                    </h2>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        Pantau approval, order, produksi, dan laporan — real-time.
                    </p>
                </div>
            </div>

            <div class="mt-3 spv-marquee text-sm text-gray-700 dark:text-gray-300">
                <span id="spv-scroll-text"></span>
            </div>

            <div class="mt-3 flex flex-wrap items-center gap-2">
                <span class="inline-flex items-center gap-1 rounded-full bg-warning-50 px-3 py-1 text-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-warning-400">
                    <span class="size-2 rounded-full bg-warning-500"></span>
                    Pending Approval: {{ $pending }}
                </span>
                <span class="inline-flex items-center gap-1 rounded-full bg-brand-50 px-3 py-1 text-xs font-medium text-brand-700 dark:bg-brand-500/15 dark:text-brand-400">
                    <span class="size-2 rounded-full bg-brand-500"></span>
                    Order Today: {{ $ordersToday }}
                </span>
                <span class="inline-flex items-center gap-1 rounded-full bg-blue-light-50 px-3 py-1 text-xs font-medium text-blue-light-700 dark:bg-blue-light-500/15 dark:text-blue-light-300">
                    <span class="size-2 rounded-full bg-blue-500"></span>
                    Produksi: {{ $inProgress }}
                </span>
                <span class="inline-flex items-center gap-1 rounded-full bg-success-50 px-3 py-1 text-xs font-medium text-success-700 dark:bg-success-500/15 dark:text-success-400">
                    <span class="size-2 rounded-full bg-success-500"></span>
                    Siap Ambil: {{ $readyPickup }}
                </span>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('cancellations.index') }}"
               class="inline-flex items-center gap-2 rounded-xl bg-warning-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-warning-600 transition">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                Approval
            </a>

            <a href="{{ route('orders.create') }}"
               class="inline-flex items-center gap-2 rounded-xl bg-brand-500 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-600 transition">
                <svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                </svg>
                Order Baru
            </a>

            <a href="https://wa.me/628990799960" target="_blank"
               class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-gray-800 shadow-sm hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:hover:bg-white/[0.03] transition">
                💬 Bantuan
            </a>
        </div>
    </div>
</div>

{{-- KPI Cards --}}
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4 mb-6">
    <x-posgraf.stat-card
        title="Menunggu Approval"
        value="{{ $pending }}"
        color="orange"
        icon='<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>'
    />
    <x-posgraf.stat-card
        title="Order Hari Ini"
        value="{{ $ordersToday }}"
        color="brand"
        icon='<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>'
    />
    <x-posgraf.stat-card
        title="Dalam Produksi"
        value="{{ $inProgress }}"
        color="blue"
        icon='<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>'
    />
    <x-posgraf.stat-card
        title="Siap Diambil"
        value="{{ $readyPickup }}"
        color="success"
        icon='<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>'
    />
</div>

<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-6">
    {{-- Approval Inbox --}}
    <div class="lg:col-span-8">
        <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
            <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800 flex items-center justify-between">
                <div class="min-w-0">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">
                        Approval Inbox
                        @if($pending > 0)
                            <span class="ml-2 inline-flex items-center rounded-full bg-warning-50 px-2.5 py-0.5 text-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-warning-400">
                                {{ $pending }} menunggu
                            </span>
                        @endif
                    </h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400">Validasi pembatalan untuk menjaga data tetap rapih.</p>
                </div>
                <a href="{{ route('cancellations.index') }}" class="text-sm font-semibold text-brand-500 hover:text-brand-600 dark:text-brand-400">
                    Lihat Semua →
                </a>
            </div>

            <div class="p-5">
                @if(isset($pending_cancellations) && $pending_cancellations->count() > 0)
                    <div class="space-y-3">
                        @foreach($pending_cancellations as $request)
                            <div class="group flex items-start gap-4 rounded-xl border border-gray-100 bg-gray-50 p-4 transition hover:bg-white hover:shadow-sm dark:border-gray-700 dark:bg-gray-900/40 dark:hover:bg-white/[0.03]">
                                <div class="flex size-11 shrink-0 items-center justify-center rounded-xl bg-warning-100 text-warning-600 dark:bg-warning-500/20 dark:text-warning-300">
                                    <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
                                    </svg>
                                </div>

                                <div class="min-w-0 flex-1">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="font-semibold text-gray-900 dark:text-white/90">
                                            #{{ $request->order->invoice_number ?? '-' }}
                                        </span>
                                        <span class="inline-flex rounded-full px-2 py-0.5 text-[11px] font-semibold
                                            {{ $request->type === 'order'
                                                ? 'bg-error-50 text-error-700 dark:bg-error-500/15 dark:text-error-400'
                                                : 'bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400' }}">
                                            {{ $request->type === 'order' ? 'Full Order' : 'Item' }}
                                        </span>
                                        <span class="text-xs text-gray-400 dark:text-gray-500">
                                            • {{ $request->created_at->diffForHumans() }}
                                        </span>
                                    </div>

                                    <p class="mt-1 text-sm text-gray-700 dark:text-gray-300 line-clamp-2">
                                        {{ $request->reason }}
                                    </p>
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        Oleh <span class="font-semibold">{{ $request->requester->name ?? '-' }}</span>
                                    </p>
                                </div>

                                <div class="flex shrink-0 flex-col sm:flex-row gap-2">
                                    <form action="{{ route('cancellations.approve', $request) }}" method="POST">
                                        @csrf
                                        <button type="submit"
                                                class="inline-flex items-center justify-center rounded-xl bg-success-600 px-4 py-2 text-xs font-bold text-white hover:bg-success-700 transition">
                                            Setujui
                                        </button>
                                    </form>

                                    <a href="{{ route('cancellations.index') }}"
                                       class="inline-flex items-center justify-center rounded-xl border border-gray-200 bg-white px-4 py-2 text-xs font-bold text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.03] transition">
                                        Detail
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="flex flex-col items-center justify-center py-10 text-center">
                        <div class="flex size-16 items-center justify-center rounded-full bg-success-50 text-success-600 dark:bg-success-500/15 dark:text-success-400 mb-3">
                            <svg class="size-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">Inbox bersih ✅</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Tidak ada permintaan pembatalan yang menunggu.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Quick Command --}}
    <div class="lg:col-span-4">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] h-full">
            <div class="mb-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Quick Command</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400">Akses cepat ke area paling sering dipakai.</p>
            </div>

            <div class="flex flex-col gap-3">
                <a href="{{ route('orders.index') }}"
                   class="group flex items-center gap-3 rounded-xl border border-gray-100 bg-gray-50 p-4 transition hover:bg-white hover:shadow-sm dark:border-gray-700 dark:bg-gray-900/40 dark:hover:bg-white/[0.03]">
                    <div class="flex size-10 items-center justify-center rounded-xl bg-brand-100 text-brand-600 dark:bg-brand-500/20 dark:text-brand-300">
                        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  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 class="min-w-0">
                        <div class="font-semibold text-gray-800 dark:text-white/90">Daftar Order</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">Monitoring semua order</div>
                    </div>
                    <div class="ml-auto text-gray-300 group-hover:text-brand-500 dark:group-hover:text-brand-400">→</div>
                </a>

                <a href="{{ route('cancellations.index') }}"
                   class="group flex items-center gap-3 rounded-xl border border-gray-100 bg-gray-50 p-4 transition hover:bg-white hover:shadow-sm dark:border-gray-700 dark:bg-gray-900/40 dark:hover:bg-white/[0.03]">
                    <div class="flex size-10 items-center justify-center rounded-xl bg-warning-100 text-warning-600 dark:bg-warning-500/20 dark:text-warning-300">
                        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="min-w-0">
                        <div class="font-semibold text-gray-800 dark:text-white/90">Approval Pembatalan</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">Review & approve</div>
                    </div>
                    <div class="ml-auto text-gray-300 group-hover:text-warning-600 dark:group-hover:text-warning-300">→</div>
                </a>

                <a href="{{ route('orders.create') }}"
                   class="group flex items-center gap-3 rounded-xl border border-gray-100 bg-gray-50 p-4 transition hover:bg-white hover:shadow-sm dark:border-gray-700 dark:bg-gray-900/40 dark:hover:bg-white/[0.03]">
                    <div class="flex size-10 items-center justify-center rounded-xl bg-success-100 text-success-600 dark:bg-success-500/20 dark:text-success-300">
                        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                    </div>
                    <div class="min-w-0">
                        <div class="font-semibold text-gray-800 dark:text-white/90">Buat Order Baru</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">Input cepat</div>
                    </div>
                    <div class="ml-auto text-gray-300 group-hover:text-success-600 dark:group-hover:text-success-300">→</div>
                </a>

                {{-- Shortcut Laporan (opsional, kalau route ada) --}}
                @if(\Illuminate\Support\Facades\Route::has('reports.receivables'))
                <a href="{{ route('reports.receivables') }}"
                   class="group flex items-center gap-3 rounded-xl border border-gray-100 bg-gray-50 p-4 transition hover:bg-white hover:shadow-sm dark:border-gray-700 dark:bg-gray-900/40 dark:hover:bg-white/[0.03]">
                    <div class="flex size-10 items-center justify-center rounded-xl bg-error-100 text-error-600 dark:bg-error-500/20 dark:text-error-300">
                        <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div class="min-w-0">
                        <div class="font-semibold text-gray-800 dark:text-white/90">Laporan Piutang</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">Pantau tagihan</div>
                    </div>
                    <div class="ml-auto text-gray-300 group-hover:text-error-600 dark:group-hover:text-error-300">→</div>
                </a>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Recent Orders --}}
<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800 flex items-center justify-between">
        <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Order Terbaru</h3>
            <p class="text-xs text-gray-500 dark:text-gray-400">Ringkasan cepat aktivitas terbaru.</p>
        </div>
        <a href="{{ route('orders.index') }}" class="text-sm font-semibold text-brand-500 hover:text-brand-600 dark:text-brand-400">
            Lihat Semua →
        </a>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/40">
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Invoice</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Pelanggan</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Total</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Bayar</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Produksi</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-500">Waktu</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                @forelse($recent_orders ?? [] as $order)
                    <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02] transition-colors">
                        <td class="px-5 py-3">
                            <a href="{{ route('orders.show', $order) }}"
                               class="font-semibold text-brand-500 hover:text-brand-600 dark:text-brand-400">
                                #{{ $order->invoice_number }}
                            </a>
                        </td>
                        <td class="px-5 py-3 text-sm text-gray-700 dark:text-gray-300">
                            {{ $order->customer_name }}
                        </td>
                        <td class="px-5 py-3 text-sm font-semibold text-gray-900 dark:text-white/90">
                            Rp {{ number_format($order->total_price, 0, ',', '.') }}
                        </td>
                        <td class="px-5 py-3">
                            <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {{ $order->getPaymentStatusBadgeClass() }}">
                                {{ $order->getPaymentStatusLabel() }}
                            </span>
                        </td>
                        <td class="px-5 py-3">
                            <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold {{ $order->getProductionStatusBadgeClass() }}">
                                {{ $order->getProductionStatusLabel() }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-xs text-gray-400 dark:text-gray-500">
                            {{ $order->created_at->diffForHumans() }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-5 py-8 text-center text-sm text-gray-400 dark:text-gray-500">
                            Belum ada order
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-12 border-t border-gray-200 pt-6 text-center text-xs text-gray-500 dark:border-gray-800 dark:text-gray-400">
    <p>© 2026 <span class="font-semibold text-gray-700 dark:text-gray-300">aplikasipercetakan.com</span>. All rights reserved.</p>
</div>

<script>
    (function () {
        const el = document.getElementById('spv-scroll-text');
        if (!el) return;

        function ucapan() {
            const jam = new Date().getHours();
            if (jam >= 5 && jam < 12) return "Selamat Pagi";
            if (jam >= 12 && jam < 15) return "Selamat Siang";
            if (jam >= 15 && jam < 18) return "Selamat Sore";
            return "Selamat Malam";
        }

        el.innerHTML = `${ucapan()} SPV 👑 • Fokus: cek data pembayaran, produksi, dan approval. Jika ada mismatch, hubungi <strong>Developer</strong>.`;
    })();
</script>