@extends('layouts.app')

@section('title', 'Dashboard')
@section('page_title', 'Dashboard Ringkasan')
@section('page_subtitle', 'Pantau ringkasan data Master Barang Jadi dan aktivitas pengiriman ke H.OBAR')

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

    <!-- KPI Statistics Grid -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-5">
        <!-- Card 1: Total Barang Jadi -->
        <div class="relative overflow-hidden rounded-2xl bg-white p-3.5 sm:p-6 shadow-xs border border-slate-200/80 transition-all hover:shadow-md hover:-translate-y-0.5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">Barang Jadi</p>
                    <h3 class="text-xl sm:text-3xl font-extrabold text-slate-900 mt-1 sm:mt-2 tracking-tight">{{ number_format($totalBarang) }}</h3>
                    <p class="text-[10px] sm:text-xs font-semibold text-blue-600 mt-0.5 sm:mt-1 flex items-center gap-1">
                        <i data-lucide="database" class="w-3 h-3 sm:w-3.5 sm:h-3.5"></i>
                        <span>Master Item</span>
                    </p>
                </div>
                <div class="w-9 h-9 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center border border-blue-100 shadow-inner shrink-0">
                    <i data-lucide="boxes" class="w-4 h-4 sm:w-7 sm:h-7"></i>
                </div>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 to-indigo-500"></div>
        </div>

        <!-- Card 2: Total Pengiriman -->
        <div class="relative overflow-hidden rounded-2xl bg-white p-3.5 sm:p-6 shadow-xs border border-slate-200/80 transition-all hover:shadow-md hover:-translate-y-0.5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">Pengiriman</p>
                    <h3 class="text-xl sm:text-3xl font-extrabold text-slate-900 mt-1 sm:mt-2 tracking-tight">{{ number_format($totalPengiriman) }}</h3>
                    <p class="text-[10px] sm:text-xs font-semibold text-emerald-600 mt-0.5 sm:mt-1 flex items-center gap-1">
                        <i data-lucide="truck" class="w-3 h-3 sm:w-3.5 sm:h-3.5"></i>
                        <span>Ke H.OBAR</span>
                    </p>
                </div>
                <div class="w-9 h-9 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center border border-emerald-100 shadow-inner shrink-0">
                    <i data-lucide="file-check-2" class="w-4 h-4 sm:w-7 sm:h-7"></i>
                </div>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-500 to-teal-500"></div>
        </div>

        <!-- Card 3: Pengiriman Hari Ini -->
        <div class="relative overflow-hidden rounded-2xl bg-white p-3.5 sm:p-6 shadow-xs border border-slate-200/80 transition-all hover:shadow-md hover:-translate-y-0.5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">Hari Ini</p>
                    <h3 class="text-xl sm:text-3xl font-extrabold text-slate-900 mt-1 sm:mt-2 tracking-tight">{{ number_format($pengirimanHariIni) }}</h3>
                    <p class="text-[10px] sm:text-xs font-semibold text-violet-600 mt-0.5 sm:mt-1 flex items-center gap-1">
                        <i data-lucide="calendar-clock" class="w-3 h-3 sm:w-3.5 sm:h-3.5"></i>
                        <span>Tanggal Berjalan</span>
                    </p>
                </div>
                <div class="w-9 h-9 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl bg-violet-50 text-violet-600 flex items-center justify-center border border-violet-100 shadow-inner shrink-0">
                    <i data-lucide="clock" class="w-4 h-4 sm:w-7 sm:h-7"></i>
                </div>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-violet-500 to-purple-500"></div>
        </div>

        <!-- Card 4: Total Barang Terkirim -->
        <div class="relative overflow-hidden rounded-2xl bg-white p-3.5 sm:p-6 shadow-xs border border-slate-200/80 transition-all hover:shadow-md hover:-translate-y-0.5">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">Terkirim</p>
                    <div class="mt-1 sm:mt-2 flex items-baseline gap-1">
                        <span class="text-xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">{{ number_format($totalKoli) }}</span>
                        <span class="text-[10px] sm:text-xs font-bold text-slate-500">Koli</span>
                    </div>
                    <p class="text-[10px] sm:text-xs font-semibold text-amber-600 mt-0.5 sm:mt-1 flex items-center gap-1">
                        <i data-lucide="layers" class="w-3 h-3 sm:w-3.5 sm:h-3.5"></i>
                        <span>{{ number_format($totalUnit) }} Unit</span>
                    </p>
                </div>
                <div class="w-9 h-9 sm:w-14 sm:h-14 rounded-xl sm:rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center border border-amber-100 shadow-inner shrink-0">
                    <i data-lucide="package-check" class="w-4 h-4 sm:w-7 sm:h-7"></i>
                </div>
            </div>
            <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-amber-500 to-orange-500"></div>
        </div>
    </div>

    <!-- Quick Action Shortcut Hub -->
    <div class="rounded-2xl bg-gradient-to-r from-slate-900 via-slate-800 to-blue-950 p-4 sm:p-8 text-white shadow-lg relative overflow-hidden">
        <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4 sm:gap-6">
            <div class="max-w-xl">
                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 sm:px-3 sm:py-1 rounded-full text-[11px] sm:text-xs font-bold bg-blue-500/20 text-blue-300 border border-blue-400/30 mb-2 sm:mb-3">
                    <i data-lucide="sparkles" class="w-3 h-3 sm:w-3.5 sm:h-3.5"></i>
                    Akses Cepat Pengiriman
                </span>
                <h2 class="text-lg sm:text-2xl font-black text-white tracking-tight">Kirim Barang Jadi ke H.OBAR</h2>
                <p class="text-slate-300 text-xs sm:text-sm mt-1 leading-relaxed">
                    Pilih kode barang jadi, detail nama dan isi/koli terisi otomatis. Cetak surat pengiriman langsung dalam hitungan detik.
                </p>
            </div>
            <div class="flex flex-wrap items-center gap-2 sm:gap-3">
                <a href="{{ route('pengiriman.create') }}" 
                   class="flex-1 sm:flex-initial inline-flex items-center justify-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 rounded-xl bg-blue-500 hover:bg-blue-400 text-white font-bold text-xs sm:text-sm shadow-lg shadow-blue-500/30 transition-all hover:scale-102 active:scale-98">
                    <i data-lucide="plus-circle" class="w-4 h-4 sm:w-5 sm:h-5"></i>
                    <span>Buat Pengiriman</span>
                </a>
                <a href="{{ route('barang-jadi.create') }}" 
                   class="inline-flex items-center justify-center gap-1.5 px-3.5 sm:px-4 py-2.5 sm:py-3 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-bold text-xs sm:text-sm transition-all">
                    <i data-lucide="package-plus" class="w-4 h-4"></i>
                    <span>+ Barang</span>
                </a>
                <a href="{{ route('import-barang.index') }}" 
                   class="inline-flex items-center justify-center gap-1.5 px-3.5 sm:px-4 py-2.5 sm:py-3 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 font-bold text-xs sm:text-sm transition-all">
                    <i data-lucide="file-up" class="w-4 h-4"></i>
                    <span>Import Excel</span>
                </a>
            </div>
        </div>
        <!-- Decorative bg blur -->
        <div class="absolute -right-10 -bottom-10 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl pointer-events-none"></div>
    </div>

    <!-- Main Content: Two Columns -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
        
        <!-- Left: Recent Pengiriman (2 cols) -->
        <div class="lg:col-span-2 space-y-3 sm:space-y-4">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-base sm:text-lg font-extrabold text-slate-900 tracking-tight flex items-center gap-2">
                        <i data-lucide="history" class="w-4 h-4 sm:w-5 sm:h-5 text-blue-600"></i>
                        <span>Riwayat Pengiriman Terbaru ke H.OBAR</span>
                    </h3>
                    <p class="text-[11px] sm:text-xs text-slate-500">Daftar transaksi surat jalan terakhir yang tercatat</p>
                </div>
                <a href="{{ route('pengiriman.index') }}" class="text-xs font-bold text-blue-600 hover:text-blue-700 flex items-center gap-1 hover:underline shrink-0">
                    <span>Lihat Semua</span>
                    <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
                </a>
            </div>

            <div class="bg-white rounded-2xl shadow-xs border border-slate-200/80 overflow-hidden">
                <!-- Desktop Table View (screens >= 768px) -->
                <div class="hidden md:block overflow-x-auto">
                    <table class="w-full text-left text-sm text-slate-600">
                        <thead class="bg-slate-50/80 text-xs uppercase font-bold text-slate-500 border-b border-slate-200">
                            <tr>
                                <th class="px-5 py-3.5">No Pengiriman</th>
                                <th class="px-4 py-3.5">Tanggal</th>
                                <th class="px-4 py-3.5 text-center">Barang</th>
                                <th class="px-4 py-3.5 text-right">Total Koli</th>
                                <th class="px-4 py-3.5 text-right">Total Unit</th>
                                <th class="px-5 py-3.5 text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100">
                            @forelse($recentPengiriman as $p)
                                <tr class="hover:bg-slate-50/80 transition-colors">
                                    <td class="px-5 py-3.5 font-bold text-blue-600 whitespace-nowrap">
                                        <a href="{{ route('pengiriman.show', $p->id) }}" class="hover:underline flex items-center gap-1.5">
                                            <i data-lucide="file-text" class="w-4 h-4 text-slate-400"></i>
                                            <span>{{ $p->no_pengiriman }}</span>
                                        </a>
                                    </td>
                                    <td class="px-4 py-3.5 text-slate-600 whitespace-nowrap text-xs">
                                        {{ $p->tanggal ? $p->tanggal->format('d/m/Y') : '-' }}
                                    </td>
                                    <td class="px-4 py-3.5 text-center whitespace-nowrap">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-slate-100 text-slate-700">
                                            {{ $p->details->count() }} item
                                        </span>
                                    </td>
                                    <td class="px-4 py-3.5 text-right font-extrabold text-slate-900 whitespace-nowrap">
                                        {{ number_format($p->total_koli) }}
                                    </td>
                                    <td class="px-4 py-3.5 text-right text-xs font-semibold text-slate-600 whitespace-nowrap">
                                        {{ number_format($p->total_unit) }} unit
                                    </td>
                                    <td class="px-5 py-3.5 text-center whitespace-nowrap">
                                        <div class="inline-flex items-center gap-1">
                                            <a href="{{ route('pengiriman.show', $p->id) }}" 
                                               class="p-1.5 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 transition-colors" 
                                               title="Detail Pengiriman">
                                                <i data-lucide="eye" class="w-4 h-4"></i>
                                            </a>
                                            <a href="{{ route('pengiriman.print', $p->id) }}" 
                                               target="_blank"
                                               class="p-1.5 rounded-lg bg-emerald-50 text-emerald-600 hover:bg-emerald-100 transition-colors" 
                                               title="Cetak Surat Pengiriman">
                                                <i data-lucide="printer" class="w-4 h-4"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12 text-center text-slate-400">
                                        <i data-lucide="truck" class="w-10 h-10 mx-auto mb-2 text-slate-300"></i>
                                        <p class="font-semibold">Belum ada data pengiriman ke H.OBAR.</p>
                                        <a href="{{ route('pengiriman.create') }}" class="mt-3 inline-flex items-center gap-1.5 text-xs font-bold text-blue-600 hover:underline">
                                            <span>Buat Pengiriman Pertama</span>
                                            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                                        </a>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Mobile Card List View (screens < 768px) - Flows downwards, fits 100% width -->
                <div class="md:hidden divide-y divide-slate-100">
                    @forelse($recentPengiriman as $p)
                        <div class="p-3.5 space-y-2.5">
                            <!-- Top: No Pengiriman & Tanggal -->
                            <div class="flex items-center justify-between gap-2">
                                <a href="{{ route('pengiriman.show', $p->id) }}" class="inline-flex items-center gap-1.5 font-mono font-bold text-xs text-blue-700 bg-blue-50 px-2.5 py-1 rounded-lg border border-blue-200 active:scale-95 transition-transform">
                                    <i data-lucide="file-text" class="w-3.5 h-3.5 text-blue-600"></i>
                                    <span>{{ $p->no_pengiriman }}</span>
                                </a>
                                <span class="text-[11px] font-medium text-slate-500 flex items-center gap-1">
                                    <i data-lucide="calendar" class="w-3 h-3 text-slate-400"></i>
                                    {{ $p->tanggal ? $p->tanggal->format('d/m/Y') : '-' }}
                                </span>
                            </div>

                            <!-- Middle: Mini 3-Column KPI Grid -->
                            <div class="grid grid-cols-3 gap-2 bg-slate-50 p-2.5 rounded-xl border border-slate-100 text-center">
                                <div>
                                    <span class="text-[10px] font-bold uppercase text-slate-400 block">Koli</span>
                                    <span class="text-xs font-extrabold text-slate-900">{{ number_format($p->total_koli) }}</span>
                                </div>
                                <div>
                                    <span class="text-[10px] font-bold uppercase text-slate-400 block">Total Unit</span>
                                    <span class="text-xs font-extrabold text-emerald-600">{{ number_format($p->total_unit) }}</span>
                                </div>
                                <div>
                                    <span class="text-[10px] font-bold uppercase text-slate-400 block">Barang</span>
                                    <span class="text-xs font-bold text-blue-600">{{ $p->details->count() }} item</span>
                                </div>
                            </div>

                            <!-- Bottom: Action Buttons -->
                            <div class="flex items-center justify-end gap-2 pt-0.5">
                                <a href="{{ route('pengiriman.show', $p->id) }}" 
                                   class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-blue-50 hover:bg-blue-100 text-blue-700 text-xs font-bold transition-colors">
                                    <i data-lucide="eye" class="w-3.5 h-3.5"></i>
                                    <span>Detail</span>
                                </a>
                                <a href="{{ route('pengiriman.print', $p->id) }}" 
                                   target="_blank"
                                   class="inline-flex items-center gap-1 px-3 py-1.5 rounded-lg bg-emerald-50 hover:bg-emerald-100 text-emerald-700 text-xs font-bold transition-colors">
                                    <i data-lucide="printer" class="w-3.5 h-3.5"></i>
                                    <span>Cetak</span>
                                </a>
                            </div>
                        </div>
                    @empty
                        <div class="p-6 text-center text-slate-400">
                            <i data-lucide="truck" class="w-8 h-8 mx-auto mb-2 text-slate-300"></i>
                            <p class="text-xs font-semibold text-slate-600">Belum ada data pengiriman ke H.OBAR.</p>
                            <a href="{{ route('pengiriman.create') }}" class="mt-2 inline-flex items-center gap-1 text-xs font-bold text-blue-600 hover:underline">
                                <span>Buat Pengiriman</span>
                                <i data-lucide="plus" class="w-3 h-3"></i>
                            </a>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Right: Top Barang Dikirim & Info (1 col) -->
        <div class="space-y-6">
            <!-- Top Shipped Goods -->
            <div class="bg-white rounded-2xl shadow-xs border border-slate-200/80 p-5">
                <div class="flex items-center justify-between pb-3 border-b border-slate-100">
                    <div>
                        <h4 class="text-sm font-extrabold text-slate-900 tracking-tight flex items-center gap-2">
                            <i data-lucide="trending-up" class="w-4 h-4 text-emerald-600"></i>
                            <span>Barang Paling Sering Dikirim</span>
                        </h4>
                        <p class="text-[11px] text-slate-500">Berdasarkan akumulasi koli ke H.OBAR</p>
                    </div>
                </div>

                <div class="mt-4 space-y-3">
                    @forelse($topBarang as $idx => $item)
                        <div class="p-3 rounded-xl bg-slate-50 hover:bg-blue-50/50 transition-colors border border-slate-100">
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <span class="inline-block px-1.5 py-0.5 rounded-md text-[10px] font-extrabold bg-blue-100 text-blue-700">
                                        {{ $item->kode }}
                                    </span>
                                    <p class="text-xs font-bold text-slate-800 line-clamp-1 mt-1" title="{{ $item->nama }}">
                                        {{ $item->nama }}
                                    </p>
                                    @if($item->brand)
                                        <span class="text-[11px] text-slate-500 font-medium">Brand: {{ $item->brand }}</span>
                                    @endif
                                </div>
                                <div class="text-right flex-shrink-0">
                                    <span class="text-sm font-extrabold text-emerald-600">{{ number_format($item->total_koli) }}</span>
                                    <span class="text-[10px] text-slate-500 block">Koli ({{ number_format($item->total_unit) }} unit)</span>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="py-8 text-center text-xs text-slate-400">
                            Belum ada statistik barang terkirim.
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- System Info Widget -->
            <div class="bg-gradient-to-br from-blue-50 to-indigo-50/50 rounded-2xl p-5 border border-blue-100/80">
                <div class="flex items-start gap-3">
                    <div class="p-2.5 rounded-xl bg-blue-600 text-white shadow-sm">
                        <i data-lucide="shield-check" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h4 class="text-xs font-bold uppercase tracking-wider text-blue-900">Arsitektur Sederhana</h4>
                        <p class="text-xs text-slate-600 mt-1 leading-relaxed">
                            Sistem ini dirancang khusus untuk kemudahan dan kecepatan operasional: <strong>bebas login</strong> dan <strong>murni pencatatan pengiriman</strong> (tanpa modul stok).
                        </p>
                        <div class="mt-3 pt-3 border-t border-blue-200/60 flex items-center justify-between text-[11px] font-semibold text-blue-700">
                            <span>Format File: Excel Book1.xlsx</span>
                            <span>Tujuan: H.OBAR</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
@endsection