@extends('layouts.app')

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

    <style>
        .guide-wrap{
            font-family:'Poppins',sans-serif;
            background:
                radial-gradient(900px 340px at 12% 0%, rgba(99,102,241,.18), transparent 58%),
                radial-gradient(700px 260px at 88% 8%, rgba(16,185,129,.14), transparent 55%),
                radial-gradient(820px 320px at 50% 120%, rgba(244,63,94,.12), transparent 60%);
        }

        .guide-glass{
            background: rgba(255,255,255,.78);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border: 1px solid rgba(15,23,42,.08);
            box-shadow: 0 10px 30px rgba(15,23,42,.05);
        }

        .dark .guide-glass{
            background: rgba(15,23,42,.62);
            border: 1px solid rgba(255,255,255,.08);
            box-shadow: 0 10px 30px rgba(2,6,23,.35);
        }

        .guide-border{
            position: relative;
            overflow: hidden;
            border-radius: 24px;
        }

        .guide-border::before{
            content:"";
            position:absolute;
            inset:-2px;
            background: linear-gradient(90deg, rgba(99,102,241,.35), rgba(16,185,129,.24), rgba(244,63,94,.22));
            filter: blur(18px);
            opacity:.65;
            z-index:0;
            pointer-events:none;
        }

        .guide-border > *{
            position: relative;
            z-index: 1;
        }

        .guide-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            border-radius:999px;
            padding:8px 12px;
            font-size:12px;
            line-height:1;
            font-weight:700;
            color:#334155;
            border:1px solid rgba(15,23,42,.08);
            background:rgba(255,255,255,.78);
            white-space:nowrap;
        }

        .dark .guide-pill{
            color:#e5e7eb;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.05);
        }

        .guide-stat{
            position: relative;
            overflow: hidden;
            border-radius: 22px;
            padding: 18px;
            background: rgba(255,255,255,.84);
            border: 1px solid rgba(15,23,42,.08);
            box-shadow: 0 8px 24px rgba(15,23,42,.04);
        }

        .guide-stat::after{
            content:"";
            position:absolute;
            right:-28px;
            top:-28px;
            width:96px;
            height:96px;
            border-radius:999px;
            opacity:.12;
        }

        .dark .guide-stat{
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.07);
            box-shadow:none;
        }

        .guide-stat-brand::after{ background:#6366f1; }
        .guide-stat-blue::after{ background:#3b82f6; }
        .guide-stat-warning::after{ background:#f59e0b; }
        .guide-stat-success::after{ background:#10b981; }

        .guide-icon{
            display:flex;
            align-items:center;
            justify-content:center;
            width:54px;
            height:54px;
            border-radius:18px;
            flex-shrink:0;
            font-size:24px;
            box-shadow: 0 12px 24px rgba(15,23,42,.10);
        }

        .guide-icon-brand{ background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
        .guide-icon-blue{ background:linear-gradient(135deg,#3b82f6,#06b6d4); color:#fff; }
        .guide-icon-warning{ background:linear-gradient(135deg,#f59e0b,#f97316); color:#fff; }
        .guide-icon-success{ background:linear-gradient(135deg,#10b981,#22c55e); color:#fff; }
        .guide-icon-orange{ background:linear-gradient(135deg,#f97316,#fb7185); color:#fff; }

        .guide-card{
            position: relative;
            overflow: hidden;
            border-radius: 24px;
            border: 1px solid rgba(15,23,42,.08);
            background: rgba(255,255,255,.92);
            box-shadow: 0 10px 24px rgba(15,23,42,.05);
            transition: all .25s ease;
        }

        .guide-card:hover{
            transform: translateY(-4px);
            box-shadow: 0 18px 34px rgba(15,23,42,.08);
        }

        .dark .guide-card{
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.07);
            box-shadow: none;
        }

        .guide-card-topline{
            height: 4px;
            width: 100%;
        }

        .guide-hero{
            background:
                linear-gradient(135deg, rgba(15,23,42,.98) 0%, rgba(30,41,59,.98) 45%, rgba(49,46,129,.96) 100%);
            color:#fff;
            min-height: 280px;
        }

        .guide-hero-grid{
            position:absolute;
            inset:0;
            opacity:.10;
            background-image:
                linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
            background-size: 24px 24px;
        }

        .guide-pill-hero{
            display:inline-flex;
            align-items:center;
            gap:8px;
            border-radius:999px;
            padding:8px 12px;
            font-size:12px;
            font-weight:800;
            letter-spacing:.18em;
            text-transform:uppercase;
            color:#fff;
            border:1px solid rgba(255,255,255,.14);
            background:rgba(255,255,255,.08);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .guide-glow-1,
        .guide-glow-2,
        .guide-glow-3{
            position:absolute;
            border-radius:999px;
            filter: blur(48px);
            pointer-events:none;
        }

        .guide-glow-1{
            width: 220px;
            height: 220px;
            top: -40px;
            right: -30px;
            background: rgba(56,189,248,.20);
        }

        .guide-glow-2{
            width: 180px;
            height: 180px;
            left: -20px;
            bottom: -40px;
            background: rgba(168,85,247,.18);
        }

        .guide-glow-3{
            width: 180px;
            height: 180px;
            left: 35%;
            top: 40%;
            background: rgba(16,185,129,.14);
        }

        .guide-section-title{
            font-size: 28px;
            line-height: 1.1;
            font-weight: 800;
            letter-spacing: -.03em;
            color: #0f172a;
        }

        .dark .guide-section-title{
            color: #fff;
        }

        .guide-section-subtitle{
            font-size: 14px;
            line-height: 1.9;
            color: #64748b;
        }

        .dark .guide-section-subtitle{
            color: #cbd5e1;
        }

        .simple-flow-wrap{
            max-width: 760px;
            margin: 0 auto;
        }

        .simple-flow-title{
            font-size: 18px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 20px;
        }

        .dark .simple-flow-title{
            color: #ffffff;
        }

        .simple-flow-item{
            position: relative;
            margin-left: 12px;
            margin-bottom: 22px;
            padding-top: 16px;
        }

        .simple-flow-box{
            position: relative;
            min-height: 58px;
            border: 4px solid #4f83c2;
            border-radius: 2px;
            background: rgba(255,255,255,.76);
        }

        .dark .simple-flow-box{
            background: rgba(255,255,255,.03);
            border-color: #5c8fd0;
        }

        .simple-flow-label{
            position: absolute;
            left: 18px;
            top: -12px;
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            max-width: calc(100% - 36px);
            padding: 8px 14px;
            border-radius: 4px;
            background: #4f83c2;
            color: #ffffff;
            font-size: 13px;
            font-weight: 500;
            line-height: 1.15;
            box-shadow: 0 6px 14px rgba(79,131,194,.18);
        }

        .simple-flow-step{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            margin-right: 10px;
            border-radius: 999px;
            background: rgba(255,255,255,.18);
            font-size: 11px;
            font-weight: 800;
            flex-shrink: 0;
        }

        .simple-flow-note{
            margin-top: 8px;
            margin-left: 4px;
            font-size: 12px;
            line-height: 1.75;
            color: #64748b;
        }

        .dark .simple-flow-note{
            color: #cbd5e1;
        }

        .feature-item{
            border-radius: 22px;
            border: 1px solid rgba(15,23,42,.08);
            background: rgba(255,255,255,.92);
            padding: 20px;
            box-shadow: 0 8px 22px rgba(15,23,42,.05);
        }

        .dark .feature-item{
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.07);
            box-shadow: none;
        }

        .flow-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            border-radius:999px;
            padding:8px 12px;
            font-size:12px;
            font-weight:700;
            background:#f8fafc;
            color:#334155;
            border:1px solid rgba(15,23,42,.08);
        }

        .dark .flow-chip{
            background:rgba(255,255,255,.05);
            color:#e2e8f0;
            border:1px solid rgba(255,255,255,.08);
        }

        .sync-step{
            position: relative;
            padding-left: 28px;
        }

        .sync-step::before{
            content:"";
            position:absolute;
            left: 7px;
            top: 9px;
            width: 10px;
            height: 10px;
            border-radius:999px;
            background:#6366f1;
            box-shadow:0 0 0 6px rgba(99,102,241,.10);
        }

        .sync-step::after{
            content:"";
            position:absolute;
            left: 11px;
            top: 26px;
            width: 2px;
            height: calc(100% + 10px);
            background: rgba(99,102,241,.18);
        }

        .sync-step:last-child::after{
            display:none;
        }

        .menu-group-card{
            border-radius: 22px;
            border: 1px solid rgba(15,23,42,.08);
            background: rgba(255,255,255,.88);
            padding: 18px;
            box-shadow: 0 8px 22px rgba(15,23,42,.04);
        }

        .dark .menu-group-card{
            background: rgba(255,255,255,.04);
            border: 1px solid rgba(255,255,255,.07);
            box-shadow: none;
        }

        .menu-mini-list{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:12px;
        }

        .menu-mini-item{
            display:inline-flex;
            align-items:center;
            gap:8px;
            border-radius:999px;
            padding:8px 12px;
            font-size:12px;
            font-weight:700;
            color:#334155;
            background:#f8fafc;
            border:1px solid rgba(15,23,42,.07);
        }

        .dark .menu-mini-item{
            color:#e5e7eb;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
        }

        .alert-update{
            border-radius: 22px;
            border: 1px solid rgba(239,68,68,.18);
            background: linear-gradient(135deg, rgba(254,242,242,.96), rgba(255,255,255,.92));
            padding: 18px;
        }

        .dark .alert-update{
            border: 1px solid rgba(248,113,113,.16);
            background: linear-gradient(135deg, rgba(127,29,29,.16), rgba(255,255,255,.04));
        }

        @media (max-width: 640px){
            .simple-flow-item{
                margin-left: 0;
            }

            .simple-flow-label{
                left: 12px;
                right: 12px;
                max-width: unset;
                font-size: 12px;
                padding: 8px 12px;
            }

            .simple-flow-box{
                min-height: 64px;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $menuDocs = [
            [
                'title' => 'Dashboard',
                'badge' => 'Overview',
                'icon' => '📊',
                'color' => 'from-blue-500 to-cyan-500',
                'desc' => 'Ringkasan kondisi bisnis harian: total order, omzet, status produksi, pekerjaan aktif, dan indikator penting lain dalam satu layar utama.',
                'iconTone' => 'guide-icon-blue',
            ],
            [
                'title' => 'Intelligence',
                'badge' => 'AI Insight',
                'icon' => '🧠',
                'color' => 'from-violet-500 to-fuchsia-500',
                'desc' => 'Insight pintar untuk membaca tren penjualan, pola transaksi, performa operasional, dan peluang perbaikan bisnis.',
                'iconTone' => 'guide-icon-brand',
            ],
            [
                'title' => 'Orders',
                'badge' => 'Sales Flow',
                'icon' => '🧾',
                'color' => 'from-emerald-500 to-green-500',
                'desc' => 'Mengelola pesanan pelanggan dari input order, item pekerjaan, bahan, file, status proses, sampai order selesai.',
                'iconTone' => 'guide-icon-success',
            ],
            [
                'title' => 'Surat Jalan',
                'badge' => 'Delivery Note',
                'icon' => '🚚',
                'color' => 'from-blue-500 to-indigo-500',
                'desc' => 'Mengelola pengiriman barang dari order yang sudah lunas atau piutang, memilih kendaraan, membuat nomor surat jalan, mencetak surat jalan A4, A5, atau 21,5 × 16,5 cm, serta memantau status dikirim dan diterima.',
                'iconTone' => 'guide-icon-blue',
            ],
            [
                'title' => 'Kasir',
                'badge' => 'Payment',
                'icon' => '💳',
                'color' => 'from-teal-500 to-emerald-500',
                'desc' => 'Semua aktivitas pembayaran, pelunasan, cetak nota, penerimaan uang, transaksi operasional kasir, pilihan PPN saat pembayaran, dan cetak invoice berbagai ukuran.',
                'iconTone' => 'guide-icon-blue',
            ],
            [
                'title' => 'PPN / Pajak',
                'badge' => 'Tax Setting',
                'icon' => '🧾',
                'color' => 'from-blue-500 to-indigo-600',
                'desc' => 'Mengatur PPN default, persentase pajak, data PKP/NPWP, dan catatan pajak. PPN tidak dipilih dari tombol cetak, tetapi diaktifkan saat proses pembayaran agar subtotal, PPN, total tagihan, laporan, dan invoice tetap sinkron.',
                'iconTone' => 'guide-icon-blue',
            ],
            [
                'title' => 'Produksi',
                'badge' => 'Workshop',
                'icon' => '🏭',
                'color' => 'from-sky-500 to-blue-500',
                'desc' => 'Memantau antrian kerja, proses operator, tahapan cetak, finishing, sampai order benar-benar selesai.',
                'iconTone' => 'guide-icon-blue',
            ],
            [
                'title' => 'Pembatalan',
                'badge' => 'Cancel Control',
                'icon' => '🛑',
                'color' => 'from-rose-500 to-red-500',
                'desc' => 'Mencatat dan mengelola order batal agar tidak ikut terbaca sebagai piutang, penjualan aktif, maupun pembukuan berjalan.',
                'iconTone' => 'guide-icon-orange',
            ],
            [
                'title' => 'Absensi',
                'badge' => 'Attendance',
                'icon' => '🕒',
                'color' => 'from-emerald-500 to-teal-500',
                'desc' => 'Menu khusus untuk absensi karyawan. Karyawan bisa absen masuk dan pulang sesuai radius lokasi, sedangkan admin dapat melihat rekap harian, export laporan, dan mengatur lokasi serta jam absensi.',
                'iconTone' => 'guide-icon-success',
            ],
            [
                'title' => 'Data Keuangan',
                'badge' => 'Finance Core',
                'icon' => '💰',
                'color' => 'from-lime-500 to-green-500',
                'desc' => 'Pengelolaan kas, bank, mutasi, saldo, buku kas, dan transaksi inti keuangan sistem.',
                'iconTone' => 'guide-icon-success',
            ],
            [
                'title' => 'Laporan',
                'badge' => 'Reporting',
                'icon' => '📈',
                'color' => 'from-indigo-500 to-blue-500',
                'desc' => 'Laporan penjualan, produksi, kas, pengeluaran, pembelian, dan performa operasional yang siap ditinjau atau dicetak.',
                'iconTone' => 'guide-icon-brand',
            ],
            [
                'title' => 'Data Produk',
                'badge' => 'Catalog',
                'icon' => '📦',
                'color' => 'from-cyan-500 to-sky-500',
                'desc' => 'Mengelola produk atau layanan, kategori, harga, spesifikasi, dan relasi bahan terhadap produk.',
                'iconTone' => 'guide-icon-blue',
            ],
            [
                'title' => 'Bahan & Stock',
                'badge' => 'Inventory',
                'icon' => '🧱',
                'color' => 'from-stone-500 to-slate-500',
                'desc' => 'Mengatur stok bahan baku, pergerakan stok, bahan custom, komponen bahan, dan ketersediaan persediaan produksi.',
                'iconTone' => 'guide-icon-warning',
            ],
            [
                'title' => 'Pembelian',
                'badge' => 'Procurement',
                'icon' => '🛒',
                'color' => 'from-orange-500 to-amber-500',
                'desc' => 'Mencatat pembelian bahan atau barang dari supplier berikut nilai pembelian, hutang, dan status pembayarannya.',
                'iconTone' => 'guide-icon-warning',
            ],
            [
                'title' => 'Pengeluaran',
                'badge' => 'Expense',
                'icon' => '💸',
                'color' => 'from-pink-500 to-rose-500',
                'desc' => 'Mencatat seluruh biaya operasional di luar pembelian utama, termasuk expense harian dan biaya usaha lainnya.',
                'iconTone' => 'guide-icon-orange',
            ],
            [
                'title' => 'Admin',
                'badge' => 'Control',
                'icon' => '🛡️',
                'color' => 'from-gray-600 to-slate-700',
                'desc' => 'Kontrol sistem, validasi, pengaturan operasional, dan kebutuhan administrasi aplikasi.',
                'iconTone' => 'guide-icon-brand',
            ],
            [
                'title' => 'Master Data',
                'badge' => 'Reference',
                'icon' => '🗂️',
                'color' => 'from-purple-500 to-violet-500',
                'desc' => 'Mengelola data inti seperti customer, supplier, akun pembayaran, kategori, satuan, dan referensi sistem lainnya.',
                'iconTone' => 'guide-icon-brand',
            ],
            [
                'title' => 'SDM',
                'badge' => 'Human Resource',
                'icon' => '👥',
                'color' => 'from-blue-500 to-indigo-500',
                'desc' => 'Mengelola data karyawan, jabatan, payroll, dan administrasi tenaga kerja. Untuk absensi harian, sistem sudah menyediakan menu Absensi khusus agar lebih mudah diakses.',
                'iconTone' => 'guide-icon-blue',
            ],
            [
                'title' => '👑 Pro',
                'badge' => 'Premium',
                'icon' => '👑',
                'color' => 'from-amber-500 to-orange-500',
                'desc' => 'Penanda fitur premium atau fitur lanjutan yang memberi otomatisasi, insight, dan kontrol operasional lebih dalam.',
                'iconTone' => 'guide-icon-warning',
            ],
        ];

        $menuGroups = [
            [
                'title' => 'Front Office & Penjualan',
                'desc' => 'Menu yang sering dipakai saat melayani pelanggan dari awal sampai order dibayar.',
                'items' => ['Dashboard', 'Orders', 'Surat Jalan', 'Kasir', 'Data Produk'],
            ],
            [
                'title' => 'Produksi & Persediaan',
                'desc' => 'Menu operasional harian untuk memproses pekerjaan dan memastikan bahan selalu siap.',
                'items' => ['Produksi', 'Bahan & Stock', 'Pembelian', 'Pembatalan'],
            ],
            [
                'title' => 'Finance, Laporan & Kontrol',
                'desc' => 'Menu untuk membaca angka usaha, pembukuan, SDM, absensi, pengaturan, dan insight bisnis.',
                'items' => ['Data Keuangan', 'Laporan', 'Pengeluaran', 'PPN / Pajak', 'Absensi', 'Master Data', 'SDM', 'Admin', 'Intelligence', '👑 Pro'],
            ],
        ];

        $simpleFlow = [
            ['step' => '01', 'title' => 'pelanggan datang', 'note' => 'Pelanggan datang ke toko dan menyampaikan kebutuhan cetak ke team design.'],
            ['step' => '02', 'title' => 'team design menginput order', 'note' => 'Team design memasukkan detail pesanan ke sistem dan memastikan spesifikasi sudah benar.'],
            ['step' => '03', 'title' => 'mencetak spk', 'note' => 'Setelah order masuk, team design mencetak SPK sebagai dasar kerja produksi.'],
            ['step' => '04', 'title' => 'pembayaran ke kasir', 'note' => 'Pelanggan diarahkan ke kasir untuk pembayaran. Jika transaksi memakai PPN, kasir mengaktifkan checkbox PPN saat proses pembayaran agar nilai PPN tersimpan ke data order.'],
            ['step' => '05', 'title' => 'cetak nota / invoice', 'note' => 'Setelah pembayaran berhasil, kasir bisa mencetak POS 80mm, Invoice A4, Invoice A5 landscape, atau Invoice 21,5 × 16,5 cm sesuai kebutuhan pelanggan.'],
            ['step' => '06', 'title' => 'scan barcode nota', 'note' => 'Pelanggan dapat scan barcode di nota atau invoice untuk memantau progres order secara mandiri.'],
            ['step' => '07', 'title' => 'spk diberikan ke customer service', 'note' => 'SPK yang sudah dicetak diteruskan ke customer service untuk diserahkan ke operator.'],
            ['step' => '08', 'title' => 'operator cek order dan update status', 'note' => 'Operator mengecek order lalu mengubah status menjadi produksi, proses cetak, dan finishing.'],
            ['step' => '09', 'title' => 'team finishing mengerjakan hasil akhir', 'note' => 'Finishing mengerjakan laminating glossy/doff, cutting die cut, kiss cut, dan proses akhir lainnya.'],
            ['step' => '10', 'title' => 'final check klik selesai', 'note' => 'Setelah pengecekan akhir, status diubah menjadi selesai dan order siap diambil pelanggan.'],
            ['step' => '11', 'title' => 'buat surat jalan jika barang dikirim', 'note' => 'Jika order dikirim ke pelanggan, admin membuat surat jalan, memilih kendaraan, lalu mencetak sesuai ukuran kertas yang dibutuhkan.'],
        ];

        $orderLatestUpdates = [
            [
                'module' => 'Kasir / Invoice / PPN',
                'title' => 'PPN Dipilih Saat Pembayaran, Invoice Multi Ukuran',
                'icon' => '🧾',
                'tone' => 'guide-icon-blue',
                'gradient' => 'from-blue-500 to-indigo-600',
                'desc' => 'PPN sekarang tidak lagi ditentukan dari tombol cetak. PPN diaktifkan saat proses pembayaran, lalu sistem menyimpan subtotal sebelum PPN, persentase PPN, nilai PPN, dan total tagihan ke order. Invoice hanya membaca data yang sudah tersimpan agar laporan dan nota tetap sinkron.',
                'flow' => [
                    'Kasir membuka halaman pembayaran order.',
                    'Jika transaksi memakai PPN, kasir centang Gunakan PPN.',
                    'Sistem menghitung subtotal, PPN, dan total tagihan.',
                    'Saat pembayaran disimpan, data PPN ikut tersimpan ke order.',
                    'Setelah pembayaran berhasil, user bisa cetak POS 80mm, A4, A5 landscape, atau 21,5 × 16,5 cm.',
                    'Barcode invoice mengarah ke trace order agar pelanggan bisa cek status pesanan.',
                ],
            ],
            [
                'module' => 'Surat Jalan',
                'title' => 'Surat Jalan Multi Ukuran Cetak',
                'icon' => '🚚',
                'tone' => 'guide-icon-blue',
                'gradient' => 'from-blue-500 to-indigo-600',
                'desc' => 'Surat Jalan sekarang mendukung beberapa pilihan ukuran cetak: A4, A5, dan ukuran custom 21,5 × 16,5 cm. User bisa memilih ukuran dari detail surat jalan tanpa membuat data surat jalan baru.',
                'flow' => [
                    'Admin membuat surat jalan dari order yang sudah lunas atau piutang.',
                    'Admin memilih kendaraan dari master data kendaraan.',
                    'Sistem membuat nomor surat jalan otomatis.',
                    'Dari detail surat jalan, user memilih Cetak A4, Cetak A5, atau Cetak 21,5 × 16,5.',
                    'Template print menyesuaikan margin, font, tinggi tabel, dan area tanda tangan sesuai ukuran kertas.',
                ],
            ],
            [
                'module' => 'Orders + Inventory',
                'title' => 'Bahan Custom Tetap Tampil di Form Order',
                'icon' => '🧩',
                'tone' => 'guide-icon-brand',
                'gradient' => 'from-violet-500 to-indigo-600',
                'desc' => 'Bahan custom sekarang tetap muncul saat membuat atau mengedit order. Sistem tidak lagi membaca stok bahan custom sebagai stok fisik, tapi membaca ketersediaan dari bahan komponennya.',
                'flow' => [
                    'Bahan custom dibuat dari beberapa komponen.',
                    'Di order form, bahan custom tetap muncul walaupun stok bahan custom = 0.',
                    'Yang dicek adalah stok komponen, bukan stok custom-nya sendiri.',
                    'Saat order diproses, stok yang berkurang hanya bahan komponennya.',
                ],
            ],
            [
                'module' => 'Orders',
                'title' => 'Guard Stock < 1 = Stok 0, Order Diblok',
                'icon' => '⛔',
                'tone' => 'guide-icon-orange',
                'gradient' => 'from-rose-500 to-red-600',
                'desc' => 'Jika stok bahan biasa di bawah 1 atau komponen bahan custom tidak cukup, sistem menandai kondisi itu sebagai stok 0 dan order tidak bisa dilanjutkan.',
                'flow' => [
                    'Sistem membaca ketersediaan bahan saat form order dibuka.',
                    'Jika stok < 1, material ditandai tidak tersedia.',
                    'Saat submit, backend cek ulang stok dengan guard final.',
                    'Jika stok tidak cukup, order diblok dan user mendapat notifikasi stok 0.',
                ],
            ],
            [
                'module' => 'Orders UI',
                'title' => 'Dropdown Bahan Dirapikan',
                'icon' => '🧭',
                'tone' => 'guide-icon-blue',
                'gradient' => 'from-cyan-500 to-blue-600',
                'desc' => 'Dropdown bahan di create dan edit order dirapikan agar lebih aman untuk operator. Material custom diberi penanda jelas, material stok kosong diberi label stok 0, dan material yang dipakai order lama tetap muncul saat edit.',
                'flow' => [
                    'Produk dipilih dulu.',
                    'Daftar bahan dibatasi sesuai relasi produk + bahan custom.',
                    'Bahan stok habis diberi status stok 0 / tidak tersedia.',
                    'Saat edit order, bahan lama tetap tampil agar data tidak hilang.',
                ],
            ],
        ];

        $systemFeatures = [
            [
                'module' => 'Kasir / PPN / Invoice',
                'title' => 'Invoice PPN Multi Ukuran',
                'icon' => '🧾',
                'tone' => 'guide-icon-blue',
                'gradient' => 'from-blue-500 to-indigo-600',
                'desc' => 'Fitur invoice sudah dibuat agar mendukung PPN saat pembayaran dan pilihan cetak multi ukuran. Invoice A4, A5 landscape, 21,5 × 16,5 cm, dan nota POS 80mm membaca data PPN yang sama dari order.',
                'flow' => [
                    'Admin mengatur PPN default dari menu PPN / Pajak.',
                    'Kasir mengaktifkan PPN saat pembayaran jika transaksi wajib pajak.',
                    'Sistem menyimpan use_ppn, ppn_rate, ppn_amount, subtotal_before_ppn, dan total_price.',
                    'Halaman pembayaran berhasil menampilkan tombol cetak POS 80mm, A4, A5, dan 21,5 × 16,5.',
                    'Invoice menampilkan checklist Invoice + PPN atau Tanpa PPN sesuai data order.',
                    'Barcode di invoice dan nota POS 80mm mengarah ke halaman trace order.',
                ],
            ],
            [
                'module' => 'Surat Jalan / Pengiriman',
                'title' => 'Surat Jalan dengan Master Kendaraan',
                'icon' => '🚚',
                'tone' => 'guide-icon-blue',
                'gradient' => 'from-blue-500 to-indigo-600',
                'desc' => 'Fitur Surat Jalan menghubungkan order dengan data kendaraan. Admin bisa memilih kendaraan, plat nomor, supir, penerima, alamat tujuan, tanggal kirim, dan mencetak surat jalan dalam beberapa ukuran kertas.',
                'flow' => [
                    'Master Data Kendaraan diisi terlebih dahulu.',
                    'Order dibuat seperti biasa sampai status valid untuk dikirim.',
                    'Admin membuat Surat Jalan dari order.',
                    'Pilih kendaraan agar nama kendaraan, plat, supir, dan nomor HP otomatis terisi.',
                    'Cetak surat jalan dengan pilihan A4, A5, atau 21,5 × 16,5 cm.',
                    'Status surat jalan bisa diubah menjadi dicetak, dikirim, diterima, atau dibatalkan.',
                ],
            ],
            [
                'module' => 'Absensi',
                'title' => 'Absensi Karyawan Berbasis Lokasi',
                'icon' => '🕒',
                'tone' => 'guide-icon-success',
                'gradient' => 'from-emerald-500 to-teal-600',
                'desc' => 'Fitur absensi dibuat sebagai menu khusus yang terpisah dari SDM. Karyawan hanya bisa absen jika berada dalam radius lokasi yang sudah ditentukan, dengan validasi absen masuk, absen pulang, rekap harian, dan export laporan.',
                'flow' => [
                    'Admin mengatur lokasi absensi, radius, jam masuk, jam pulang, dan toleransi.',
                    'Karyawan login menggunakan akun yang sudah terhubung ke data karyawan.',
                    'Popup dan tombol absensi muncul saat belum absen masuk.',
                    'Setelah absen masuk, popup dan tombol hilang sampai masuk jam pulang.',
                    'Saat sudah jam pulang, popup dan tombol muncul kembali untuk absen pulang.',
                    'Setelah absen pulang, absensi hari itu dianggap lengkap dan tombol hilang.',
                    'Admin dapat melihat rekap harian dan export laporan absensi.',
                ],
            ],
            [
                'module' => 'Absensi / Auto Absen',
                'title' => 'Auto Absen untuk Akun Flexible',
                'icon' => '⚙️',
                'tone' => 'guide-icon-brand',
                'gradient' => 'from-indigo-500 to-violet-600',
                'desc' => 'Akun tertentu seperti owner atau tim dengan jam kerja flexible bisa diatur sebagai auto absen oleh Developer. Data tetap masuk rekap, tetapi label dan catatan auto absen disembunyikan agar tidak menimbulkan kecemburuan sosial.',
                'flow' => [
                    'Developer mengaktifkan auto absen pada data karyawan tertentu.',
                    'Akun auto absen tidak perlu melakukan absen manual.',
                    'Sistem membuat data absensi otomatis per hari saat rekap dibuka.',
                    'Data tetap tampil di rekap absensi.',
                    'Catatan auto absen dikosongkan saat export laporan.',
                    'Pengaturan auto absen hanya terlihat untuk akun Developer.',
                ],
            ],
            [
                'module' => 'Produksi / Finishing',
                'title' => 'Dashboard Finishing LIVE',
                'icon' => '🖨️',
                'tone' => 'guide-icon-blue',
                'gradient' => 'from-sky-500 to-blue-600',
                'desc' => 'Dashboard finishing dibuat realtime seperti operator dashboard. Ada status LIVE/OFFLINE, refresh manual, voice notification, insight AI, kartu statistik, dan notifikasi order baru.',
                'flow' => [
                    'Order masuk ke antrian finishing',
                    'Dashboard membaca data realtime',
                    'Operator klik Selesai / Kembali ke Proses Cetak',
                    'Setelah submit, halaman otomatis scroll ke atas agar flash status langsung terlihat',
                ],
            ],
            [
                'module' => 'SDM / Gaji',
                'title' => 'Pembayaran Gaji dengan Sumber Dana',
                'icon' => '💵',
                'tone' => 'guide-icon-success',
                'gradient' => 'from-emerald-500 to-green-600',
                'desc' => 'Saat bayar gaji, user bisa memilih sumber pembayaran dari Kas Tunai atau Kas Bank. Jika pilih bank, rekening bank wajib dipilih agar pencatatan kas dan pembukuan sinkron.',
                'flow' => [
                    'Draft gaji dibuat dari form payroll',
                    'Klik Bayar Gaji',
                    'Pilih sumber pembayaran cash / bank',
                    'Simpan payment_source, rekening, paid_at, dan catatan',
                ],
            ],
            [
                'module' => 'Slip Gaji',
                'title' => 'Slip Gaji Modern Siap Cetak',
                'icon' => '🧾',
                'tone' => 'guide-icon-warning',
                'gradient' => 'from-amber-500 to-orange-500',
                'desc' => 'Slip gaji sudah dirapikan agar tampil modern saat dicetak. Struktur tetap mengikuti data utama payroll: gaji pokok, tunjangan, lembur, bonus, potongan, total, dan info pembayaran.',
                'flow' => [
                    'Gaji dibayar',
                    'Status berubah paid',
                    'Slip dibuka dari daftar gaji',
                    'Slip menampilkan take home pay dan detail pembayaran',
                ],
            ],
            [
                'module' => 'Finance',
                'title' => 'Laporan Kas Sinkron',
                'icon' => '💳',
                'tone' => 'guide-icon-brand',
                'gradient' => 'from-violet-500 to-indigo-600',
                'desc' => 'Laporan kas sekarang menghitung Kas Kecil, Kas Tunai, dan Kas Bank dengan sumber data yang sinkron: pembayaran order, modal, setoran, mutasi, pembayaran supplier, dan pembayaran gaji.',
                'flow' => [
                    'Dana masuk dari pembayaran order / modal / mutasi',
                    'Dana keluar dari setoran, supplier, dan gaji',
                    'Controller membaca semuanya per sumber kas',
                    'Saldo kas tampil konsisten di dashboard kas',
                ],
            ],
            [
                'module' => 'Laporan',
                'title' => 'Cash Ledger / Buku Besar Kas',
                'icon' => '📒',
                'tone' => 'guide-icon-blue',
                'gradient' => 'from-cyan-500 to-sky-600',
                'desc' => 'Buku Besar Kas sudah membaca transaksi kas masuk dan keluar, termasuk pembayaran gaji. Jadi saat kas berkurang, mutasinya muncul juga di ledger.',
                'flow' => [
                    'Transaksi kas dicatat dari sumber aktif',
                    'Ledger mengelompokkan debit dan kredit',
                    'Pembayaran gaji tampil sebagai kredit kas',
                    'Saldo berjalan terbentuk otomatis',
                ],
            ],
            [
                'module' => 'Pembukuan',
                'title' => 'Laba Rugi Sinkron',
                'icon' => '📈',
                'tone' => 'guide-icon-success',
                'gradient' => 'from-green-500 to-emerald-600',
                'desc' => 'Laba Rugi sekarang membaca beban gaji dari gaji yang benar-benar sudah dibayar berdasarkan paid_at, sehingga beban operasional tidak lagi putus dengan kas.',
                'flow' => [
                    'Order paid membentuk pendapatan',
                    'Pembelian membentuk cost',
                    'Expense dan gaji membentuk beban',
                    'Net profit dihitung dari transaksi yang benar-benar terjadi',
                ],
            ],
            [
                'module' => 'Pembukuan',
                'title' => 'Neraca Akuntansi Penuh',
                'icon' => '⚖️',
                'tone' => 'guide-icon-orange',
                'gradient' => 'from-orange-500 to-rose-600',
                'desc' => 'Neraca dipisah menjadi aset lancar, aset tetap, kewajiban, modal pemilik, prive, serta laba ditahan. Kas tunai dan kas bank kini ikut berkurang saat gaji dibayar, dan utang gaji membaca gaji yang belum dibayar.',
                'flow' => [
                    'Kas dihitung per sumber kas',
                    'Piutang, persediaan, aset tetap dibaca terpisah',
                    'Hutang usaha, utang gaji, dan utang lain-lain dihitung di sisi pasiva',
                    'Ekuitas terbentuk dari modal, prive, dan laba ditahan',
                ],
            ],
            [
                'module' => 'Pembukuan',
                'title' => 'Jurnal Umum',
                'icon' => '📚',
                'tone' => 'guide-icon-brand',
                'gradient' => 'from-fuchsia-500 to-violet-600',
                'desc' => 'Jurnal Umum dibuat untuk mengumpulkan semua transaksi utama dalam format debit-kredit: penjualan, pembayaran supplier, gaji, expense, modal, setoran, dan mutasi.',
                'flow' => [
                    'Sistem baca transaksi dari modul aktif',
                    'Setiap transaksi dibentuk jadi pasangan debit-kredit',
                    'User bisa filter tanggal dan rekening',
                    'Bisa print dan export untuk pembukuan',
                ],
            ],
        ];

        $syncFlows = [
            [
                'title' => 'Alur PPN → Pembayaran → Invoice → Laporan',
                'steps' => [
                    'Admin mengatur PPN default, rate pajak, dan data PKP/NPWP dari menu PPN / Pajak.',
                    'Saat proses pembayaran, kasir memilih apakah transaksi memakai PPN atau tanpa PPN.',
                    'Jika PPN aktif, sistem menghitung subtotal sebelum PPN, nilai PPN, dan total akhir.',
                    'Data PPN tersimpan ke order, bukan hanya tampil di halaman cetak.',
                    'Invoice A4, A5 landscape, 21,5 × 16,5, dan POS 80mm membaca data PPN dari order yang sama.',
                    'Karena data PPN tersimpan di order, nominal tagihan, pelunasan, invoice, dan laporan tetap sinkron.',
                    'Barcode pada nota dan invoice mengarah ke trace order untuk cek status pesanan pelanggan.',
                ],
            ],
            [
                'title' => 'Alur Surat Jalan → Kendaraan → Cetak Multi Ukuran',
                'steps' => [
                    'Admin mengisi Master Data Kendaraan berisi nama kendaraan, plat nomor, supir, nomor HP, dan status aktif.',
                    'Order dibuat dari menu Orders dan diproses sampai lunas atau masuk piutang.',
                    'Admin masuk ke menu Surat Jalan lalu memilih order yang akan dikirim.',
                    'Saat kendaraan dipilih, sistem mengisi otomatis nama kendaraan, plat nomor, nama supir, dan nomor HP supir.',
                    'Sistem membuat nomor surat jalan otomatis dengan format SJ/tahun/bulan/nomor urut.',
                    'Dari detail Surat Jalan, user bisa memilih Cetak A4, Cetak A5, atau Cetak 21,5 × 16,5 cm.',
                    'Saat dicetak, status surat jalan berubah menjadi sudah dicetak.',
                    'Setelah barang keluar, admin dapat menandai status menjadi dikirim, lalu diterima saat barang sudah sampai.',
                ],
            ],
            [
                'title' => 'Alur Absensi Karyawan → Rekap Harian → Export Laporan',
                'steps' => [
                    'Admin mengatur lokasi absensi, radius, jam masuk, jam pulang, toleransi telat, dan toleransi pulang cepat.',
                    'Karyawan login dengan akun yang sudah dihubungkan ke data karyawan.',
                    'Sebelum absen masuk, popup dan tombol Absensi muncul otomatis.',
                    'Saat karyawan klik absen masuk, sistem mengambil lokasi GPS dan mencocokkan dengan radius lokasi.',
                    'Jika lokasi sesuai radius, absen masuk tercatat dan sistem menghitung keterlambatan bila melewati toleransi.',
                    'Setelah absen masuk, popup dan tombol Absensi hilang agar tidak mengganggu operasional.',
                    'Saat sudah masuk jam pulang, popup dan tombol Absensi muncul kembali untuk absen pulang.',
                    'Setelah absen pulang, data absensi dianggap lengkap dan masuk ke rekap harian.',
                    'Admin dapat membuka Rekap Absensi untuk melihat kehadiran, telat, pulang cepat, dan export laporan CSV.',
                ],
            ],
            [
                'title' => 'Alur Sinkron Gaji → Kas → Buku Besar → Laba Rugi → Neraca',
                'steps' => [
                    'Gaji dibuat dalam status draft.',
                    'User klik Bayar Gaji lalu memilih sumber pembayaran: Kas Tunai atau Kas Bank.',
                    'Sistem menyimpan paid_at, payment_source, payment_method, rekening bank, dan catatan pembayaran.',
                    'Laporan Kas langsung mengurangi saldo kas sesuai sumber pembayarannya.',
                    'Cash Ledger / Buku Besar menampilkan pembayaran gaji sebagai kredit kas.',
                    'Laba Rugi membaca pembayaran gaji sebagai beban gaji.',
                    'Neraca membaca kas berkurang dan utang gaji menyesuaikan status pembayarannya.',
                ],
            ],
            [
                'title' => 'Alur Sinkron Transaksi Umum → Jurnal Umum',
                'steps' => [
                    'Pembayaran order dibaca sebagai penerimaan kas dan penjualan.',
                    'Pembayaran supplier dibaca sebagai pengurangan hutang usaha dan pengurangan kas.',
                    'Expense dibaca sebagai beban operasional dan pengurang kas kecil.',
                    'Deposit dibaca sebagai perpindahan dari kas tunai ke kas bank.',
                    'Mutasi kas dibaca sebagai perpindahan antar akun kas.',
                    'Modal dibaca sebagai penambahan kas dan modal pemilik.',
                    'Semua transaksi dibentuk otomatis ke dalam pasangan debit-kredit di Jurnal Umum.',
                ],
            ],
            [
                'title' => 'Alur Produksi & Finishing yang Sudah Diperbarui',
                'steps' => [
                    'Order diproses dari design ke produksi berdasarkan SPK.',
                    'Operator mengubah status ke produksi, cetak, lalu finishing.',
                    'Dashboard finishing live memantau antrian, proses, dan selesai hari ini.',
                    'Jika ada revisi, order bisa dikembalikan ke proses cetak.',
                    'Saat klik selesai, status order berubah dan halaman otomatis scroll ke atas agar notifikasi hasil langsung terlihat.',
                ],
            ],
            [
                'title' => 'Alur Baru Bahan Custom & Guard Stok Order',
                'steps' => [
                    'Bahan custom dibuat dari komponen bahan dan tidak memakai stok custom sebagai stok fisik.',
                    'Saat form order dibuka, material biasa dicek dari stoknya sendiri, sedangkan bahan custom dicek dari stok komponennya.',
                    'Jika stok bahan biasa di bawah 1 atau komponen custom tidak cukup, sistem memberi status stok 0.',
                    'Dropdown bahan tetap rapi: bahan custom tetap tampil, bahan yang tidak tersedia diberi label stok 0 / tidak bisa dilanjutkan.',
                    'Saat submit, backend melakukan cek final. Jika tidak cukup, order diblok agar stok tidak minus.',
                ],
            ],
        ];
    @endphp

    <x-common.page-breadcrumb pageTitle="Panduan Menu" />

    <div class="guide-wrap rounded-[28px] p-4 md:p-5">
        <div class="guide-border mb-6">
            <div class="guide-hero rounded-3xl p-6 md:p-7">
                <div class="guide-hero-grid"></div>
                <div class="guide-glow-1"></div>
                <div class="guide-glow-2"></div>
                <div class="guide-glow-3"></div>

                <div class="relative z-10">
                    <div class="mb-4 flex flex-wrap items-center gap-2">
                        <span class="guide-pill-hero">
                            <span class="inline-block h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_12px_rgba(52,211,153,0.9)]"></span>
                            Menu Knowledge Center
                        </span>
                        <span class="guide-pill-hero">AI Premium Guide</span>
                        <span class="guide-pill-hero">{{ count($menuDocs) }} Menu Utama</span>
                        <span class="guide-pill-hero">{{ count($systemFeatures) }} Fitur Inti</span>
                        <span class="guide-pill-hero">{{ count($orderLatestUpdates) }} Update Order</span>
                    </div>

                    <div class="grid gap-5 xl:grid-cols-[1.45fr_0.75fr] xl:items-center">
                        <div>
                            <h1 class="text-3xl font-extrabold tracking-tight text-white md:text-5xl">
                                Panduan Menu, Update Sistem, & Alur Sinkron
                            </h1>
                            <p class="mt-4 max-w-3xl text-sm leading-7 text-slate-200 md:text-base">
                                Halaman ini merangkum fungsi menu utama, fitur yang sudah dibuat, serta update terbaru yang tadi ditambahkan:
                                absensi berbasis lokasi, popup absensi otomatis, surat jalan dengan kendaraan dan multi ukuran cetak, PPN saat pembayaran, invoice A4/A5/21,5×16,5, nota POS 80mm dengan PPN, bahan custom di order, guard stok di bawah 1, dan perapihan dropdown bahan supaya operator lebih aman saat input transaksi.
                            </p>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <div class="rounded-2xl border border-white/12 bg-white/10 p-4 text-white backdrop-blur">
                                <div class="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-300">Total Tombol</div>
                                <div class="mt-2 text-3xl font-extrabold">{{ count($menuDocs) }}</div>
                            </div>
                            <div class="rounded-2xl border border-white/12 bg-white/10 p-4 text-white backdrop-blur">
                                <div class="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-300">Flow Tahap</div>
                                <div class="mt-2 text-3xl font-extrabold">{{ count($simpleFlow) }}</div>
                            </div>
                            <div class="rounded-2xl border border-white/12 bg-white/10 p-4 text-white backdrop-blur">
                                <div class="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-300">Fitur Inti</div>
                                <div class="mt-2 text-3xl font-extrabold">{{ count($systemFeatures) }}</div>
                            </div>
                            <div class="rounded-2xl border border-white/12 bg-white/10 p-4 text-white backdrop-blur">
                                <div class="text-[11px] font-bold uppercase tracking-[0.18em] text-slate-300">Update Order</div>
                                <div class="mt-2 text-3xl font-extrabold">{{ count($orderLatestUpdates) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
            <div class="guide-stat guide-stat-blue">
                <div class="text-xs font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">Tujuan</div>
                <div class="mt-3 text-sm font-medium leading-7 text-gray-800 dark:text-white/90">
                    Membantu semua user memahami fungsi menu, fitur baru, dan hubungan antar laporan agar tidak bingung saat operasional.
                </div>
            </div>

            <div class="guide-stat guide-stat-success">
                <div class="text-xs font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">Manfaat</div>
                <div class="mt-3 text-sm font-medium leading-7 text-gray-800 dark:text-white/90">
                    User baru lebih cepat paham alur kerja, sedangkan owner dan admin bisa melihat bagaimana data transaksi tersambung sampai pembukuan.
                </div>
            </div>

            <div class="guide-stat guide-stat-warning">
                <div class="text-xs font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">Update Terkini</div>
                <div class="mt-3 text-sm font-medium leading-7 text-gray-800 dark:text-white/90">
                    PPN kini dipilih saat pembayaran dan tersimpan ke order, invoice bisa dicetak dalam ukuran A4, A5 landscape, 21,5 × 16,5 cm, dan POS 80mm. Absensi tetap menjadi menu sendiri, sementara order lebih aman karena stok di bawah 1 dianggap stok 0 dan order diblok sebelum stok minus.
                </div>
            </div>

            <div class="guide-stat guide-stat-brand">
                <div class="text-xs font-bold uppercase tracking-wide text-gray-500 dark:text-gray-400">Fokus</div>
                <div class="mt-3 text-sm font-medium leading-7 text-gray-800 dark:text-white/90">
                    Fokus panduan ini adalah alur nyata yang sudah dibuat di sistem, bukan teori umum, jadi lebih mudah dipakai sebagai SOP harian.
                </div>
            </div>
        </div>

        <div class="guide-border mb-6">
            <div class="guide-glass rounded-3xl p-5 md:p-6">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="guide-section-title">Ringkasan Menu yang Sudah Dirapikan</h2>
                        <p class="guide-section-subtitle mt-2 max-w-4xl">
                            Struktur menu diringkas per kelompok kerja supaya user lebih cepat tahu harus masuk ke menu mana sesuai konteks pekerjaan.
                        </p>
                    </div>

                    <span class="guide-pill">
                        <span class="inline-block h-2 w-2 rounded-full bg-sky-500"></span>
                        Quick Orientation
                    </span>
                </div>

                <div class="mt-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
                    @foreach($menuGroups as $group)
                        <div class="menu-group-card">
                            <div class="text-xs font-bold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">Kelompok Menu</div>
                            <h3 class="mt-2 text-xl font-extrabold tracking-tight text-gray-900 dark:text-white">{{ $group['title'] }}</h3>
                            <p class="mt-2 text-sm leading-7 text-gray-600 dark:text-gray-300">{{ $group['desc'] }}</p>

                            <div class="menu-mini-list">
                                @foreach($group['items'] as $menu)
                                    <span class="menu-mini-item">{{ $menu }}</span>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="guide-border mb-6">
            <div class="guide-glass rounded-3xl p-5 md:p-6">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="guide-section-title">Bagan Role Transaksi</h2>
                        <p class="guide-section-subtitle mt-2 max-w-4xl">
                            Alur dasar sistem transaksi percetakan, mulai dari pelanggan datang sampai finishing dan order selesai.
                        </p>
                    </div>

                    <span class="guide-pill">
                        <span class="inline-block h-2 w-2 rounded-full bg-emerald-500"></span>
                        Flow Percetakan
                    </span>
                </div>

                <div class="mt-6 simple-flow-wrap">
                    <div class="simple-flow-title">
                        Gambaran umum mengenai alur sistem transaksi percetakan
                    </div>

                    @foreach($simpleFlow as $item)
                        <div class="simple-flow-item">
                            <div class="simple-flow-box"></div>
                            <div class="simple-flow-label">
                                <span class="simple-flow-step">{{ $item['step'] }}</span>
                                <span>{{ $item['title'] }}</span>
                            </div>
                            <div class="simple-flow-note">
                                {{ $item['note'] }}
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="guide-border mb-6">
            <div class="guide-glass rounded-3xl p-5 md:p-6">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="guide-section-title">New Update</h2>
                        <p class="guide-section-subtitle mt-2 max-w-4xl">
                            Bagian ini khusus merangkum perubahan terbaru pada order, bahan custom, kontrol stok, dan absensi karyawan.
                        </p>
                    </div>

                    <span class="guide-pill">
                        <span class="inline-block h-2 w-2 rounded-full bg-rose-500"></span>
                        Latest Update
                    </span>
                </div>

                <div class="alert-update mt-5 mb-5">
                    <div class="flex items-start gap-3">
                        <div class="guide-icon guide-icon-orange !w-12 !h-12 !text-xl">🚨</div>
                        <div>
                            <h3 class="text-lg font-extrabold tracking-tight text-gray-900 dark:text-white">Aturan Baru Sistem</h3>
                            <p class="mt-2 text-sm leading-7 text-gray-700 dark:text-gray-300">
                                Absensi sekarang menjadi menu sendiri dengan validasi lokasi/radius dan popup otomatis. PPN sekarang diaktifkan saat proses pembayaran agar data invoice, pelunasan, dan laporan tetap sinkron. Invoice mendukung cetak A4, A5 landscape, 21,5 × 16,5 cm, dan POS 80mm. Surat Jalan juga sudah mendukung kendaraan dan pilihan cetak A4, A5, serta 21,5 × 16,5 cm. Untuk order, stok bahan di bawah 1 sekarang diperlakukan sebagai <strong>stok 0</strong>.
                                Jika bahan biasa habis atau komponen bahan custom tidak cukup, order <strong>tidak bisa dilanjutkan</strong>.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-5 xl:grid-cols-3">
                    @foreach($orderLatestUpdates as $feature)
                        <div class="feature-item">
                            <div class="mb-4 flex items-start gap-4">
                                <div class="guide-icon {{ $feature['tone'] }}">
                                    {{ $feature['icon'] }}
                                </div>

                                <div class="flex-1">
                                    <div class="mb-2 inline-flex rounded-full border border-gray-200 bg-gray-50 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500 dark:border-gray-700 dark:bg-white/5 dark:text-gray-300">
                                        {{ $feature['module'] }}
                                    </div>
                                    <h3 class="text-xl font-extrabold tracking-tight text-gray-900 dark:text-white">
                                        {{ $feature['title'] }}
                                    </h3>
                                    <p class="mt-2 text-sm leading-7 text-gray-600 dark:text-gray-300">
                                        {{ $feature['desc'] }}
                                    </p>
                                </div>
                            </div>

                            <div class="rounded-2xl bg-gray-50 p-4 dark:bg-white/[0.03]">
                                <div class="mb-3 text-xs font-bold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">
                                    Alur Update
                                </div>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($feature['flow'] as $step)
                                        <span class="flow-chip">{{ $step }}</span>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="guide-border mb-6">
            <div class="guide-glass rounded-3xl p-5 md:p-6">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="guide-section-title">Fitur yang Sudah Dibuat</h2>
                        <p class="guide-section-subtitle mt-2 max-w-4xl">
                            Ringkasan semua fitur penting yang sudah dibangun, beserta peran dan alur kerjanya di dalam sistem.
                        </p>
                    </div>

                    <span class="guide-pill">
                        <span class="inline-block h-2 w-2 rounded-full bg-indigo-500"></span>
                        System Update
                    </span>
                </div>

                <div class="mt-6 grid grid-cols-1 gap-5 xl:grid-cols-2">
                    @foreach($systemFeatures as $feature)
                        <div class="feature-item">
                            <div class="mb-4 flex items-start gap-4">
                                <div class="guide-icon {{ $feature['tone'] }}">
                                    {{ $feature['icon'] }}
                                </div>

                                <div class="flex-1">
                                    <div class="mb-2 inline-flex rounded-full border border-gray-200 bg-gray-50 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500 dark:border-gray-700 dark:bg-white/5 dark:text-gray-300">
                                        {{ $feature['module'] }}
                                    </div>
                                    <h3 class="text-xl font-extrabold tracking-tight text-gray-900 dark:text-white">
                                        {{ $feature['title'] }}
                                    </h3>
                                    <p class="mt-2 text-sm leading-7 text-gray-600 dark:text-gray-300">
                                        {{ $feature['desc'] }}
                                    </p>
                                </div>
                            </div>

                            <div class="rounded-2xl bg-gray-50 p-4 dark:bg-white/[0.03]">
                                <div class="mb-3 text-xs font-bold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">
                                    Alur Fitur
                                </div>
                                <div class="flex flex-wrap gap-2">
                                    @foreach($feature['flow'] as $step)
                                        <span class="flow-chip">{{ $step }}</span>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="guide-border mb-6">
            <div class="guide-glass rounded-3xl p-5 md:p-6">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="guide-section-title">Alur Sinkron Antar Modul</h2>
                        <p class="guide-section-subtitle mt-2 max-w-4xl">
                            Penjelasan bagaimana transaksi dari modul operasional naik ke laporan dan pembukuan agar semua angka saling nyambung.
                        </p>
                    </div>

                    <span class="guide-pill">
                        <span class="inline-block h-2 w-2 rounded-full bg-fuchsia-500"></span>
                        Sync Flow
                    </span>
                </div>

                <div class="mt-6 grid grid-cols-1 gap-5 xl:grid-cols-2 2xl:grid-cols-4">
                    @foreach($syncFlows as $flow)
                        <div class="guide-card p-5">
                            <div class="guide-card-topline bg-gradient-to-r from-indigo-500 via-violet-500 to-fuchsia-500 -mx-5 -mt-5 mb-5"></div>

                            <h3 class="text-lg font-extrabold tracking-tight text-gray-900 dark:text-white">
                                {{ $flow['title'] }}
                            </h3>

                            <div class="mt-4 space-y-5">
                                @foreach($flow['steps'] as $step)
                                    <div class="sync-step">
                                        <div class="text-sm leading-7 text-gray-600 dark:text-gray-300">
                                            {{ $step }}
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="guide-border">
            <div class="guide-glass rounded-3xl p-5 md:p-6">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h2 class="guide-section-title">Fungsi Tiap Menu</h2>
                        <p class="guide-section-subtitle mt-2 max-w-3xl">
                            Penjelasan fungsi semua menu utama dalam sistem agar user langsung tahu harus masuk ke mana sesuai kebutuhan pekerjaan.
                        </p>
                    </div>

                    <span class="guide-pill">
                        <span class="inline-block h-2 w-2 rounded-full bg-emerald-500"></span>
                        Premium Cards
                    </span>
                </div>

                <div class="mt-6 grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
                    @foreach($menuDocs as $index => $item)
                        <div class="guide-card p-5">
                            <div class="guide-card-topline bg-gradient-to-r {{ $item['color'] }} -mx-5 -mt-5 mb-5"></div>

                            <div class="mb-4 flex items-start justify-between gap-3">
                                <div class="guide-icon {{ $item['iconTone'] }}">
                                    {{ $item['icon'] }}
                                </div>

                                <div class="rounded-full bg-gray-100 px-3 py-1 text-xs font-bold text-gray-600 dark:bg-white/10 dark:text-gray-300">
                                    {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
                                </div>
                            </div>

                            <div class="mb-3 inline-flex rounded-full border border-gray-200 bg-gray-50 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.18em] text-gray-500 dark:border-gray-700 dark:bg-white/5 dark:text-gray-300">
                                {{ $item['badge'] }}
                            </div>

                            <h3 class="text-xl font-extrabold tracking-tight text-gray-900 dark:text-white">
                                {{ $item['title'] }}
                            </h3>

                            <p class="mt-3 text-sm leading-7 text-gray-600 dark:text-gray-300">
                                {{ $item['desc'] }}
                            </p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection