@extends('layouts.backend')

@section('title', 'Analisis CRM & Laporan')

@section('content')
<div class="space-y-6 p-4">

    <!-- 🏷️ HEADER Halaman & Tombol Aksi -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center border-b pb-4 gap-4">
        <div>
            <h1 class="text-2xl font-black text-gray-800 tracking-tight">Analisis Pelanggan & Laporan CRM</h1>
            <p class="text-xs text-gray-500 font-medium">Data olahan dari performa loyalitas pelanggan dan penjualan Mega Mart.</p>
        </div>
        <div class="flex items-center gap-2">
            <!-- 📊 Tombol Cetak Analisis CRM Pelanggan Loyal -->
            <a href="{{ route('admin.laporan.pelanggan') }}" target="_blank" rel="noopener" class="bg-amber-600 hover:bg-amber-700 text-white text-xs font-bold px-4 py-2.5 rounded-xl shadow-sm transition flex items-center gap-1.5">
                ⭐ Cetak Pelanggan Loyal
            </a>
        </div>
    </div>

    <!-- 📊 RINGKASAN METRIK UTAMA (KARTU STATISTIK) -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white border p-5 rounded-2xl shadow-sm">
            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider block">Total Omset Sukses</span>
            <span class="text-2xl font-black text-blue-600">Rp {{ number_format($totalOmset, 0, ',', '.') }}</span>
        </div>
        <div class="bg-white border p-5 rounded-2xl shadow-sm">
            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider block">Volume Transaksi Sukses</span>
            <span class="text-2xl font-black text-gray-800">{{ $transaksiSuksesCount }} Pesanan</span>
        </div>
        <div class="bg-white border p-5 rounded-2xl shadow-sm">
            <span class="text-[10px] font-bold text-gray-400 uppercase tracking-wider block">Efektivitas Kupon CRM</span>
            <span class="text-2xl font-black text-emerald-600">{{ $kuponTerpakai }} Kali Diklaim</span>
        </div>
    </div>

    <!-- 📑 TABEL ANALISIS DETAIL CRM -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        <!-- 🌟 Blok Kiri: Top 5 Berdasarkan Poin -->
        <div class="bg-white border rounded-2xl p-4 space-y-3 shadow-sm">
            <h3 class="font-extrabold text-xs uppercase tracking-wider text-gray-400 border-b pb-2 flex items-center gap-1">
                <span>⭐ Top 5 Member (Poin Loyalitas)</span>
            </h3>
            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead>
                        <tr class="bg-gray-50 text-gray-500 font-bold border-b">
                            <th class="p-2">Nama</th>
                            <th class="p-2">Email</th>
                            <th class="p-2 text-right">Akumulasi Poin</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y font-medium text-gray-700">
                        @forelse($topPoin as $p)
                        <tr class="hover:bg-gray-50/50 transition">
                            <td class="p-2 font-bold text-gray-900">{{ $p->nama }}</td>
                            <td class="p-2 font-mono text-gray-500">{{ $p->email }}</td>
                            <td class="p-2 text-right text-amber-600 font-black">{{ $p->poin_loyalitas }} Poin</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="p-4 text-center text-gray-400">Belum ada data pelanggan.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 💰 Blok Kanan: Top 5 Berdasarkan Monetary Spend -->
        <div class="bg-white border rounded-2xl p-4 space-y-3 shadow-sm">
            <h3 class="font-extrabold text-xs uppercase tracking-wider text-gray-400 border-b pb-2 flex items-center gap-1">
                <span>💰 Top 5 Member (Kontribusi Omset / Monetary)</span>
            </h3>
            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead>
                        <tr class="bg-gray-50 text-gray-500 font-bold border-b">
                            <th class="p-2">Nama</th>
                            <th class="p-2">No. HP</th>
                            <th class="p-2 text-right">Total Belanja</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y font-medium text-gray-700">
                        @forelse($topBelanja as $b)
                        <tr class="hover:bg-gray-50/50 transition">
                            <td class="p-2 font-bold text-gray-900">{{ $b->nama }}</td>
                            <td class="p-2 font-mono text-gray-500">{{ $b->no_hp ?? '-' }}</td>
                            <td class="p-2 text-right text-emerald-600 font-black">Rp {{ number_format($b->total_omset, 0, ',', '.') }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="3" class="p-4 text-center text-gray-400">Belum ada transaksi sukses dari pelanggan.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
@endsection