@extends('layouts.app')

@section('title', 'LINK')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Page Header -->
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="card-title mb-0">
                                <i class="fas fa-link me-2"></i>
                                SEMUA LINK HALAMAN
                            </h3>
                            <p class="mb-0 mt-1 opacity-75">
                                Daftar lengkap semua halaman dan link yang tersedia di sistem
                            </p>
                        </div>
                        <div>
                            <span class="badge bg-light text-dark">
                                <i class="fas fa-chart-bar me-1"></i>
                                Total: 200+ Halaman
                            </span>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <!-- Search Box -->
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="searchLinks" placeholder="Cari halaman atau link...">
                                <div class="input-group-text">
                                    <i class="fas fa-search"></i>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <select class="form-select" id="filterCategory">
                                <option value="">Semua Kategori</option>
                                <option value="dashboard">Dashboard</option>
                                <option value="pelanggan">Pelanggan</option>
                                <option value="layanan">Layanan</option>
                                <option value="invoice">Invoice & Tagihan</option>
                                <option value="jaringan">Jaringan</option>
                                <option value="keuangan">Keuangan</option>
                                <option value="cms">CMS</option>
                                <option value="pengaturan">Pengaturan</option>
                                <option value="laporan">Laporan</option>
                                <option value="public">Public/Website</option>
                                <option value="api">API</option>
                            </select>
                        </div>
                    </div>

                    <!-- Links Content -->
                    <div class="row" id="linksContainer">
                        
                        <!-- Dashboard -->
                        <div class="col-md-6 mb-4 link-category" data-category="dashboard">
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-chart-pie me-2"></i>Dashboard
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('dashboard') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-tachometer-alt me-2 text-info"></i>Dashboard Utama
                                        </a>
                                        <a href="{{ route('profile') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-user-circle me-2 text-secondary"></i>Profile
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pelanggan -->
                        <div class="col-md-6 mb-4 link-category" data-category="pelanggan">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-users me-2"></i>Pelanggan
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('pelanggan.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-list me-2 text-success"></i>Daftar Pelanggan
                                        </a>
                                        <a href="{{ route('pelanggan.create') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-plus me-2 text-success"></i>Tambah Pelanggan
                                        </a>
                                        <a href="{{ route('pelanggan.template.download') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-download me-2 text-success"></i>Download Template Import
                                        </a>
                                        <a href="{{ route('laporan-pelanggan.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-chart-bar me-2 text-success"></i>Laporan Pelanggan
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Layanan -->
                        <div class="col-md-6 mb-4 link-category" data-category="layanan">
                            <div class="card border-warning">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-wifi me-2"></i>Layanan
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('layanan-pppoes.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-ethernet me-2 text-warning"></i>Layanan PPPOE
                                        </a>
                                        <a href="{{ route('layanan-hotspots.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-wifi me-2 text-warning"></i>Layanan Hotspot
                                        </a>
                                        <a href="{{ route('layanan-jasa.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-tools me-2 text-warning"></i>Layanan Jasa
                                        </a>
                                        <a href="{{ route('produks.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-box me-2 text-warning"></i>Produk
                                        </a>
                                        <a href="{{ route('pembelians.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-shopping-cart me-2 text-warning"></i>Pembelian
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Invoice & Tagihan -->
                        <div class="col-md-6 mb-4 link-category" data-category="invoice">
                            <div class="card border-danger">
                                <div class="card-header bg-danger text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-file-invoice me-2"></i>Invoice & Tagihan
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('invoices.belum-bayar') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-exclamation-circle me-2 text-danger"></i>Invoice Belum Bayar
                                        </a>
                                        <a href="{{ route('invoices.sudah-bayar') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-check-circle me-2 text-success"></i>Invoice Sudah Bayar
                                        </a>
                                        <a href="{{ route('invoices.konfirmasi') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-clipboard-check me-2 text-info"></i>Konfirmasi Pembayaran
                                        </a>
                                        <a href="{{ route('invoices.create') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-plus me-2 text-danger"></i>Buat Invoice
                                        </a>
                                        <a href="{{ route('invoices.bulk-generate') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-layer-group me-2 text-danger"></i>Generate Bulk Invoice
                                        </a>
                                        <a href="{{ route('invoice-reminder.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-bell me-2 text-warning"></i>Invoice Reminder
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Jaringan -->
                        <div class="col-md-6 mb-4 link-category" data-category="jaringan">
                            <div class="card border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-network-wired me-2"></i>Jaringan
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('mikrotiks.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-router me-2 text-primary"></i>Mikrotik
                                        </a>
                                        <a href="{{ route('mikrotiks.monitoring') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-chart-line me-2 text-primary"></i>Monitoring Mikrotik
                                        </a>
                                        <a href="{{ route('pppoe.active-sessions') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-link me-2 text-primary"></i>PPPOE Aktif
                                        </a>
                                        <a href="{{ route('pppoe.profiles') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-user-cog me-2 text-primary"></i>PPPOE Profile
                                        </a>
                                        <a href="{{ route('hotspot.active-users') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-wifi me-2 text-primary"></i>Hotspot Aktif
                                        </a>
                                        <a href="{{ route('traffic-monitor.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-chart-area me-2 text-primary"></i>Traffic Monitor
                                        </a>
                                        <a href="{{ route('assets.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-boxes me-2 text-primary"></i>Asset
                                        </a>
                                        <a href="{{ route('coverage-areas.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-map me-2 text-primary"></i>Coverage Area
                                        </a>
                                        <a href="{{ route('top-olts.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-server me-2 text-primary"></i>TOP OLT
                                        </a>
                                        <a href="{{ route('top-odcs.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-sitemap me-2 text-primary"></i>TOP ODC
                                        </a>
                                        <a href="{{ route('top-odps.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-project-diagram me-2 text-primary"></i>TOP ODP
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Keuangan -->
                        <div class="col-md-6 mb-4 link-category" data-category="keuangan">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-money-bill me-2"></i>Keuangan
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('pendapatans.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-arrow-up me-2 text-success"></i>Pendapatan
                                        </a>
                                        <a href="{{ route('pengeluarans.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-arrow-down me-2 text-danger"></i>Pengeluaran
                                        </a>
                                        <a href="{{ route('laporan-keuangan.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-chart-pie me-2 text-success"></i>Laporan Keuangan
                                        </a>
                                        <a href="{{ route('kategori-keuangans.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-cog me-2 text-success"></i>Kategori Keuangan
                                        </a>
                                        <a href="{{ route('banks.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-university me-2 text-success"></i>Akun Bank
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- CMS -->
                        <div class="col-md-6 mb-4 link-category" data-category="cms">
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-globe me-2"></i>CMS
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('menus.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-bars me-2 text-info"></i>Menu
                                        </a>
                                        <a href="{{ route('halamen.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-file-alt me-2 text-info"></i>Halaman
                                        </a>
                                        <a href="{{ route('kategoris.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-folder me-2 text-info"></i>Kategori
                                        </a>
                                        <a href="{{ route('widgets.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-puzzle-piece me-2 text-info"></i>Widget
                                        </a>
                                        <a href="{{ route('galeri.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-images me-2 text-info"></i>Galeri
                                        </a>
                                        <a href="{{ route('tentang-kami.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-info-circle me-2 text-info"></i>Tentang Kami
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pengaturan -->
                        <div class="col-md-6 mb-4 link-category" data-category="pengaturan">
                            <div class="card border-secondary">
                                <div class="card-header bg-secondary text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-cogs me-2"></i>Pengaturan
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('perusahaan.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-building me-2 text-secondary"></i>Perusahaan
                                        </a>
                                        <a href="{{ route('pesan-templates.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-sms me-2 text-secondary"></i>Template Pesan
                                        </a>
                                        <a href="{{ route('template-invoices.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-file-invoice-dollar me-2 text-secondary"></i>Template Invoice
                                        </a>
                                        <a href="{{ route('whatsapp-gateways.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fab fa-whatsapp me-2 text-success"></i>WhatsApp Gateway
                                        </a>
                                        <a href="{{ route('payment-gateways.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-credit-card me-2 text-secondary"></i>Payment Gateway
                                        </a>
                                        <a href="{{ route('auto-isolir.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-ban me-2 text-danger"></i>Auto Isolir
                                        </a>
                                        <a href="{{ route('isolir.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-hand-paper me-2 text-warning"></i>Manual Isolir
                                        </a>
                                        <a href="{{ route('users.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-users me-2 text-secondary"></i>Users
                                        </a>
                                        <a href="{{ route('themes.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-paint-brush me-2 text-secondary"></i>Tema
                                        </a>
                                        <a href="{{ route('syslog.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-file-alt me-2 text-secondary"></i>Syslog
                                        </a>
                                        <a href="{{ route('sidebar-menus.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-list me-2 text-secondary"></i>Menu Sidebar
                                        </a>
                                        <a href="{{ route('link.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-link me-2 text-primary"></i>LINK <span class="badge bg-primary">YOU ARE HERE</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Marketing & Voucher -->
                        <div class="col-md-6 mb-4 link-category" data-category="marketing">
                            <div class="card border-warning">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-bullhorn me-2"></i>Marketing & Voucher
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('vouchers.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-ticket-alt me-2 text-warning"></i>Voucher Diskon
                                        </a>
                                        <a href="{{ route('kirim-pesan.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-paper-plane me-2 text-warning"></i>Kirim Pesan
                                        </a>
                                        <a href="{{ route('manajemen-karyawan.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-user-tie me-2 text-warning"></i>Manajemen Karyawan
                                        </a>
                                        <a href="{{ route('absensi.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-clock me-2 text-warning"></i>Absensi
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Support & Ticket -->
                        <div class="col-md-6 mb-4 link-category" data-category="support">
                            <div class="card border-info">
                                <div class="card-header bg-info text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-headset me-2"></i>Support & Ticket
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('tickets.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-ticket-alt me-2 text-info"></i>Daftar Tiket
                                        </a>
                                        <a href="{{ route('tickets.create') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-plus me-2 text-info"></i>Buat Tiket
                                        </a>
                                        <a href="{{ route('sla.index') }}" class="list-group-item list-group-item-action">
                                            <i class="fas fa-chart-bar me-2 text-info"></i>SLA Management
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Website Public -->
                        <div class="col-md-6 mb-4 link-category" data-category="public">
                            <div class="card border-success">
                                <div class="card-header bg-success text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-globe me-2"></i>Website Public
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="{{ route('homepage') }}" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-home me-2 text-success"></i>Homepage
                                        </a>
                                        <a href="{{ route('website.paket') }}" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-wifi me-2 text-success"></i>Paket Internet
                                        </a>
                                        <a href="{{ route('website.tentang-kami') }}" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-info-circle me-2 text-success"></i>Tentang Kami
                                        </a>
                                        <a href="{{ route('website.galeri') }}" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-images me-2 text-success"></i>Galeri
                                        </a>
                                        <a href="{{ route('website.kontak') }}" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-phone me-2 text-success"></i>Kontak
                                        </a>
                                        <a href="{{ route('payment.index') }}" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-credit-card me-2 text-success"></i>Bayar Tagihan
                                        </a>
                                        <a href="{{ route('registration.form') }}" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-user-plus me-2 text-success"></i>Registrasi Pelanggan
                                        </a>
                                        <a href="{{ route('checkout') }}" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-shopping-cart me-2 text-success"></i>Checkout
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- API Routes -->
                        <div class="col-md-12 mb-4 link-category" data-category="api">
                            <div class="card border-dark">
                                <div class="card-header bg-dark text-white">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-code me-2"></i>API Routes & Endpoints
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <!-- Coverage Area API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-map me-2"></i>Coverage Area API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/coverage-areas/map-data</div>
                                                <div class="mb-1"><code class="text-warning">POST</code> /api/coverage-areas/check-coverage</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Traffic Monitor API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-chart-line me-2"></i>Traffic Monitor API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/traffic-monitor/mikrotiks</div>
                                                <div class="mb-1"><code class="text-warning">POST</code> /api/traffic-monitor/interfaces</div>
                                                <div class="mb-1"><code class="text-warning">POST</code> /api/traffic-monitor/stats</div>
                                                <div class="mb-1"><code class="text-warning">POST</code> /api/traffic-monitor/realtime</div>
                                                <div class="mb-1"><code class="text-warning">POST</code> /api/traffic-monitor/test-connection</div>
                                                <div class="mb-1"><code class="text-warning">POST</code> /api/traffic-monitor/quick-status</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Voucher API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-ticket-alt me-2"></i>Voucher API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-warning">POST</code> /api/vouchers/validate</div>
                                                <div class="mb-1"><code class="text-warning">POST</code> /api/vouchers/apply</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/vouchers/generate-code</div>
                                            </div>
                                        </div>
                                        
                                        <!-- PPPOE API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-ethernet me-2"></i>PPPOE API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/pppoe/active-sessions</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/pppoe/profiles</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/layanan-pppoes/pppoe-profiles</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Hotspot API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-wifi me-2"></i>Hotspot API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/hotspot/active-users</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/hotspot/profiles</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/hotspot/users</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/hotspot/debug-profiles</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Pelanggan API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-users me-2"></i>Pelanggan API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/pelanggan/available-ports</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/pelanggan/odps-by-coverage</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/pelanggan/pppoe-profiles</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/pelanggan/hotspot-profiles</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Kirim Pesan API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-paper-plane me-2"></i>Kirim Pesan API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/kirim-pesan/contacts</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/kirim-pesan/templates</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Tickets API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-ticket-alt me-2"></i>Tickets API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/tickets/pelanggan-data</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Layanan API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-tools me-2"></i>Layanan API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/layanan/{type}</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/layanan-jasa/by-kategori</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Assets API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-boxes me-2"></i>Assets API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/assets/by-category</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/top-odps/available-ports</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/top-odcs/available-pons</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Pembelian API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-shopping-cart me-2"></i>Pembelian API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/pembelians/pelanggan-data/{id}</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/pembelians/layanan-data</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/produks/search</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Keuangan API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-money-bill me-2"></i>Keuangan API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/kategori-keuangans/by-tipe/{tipe}</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/laporan-keuangan/chart-data</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /api/banks/active</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Users API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-users me-2"></i>Users API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/users/data</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Sidebar Menu API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-bars me-2"></i>Sidebar Menu API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/sidebar-menus/structure</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Syslog API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-primary"><i class="fas fa-file-alt me-2"></i>Syslog API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /api/syslog/statistics</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Payment Webhooks -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-danger"><i class="fas fa-webhook me-2"></i>Payment Webhooks</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-warning">POST</code> /webhook/midtrans</div>
                                                <div class="mb-1"><code class="text-warning">POST</code> /webhook/xendit</div>
                                                                                <div class="mb-1"><code class="text-warning">POST</code> /webhook/tripay</div>
                                <div class="mb-1"><code class="text-success">GET</code> /webhook/tripay/test</div>
                                <div class="mb-1"><code class="text-info">POST</code> /tripay/callback <span class="badge bg-success">NEW</span></div>
                                <div class="mb-1"><code class="text-success">GET</code> /tripay/callback/test <span class="badge bg-success">NEW</span></div>
                                            </div>
                                        </div>
                                        
                                        <!-- Public Payment API -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-danger"><i class="fas fa-credit-card me-2"></i>Payment API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-warning">POST</code> /payment/search-invoice</div>
                                                <div class="mb-1"><code class="text-warning">POST</code> /payment/create</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /payment/status/{id}</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /payment/gateways</div>
                                            </div>
                                        </div>
                                        
                                        <!-- Cron & Health -->
                                        <div class="col-md-4 mb-3">
                                            <h6 class="text-warning"><i class="fas fa-clock me-2"></i>Cron & Health API</h6>
                                            <div class="small">
                                                <div class="mb-1"><code class="text-success">GET</code> /cron/invoice-reminder/{token}</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /cron/auto-billing/{token}</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /update-overdue</div>
                                                <div class="mb-1"><code class="text-success">GET</code> /health</div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                    
                                    <!-- API Statistics -->
                                    <div class="mt-3 p-3 bg-light rounded">
                                        <div class="row text-center">
                                            <div class="col-md-3">
                                                <h5 class="text-success mb-1">60+</h5>
                                                <small class="text-muted">GET Endpoints</small>
                                            </div>
                                            <div class="col-md-3">
                                                <h5 class="text-warning mb-1">25+</h5>
                                                <small class="text-muted">POST Endpoints</small>
                                            </div>
                                            <div class="col-md-3">
                                                <h5 class="text-danger mb-1">15+</h5>
                                                <small class="text-muted">Webhook URLs</small>
                                            </div>
                                            <div class="col-md-3">
                                                <h5 class="text-info mb-1">100+</h5>
                                                <small class="text-muted">Total API Routes</small>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- API Documentation Note -->
                                    <div class="mt-3">
                                        <div class="alert alert-info">
                                            <i class="fas fa-info-circle me-2"></i>
                                            <strong>Note:</strong> Sebagian besar API memerlukan autentikasi. Webhook endpoints tidak memerlukan autentikasi.
                                            Gunakan token CSRF untuk API yang menggunakan session-based authentication.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Special Routes -->
                        <div class="col-md-6 mb-4 link-category" data-category="special">
                            <div class="card border-warning">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-star me-2"></i>Special Routes
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="list-group list-group-flush">
                                        <a href="/test-simple" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-vial me-2 text-warning"></i>Test Simple
                                        </a>
                                        <a href="/health" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-heartbeat me-2 text-warning"></i>Health Check
                                        </a>
                                        <a href="/login" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-sign-in-alt me-2 text-warning"></i>Login
                                        </a>
                                        <a href="/register" class="list-group-item list-group-item-action" target="_blank">
                                            <i class="fas fa-user-plus me-2 text-warning"></i>Register
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Statistics -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="text-primary">
                                                <i class="fas fa-link fa-2x mb-2"></i>
                                                <h4>200+</h4>
                                                <small>Total Routes</small>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-success">
                                                <i class="fas fa-cogs fa-2x mb-2"></i>
                                                <h4>25+</h4>
                                                <small>Controllers</small>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-warning">
                                                <i class="fas fa-code fa-2x mb-2"></i>
                                                <h4>50+</h4>
                                                <small>API Endpoints</small>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="text-info">
                                                <i class="fas fa-globe fa-2x mb-2"></i>
                                                <h4>15+</h4>
                                                <small>Public Pages</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchLinks');
    const categoryFilter = document.getElementById('filterCategory');
    const linkCategories = document.querySelectorAll('.link-category');
    
    function filterLinks() {
        const searchTerm = searchInput.value.toLowerCase();
        const selectedCategory = categoryFilter.value;
        
        linkCategories.forEach(category => {
            const categoryData = category.getAttribute('data-category');
            const categoryText = category.textContent.toLowerCase();
            
            let shouldShow = true;
            
            // Filter by category
            if (selectedCategory && selectedCategory !== categoryData) {
                shouldShow = false;
            }
            
            // Filter by search term
            if (searchTerm && !categoryText.includes(searchTerm)) {
                shouldShow = false;
            }
            
            category.style.display = shouldShow ? 'block' : 'none';
        });
    }
    
    searchInput.addEventListener('input', filterLinks);
    categoryFilter.addEventListener('change', filterLinks);
});
</script>

<style>
.link-category {
    transition: all 0.3s ease;
}

.link-category:hover {
    transform: translateY(-2px);
}

.list-group-item-action:hover {
    background-color: rgba(0,123,255,.1);
}

.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.125);
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
</style>
@endsection