@extends('admin.layout.content')

@section('content')
    <div class="container-fluid px-3 px-lg-4 py-5">
        <!-- Header -->
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-end gap-4 mb-4">
            <div>
                <h2 class="fw-bold">Ringkasan Dashboard</h2>
                <p class="text-muted mb-0">Selamat datang kembali, admin!</p>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-2">
                {{-- Filter Periode Tanam --}}
                <form method="GET" id="period-filter-form" class="d-flex align-items-center gap-2 position-relative">
                    <div class="d-flex align-items-center gap-2 rounded-3 px-3 py-2" style="background: var(--primary);">
                        <span class="material-symbols-outlined text-white" style="font-size: 20px;">agriculture</span>
                        {{-- Custom Select --}}
                        <div class="custom-period-select" id="customPeriodSelect" tabindex="0"
                            style="min-width: 200px; padding: 0.25rem 0.25rem; cursor: pointer; color: white; position: relative;">
                            <span id="selectedPeriodText" class="fw-semibold" style="font-size: 0.875rem;">
                                @if($selectedPeriodId)
                                    {{ $allPeriods->firstWhere('planting_period_id', $selectedPeriodId)->period_code ?? '-- Semua Periode --' }}
                                    ({{ $allPeriods->firstWhere('planting_period_id', $selectedPeriodId)->product->product_name ?? '' }})
                                @else
                                    -- Semua Periode --
                                @endif
                            </span>
                            <span class="material-symbols-outlined" style="font-size: 18px; float: right;">arrow_drop_down</span>
                            <div class="custom-period-dropdown" id="customPeriodDropdown"
                                style="display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); max-height: 250px; overflow-y: auto; margin-top: 4px;">
                                <div class="custom-period-option {{ empty($selectedPeriodId) ? 'active' : '' }}" data-value="">
                                    -- Semua Periode --
                                </div>
                                @foreach($allPeriods as $period)
                                    <div class="custom-period-option {{ $selectedPeriodId == $period->planting_period_id ? 'active' : '' }}"
                                        data-value="{{ $period->planting_period_id }}">
                                        {{ $period->period_code }} ({{ $period->product->product_name ?? '' }})
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <select name="planting_period_id" id="planting_period_id" style="display: none;">
                            <option value="" {{ empty($selectedPeriodId) ? 'selected' : '' }}>-- Semua Periode --</option>
                            @foreach($allPeriods as $period)
                                <option value="{{ $period->planting_period_id }}"
                                    {{ $selectedPeriodId == $period->planting_period_id ? 'selected' : '' }}>
                                    {{ $period->period_code }} ({{ $period->product->product_name ?? '' }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <noscript><button type="submit" class="btn btn-sm btn-light">Filter</button></noscript>
                </form>
            </div>
        </div>

        <!-- Stats (Dirampingkan menjadi 4 Card Utama) -->
        <div class="row g-4 mb-4">
            <!-- Total Penjualan -->
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="tf-card p-4 h-100">
                    <div class="d-flex justify-content-between mb-4">
                        <div class="tf-icon-box rounded-4 d-flex align-items-center justify-content-center"
                            style="background: #dcefe4">
                            <span class="material-symbols-outlined">payments</span>
                        </div>
                        <div class="{{ $salesGrowth >= 0 ? 'text-success' : 'text-danger' }} fw-bold">
                            {{ $salesGrowth >= 0 ? '+' : '' }}{{ $salesGrowth }}%
                        </div>
                    </div>
                    <small class="text-muted">Total Penjualan</small>
                    <h3 class="fw-bold mt-2">Rp {{ number_format($totalSales, 0, ',', '.') }}</h3>
                </div>
            </div>

            <!-- Pesanan Aktif -->
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="tf-card p-4 h-100">
                    <div class="d-flex justify-content-between mb-4">
                        <div class="tf-icon-box rounded-4 d-flex align-items-center justify-content-center"
                            style="background: #ffe2d7">
                            <span class="material-symbols-outlined">pending_actions</span>
                        </div>
                        <div class="{{ $orderGrowth >= 0 ? 'text-success' : 'text-danger' }} fw-bold">
                            {{ $orderGrowth >= 0 ? '+' : '' }}{{ $orderGrowth }}%
                        </div>
                    </div>
                    <small class="text-muted">Pesanan Aktif</small>
                    <h3 class="fw-bold mt-2">{{ $activeOrders }} Pesanan</h3>
                </div>
            </div>

            <!-- Masa Tanam Aktif -->
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="tf-card p-4 h-100">
                    <div class="d-flex justify-content-between mb-4">
                        <div class="tf-icon-box rounded-4 d-flex align-items-center justify-content-center"
                            style="background: #d4edda">
                            <span class="material-symbols-outlined">agriculture</span>
                        </div>
                        <div class="text-success fw-bold">{{ $activePeriods }} Aktif</div>
                    </div>
                    <small class="text-muted">Masa Tanam Aktif</small>
                    <h3 class="fw-bold mt-2">{{ $activePeriods }} Periode</h3>
                </div>
            </div>

            <!-- Total Pembeli / Pelanggan -->
            <div class="col-12 col-sm-6 col-xl-3">
                <div class="tf-card p-4 h-100">
                    <div class="d-flex justify-content-between mb-4">
                        <div class="tf-icon-box rounded-4 d-flex align-items-center justify-content-center"
                            style="background: #f0e6ff">
                            <span class="material-symbols-outlined">group</span>
                        </div>
                        <div class="text-info fw-bold">{{ $newBuyersThisMonth }} Baru</div>
                    </div>
                    <small class="text-muted">Total Pelanggan</small>
                    <h3 class="fw-bold mt-2">{{ $totalBuyers }} Member</h3>
                </div>
            </div>
        </div>

        <!-- Baris Chart Atas -->
        <div class="row g-4 mb-4">
            <!-- Chart Penjualan -->
            <div class="col-12 col-xl-8">
                <div class="tf-card p-4 h-100">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h5 class="fw-bold mb-1">Tren Penjualan</h5>
                            <small class="text-muted">{{ $weekLabel }}</small>
                        </div>
                        <div class="d-flex gap-1">
                            <a href="{{ request()->fullUrlWithQuery(['week_offset' => $weekOffset + 1]) }}"
                               class="btn btn-sm btn-outline-secondary rounded-pill px-3 {{ $weekOffset >= 4 ? 'disabled' : '' }}"
                               style="font-size: 12px;">
                                <span class="material-symbols-outlined" style="font-size: 16px;">chevron_left</span>
                                Sebelumnya
                            </a>
                            <a href="{{ request()->fullUrlWithQuery(['week_offset' => max(0, $weekOffset - 1)]) }}"
                               class="btn btn-sm btn-outline-secondary rounded-pill px-3 {{ $weekOffset == 0 ? 'disabled' : '' }}"
                               style="font-size: 12px;">
                                Berikutnya
                                <span class="material-symbols-outlined" style="font-size: 16px;">chevron_right</span>
                            </a>
                        </div>
                    </div>
                    <div style="position: relative; height: 300px; width: 100%;">
                        <canvas id="salesTrendChart"></canvas>
                    </div>
                    <div class="mt-3 d-flex justify-content-center gap-4">
                        <small class="text-muted d-flex align-items-center gap-2">
                            <span style="display: inline-block; width: 12px; height: 3px; background: #2ecc71; border-radius: 2px;"></span>
                            Pembelian Online
                        </small>
                        <small class="text-muted d-flex align-items-center gap-2">
                            <span style="display: inline-block; width: 12px; height: 3px; background: #e74c3c; border-radius: 2px;"></span>
                            Pembelian POS
                        </small>
                    </div>
                </div>
            </div>

            <!-- Chart Status Pesanan -->
            <div class="col-12 col-xl-4">
                <div class="tf-card p-4 h-100 d-flex flex-column">
                    <div>
                        <h5 class="fw-bold mb-1">Status Pesanan</h5>
                        <small class="text-muted">Distribusi semua pesanan saat ini</small>
                    </div>
                    <div class="flex-grow-1 d-flex align-items-center justify-content-center mt-3" style="position: relative; min-height: 250px;">
                        <canvas id="orderStatusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Baris Chart Bawah & Tabel -->
        <div class="row g-4 mb-4">
            <!-- Chart Produk Terlaris -->
            <div class="col-12 col-xl-4">
                <div class="tf-card p-4 h-100 d-flex flex-column">
                    <div>
                        <h5 class="fw-bold mb-1">Produk Terlaris</h5>
                        <small class="text-muted">Berdasarkan total unit terjual</small>
                    </div>
                    <div class="flex-grow-1 d-flex flex-column align-items-center justify-content-center mt-3">
                        <div style="position: relative; height: 250px; width: 100%;">
                            <canvas id="topProductsChart"></canvas>
                        </div>
                        <a href="{{ route('admin.products.index', ['code' => session('admin_route_code')]) }}" class="btn btn-sm btn-outline-success w-100 mt-4 fw-semibold rounded-pill">
                            Lihat Semua
                        </a>
                    </div>
                </div>
            </div>

            <!-- Pesanan Terbaru Table -->
            <div class="col-12 col-xl-8">
                <div class="tf-card overflow-hidden h-100 d-flex flex-column">
                    <div class="p-4 border-bottom d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
                        <div>
                            <h5 class="fw-bold mb-1">Pesanan Terbaru</h5>
                            <small class="text-muted">Daftar transaksi terbaru pelanggan</small>
                        </div>
                        <a href="{{ route('admin.history.index', ['code' => session('admin_route_code')]) }}" class="btn btn-success rounded-pill px-4">
                            Lihat Transaksi
                        </a>
                    </div>
                    <div class="table-responsive flex-grow-1">
                        <table class="table align-middle mb-0 tf-table">
                            <thead>
                                <tr>
                                    <th>Invoice</th>
                                    <th>Tanggal Pesan</th>
                                    <th>Status</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentOrders as $order)
                                    <tr>
                                        <td class="fw-bold text-success">#{{ $order->invoice_number }}</td>
                                        <td class="text-muted">{{ $order->created_at->format('d M Y, H:i') }}</td>
                                        <td>
                                            @php
                                                $statusColors = [
                                                    'pending' => 'warning',
                                                    'processing' => 'info',
                                                    'shipped' => 'primary',
                                                    'completed' => 'success',
                                                    'cancelled' => 'danger'
                                                ];
                                                $color = $statusColors[$order->order_status] ?? 'secondary';
                                            @endphp
                                            <span class="badge bg-{{ $color }}-subtle text-{{ $color }} rounded-pill px-3 py-2">
                                                {{ ucfirst($order->order_status) }}
                                            </span>
                                        </td>
                                        <td class="fw-bold">Rp {{ number_format($order->total_payment, 0, ',', '.') }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="4" class="text-center py-4 text-muted">Belum ada pesanan terbaru.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .custom-period-select {
            user-select: none;
        }
        .custom-period-select:focus {
            outline: none;
        }
        .custom-period-option {
            padding: 10px 16px;
            color: #1a1a1a;
            cursor: pointer;
            font-size: 0.875rem;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .custom-period-option:hover {
            background: #024e32 !important;
            color: #ffffff !important;
        }
        .custom-period-option.active {
            background: #024e32 !important;
            color: #ffffff !important;
            font-weight: 600;
        }
        .custom-period-dropdown::-webkit-scrollbar {
            width: 6px;
        }
        .custom-period-dropdown::-webkit-scrollbar-track {
            background: transparent;
        }
        .custom-period-dropdown::-webkit-scrollbar-thumb {
            background: #c1c8c2;
            border-radius: 10px;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const select = document.getElementById('customPeriodSelect');
            const dropdown = document.getElementById('customPeriodDropdown');
            const hiddenSelect = document.getElementById('planting_period_id');
            const selectedText = document.getElementById('selectedPeriodText');
            const options = dropdown.querySelectorAll('.custom-period-option');
            const form = document.getElementById('period-filter-form');

            // Toggle dropdown
            select.addEventListener('click', function(e) {
                e.stopPropagation();
                dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
            });

            // Click option
            options.forEach(function(opt) {
                opt.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const value = this.getAttribute('data-value');
                    const text = this.textContent.trim();

                    // Update hidden select
                    hiddenSelect.value = value;

                    // Update displayed text
                    selectedText.textContent = text;

                    // Update active class
                    options.forEach(function(o) { o.classList.remove('active'); });
                    this.classList.add('active');

                    // Close dropdown
                    dropdown.style.display = 'none';

                    // Submit form
                    form.submit();
                });
            });

            // Close dropdown when clicking outside
            document.addEventListener('click', function() {
                dropdown.style.display = 'none';
            });

            // Prevent closing when clicking inside dropdown
            dropdown.addEventListener('click', function(e) {
                e.stopPropagation();
            });

            // CHART.JS INITIALIZATION
            // 1. Sales Trend Chart
            const salesTrendCtx = document.getElementById('salesTrendChart');
            if (salesTrendCtx) {
                const salesTrendLabels = {!! json_encode(array_column($salesTrend, 'date')) !!};
                const onlineTrendData = {!! json_encode($onlineTrend ?? []) !!};
                const posTrendData = {!! json_encode($posTrend ?? []) !!};

                new Chart(salesTrendCtx.getContext('2d'), {
                    type: 'line',
                    data: {
                        labels: salesTrendLabels,
                        datasets: [
                            {
                                label: 'Pembelian Online',
                                data: onlineTrendData,
                                borderColor: '#2ecc71',
                                backgroundColor: 'rgba(46, 204, 113, 0.1)',
                                borderWidth: 2,
                                tension: 0.4,
                                fill: true,
                                pointBackgroundColor: '#2ecc71',
                                pointRadius: 4,
                                pointHoverRadius: 6
                            },
                            {
                                label: 'Pembelian POS',
                                data: posTrendData,
                                borderColor: '#e74c3c',
                                backgroundColor: 'rgba(231, 76, 60, 0.1)',
                                borderWidth: 2,
                                tension: 0.4,
                                fill: true,
                                pointBackgroundColor: '#e74c3c',
                                pointRadius: 4,
                                pointHoverRadius: 6
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        if (value >= 1000) {
                                            return 'Rp ' + (value / 1000) + 'k';
                                        }
                                        return 'Rp ' + value;
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // 2. Order Status Chart
            const orderStatusCtx = document.getElementById('orderStatusChart');
            if (orderStatusCtx) {
                const orderStatusRaw = {!! json_encode($orderStatusChartData ?? []) !!};

                new Chart(orderStatusCtx.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: ['Pending', 'Processing', 'Shipped', 'Completed', 'Cancelled'],
                        datasets: [{
                            data: [
                                orderStatusRaw.pending || 0,
                                orderStatusRaw.processing || 0,
                                orderStatusRaw.shipped || 0,
                                orderStatusRaw.completed || 0,
                                orderStatusRaw.cancelled || 0
                            ],
                            backgroundColor: ['#f1c40f', '#3498db', '#007bff', '#2ecc71', '#e74c3c'],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { position: 'bottom' }
                        },
                        cutout: '70%'
                    }
                });
            }

            // 3. Top Products Chart
            const topProductsCtx = document.getElementById('topProductsChart');
            if (topProductsCtx) {
                const topProductsNames = {!! json_encode($topProducts->pluck('product_name')) !!};
                const topProductsQty = {!! json_encode($topProducts->pluck('total_qty')) !!};

                new Chart(topProductsCtx.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: topProductsNames.length > 0 ? topProductsNames : ['Belum ada data'],
                        datasets: [{
                            data: topProductsQty.length > 0 ? topProductsQty : [1],
                            backgroundColor: ['#27ae60', '#2ecc71', '#a4f792', '#f1c40f', '#e67e22', '#d35400', '#c0392b'],
                            borderWidth: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { position: 'right', labels: { boxWidth: 12 } }
                        },
                        cutout: '60%'
                    }
                });
            }
        });
    </script>
@endsection