@extends('layouts.app2')

@section('content')

    {{-- ==========================================
    1. CSS KUSTOM UNTUK ANALITIK
    ========================================== --}}
    @push('styles')
        <style>
            body {
                background-color: #F8F9FA;
                margin-bottom: 2rem;
            }

            /* --- Kartu Statistik Atas --- */
            .stat-card {
                background: #ffffff;
                border-radius: 12px;
                padding: 24px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
                position: relative;
                display: flex;
                flex-direction: column;
                height: 100%;

            }

            /* --- Margin Kanan untuk Card 1 (Green) dan Card 3 (Red) --- */
            .stat-card.green {
                margin-left: var(--gap);
            }

            .stat-card.red {
                margin-right: var(--gap);
            }

            .stat-card.green {
                border-left: 5px solid #27ae60;
            }

            .stat-card.purple {
                border-left: 5px solid #8b5cf6;
            }

            .stat-card.red {
                border-left: 5px solid #e20000;
            }

            .stat-title {
                color: #6b7280;
                font-size: 15px;
                font-weight: 600;
                margin-bottom: 12px;
            }

            .stat-value-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
            }

            .stat-value {
                font-size: 36px;
                font-weight: 800;
                color: #111827;
                line-height: 1;
            }

            .stat-value span {
                font-size: 18px;
                font-weight: 700;
            }

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

            .stat-card.green .stat-icon {
                color: #27ae60;
            }

            .stat-card.purple .stat-icon {
                color: #8b5cf6;
            }

            .stat-card.red .stat-icon {
                color: #e20000;
            }

            .stat-subtext {
                font-size: 13px;
                font-weight: 500;
            }

            .stat-card.green .stat-subtext {
                color: #27ae60;
            }

            .stat-card.purple .stat-subtext {
                color: #8b5cf6;
            }

            .stat-card.red .stat-subtext {
                color: #e20000;
            }

            /* --- Kartu Utama (Putih & Shadow) --- */
            .analytic-section {
                background: #ffffff;
                margin-left: var(--gap);
                margin-right: var(--gap);
                border-radius: 12px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
                padding: 25px 40px ;
                /* Padding section diperbesar */
                margin-top: 24px;
                border: 1px solid #f3f4f6;
                /* Tambahan border halus luar */
            }

            .section-title {
                font-size: 20px;
                font-weight: 800;
                color: #111827;
                display: flex;
                align-items: center;
                gap: 12px;
                margin-bottom: 15px;
            }

            /* Ikon Judul Kotak Hijau */
            .section-title i {
                background-color: #27ae60;
                color: #ffffff;
                padding: 6px 8px;
                border-radius: 6px;
                font-size: 16px;
            }

            /* --- Grid Performansi Kategori --- */
            .category-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 40px;
                /* Gap diperlebar persis seperti desain */
            }

            @media(max-width: 768px) {
                .category-grid {
                    grid-template-columns: 1fr;
                }
            }

            .cat-item {
                display: flex;
                align-items: center;
                /* Ikon dan teks sejajar di tengah secara vertikal */
                gap: 24px;
                /* Jarak ikon ke teks diperlebar */
                padding: 32px;
                /* Padding dalam kotak dibikin lega */
                background: #ffffff;
                border-radius: 12px;
                border: 1px solid #e5e7eb;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
            }

            /* Ikon Kategori Besar */
            .cat-icon {
                font-size: 60px;
                /* Ukuran ikon dibesarkan drastis */
                line-height: 1;
            }

            .icon-apparel {
                color: #111827;
            }

            /* Hitam */
            .icon-footwear {
                color: #f97316;
            }

            /* Oranye Terang */

            /* Tipografi Kategori */
            .cat-info {
                flex: 1;
                width: 100%;
            }

            .cat-name {
                font-weight: 800;
                font-size: 20px;
                color: #1f2937;
                margin-bottom: 6px;
            }

            .cat-desc {
                font-weight: 500;
                font-size: 14px;
                color: #6b7280;
                margin-bottom: 40px;
            }

            /* Margin bawah dijauhkan ke progress bar */

            /* Custom Progress Bar */
            .custom-progress {
                display: flex;
                align-items: center;
                gap: 16px;
            }

            .bar-track {
                flex: 1;
                height: 6px;
                background: #111827;
                border-radius: 4px;
                position: relative;
            }

            .bar-fill {
                height: 100%;
                background: #3ba1eb;
                /* Biru muda */
                border-radius: 4px;
                position: relative;
            }

            .bar-dot {
                width: 14px;
                height: 14px;
                background: #3ba1eb;
                border: 3px solid #ffffff;
                border-radius: 50%;
                position: absolute;
                right: -7px;
                top: -4px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
            }

            .bar-label {
                font-size: 14px;
                font-weight: 800;
                color: #111827;
                line-height: 1.2;
                text-align: left;
                min-width: 50px;
            }

            .bar-label span {
                display: block;
                font-weight: 600;
                color: #4b5563;
                font-size: 12px;
            }

            /* --- Chart Varian --- */
            .chart-wrapper {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 60px;
                flex-wrap: wrap;
                padding: 20px 0;
            }

            .chart-container {
                width: 300px;
                height: 300px;
                position: relative;
            }

            /* Custom Legend Kotak Persegi Panjang */
            .custom-legend {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }

            .legend-item {
                display: flex;
                align-items: center;
                gap: 16px;
            }

            .legend-color {
                width: 80px;
                height: 20px;
            }

            .legend-label {
                font-weight: 700;
                color: #111827;
                font-size: 18px;
            }
        </style>
    @endpush

    {{-- ==========================================
    2. STRUKTUR HTML
    ========================================== --}}

    {{-- Judul Halaman (Sudah disamakan dengan Kelola Produk & Dashboard) --}}
    <h2 class="mb-0" style="font-weight: 800; color: #0F1C2E; margin-left: var(--gap, 0px); font-size: 26px;">
        Analitik Produk
    </h2>

    {{-- Baris 1: Tiga Kartu Statistik --}}
    <div class="row g-4 mb-4 mt-0">
        {{-- Kartu 1 --}}
        <div class="col-md-4">
            <div class="stat-card green">
                <div class="stat-title">Rasio Klik Order WA</div>
                <div class="stat-value-row">
                    <div class="stat-value">19.5%</div>
                    <i class="bi bi-whatsapp stat-icon"></i>
                </div>
                <div class="stat-subtext"><i class="bi bi-arrow-up"></i> 1.2% Dari Minggu Lalu</div>
            </div>
        </div>

        {{-- Kartu 2 --}}
        <div class="col-md-4">
            <div class="stat-card purple">
                <div class="stat-title">Total Di Keranjang</div>
                <div class="stat-value-row">
                    <div class="stat-value">28</div>
                    <i class="bi bi-suit-heart-fill stat-icon"></i>
                </div>
                <div class="stat-subtext">Potensi Penjualan Tertunda</div>
            </div>
        </div>

        {{-- Kartu 3 --}}
        <div class="col-md-4">
            <div class="stat-card red" style="margin-right: var(--gap, 0px);">
                <div class="stat-title">Stok Menipis (< 3 Pcs)</div>
                        <div class="stat-value-row">
                            {{-- Angka 28 diganti dengan pemanggilan variabel dari Controller --}}
                            <div class="stat-value">{{ $stokMenipisCount }} <span>Item</span></div>
                            <i class="bi bi-exclamation-triangle-fill stat-icon"></i>
                        </div>
                        <div class="stat-subtext">Butuh Tindakan Restock</div>
                </div>
            </div>
        </div>

        {{-- Baris 2: Performansi Per Kategori --}}
        <div class="analytic-section">
            <div class="section-title">
                <i class="bi bi-graph-up-arrow"></i> Performansi Per Kategori
            </div>

            <div class="category-grid">
                @foreach($categoryStats as $name => $data)
                    <div class="cat-item">
                        {{-- Penentuan Ikon secara Otomatis berdasarkan Nama Kategori --}}
                        @if(str_contains($name, 'Footwear'))
                            <i class="bi bi-shop icon-footwear cat-icon"></i>
                        @else
                            <i class="bi bi-box-seam icon-apparel cat-icon"></i>
                        @endif

                        <div class="cat-info">
                            <div class="cat-name">{{ $name }}</div>
                            <div class="cat-desc">{{ $data['total_produk'] }} Produk Terdaftar</div>

                            <div class="custom-progress">
                                <div class="bar-track">
                                    @php
                                        $percentage = ($data['total_views'] / 10000) * 100;
                                        $displayPercentage = $percentage > 100 ? 100 : $percentage;
                                    @endphp
                                    
                                    <div class="bar-fill" style="width: {{ $displayPercentage }}%;">
                                        <div class="bar-dot"></div>
                                    </div>
                                </div>

    {{-- Format angka views dengan titik ribuan --}}
    <div class="bar-label">
        {{ number_format($data['total_views'], 0, ',', '.') }} <br>
        <span>View</span>
    </div>
</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Baris 3: Chart Donut (Varian Diminati) --}}
        <div class="analytic-section">
            <div class="section-title" style="color: #000;">
                Analisis Varian: Paling Diminati (Prospek)
            </div>

            <div class="chart-wrapper">
                {{-- Tempat Chart.js di-render --}}
                <div class="chart-container">
                    <canvas id="variantChart"></canvas>
                </div>

                {{-- Custom Legend sesuai desain UI --}}
                <div class="custom-legend">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #2563eb;"></div>
                        <div class="legend-label">Size L</div>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #1d4ed8;"></div>
                        <div class="legend-label">Size 42</div>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #60a5fa;"></div>
                        <div class="legend-label">Size XL</div>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #1e293b;"></div>
                        <div class="legend-label">Size 40</div>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #cbd5e1;"></div>
                        <div class="legend-label">Size M</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ==========================================
        3. JAVASCRIPT (CHART.JS)
        ========================================== --}}
        @push('scripts')
            {{-- Import Chart.js dari CDN --}}
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const ctx = document.getElementById('variantChart').getContext('2d');

                    // Data untuk chart, menyesuaikan persentase di gambar
                    const data = {
                        labels: ['Size L', 'Size 42', 'Size XL', 'Size 40', 'Size M'],
                        datasets: [{
                            data: [35, 20, 15, 20, 10], // Proporsi potongan donat
                            backgroundColor: [
                                '#2563eb', // Size L (Biru sedang)
                                '#1d4ed8', // Size 42 (Biru gelap)
                                '#60a5fa', // Size XL (Biru terang)
                                '#1e293b', // Size 40 (Hitam/Navy)
                                '#cbd5e1'  // Size M (Abu-abu)
                            ],
                            borderWidth: 0, // Tanpa border agar menyatu bersih seperti desain
                        }]
                    };

                    const config = {
                        type: 'doughnut',
                        data: data,
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            cutout: '55%', // Ukuran lubang di tengah
                            plugins: {
                                legend: {
                                    display: false // Sembunyikan legend bawaan, pakai custom HTML
                                },
                                tooltip: {
                                    callbacks: {
                                        label: function (context) {
                                            return ' ' + context.label + ': ' + context.raw + '%';
                                        }
                                    }
                                }
                            }
                        }
                    };

                    new Chart(ctx, config);
                });
            </script>
        @endpush

@endsection