@extends('layouts.app')
@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<div class="space-y-5">

    {{-- Stat Cards --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Omzet Hari Ini</span>
                <span class="text-2xl">💰</span>
            </div>
            <div class="text-xl font-black text-emerald-600">Rp {{ number_format($todaySales->sales ?? 0, 0, ',', '.') }}</div>
            <div class="text-xs text-slate-400 mt-1">{{ $todaySales->trx ?? 0 }} transaksi selesai</div>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Pembelian Stok</span>
                <span class="text-2xl">📦</span>
            </div>
            <div class="text-xl font-black text-indigo-600">Rp {{ number_format($todayPurchase, 0, ',', '.') }}</div>
            <div class="text-xs text-slate-400 mt-1">hari ini dari suplier</div>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Pengeluaran</span>
                <span class="text-2xl">💸</span>
            </div>
            <div class="text-xl font-black text-rose-600">Rp {{ number_format($todayExpense, 0, ',', '.') }}</div>
            <div class="text-xs text-slate-400 mt-1">hari ini (biaya operasional)</div>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-500 uppercase tracking-wide">Profit Estimasi</span>
                <span class="text-2xl">📈</span>
            </div>
            @php $profit = ($todaySales->sales ?? 0) - $todayPurchase - $todayExpense; @endphp
            <div class="text-xl font-black {{ $profit >= 0 ? 'text-blue-600' : 'text-red-600' }}">
                Rp {{ number_format($profit, 0, ',', '.') }}
            </div>
            <div class="text-xs text-slate-400 mt-1">omzet - beli - biaya</div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        {{-- Grafik 7 Hari --}}
        <div class="lg:col-span-2 bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
            <h3 class="font-bold text-slate-800 mb-4">📈 Penjualan 7 Hari Terakhir</h3>
            <div class="relative h-48">
                <canvas id="salesChart"></canvas>
            </div>
        </div>

        {{-- Top Produk Hari Ini --}}
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">
            <h3 class="font-bold text-slate-800 mb-4">🔥 Produk Terlaris Hari Ini</h3>
            @forelse($topTodayProducts as $i => $p)
            <div class="flex items-center gap-3 py-2 {{ !$loop->last ? 'border-b border-slate-100' : '' }}">
                <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-black
                    {{ $i===0 ? 'bg-amber-100 text-amber-600' : ($i===1 ? 'bg-slate-100 text-slate-500' : 'bg-orange-50 text-orange-500') }}">
                    {{ $i+1 }}
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-semibold text-slate-700 truncate">{{ $p->product_name }}</div>
                </div>
                <div class="text-sm font-bold text-blue-600">{{ $p->qty }}</div>
            </div>
            @empty
            <div class="text-center text-slate-400 py-8 text-sm">Belum ada penjualan hari ini</div>
            @endforelse
        </div>
    </div>

    {{-- Stok Menipis --}}
    @if($lowStockProducts->count() > 0)
    <div class="bg-white rounded-2xl border border-red-200 p-5 shadow-sm">
        <h3 class="font-bold text-red-700 mb-4">⚠️ Produk Stok Menipis (≤ Min. Stok)</h3>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-xs text-slate-500 border-b border-slate-100">
                        <th class="text-left pb-2 font-semibold">Produk</th>
                        <th class="text-left pb-2 font-semibold">Kategori</th>
                        <th class="text-center pb-2 font-semibold">Stok</th>
                        <th class="text-center pb-2 font-semibold">Min. Stok</th>
                        <th class="text-right pb-2 font-semibold">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($lowStockProducts as $p)
                    <tr class="hover:bg-red-50/50">
                        <td class="py-2.5 font-medium text-slate-800">{{ $p->name }}</td>
                        <td class="py-2.5 text-slate-500">{{ $p->category?->name ?? '-' }}</td>
                        <td class="py-2.5 text-center">
                            <span class="px-2 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-700">{{ $p->stock }}</span>
                        </td>
                        <td class="py-2.5 text-center text-slate-500">{{ $p->min_stock }}</td>
                        <td class="py-2.5 text-right">
                            <a href="{{ route('products.edit', $p) }}" class="text-xs px-2 py-1 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg transition">Kelola</a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    {{-- Hutang Jatuh Tempo --}}
    @if($debtsSummary->count > 0)
    <div class="bg-white rounded-2xl border {{ $overdueDebts->count() > 0 ? 'border-rose-200 bg-rose-50/20' : 'border-slate-200' }} p-5 shadow-sm">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-bold {{ $overdueDebts->count() > 0 ? 'text-rose-700' : 'text-slate-800' }}">💳 Ringkasan Hutang Suplier</h3>
            <span class="text-sm font-black text-rose-600">Total: Rp {{ number_format($debtsSummary->total, 0, ',', '.') }}</span>
        </div>
        
        @if($overdueDebts->count() > 0)
        <div class="space-y-3">
            <p class="text-xs font-bold text-rose-500 uppercase tracking-widest">⚠️ Jatuh Tempo / Lewat Tanggal :</p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                @foreach($overdueDebts as $debt)
                <div class="bg-white border border-rose-100 rounded-xl p-3 flex justify-between items-center shadow-sm">
                    <div>
                        <div class="text-[10px] font-bold text-slate-400 uppercase">{{ $debt->invoice_number }}</div>
                        <div class="font-bold text-slate-700">{{ $debt->supplier->name }}</div>
                        <div class="text-[10px] text-rose-500 font-bold uppercase">Tempo: {{ $debt->due_date->format('d M Y') }}</div>
                    </div>
                    <div class="text-right">
                        <div class="font-black text-rose-600">Rp {{ number_format($debt->total_amount, 0, ',', '.') }}</div>
                        <a href="{{ route('reports.purchases') }}" class="text-[9px] font-black uppercase text-blue-500 hover:underline">Bayar →</a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @else
        <div class="text-center py-4 text-slate-400 text-sm">
            ✅ Tidak ada hutang yang jatuh tempo hari ini.
        </div>
        @endif
    </div>
    @endif

    {{-- Quick Links --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        @foreach([
            ['route' => 'pos.index',     'icon' => '🧾', 'label' => 'Buka Kasir',      'color' => 'blue'],
            ['route' => 'products.index','icon' => '📦', 'label' => 'Kelola Produk',    'color' => 'indigo'],
            ['route' => 'reports.sales', 'icon' => '📈', 'label' => 'Lap. Penjualan',  'color' => 'emerald'],
            ['route' => 'reports.clerk', 'icon' => '👤', 'label' => 'Lap. Kasir',      'color' => 'amber'],
        ] as $link)
        <a href="{{ route($link['route']) }}"
           class="bg-white border border-slate-200 rounded-2xl p-4 hover:border-{{ $link['color'] }}-300 hover:shadow-md transition group text-center">
            <div class="text-3xl mb-2">{{ $link['icon'] }}</div>
            <div class="text-sm font-semibold text-slate-700 group-hover:text-{{ $link['color'] }}-600 transition">{{ $link['label'] }}</div>
        </a>
        @endforeach
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const labels = @json($weekSales->pluck('date'));
const sales   = @json($weekSales->pluck('sales'));
const trxs    = @json($weekSales->pluck('trx'));

new Chart(document.getElementById('salesChart'), {
    type: 'bar',
    data: {
        labels: labels.map(d => new Date(d).toLocaleDateString('id-ID',{weekday:'short',day:'numeric',month:'short'})),
        datasets: [{
            label: 'Penjualan (Rp)',
            data: sales,
            backgroundColor: 'rgba(59,130,246,0.15)',
            borderColor: 'rgba(59,130,246,1)',
            borderWidth: 2,
            borderRadius: 8,
            fill: true,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: v => 'Rp' + (v >= 1000000 ? (v/1000000).toFixed(1)+'jt' : (v/1000).toFixed(0)+'rb'),
                    font: { size: 10 }
                },
                grid: { color: 'rgba(0,0,0,0.05)' }
            },
            x: { grid: { display: false }, ticks: { font: { size: 10 } } }
        }
    }
});
</script>
@endpush
@endsection