@extends('layouts.app2')


@push('styles')
    <style>
        /* ============================================
               STAT CARDS
               ============================================ */
        .stat-cards-row {
            margin-left: var(--gap);
            margin-right: var(--gap);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            /* Jarak antar kotak */
            margin-bottom: 20px;

            /* Hapus margin kiri-kanan di sini jika bungkus luarnya 
                   sudah menggunakan <div class="container"> agar sejajar lurus */
        }

        .stat-card {
            background: #ffffff;
            border: 1px solid #E5E7EB;
            /* Warna garis tepi yang lebih soft */
            border-radius: 8px;
            /* Lebih kotak persis seperti UI */
            padding: 45px 35px;
            /* Proporsi tinggi yang lebih pas */
            display: flex;
            align-items: center;
            gap: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
            /* Bayangan soft ke bawah */
            transition: box-shadow 0.25s, transform 0.25s;
        }

        .stat-card:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            transform: translateY(-3px);
        }

        /* Icon container */
        .stat-icon {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Width & Height fix dihapus agar SVG ukuran besar Anda bisa tampil utuh bebas */
        }

        /* Warna ikon per card (jika sewaktu-waktu pakai font-icon) */
        .stat-icon.icon-produk {
            color: #1A2962;
        }

        .stat-icon.icon-dilihat {
            color: #2D9CDB;
        }

        .stat-icon.icon-stok {
            color: #27AE60;
        }

        .stat-icon.icon-kategori {
            color: #9B51E0;
        }

        .stat-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
            /* Jarak antara teks label dan angka */
        }

        .stat-label {
            font-size: 13.5px;
            font-weight: 200;
            color: #9CA3AF;
            /* Warna abu-abu yang lebih pas dengan UI */
            letter-spacing: 0.2px;
        }

        .stat-value {
            font-size: 36px;
            /* Diperbesar agar angkanya raksasa seperti di UI */
            font-weight: 800;
            color: #000000;
            /* Warna hitam kebiruan pekat */
            line-height: 1;
            letter-spacing: -0.5px;
        }

        /* Responsive khusus grid stat-cards */
        @media (max-width: 1200px) {
            .stat-cards-row {
                grid-template-columns: repeat(2, 1fr);
                /* Jadi 2 baris x 2 kolom di tablet */
            }
        }

        @media (max-width: 576px) {
            .stat-cards-row {
                grid-template-columns: 1fr;
                /* Jadi 1 kolom memanjang di HP */
            }
        }

        /* ============================================
                       TABLE SECTION (Produk Paling Sering Dilihat)
                       ============================================ */
        .table-card {
            background-color: #ffffff;
            margin-left: var(--gap);
            margin-right: var(--gap);
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            /* Disesuaikan agar melengkungnya pas seperti UI */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
            /* Bayangan lebih halus */
            overflow: hidden;
            margin-bottom: 40px;
            /* margin-left & right dihapus agar kartu sejajar lurus dengan layout grid atasnya */
        }

        .table-card-header {
            padding: 24px 24px 24px 30px;
        }

        .table-card-title {
            font-size: 18px;
            font-weight: 700;
            color: #111827;
            margin: 0;
        }

        /* Tabel Utama */
        .dashboard-table {
            margin-left: var(--gap);
            margin-right: var(--gap);

            /* KUNCI: Kurangi 100% dengan total margin kiri (1 var) + margin kanan (1 var) */
            width: calc(100% - (var(--gap) * 2));

            border-collapse: collapse;
            margin-bottom: 24px;
        }

        /* Header Tabel */
        .dashboard-table thead tr {
            background-color: #F3F4F6;
            /* Warna abu-abu header sesuai UI */
        }

        .dashboard-table thead th {
            padding: 16px 24px;
            /* Jarak padding kiri/kanan disamakan dengan header teks */
            font-size: 14px;
            font-weight: 600;
            color: #111827;
            text-align: left;
            border: none;
            white-space: nowrap;
        }

        /* Lebar Kolom (Proporsional sesuai gambar) */
        .dashboard-table th.col-produk,
        .dashboard-table td.col-produk {
            width: 35%;
        }

        .dashboard-table th.col-kategori,
        .dashboard-table td.col-kategori {
            width: 20%;
        }

        .dashboard-table th.col-kondisi,
        .dashboard-table td.col-kondisi {
            width: 15%;
        }

        .dashboard-table th.col-stok,
        .dashboard-table td.col-stok {
            width: 15%;
        }

        .dashboard-table th.col-dilihat,
        .dashboard-table td.col-dilihat {
            width: 15%;
        }

        /* Row Body Tabel */
        .dashboard-table tbody tr {
            transition: background-color 0.2s ease;
        }

        .dashboard-table tbody tr:hover {
            background-color: #F9FAFB;
            /* Efek hover baris yang sangat halus */
        }

        .dashboard-table tbody td {
            padding: 20px 24px;
            /* Jarak atas bawah lebih lega sesuai UI */
            font-size: 14px;
            color: #111827;
            font-weight: 500;
            vertical-align: middle;
            border-bottom: 1px solid #E5E7EB;
            /* Garis pemisah antar baris yang rapi */
        }

        /* Sel Produk (Gambar + Nama) */
        .product-cell {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        /* Thumbnail Produk - Diubah menjadi PERSEGI PANJANG sesuai UI */
        .product-thumb {
            width: 80px;
            height: 52px;
            border-radius: 6px;
            object-fit: contain;
            background-color: #F3F4F6;
            flex-shrink: 0;
            border: none;
            /* Border dihapus karena UI tidak pakai border di gambar */
            padding: 4px;
            mix-blend-mode: multiply;
            /* Menyamarkan background putih pada foto sepatu */
        }

        .product-name-text {
            font-weight: 600;
            color: #111827;
            font-size: 14px;
            line-height: 1.4;
        }

        /* Badge Kondisi */
        .badge-kondisi {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px 16px;
            /* Padding dilebarkan sedikit */
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        /* Warna spesifik badge disesuaikan dengan UI */
        .badge-new {
            background-color: #22C55E;
            /* Hijau terang */
            color: #ffffff;
        }

        .badge-second {
            background-color: #8892A0;
            /* Abu-abu solid medium */
            color: #ffffff;
        }

        /* Teks Stok & Dilihat */
        .td-stok,
        .td-dilihat {
            color: #111827;
            font-weight: 500;
        }

        /* ============================================
                       RESPONSIVE
                       ============================================ */
        @media (max-width: 1100px) {
            .stat-cards-row {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .stat-cards-row {
                grid-template-columns: repeat(2, 1fr);
                gap: 14px;
            }

            .stat-value {
                font-size: 24px;
            }

            .stat-icon {
                font-size: 26px;
                width: 46px;
                height: 46px;
            }

            .stat-card {
                padding: 18px 16px;
                gap: 14px;
            }

            .table-card-header {
                padding: 16px 16px 12px;
            }

            .dashboard-table thead th,
            .dashboard-table tbody td {
                padding: 12px 12px;
                font-size: 13px;
            }

            .product-thumb {
                width: 50px;
                height: 50px;
            }

            .product-cell {
                gap: 10px;
            }

            /* Sembunyikan kolom kurang penting di tablet */
            .col-stok,
            .th-stok {
                display: none;
            }
        }

        @media (max-width: 560px) {
            .stat-cards-row {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .stat-value {
                font-size: 22px;
            }

            /* Sembunyikan kolom kategori di hp kecil */
            .col-kategori,
            .th-kategori {
                display: none;
            }
        }
    </style>
@endpush

@section('content')
    <h2 class="mb-4" style="font-weight: 800; color: #0F1C2E; margin-left: var(--gap); font-size: 26px;">
        Dashboard
    </h2>

    {{-- ============================================================
    STAT CARDS — 4 kartu statistik
    Data diambil dari controller: $totalProduk, $totalDilihat,
    $totalStok, $totalKategori
    ============================================================ --}}
    <div class="stat-cards-row">

        {{-- Card 1: Total Produk --}}
        <div class="stat-card">
            <div class="stat-icon icon-produk">
                {{-- Diperbesar: width 72, height 72, stroke-width 3.6 --}}
                <svg width="72" height="72" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="26,6 46,16 46,36 26,46 6,36 6,16 26,6" stroke="#1A2962" stroke-width="3.6"
                        stroke-linejoin="round" fill="none" />
                    <polyline points="26,6 26,46" stroke="#1A2962" stroke-width="3.6" stroke-linejoin="round" fill="none" />
                    <polyline points="6,16 26,26 46,16" stroke="#1A2962" stroke-width="3.6" stroke-linejoin="round"
                        fill="none" />
                </svg>
            </div>
            <div class="stat-info">
                <span class="stat-label">Total Produk</span>
                <span class="stat-value">{{ $totalProduk ?? 24 }}</span>
            </div>
        </div>

        {{-- Card 2: Total Dilihat --}}
        <div class="stat-card">
            <div class="stat-icon icon-dilihat">
                {{-- Diperbesar: width 72, height 55, stroke-width 3.8 --}}
                <svg width="72" height="55" viewBox="0 0 52 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 20C2 20 10 4 26 4C42 4 50 20 50 20C50 20 42 36 26 36C10 36 2 20 2 20Z" stroke="#2D9CDB"
                        stroke-width="3.8" stroke-linejoin="round" fill="none" />
                    <circle cx="26" cy="20" r="7" stroke="#2D9CDB" stroke-width="3.8" fill="none" />
                    <circle cx="26" cy="20" r="3.5" fill="#2D9CDB" />
                </svg>
            </div>
            <div class="stat-info">
                <span class="stat-label">Total Dilihat</span>
                <span class="stat-value">{{ number_format($totalDilihat ?? 5662, 0, ',', '.') }}</span>
            </div>
        </div>

        {{-- Card 3: Total Stok Barang --}}
        <div class="stat-card">
            <div class="stat-icon icon-stok">
                {{-- Diperbesar: width 72, height 50, stroke-width 4.5 --}}
                <svg width="72" height="50" viewBox="0 0 52 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="2,30 18,14 28,22 50,4" stroke="#27AE60" stroke-width="4.5" stroke-linecap="round"
                        stroke-linejoin="round" fill="none" />
                    <polyline points="38,4 50,4 50,16" stroke="#27AE60" stroke-width="4.5" stroke-linecap="round"
                        stroke-linejoin="round" fill="none" />
                </svg>
            </div>
            <div class="stat-info">
                <span class="stat-label">Total Stok Barang</span>
                <span class="stat-value">{{ $totalStok ?? 48 }}</span>
            </div>
        </div>

        {{-- Card 4: Total Kategori --}}
        <div class="stat-card">
            <div class="stat-icon icon-kategori">
                {{-- Diperbesar: width 60, height 60 (sudah proporsional & tebal dengan sendirinya) --}}
                <svg width="60" height="60" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="4" y="18" width="10" height="22" rx="2" fill="#9B51E0" />
                    <rect x="17" y="10" width="10" height="30" rx="2" fill="#9B51E0" />
                    <rect x="30" y="22" width="10" height="18" rx="2" fill="#9B51E0" />
                </svg>
            </div>
            <div class="stat-info">
                <span class="stat-label">Total Kategori</span>
                <span class="stat-value">{{ $totalKategori ?? 4 }}</span>
            </div>
        </div>

    </div>{{-- /stat-cards-row --}}

    {{-- ============================================================
    TABEL — Produk Paling Sering Dilihat
    Data dari controller: $topProducts (collection)
    ============================================================ --}}
    <div class="table-card">

        <div class="table-card-header">
            <h3 class="table-card-title">Produk Paling Sering Dilihat</h3>
        </div>

        <table class="dashboard-table">
            <thead>
                <tr>
                    <th class="col-produk">Produk</th>
                    <th class="col-kategori th-kategori">Kategori</th>
                    <th class="col-kondisi">Kondisi</th>
                    <th class="col-stok th-stok">Sisa Stok</th>
                    <th class="col-dilihat">Total Dilihat</th>
                </tr>
            </thead>
            <tbody>

                @forelse($topProducts as $product)
                    <tr>
                        <td class="col-produk">
                            <div class="product-cell">
                                @php
                                    // Cek dan ambil gambar pertama jika datanya berupa array
                                    $gambarUtama = is_array($product['image']) ? $product['image'][0] : $product['image'];
                                @endphp

                                <img src="{{ asset('images/' . $gambarUtama) }}" alt="{{ $product['name'] }}"
                                    class="product-thumb" loading="lazy"
                                    onerror="this.src='https://placehold.co/70x70/F3F4F6/9CA3AF?text=Img'">

                                <span class="product-name-text">{{ $product['name'] }}</span>
                            </div>
                        </td>
                        <td class="col-kategori td-kategori">{{ $product['category'] }}</td>
                        <td class="col-kondisi">
                            @if(strtolower($product['status']) === 'new')
                                <span class="badge-kondisi badge-new">NEW</span>
                            @else
                                <span class="badge-kondisi badge-second">SECOND</span>
                            @endif
                        </td>
                        <td class="col-stok td-stok th-stok">{{ $product['stock'] }} Pcs</td>
                        <td class="col-dilihat td-dilihat">
                            {{ number_format($product['views'], 0, ',', '.') }}
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" style="text-align:center; padding: 40px 20px; color: #9CA3AF; font-size: 14px;">
                            Belum ada data produk.
                        </td>
                    </tr>
                @endforelse

            </tbody>
        </table>

        <div class="table-bottom-line"></div>

    </div>
@endsection