@extends('layouts.admin')

@section('title', 'Ringkasan Sistem')
@section('page_title', 'Ringkasan Sistem & Performa')

@push('styles')
<style>
    .ax-dash-insights-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: var(--ax-space-6);
        margin-bottom: var(--ax-space-6);
    }
    @media (max-width: 900px) {
        .ax-dash-insights-grid {
            grid-template-columns: 1fr;
            gap: var(--ax-space-4);
        }
    }
    @media (max-width: 576px) {
        .ax-dash-grid {
            grid-template-columns: 1fr !important;
        }
        .ax-page-head__title {
            font-size: 1.6rem !important;
        }
    }
</style>
@endpush

@section('admin_content')
<div>
    <!-- Page Header & Actions -->
    <div class="ax-page-head" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-page-head__row">
            <div>
                <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">Ringkasan Sistem</h1>
                <p class="ax-page-head__subtitle">Pantau performa penjualan paket dan pembuatan undangan pernikahan Janoer Koening.</p>
            </div>
            <div class="ax-page-head__actions">
                <a href="{{ route('admin.packages') }}" class="ax-btn ax-btn--secondary ax-btn--sm">
                    <i data-lucide="badge-percent" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Kelola Paket</span>
                </a>
                <a href="{{ route('admin.templates') }}" class="ax-btn ax-btn--primary ax-btn--sm">
                    <i data-lucide="plus" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Tambah Template</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 4 High-Impact KPI Cards -->
    <div class="ax-dash-grid" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ax-space-4); margin-bottom: var(--ax-space-6);">
        
        <!-- Total Pendapatan -->
        <section class="ax-card" role="region">
            <div class="ax-card__body">
                <div class="ax-kpi">
                    <div class="ax-kpi__top">
                        <span class="ax-kpi__icon ax-kpi__icon--c1">
                            <i data-lucide="wallet" style="width:20px;height:20px;"></i>
                        </span>
                        <span class="ax-kpi__label">Total Pendapatan</span>
                        <span class="ax-badge ax-badge--success ax-badge--pill">
                            {{ $stats['paid_orders'] }} Transaksi
                        </span>
                    </div>
                    <div class="ax-kpi__value font-heading" style="color:var(--ax-accent); font-size:1.75rem;">
                        Rp {{ number_format($stats['total_revenue'], 0, ',', '.') }}
                    </div>
                    <div class="ax-kpi__caption">
                        Akumulasi pembayaran pesanan sukses
                    </div>
                </div>
            </div>
        </section>

        <!-- Klien Terdaftar -->
        <section class="ax-card" role="region">
            <div class="ax-card__body">
                <div class="ax-kpi">
                    <div class="ax-kpi__top">
                        <span class="ax-kpi__icon ax-kpi__icon--c2">
                            <i data-lucide="users" style="width:20px;height:20px;"></i>
                        </span>
                        <span class="ax-kpi__label">Klien Pengantin</span>
                        <span class="ax-badge ax-badge--accent ax-badge--pill">Aktif</span>
                    </div>
                    <div class="ax-kpi__value font-heading" style="font-size:1.75rem;">
                        {{ $stats['total_users'] }} <span style="font-size:var(--ax-text-sm); font-weight:normal; color:var(--ax-text-muted);">Akun</span>
                    </div>
                    <div class="ax-kpi__caption">
                        Total mempelai yang mendaftar
                    </div>
                </div>
            </div>
        </section>

        <!-- Undangan Terbit -->
        <section class="ax-card" role="region">
            <div class="ax-card__body">
                <div class="ax-kpi">
                    <div class="ax-kpi__top">
                        <span class="ax-kpi__icon ax-kpi__icon--c3">
                            <i data-lucide="globe-2" style="width:20px;height:20px;"></i>
                        </span>
                        <span class="ax-kpi__label">Undangan Terbit</span>
                        <span class="ax-badge ax-badge--success ax-badge--pill">Online</span>
                    </div>
                    <div class="ax-kpi__value font-heading" style="font-size:1.75rem;">
                        {{ $stats['published_invitations'] }} <span style="font-size:var(--ax-text-sm); font-weight:normal; color:var(--ax-text-muted);">/ {{ $stats['total_invitations'] }} draft</span>
                    </div>
                    <div class="ax-kpi__caption">
                        Telah dipublish dan siap disebarkan
                    </div>
                </div>
            </div>
        </section>

        <!-- Total Pesanan -->
        <section class="ax-card" role="region">
            <div class="ax-card__body">
                <div class="ax-kpi">
                    <div class="ax-kpi__top">
                        <span class="ax-kpi__icon ax-kpi__icon--c4">
                            <i data-lucide="shopping-bag" style="width:20px;height:20px;"></i>
                        </span>
                        <span class="ax-kpi__label">Total Pesanan</span>
                        <span class="ax-badge ax-badge--neutral ax-badge--pill">Semua Invoice</span>
                    </div>
                    <div class="ax-kpi__value font-heading" style="font-size:1.75rem;">
                        {{ $stats['total_orders'] }}
                    </div>
                    <div class="ax-kpi__caption">
                        Riwayat pesanan yang terdaftar
                    </div>
                </div>
            </div>
        </section>

    </div>

    <!-- Charts & Quick Insights Grid -->
    <div class="ax-dash-insights-grid" style="margin-bottom:var(--ax-space-6);">
        <!-- Chart: Order & Revenue Trend -->
        <section class="ax-card" role="region">
            <div class="ax-card__header">
                <div class="ax-card__titles">
                    <span class="ax-card__eyebrow">Aktivitas Mingguan</span>
                    <h2 class="ax-card__title">Performa Penjualan &amp; Traffic</h2>
                </div>
                <div class="ax-card__actions">
                    <span class="ax-badge ax-badge--accent">Live System</span>
                </div>
            </div>
            <div class="ax-card__body">
                <div id="ax-revenue-chart" style="min-height: 240px;" aria-label="Grafik Pendapatan"></div>
            </div>
        </section>

        <!-- Quick Summary Card -->
        <section class="ax-card" role="region">
            <div class="ax-card__header">
                <div class="ax-card__titles">
                    <span class="ax-card__eyebrow">Status Sistem</span>
                    <h2 class="ax-card__title">Integrasi Layanan</h2>
                </div>
            </div>
            <div class="ax-card__body" style="display:flex; flex-direction:column; gap:var(--ax-space-3);">
                <div style="display:flex; justify-content:space-between; align-items:center; padding:var(--ax-space-2) 0; border-bottom:1px solid var(--ax-border);">
                    <span style="font-size:var(--ax-text-xs); color:var(--ax-text-muted);">Payment Gateway QRIS</span>
                    <span class="ax-badge ax-badge--success ax-badge--pill">Aktif (Sandbox)</span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; padding:var(--ax-space-2) 0; border-bottom:1px solid var(--ax-border);">
                    <span style="font-size:var(--ax-text-xs); color:var(--ax-text-muted);">WhatsApp Generator</span>
                    <span class="ax-badge ax-badge--success ax-badge--pill">Siap Kirim</span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; padding:var(--ax-space-2) 0; border-bottom:1px solid var(--ax-border);">
                    <span style="font-size:var(--ax-text-xs); color:var(--ax-text-muted);">Fitur Drag &amp; Drop Tier</span>
                    <span class="ax-badge ax-badge--accent ax-badge--pill">Tersinkronisasi</span>
                </div>
                <div style="display:flex; justify-content:space-between; align-items:center; padding:var(--ax-space-2) 0;">
                    <span style="font-size:var(--ax-text-xs); color:var(--ax-text-muted);">Storage Galeri Cloud</span>
                    <span class="ax-badge ax-badge--info ax-badge--pill">Lokal Terproteksi</span>
                </div>
            </div>
        </section>
    </div>

    <!-- Recent Orders Table -->
    <section class="ax-card" role="region">
        <div class="ax-card__header">
            <div class="ax-card__titles">
                <span class="ax-card__eyebrow">Daftar Invoice Terkini</span>
                <h3 class="ax-card__title">Transaksi &amp; Pembayaran Pelanggan</h3>
            </div>
            <div class="ax-card__actions">
                <a href="{{ route('admin.orders') }}" class="ax-btn ax-btn--sm ax-btn--ghost">
                    <span>Lihat Semua Transaksi</span>
                    <i data-lucide="arrow-right" style="width:14px;height:14px;"></i>
                </a>
            </div>
        </div>
        <!-- Mobile Table Swipe Hint -->
        <div style="display:none;" class="mobile-table-swipe-hint">
            <style>
                @media (max-width: 768px) {
                    .mobile-table-swipe-hint {
                        display: flex !important;
                        align-items: center;
                        justify-content: space-between;
                        padding: 8px 16px;
                        background: var(--ax-surface-subtle);
                        border-bottom: 1px solid var(--ax-border);
                        font-size: 11px;
                        color: var(--ax-text-muted);
                    }
                }
            </style>
            <span style="display:flex; align-items:center; gap:6px;">
                <i data-lucide="chevrons-left-right" style="width:14px;height:14px; color:var(--ax-accent);"></i> Geser tabel horizontal untuk melihat rincian
            </span>
            <span class="ax-badge ax-badge--neutral ax-badge--pill" style="font-size:9px;">{{ $latestOrders->count() }} Data</span>
        </div>
        <div class="ax-card__body" style="padding:0; overflow-x:auto;">
            <table style="width:100%; border-collapse:collapse; text-align:left; font-size:var(--ax-text-xs);">
                <thead>
                    <tr style="background:var(--ax-surface-subtle); border-bottom:1px solid var(--ax-border); text-transform:uppercase; font-size:10px; letter-spacing:0.05em; color:var(--ax-text-muted);">
                        <th style="padding:12px 20px;">Kode Order</th>
                        <th style="padding:12px 20px;">Nama Klien</th>
                        <th style="padding:12px 20px;">Paket &amp; Template</th>
                        <th style="padding:12px 20px;">Jumlah</th>
                        <th style="padding:12px 20px;">Status QRIS</th>
                        <th style="padding:12px 20px; text-align:right;">Waktu</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($latestOrders as $ord)
                        <tr style="border-bottom:1px solid var(--ax-border); transition:background var(--ax-motion-instant);">
                            <td style="padding:14px 20px; font-family:var(--ax-font-mono); font-weight:600; color:var(--ax-text-strong);">
                                {{ $ord->order_code }}
                            </td>
                            <td style="padding:14px 20px;">
                                <strong style="color:var(--ax-text-strong); display:block;">{{ $ord->user->name }}</strong>
                                <span style="font-size:11px; color:var(--ax-text-muted);">{{ $ord->user->email }}</span>
                            </td>
                            <td style="padding:14px 20px;">
                                <span style="font-weight:500;">{{ $ord->package->name }}</span>
                                <span style="font-size:11px; color:var(--ax-text-muted); display:block;">({{ $ord->template->name }})</span>
                            </td>
                            <td style="padding:14px 20px; font-weight:700; color:var(--ax-accent);">
                                Rp {{ number_format($ord->total_amount, 0, ',', '.') }}
                            </td>
                            <td style="padding:14px 20px;">
                                <span class="ax-badge {{ $ord->payment_status == 'paid' ? 'ax-badge--success' : 'ax-badge--warning' }} ax-badge--pill">
                                    {{ strtoupper($ord->payment_status) }}
                                </span>
                            </td>
                            <td style="padding:14px 20px; text-align:right; color:var(--ax-text-muted); font-size:11px;">
                                {{ $ord->created_at->format('d M Y, H:i') }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="padding:32px; text-align:center; color:var(--ax-text-subtle);">
                                Belum ada transaksi terkini.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>
@endsection

@push('scripts')
<script type="module">
    import { n as renderChart } from "{{ asset('admin-assets/charts-DWO_GKqZ.js') }}";
    
    const chartEl = document.getElementById('ax-revenue-chart');
    if (chartEl) {
        renderChart(chartEl, 'area', [
            { name: 'Transaksi Masuk', data: [12, 19, 15, 27, 34, 42, {{ $stats['paid_orders'] ?? 45 }}] }
        ], {
            height: 240,
            accent: true,
            apex: {
                xaxis: { categories: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'] }
            }
        });
    }
</script>
@endpush