@extends('layouts.authenticated')

@section('title', 'Laporan')
@section('page-title', 'Laporan & Analisis')

@section('page-content')
@php
    $paymentMethodChartLabels = $paymentMethods->pluck('label')->values();
    $paymentMethodChartValues = $paymentMethods->pluck('total_sales')->map(fn ($value) => (float) $value)->values();

    $statusChartLabels = $statusBreakdown->only(['completed', 'cancelled'])->values()->pluck('label');
    $statusChartCounts = $statusBreakdown->only(['completed', 'cancelled'])->values()->pluck('count');

    $topProductChartLabels = $topProducts->pluck('product_name')->values();
    $topProductChartValues = $topProducts->pluck('total_revenue')->map(fn ($value) => (float) $value)->values();

    $topCashierChartLabels = $topCashiers->pluck('name')->values();
    $topCashierChartValues = $topCashiers->pluck('total_sales')->map(fn ($value) => (float) $value)->values();

    $branchChartLabels = $branchPerformance->pluck('name')->values();
    $branchChartValues = $branchPerformance->pluck('total_sales')->map(fn ($value) => (float) $value)->values();

    $salesTrendLabels = $salesTrend->pluck('label')->values();
    $salesTrendValues = $salesTrend->pluck('total')->map(fn ($value) => (float) $value)->values();

    $reportChartData = [
        'salesTrendLabels' => $salesTrendLabels,
        'salesTrendValues' => $salesTrendValues,
        'paymentMethodLabels' => $paymentMethodChartLabels,
        'paymentMethodValues' => $paymentMethodChartValues,
        'statusLabels' => $statusChartLabels,
        'statusValues' => $statusChartCounts,
        'topProductLabels' => $topProductChartLabels,
        'topProductValues' => $topProductChartValues,
        'topCashierLabels' => $topCashierChartLabels,
        'topCashierValues' => $topCashierChartValues,
        'branchLabels' => $branchChartLabels,
        'branchValues' => $branchChartValues,
    ];
@endphp

<div id="reports-page"
     class="relative space-y-6 animate-fade-in"
     x-data='reportsPage({
         dateFrom: @json($dateFrom instanceof \Carbon\Carbon ? $dateFrom->format('Y-m-d') : $dateFrom),
         dateTo: @json($dateTo instanceof \Carbon\Carbon ? $dateTo->format('Y-m-d') : $dateTo),
         branchId: @json((string) ($branchId ?? '')),
         cashierId: @json((string) ($cashierId ?? '')),
     })'
     x-init="init()">
    <div id="reports-loading" class="reports-indicator fixed inset-0 left-0 lg:left-64 top-24 z-40 flex items-start justify-center pt-6 bg-white/55 dark:bg-slate-950/55 backdrop-blur-sm">
        <div class="flex items-center gap-3 rounded-full border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 px-4 py-3 shadow-2xl">
            <svg class="h-5 w-5 animate-spin text-blue-600" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-80" d="M22 12a10 10 0 0 1-10 10" stroke="currentColor" stroke-width="4" stroke-linecap="round"></path>
            </svg>
            <div>
                <p class="text-sm font-semibold text-slate-900 dark:text-white">Memperbarui laporan</p>
                <p class="text-xs text-slate-500 dark:text-slate-400">Mengambil data terbaru...</p>
            </div>
        </div>
    </div>
    <script type="application/json" data-reports-data>
        @json($reportChartData)
    </script>

    <style>
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fade-in 0.25s ease-out;
        }
        .report-grid {
            display: grid;
            gap: 1rem;
        }
        .report-card {
            position: relative;
            overflow: hidden;
        }
        .report-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 28%);
            pointer-events: none;
        }
        .reports-indicator {
            opacity: 0;
            transition: opacity 180ms ease;
            pointer-events: none;
        }
        .htmx-request .reports-indicator,
        .reports-indicator.htmx-request {
            opacity: 1;
            pointer-events: auto;
        }
    </style>

    <!-- Hero -->
    <div class="relative overflow-hidden rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-sm">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.12),transparent_28%),radial-gradient(circle_at_bottom_left,rgba(16,185,129,0.10),transparent_26%)]"></div>
        <div class="relative p-6 lg:p-8">
            <div class="grid gap-6 xl:grid-cols-[minmax(0,1.55fr)_minmax(320px,0.95fr)] xl:items-start">
                <div class="max-w-3xl">
                    <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-300 text-xs font-semibold tracking-wide uppercase">
                        Laporan & Analisis
                    </div>
                    <h1 class="mt-4 text-2xl lg:text-3xl font-semibold text-slate-900 dark:text-white leading-tight">
                        Dashboard analitik penjualan yang lengkap
                    </h1>
                    <p class="mt-3 text-sm lg:text-base text-slate-600 dark:text-slate-400 leading-relaxed max-w-2xl">
                        Ringkasan performa penjualan, komposisi transaksi, produk terbaik, dan kontribusi tiap cabang dalam periode
                        <span class="font-semibold text-slate-900 dark:text-white">{{ $periodLabel }}</span>.
                    </p>
                </div>

                <div class="space-y-4 xl:pl-2">
                    <div class="flex flex-wrap items-center justify-start xl:justify-end gap-2">
                        <a href="{{ route('reports.export.pdf', request()->query()) }}"
                           target="_blank"
                           rel="noopener"
                           class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl text-sm font-semibold border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors shadow-sm">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 3v9m0 0l-3-3m3 3l3-3m-9 8h12a2 2 0 002-2v-3H6v3a2 2 0 002 2z"></path>
                            </svg>
                            PDF
                        </a>
                        <a href="{{ route('reports.export.excel', request()->query()) }}"
                           target="_blank"
                           rel="noopener"
                           class="inline-flex items-center gap-2 px-3.5 py-2 rounded-xl text-sm font-semibold border border-emerald-200 dark:border-emerald-900/50 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-900/30 transition-colors shadow-sm">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 3v9m0 0l-3-3m3 3l3-3M5 14h14a2 2 0 012 2v2H3v-2a2 2 0 012-2z"></path>
                            </svg>
                            Excel
                        </a>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-700/40 p-4">
                            <p class="text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Cabang</p>
                            <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">
                                {{ $selectedBranch?->name ?? 'Semua Cabang' }}
                            </p>
                        </div>
                        <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-700/40 p-4">
                            <p class="text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Periode</p>
                            <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">{{ $periodLabel }}</p>
                        </div>
                        <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-700/40 p-4">
                            <p class="text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Transaksi</p>
                            <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">{{ number_format($totalTransactions) }}</p>
                        </div>
                        <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-slate-50/80 dark:bg-slate-700/40 p-4">
                            <p class="text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Completion</p>
                            <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">{{ number_format($completionRate, 1) }}%</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <form id="reports-filters"
          method="GET"
          action="{{ route('reports.index') }}"
          x-ref="filtersForm"
          hx-get="{{ route('reports.index') }}"
          hx-target="#reports-page"
          hx-select="#reports-page"
          hx-swap="outerHTML"
          hx-push-url="true"
          hx-indicator="#reports-loading"
          class="relative overflow-hidden rounded-2xl border border-slate-200/70 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 shadow-sm">
        <div class="flex flex-col xl:flex-row xl:items-end gap-4">
            <div class="flex-1">
                <div class="flex items-center justify-between gap-3 mb-3">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Filter Laporan</h2>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Atur periode dan cabang untuk melihat analisis yang tepat.</p>
                    </div>
                    <div class="hidden md:flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-slate-100 dark:bg-slate-700/60">
                            <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                            Real-time filter
                        </span>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                    <div>
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5 block">Dari</label>
                        <input type="date" name="date_from" x-model="dateFrom"
                               @change="queueSubmit()"
                               class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    <div>
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5 block">Sampai</label>
                        <input type="date" name="date_to" x-model="dateTo"
                               @change="queueSubmit()"
                               class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    </div>
                    @if($canSelectBranch)
                    <div>
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5 block">Cabang</label>
                        <select name="branch_id" x-model="branchId"
                                @change="queueSubmit()"
                                class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Semua Cabang</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @endif
                    <div>
                        <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5 block">Kasir</label>
                        <select name="cashier_id" x-model="cashierId"
                                @change="queueSubmit()"
                                class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Semua Kasir</option>
                            @forelse($cashiers as $cashier)
                                <option value="{{ $cashier->id }}">
                                    {{ $cashier->name }}{{ $cashier->branch?->name ? ' - ' . $cashier->branch->name : '' }}
                                </option>
                            @empty
                                <option value="" disabled>Tidak ada kasir</option>
                            @endforelse
                        </select>
                    </div>
                </div>
            </div>

            <div class="xl:w-[380px]">
                <label class="text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2 block">Preset Cepat</label>
                <div class="grid grid-cols-2 sm:grid-cols-5 xl:grid-cols-2 gap-2">
                    <button type="button" @click="applyPreset('today')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">Hari ini</button>
                    <button type="button" @click="applyPreset('7d')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">7 hari</button>
                    <button type="button" @click="applyPreset('30d')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">30 hari</button>
                    <button type="button" @click="applyPreset('month')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">Bulan ini</button>
                    <button type="button" @click="applyPreset('year')" class="px-3 py-2 rounded-xl text-sm font-medium bg-slate-100 hover:bg-slate-200 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">Tahun ini</button>
                    <div class="col-span-2 xl:col-span-2 px-4 py-2.5 rounded-xl text-xs text-slate-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-700/40 border border-dashed border-slate-200 dark:border-slate-700">
                        Filter diterapkan otomatis saat nilai berubah.
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- KPI -->
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
        <div class="report-card rounded-2xl p-5 text-white bg-gradient-to-br from-blue-600 to-indigo-700 shadow-lg">
            <p class="text-sm text-white/75 font-medium">Total Penjualan</p>
            <p class="mt-2 text-2xl font-bold">Rp {{ number_format($totalSales, 0, ',', '.') }}</p>
            <p class="mt-1 text-xs text-white/75">{{ number_format($completedTransactions) }} transaksi selesai</p>
        </div>
        <div class="report-card rounded-2xl p-5 text-white bg-gradient-to-br from-emerald-500 to-teal-600 shadow-lg">
            <p class="text-sm text-white/75 font-medium">Rata-rata Transaksi</p>
            <p class="mt-2 text-2xl font-bold">Rp {{ number_format($averageOrderValue, 0, ',', '.') }}</p>
            <p class="mt-1 text-xs text-white/75">Nilai per transaksi selesai</p>
        </div>
        <div class="report-card rounded-2xl p-5 text-white bg-gradient-to-br from-violet-500 to-purple-600 shadow-lg">
            <p class="text-sm text-white/75 font-medium">Item Terjual</p>
            <p class="mt-2 text-2xl font-bold">{{ number_format($totalItemsSold) }}</p>
            <p class="mt-1 text-xs text-white/75">Rata-rata {{ number_format($averageItemsPerTransaction, 1) }} item/transaksi</p>
        </div>
        <div class="report-card rounded-2xl p-5 text-white bg-gradient-to-br from-amber-500 to-orange-600 shadow-lg">
            <p class="text-sm text-white/75 font-medium">Kelengkapan</p>
            <p class="mt-2 text-2xl font-bold">{{ number_format($completionRate, 1) }}%</p>
            <p class="mt-1 text-xs text-white/75">Tingkat transaksi selesai</p>
        </div>
    </div>

    <!-- Secondary KPI -->
    <div class="grid grid-cols-2 xl:grid-cols-4 gap-4">
        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 shadow-sm">
            <p class="text-sm text-slate-500 dark:text-slate-400">Dibatalkan</p>
            <p class="mt-2 text-2xl font-semibold text-slate-900 dark:text-white">{{ number_format($cancelledTransactions) }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 shadow-sm">
            <p class="text-sm text-slate-500 dark:text-slate-400">Selesai</p>
            <p class="mt-2 text-2xl font-semibold text-slate-900 dark:text-white">{{ number_format($completedTransactions) }}</p>
        </div>
        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 shadow-sm">
            <p class="text-sm text-slate-500 dark:text-slate-400">Total Dibayar</p>
            <p class="mt-2 text-lg font-semibold text-slate-900 dark:text-white">Rp {{ number_format($totalPaid, 0, ',', '.') }}</p>
            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                Diskon Rp {{ number_format($totalDiscount, 0, ',', '.') }} | Pajak Rp {{ number_format($totalTax, 0, ',', '.') }}
            </p>
        </div>
    </div>

    <!-- Main Chart + Insight -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
        <div class="xl:col-span-2 rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 shadow-sm">
            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900 dark:text-white">Tren Penjualan</h2>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Model grafik {{ $salesTrendLabel }} untuk periode terpilih</p>
                </div>
                <div class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-slate-50 dark:bg-slate-700/40 text-xs text-slate-600 dark:text-slate-300">
                    <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
                    Pendapatan berhasil
                </div>
            </div>
            <div class="h-80">
                <canvas id="salesTrendChart"></canvas>
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 shadow-sm">
            <div class="flex items-center justify-between mb-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900 dark:text-white">Insight Cepat</h2>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Sorotan otomatis dari periode ini</p>
                </div>
            </div>

            <div class="space-y-4">
                <div class="rounded-2xl bg-slate-50 dark:bg-slate-700/40 p-4">
                    <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Produk Teratas</p>
                    <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">
                        {{ $primaryInsight?->product_name ?? 'Belum ada data' }}
                    </p>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                        {{ $primaryInsight ? 'Rp ' . number_format($primaryInsight->total_revenue, 0, ',', '.') : 'Data penjualan belum tersedia' }}
                    </p>
                </div>
                <div class="rounded-2xl bg-slate-50 dark:bg-slate-700/40 p-4">
                    <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Metode Dominan</p>
                    <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">
                        {{ $bestPaymentMethod?->label ?? 'Belum ada data' }}
                    </p>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                        {{ $bestPaymentMethod ? number_format($bestPaymentMethod->total_transactions) . ' transaksi' : 'Data penjualan belum tersedia' }}
                    </p>
                </div>
                <div class="rounded-2xl bg-slate-50 dark:bg-slate-700/40 p-4">
                    <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Kasir Terbaik</p>
                    <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">
                        {{ $bestCashier?->name ?? 'Belum ada data' }}
                    </p>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                        {{ $bestCashier ? 'Rp ' . number_format($bestCashier->total_sales, 0, ',', '.') : 'Data penjualan belum tersedia' }}
                    </p>
                </div>
                @if($topBranch)
                <div class="rounded-2xl bg-slate-50 dark:bg-slate-700/40 p-4">
                    <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Cabang Terbaik</p>
                    <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">
                        {{ $topBranch->name }}
                    </p>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                        Rp {{ number_format($topBranch->total_sales, 0, ',', '.') }}
                    </p>
                </div>
                @endif
                <div class="rounded-2xl bg-slate-50 dark:bg-slate-700/40 p-4">
                    <p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">Status Terbanyak</p>
                    <p class="mt-1 text-sm font-semibold text-slate-900 dark:text-white">
                        {{ $mostActiveStatus['label'] ?? 'Belum ada data' }}
                    </p>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                        {{ isset($mostActiveStatus['count']) ? number_format($mostActiveStatus['count']) . ' transaksi' : 'Data penjualan belum tersedia' }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 shadow-sm">
            <div class="mb-4">
                <h2 class="text-base font-semibold text-slate-900 dark:text-white">Komposisi Metode Pembayaran</h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Proporsi penjualan berdasarkan kanal pembayaran</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-center">
                <div class="h-64">
                    <canvas id="paymentMethodChart"></canvas>
                </div>
                <div class="space-y-3">
                    @foreach($paymentMethods as $pm)
                    <div class="flex items-center justify-between p-3.5 rounded-xl bg-slate-50 dark:bg-slate-700/40">
                        <div class="flex items-center gap-3">
                            <div class="w-3 h-3 rounded-full 
                                @if($pm->payment_method === 'cash') bg-blue-500 
                                @elseif($pm->payment_method === 'qris') bg-emerald-500 
                                @else bg-violet-500 
                                @endif"></div>
                            <div>
                                <p class="text-xs text-slate-500 dark:text-slate-400 font-semibold uppercase tracking-wider">{{ $pm->label }}</p>
                                <p class="text-sm font-bold text-slate-900 dark:text-white mt-0.5">Rp {{ number_format($pm->total_sales, 0, ',', '.') }}</p>
                            </div>
                        </div>
                        <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300">
                            {{ $pm->total_transactions }} trx
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 shadow-sm">
            <div class="mb-4">
                <h2 class="text-base font-semibold text-slate-900 dark:text-white">Status Transaksi</h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Distribusi status transaksi pada periode ini</p>
            </div>
            <div class="h-72">
                <canvas id="statusChart"></canvas>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 shadow-sm">
            <div class="mb-4">
                <h2 class="text-base font-semibold text-slate-900 dark:text-white">Produk Terlaris</h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Grafik batang horizontal berdasarkan revenue</p>
            </div>
            <div class="h-80">
                <canvas id="topProductsChart"></canvas>
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 shadow-sm">
            <div class="mb-4">
                <h2 class="text-base font-semibold text-slate-900 dark:text-white">Kasir Terbaik</h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Perbandingan kontribusi kasir berdasarkan total penjualan</p>
            </div>
            <div class="h-80">
                <canvas id="topCashiersChart"></canvas>
            </div>
        </div>
    </div>

    @if($branchPerformance->isNotEmpty())
    <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-6 shadow-sm">
        <div class="mb-4">
            <h2 class="text-base font-semibold text-slate-900 dark:text-white">Performa Cabang</h2>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Perbandingan antar cabang untuk periode yang sama</p>
        </div>
        <div class="h-80">
            <canvas id="branchPerformanceChart"></canvas>
        </div>
    </div>
    @endif

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 overflow-hidden shadow-sm">
            <div class="px-6 py-5 border-b border-slate-200 dark:border-slate-700">
                <h2 class="text-base font-semibold text-slate-900 dark:text-white">Transaksi Terbaru</h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Aktivitas transaksi terkini dalam periode terpilih</p>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-slate-50 dark:bg-slate-700/50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Invoice</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Tanggal</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Kasir</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Total</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                        @forelse($recentTransactions as $transaction)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-semibold text-blue-600 dark:text-blue-400 font-mono">{{ $transaction->invoice_number }}</div>
                                <div class="text-xs text-slate-400">{{ $transaction->branch?->name ?? '-' }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                {{ $transaction->created_at->format('d M Y, H:i') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-slate-900 dark:text-white">{{ $transaction->user?->name ?? '-' }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-semibold text-slate-900 dark:text-white">Rp {{ number_format($transaction->total, 0, ',', '.') }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold
                                    @if($transaction->status === 'completed') bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400
                                    @elseif($transaction->status === 'cancelled') bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400
                                    @else bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300
                                    @endif">
                                    {{ ucfirst($transaction->status) }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-6 py-10 text-center text-sm text-slate-500 dark:text-slate-400">
                                Belum ada transaksi pada periode ini.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 overflow-hidden shadow-sm">
            <div class="px-6 py-5 border-b border-slate-200 dark:border-slate-700">
                <h2 class="text-base font-semibold text-slate-900 dark:text-white">Mitra Teratas</h2>
                <p class="text-sm text-slate-500 dark:text-slate-400 mt-0.5">Ringkasan performa mitra berdasarkan total penjualan</p>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-slate-50 dark:bg-slate-700/50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Mitra</th>
                            <th class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Produk</th>
                            <th class="px-6 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Penjualan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-200 dark:divide-slate-700">
                        @forelse($topPartners as $partner)
                        <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30">
                            <td class="px-6 py-4">
                                <div class="text-sm font-semibold text-slate-900 dark:text-white">{{ $partner->name }}</div>
                                <div class="text-xs text-slate-400">{{ $partner->code }}</div>
                            </td>
                            <td class="px-6 py-4 text-sm text-slate-600 dark:text-slate-400">{{ number_format($partner->products_count ?? 0) }}</td>
                            <td class="px-6 py-4 text-right text-sm font-semibold text-slate-900 dark:text-white">Rp {{ number_format($partner->total_sales, 0, ',', '.') }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="px-6 py-10 text-center text-sm text-slate-500 dark:text-slate-400">
                                Belum ada data mitra.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
window.reportsPage = function(initial = {}) {
    return {
        dateFrom: initial.dateFrom ?? '',
        dateTo: initial.dateTo ?? '',
        branchId: initial.branchId ?? '',
        cashierId: initial.cashierId ?? '',
        submitTimer: null,
        init() {
            if (typeof window.initReportsCharts === 'function') {
                window.initReportsCharts(this.$el);
            }
        },
        queueSubmit(delay = 250) {
            if (this.submitTimer) {
                window.clearTimeout(this.submitTimer);
            }

            this.submitTimer = window.setTimeout(() => {
                this.submitTimer = null;
                this.submitFilters();
            }, delay);
        },
        submitFilters() {
            const form = this.$refs.filtersForm;
            if (!form) {
                return;
            }

            if (typeof form.requestSubmit === 'function') {
                form.requestSubmit();
                return;
            }

            form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
        },
        applyPreset(preset) {
            const today = new Date();
            const toISO = (value) => value.toISOString().slice(0, 10);
            const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
            const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
            const startOfYear = new Date(today.getFullYear(), 0, 1);

            if (preset === 'today') {
                this.dateFrom = toISO(today);
                this.dateTo = toISO(today);
            } else if (preset === '7d') {
                const start = new Date(today);
                start.setDate(today.getDate() - 6);
                this.dateFrom = toISO(start);
                this.dateTo = toISO(today);
            } else if (preset === '30d') {
                const start = new Date(today);
                start.setDate(today.getDate() - 29);
                this.dateFrom = toISO(start);
                this.dateTo = toISO(today);
            } else if (preset === 'month') {
                this.dateFrom = toISO(startOfMonth);
                this.dateTo = toISO(endOfMonth);
            } else if (preset === 'year') {
                this.dateFrom = toISO(startOfYear);
                this.dateTo = toISO(today);
            }

            this.$nextTick(() => this.queueSubmit(100));
        }
    };
};

window.initReportsCharts = function(root = document) {
    if (typeof Chart === 'undefined') {
        return;
    }

    const container = root instanceof Element ? root : document;
    const dataNode = container.querySelector('[data-reports-data]');
    if (!dataNode) {
        return;
    }

    let data = {};
    try {
        data = JSON.parse(dataNode.textContent || '{}');
    } catch (error) {
        console.warn('Unable to parse report chart data', error);
        return;
    }

    const colors = {
        blue: '#2563eb',
        blueSoft: 'rgba(37, 99, 235, 0.12)',
        emerald: '#10b981',
        emeraldSoft: 'rgba(16, 185, 129, 0.12)',
        violet: '#8b5cf6',
        violetSoft: 'rgba(139, 92, 246, 0.12)',
        amber: '#f59e0b',
        amberSoft: 'rgba(245, 158, 11, 0.12)',
        slate: '#64748b',
        red: '#ef4444',
        orange: '#f97316',
        teal: '#14b8a6',
        cyan: '#06b6d4',
        lime: '#84cc16',
    };

    const baseGrid = {
        color: 'rgba(148, 163, 184, 0.15)',
        drawBorder: false
    };

    const currencyTooltip = (value) => `Rp ${Number(value).toLocaleString('id-ID')}`;

    if (window.__reportsCharts && Array.isArray(window.__reportsCharts)) {
        window.__reportsCharts.forEach((chart) => {
            try {
                chart.destroy();
            } catch (error) {
                console.warn('Unable to destroy report chart', error);
            }
        });
    }
    window.__reportsCharts = [];

    const registerChart = (chart) => {
        if (chart) {
            window.__reportsCharts.push(chart);
        }
        return chart;
    };

    const makeTrendChart = (canvasId, labels, values) => {
        const canvas = container.querySelector(`#${canvasId}`);
        if (!canvas) return null;

        const ctx = canvas.getContext('2d');
        const gradient = ctx.createLinearGradient(0, 0, 0, 320);
        gradient.addColorStop(0, 'rgba(37, 99, 235, 0.30)');
        gradient.addColorStop(1, 'rgba(37, 99, 235, 0.02)');

        return registerChart(new Chart(ctx, {
            type: 'line',
            data: {
                labels,
                datasets: [{
                    label: 'Penjualan',
                    data: values,
                    borderColor: colors.blue,
                    backgroundColor: gradient,
                    fill: true,
                    tension: 0.35,
                    borderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                    pointBackgroundColor: colors.blue,
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        displayColors: false,
                        backgroundColor: 'rgba(15, 23, 42, 0.95)',
                        padding: 12,
                        callbacks: {
                            label: (context) => currencyTooltip(context.parsed.y)
                        }
                    }
                },
                scales: {
                    x: { grid: { display: false }, ticks: { color: '#94a3b8' } },
                    y: {
                        beginAtZero: true,
                        grid: baseGrid,
                        ticks: {
                            color: '#94a3b8',
                            callback: (value) => `Rp ${Number(value).toLocaleString('id-ID')}`
                        }
                    }
                }
            }
        }));
    };

    const makeDoughnutChart = (canvasId, labels, values, palette) => {
        const canvas = container.querySelector(`#${canvasId}`);
        if (!canvas) return null;

        return registerChart(new Chart(canvas.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels,
                datasets: [{
                    data: values,
                    backgroundColor: palette,
                    borderWidth: 0,
                    hoverOffset: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '68%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#64748b',
                            usePointStyle: true,
                            boxWidth: 8,
                            boxHeight: 8
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(15, 23, 42, 0.95)',
                        padding: 12,
                        callbacks: {
                            label: (context) => {
                                const value = Number(context.raw || 0);
                                return `${context.label}: Rp ${value.toLocaleString('id-ID')}`;
                            }
                        }
                    }
                }
            }
        }));
    };

    const makeCountDoughnutChart = (canvasId, labels, values, palette) => {
        const canvas = container.querySelector(`#${canvasId}`);
        if (!canvas) return null;

        return registerChart(new Chart(canvas.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels,
                datasets: [{
                    data: values,
                    backgroundColor: palette,
                    borderWidth: 0,
                    hoverOffset: 6
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '68%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#64748b',
                            usePointStyle: true,
                            boxWidth: 8,
                            boxHeight: 8
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(15, 23, 42, 0.95)',
                        padding: 12,
                        callbacks: {
                            label: (context) => `${context.label}: ${Number(context.raw || 0).toLocaleString('id-ID')} transaksi`
                        }
                    }
                }
            }
        }));
    };

    const makeHorizontalBarChart = (canvasId, labels, values, color) => {
        const canvas = container.querySelector(`#${canvasId}`);
        if (!canvas) return null;

        return registerChart(new Chart(canvas.getContext('2d'), {
            type: 'bar',
            data: {
                labels,
                datasets: [{
                    label: 'Rp',
                    data: values,
                    backgroundColor: color,
                    borderRadius: 10,
                    borderSkipped: false
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(15, 23, 42, 0.95)',
                        padding: 12,
                        callbacks: {
                            label: (context) => currencyTooltip(context.parsed.x)
                        }
                    }
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        grid: baseGrid,
                        ticks: {
                            color: '#94a3b8',
                            callback: (value) => `Rp ${Number(value).toLocaleString('id-ID')}`
                        }
                    },
                    y: {
                        grid: { display: false },
                        ticks: {
                            color: '#64748b',
                            callback: function(value) {
                                const label = String(this.getLabelForValue ? this.getLabelForValue(value) : value);
                                return label.length > 24 ? `${label.slice(0, 24)}...` : label;
                            }
                        }
                    }
                }
            }
        }));
    };

    const makeVerticalBarChart = (canvasId, labels, values, color) => {
        const canvas = container.querySelector(`#${canvasId}`);
        if (!canvas) return null;

        return registerChart(new Chart(canvas.getContext('2d'), {
            type: 'bar',
            data: {
                labels,
                datasets: [{
                    label: 'Rp',
                    data: values,
                    backgroundColor: color,
                    borderRadius: 10,
                    borderSkipped: false
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        backgroundColor: 'rgba(15, 23, 42, 0.95)',
                        padding: 12,
                        callbacks: {
                            label: (context) => currencyTooltip(context.parsed.y)
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { display: false },
                        ticks: { color: '#64748b' }
                    },
                    y: {
                        beginAtZero: true,
                        grid: baseGrid,
                        ticks: {
                            color: '#94a3b8',
                            callback: (value) => `Rp ${Number(value).toLocaleString('id-ID')}`
                        }
                    }
                }
            }
        }));
    };

    makeTrendChart('salesTrendChart', data.salesTrendLabels || [], data.salesTrendValues || []);
    makeDoughnutChart(
        'paymentMethodChart',
        data.paymentMethodLabels || [],
        data.paymentMethodValues || [],
        [colors.blue, colors.emerald, colors.violet, colors.amber, colors.teal]
    );
    makeCountDoughnutChart(
        'statusChart',
        data.statusLabels || [],
        data.statusValues || [],
        [colors.emerald, colors.red]
    );
    makeHorizontalBarChart('topProductsChart', data.topProductLabels || [], data.topProductValues || [], colors.blueSoft);
    makeVerticalBarChart('topCashiersChart', data.topCashierLabels || [], data.topCashierValues || [], colors.violetSoft);

    if ((data.branchLabels || []).length && (data.branchValues || []).length) {
        makeHorizontalBarChart('branchPerformanceChart', data.branchLabels || [], data.branchValues || [], colors.emeraldSoft);
    }
};

if (!window.__reportsHtmxBound) {
    window.__reportsHtmxBound = true;

    document.body.addEventListener('htmx:afterSettle', (event) => {
        const target = (event.detail && event.detail.target) ? event.detail.target : event.target;
        if (!(target instanceof Element)) {
            return;
        }

        if (target.id !== 'reports-page' && !(typeof target.closest === 'function' && target.closest('#reports-page'))) {
            return;
        }

        const root = document.getElementById('reports-page');
        if (!root) {
            return;
        }

        if (typeof window.initReportsCharts === 'function') {
            window.initReportsCharts(root);
        }
    });
}
</script>
@endpush