@extends('layouts.app')

@section('title', 'Admin Dashboard')

@section('content')
<div class="space-y-8">
    {{-- Header --}}
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Dashboard Overview</h1>
        <p class="text-sm text-gray-500 mt-1">Pantau performa marketplace digital Anda hari ini.</p>
    </div>

    {{-- Statistik Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        
        {{-- Revenue Card --}}
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center justify-between mb-4">
                <div class="p-2 bg-emerald-50 text-emerald-600 rounded-lg">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <span class="text-[10px] font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-md uppercase">Hari Ini</span>
            </div>
            <p class="text-sm text-gray-500 font-medium">Omzet Sukses</p>
            <h3 class="text-2xl font-bold text-gray-900 mt-1">Rp {{ number_format($revenueToday, 0, ',', '.') }}</h3>
        </div>

        {{-- Profit Card --}}
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center justify-between mb-4">
                <div class="p-2 bg-indigo-50 text-indigo-600 rounded-lg">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                </div>
                <span class="text-[10px] font-bold text-indigo-600 bg-indigo-50 px-2 py-1 rounded-md uppercase">Profit</span>
            </div>
            <p class="text-sm text-gray-500 font-medium">Keuntungan Bersih</p>
            <h3 class="text-2xl font-bold text-gray-900 mt-1">Rp {{ number_format($profitToday, 0, ',', '.') }}</h3>
        </div>

        {{-- Pending Trx Card --}}
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center justify-between mb-4">
                <div class="p-2 bg-amber-50 text-amber-600 rounded-lg">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                @if($pendingTransactions > 0)
                    <span class="animate-pulse w-2 h-2 rounded-full bg-amber-500"></span>
                @endif
            </div>
            <p class="text-sm text-gray-500 font-medium">Transaksi Pending</p>
            <h3 class="text-2xl font-bold text-gray-900 mt-1">{{ $pendingTransactions }} <span class="text-sm font-normal text-gray-400">Trx</span></h3>
        </div>

        {{-- User Card --}}
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <div class="flex items-center justify-between mb-4">
                <div class="p-2 bg-blue-50 text-blue-600 rounded-lg">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                </div>
                <div class="flex items-center text-xs font-bold {{ $userDiff >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                    {{ $userDiff >= 0 ? '+' : '' }}{{ $userDiff }}
                </div>
            </div>
            <p class="text-sm text-gray-500 font-medium">Total Pengguna</p>
            <h3 class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($totalUsers) }}</h3>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Revenue Chart --}}
        <div class="lg:col-span-2 bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <h3 class="text-lg font-bold text-gray-900 mb-6">Grafik Pendapatan (7 Hari)</h3>
            <div class="relative h-64">
              <canvas id="revenueChart"></canvas>
            </div>
        </div>

        {{-- Recent Transactions --}}
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <h3 class="text-lg font-bold text-gray-900 mb-6">Transaksi Terbaru</h3>
            <div class="flow-root">
                <ul class="-my-5 divide-y divide-gray-100">
                    @foreach($recentTransactions as $trx)
                    <li class="py-4">
                        <div class="flex items-center space-x-4">
                            <div class="flex-shrink-0">
                                <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-sm font-bold text-gray-600">
                                    {{ substr($trx->user->name, 0, 1) }}
                                </div>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-bold text-gray-900 truncate">
                                    {{ $trx->code_product }}
                                </p>
                                <p class="text-xs text-gray-500 truncate">
                                    {{ $trx->target_id }}
                                </p>
                            </div>
                            <div class="inline-flex flex-col items-end">
                                <span class="text-sm font-bold text-gray-900">Rp{{ number_format($trx->total_price, 0, ',', '.') }}</span>
                                <span class="text-[10px] {{ $trx->trx_status == 'Sukses' ? 'text-emerald-600' : 'text-amber-500' }} font-bold uppercase tracking-widest">{{ $trx->trx_status }}</span>
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
            <a href="{{ route('admin.transactions.index') }}" class="block w-full text-center mt-6 text-sm font-bold text-brand hover:text-brand-dark transition-colors">
                Lihat Semua Transaksi
            </a>
        </div>
    </div>
</div>

{{-- Chart.js Script --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('revenueChart').getContext('2d');

new Chart(ctx, {
    type: 'line',
    data: {
        labels: {!! json_encode($chartData->pluck('date')) !!},
        datasets: [{
            label: 'Pendapatan (Rp)',
            data: {!! json_encode($chartData->pluck('total')) !!},
            borderColor: '#6366f1',
            backgroundColor: 'rgba(99, 102, 241, 0.08)',
            borderWidth: 2,
            fill: true,
            tension: 0.3,
            pointRadius: 2,
            pointHoverRadius: 4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        plugins: {
            legend: { display: false },
            tooltip: { intersect: false }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: val => 'Rp ' + val.toLocaleString()
                }
            },
            x: {
                ticks: { maxTicksLimit: 7 }
            }
        }
    }
});
</script>
@endsection
