@include('admin.header', [
    'title' => 'BAOPCL Dashboard',
    'active' => 'dashboard',
    'searchPlaceholder' => 'Search leads, exhibitions, products, batches...'
])

<style>
        .dash-card {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: .5rem;
            background: rgba(255, 250, 240, .88);
            box-shadow: 0 12px 30px rgba(48, 58, 39, .07);
        }
        .dash-card::after {
            content: "";
            position: absolute;
            right: -45px;
            top: -45px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(47, 123, 53, .08);
        }
        .dash-mini {
            display: flex;
            gap: .9rem;
            align-items: center;
            min-height: 132px;
            padding: 1.1rem;
        }
        .dash-mini .stat-icon {
            width: 54px;
            height: 54px;
            flex: 0 0 54px;
        }
        .dash-kicker {
            color: var(--muted);
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
        }
        .dash-number {
            color: var(--forest-dark);
            font-size: clamp(1.7rem, 3vw, 2.25rem);
            font-weight: 900;
            line-height: 1;
        }
        .dashboard-grid-fade {
            animation: dashboardFade .42s ease both;
        }
        .dashboard-grid-fade:nth-of-type(2) { animation-delay: .04s; }
        .dashboard-grid-fade:nth-of-type(3) { animation-delay: .08s; }
        @keyframes dashboardFade {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .metric-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .75rem;
        }
        .metric-strip > div {
            padding: .85rem;
            border: 1px solid rgba(51, 74, 56, .1);
            border-radius: .5rem;
            background: rgba(255, 255, 255, .58);
        }
        .activity-row {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr) auto;
            gap: .75rem;
            align-items: center;
            padding: .78rem 0;
            border-bottom: 1px solid rgba(54, 71, 53, .08);
        }
        .activity-row:last-child { border-bottom: 0; }
        .activity-icon {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            color: #fff;
            border-radius: 50%;
            background: var(--leaf);
        }
        .progress-track {
            height: 8px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(47, 123, 53, .12);
        }
        .progress-fill {
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #2f7b35, #b9782c);
            transition: width .9s ease;
        }
        @media (max-width: 767.98px) {
            .metric-strip { grid-template-columns: 1fr; }
            .activity-row { grid-template-columns: 32px minmax(0, 1fr); }
            .activity-row > .pill { grid-column: 2; }
        }
</style>

<section class="hero mb-3 dashboard-grid-fade">
    <div class="hero-content">
        <h1>BAOPCL Operations</h1>
        <div class="hero-tagline mb-3">
            <span>Products</span>
            <span>|</span>
            <span>Exhibitions</span>
            <span>|</span>
            <span>Buyer Leads</span>
        </div>
        <p class="mb-4 text-secondary">
            Live view of organic ginger products, available stock, buyer enquiries, exhibition QR scans, certificates, and lab-report readiness.
        </p>
        <div class="d-flex flex-wrap gap-2">
            <a class="btn-earth" href="{{ route('admin.exhibitions.index') }}"><i class="bi bi-qr-code-scan"></i> Track Exhibitions</a>
            <a class="btn-outline-earth" href="{{ route('admin.products.index') }}"><i class="bi bi-box-seam-fill"></i> Manage Products</a>
        </div>
    </div>
    <div class="hero-badges">
        <div class="hero-badge"><i class="bi bi-inbox-fill"></i><span>{{ number_format($stats['leads']) }}<br>Leads</span></div>
        <div class="hero-badge"><i class="bi bi-qr-code"></i><span>{{ number_format($stats['scan_events']) }}<br>Scans</span></div>
        <div class="hero-badge"><i class="bi bi-box-seam-fill"></i><span>{{ number_format($stats['available_batches']) }}<br>Batches</span></div>
        <div class="hero-badge"><i class="bi bi-patch-check-fill"></i><span>{{ number_format($stats['current_certificates']) }}<br>Certificates</span></div>
    </div>
</section>

<section class="row g-3 mb-3 dashboard-grid-fade">
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="dash-card dash-mini">
            <span class="stat-icon"><i class="bi bi-inbox-fill"></i></span>
            <div class="min-w-0">
                <div class="dash-kicker">Total Leads</div>
                <div class="dash-number" data-count-to="{{ $stats['leads'] }}">0</div>
                <div class="small text-muted">{{ number_format($stats['scanner_leads']) }} scanner, {{ number_format($stats['website_leads']) }} website</div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="dash-card dash-mini">
            <span class="stat-icon"><i class="bi bi-calendar-event-fill"></i></span>
            <div class="min-w-0">
                <div class="dash-kicker">Active Exhibitions</div>
                <div class="dash-number" data-count-to="{{ $stats['active_exhibitions'] }}">0</div>
                <div class="small text-muted">{{ number_format($stats['exhibitions']) }} total exhibitions</div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="dash-card dash-mini">
            <span class="stat-icon"><i class="bi bi-box-seam-fill"></i></span>
            <div class="min-w-0">
                <div class="dash-kicker">Available Stock</div>
                <div class="dash-number"><span data-count-to="{{ $stats['stock_quantity'] }}">0</span></div>
                <div class="small text-muted">{{ $stats['stock_unit'] }} across {{ number_format($stats['available_batches']) }} batches</div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-6 col-xxl-3">
        <div class="dash-card dash-mini">
            <span class="stat-icon"><i class="bi bi-graph-up-arrow"></i></span>
            <div class="min-w-0">
                <div class="dash-kicker">QR Conversion</div>
                <div class="dash-number"><span data-count-to="{{ $stats['conversion_rate'] }}">0</span>%</div>
                <div class="small text-muted">{{ number_format($stats['unique_sessions']) }} unique scan sessions</div>
            </div>
        </div>
    </div>
</section>

<section class="row g-3 mb-3 dashboard-grid-fade">
    <div class="col-12 col-xl-7">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon"><i class="bi bi-activity"></i></span>Lead & QR Activity</h2>
                <span class="pill">Last 7 days</span>
            </div>
            <div class="card-body-pad">
                <div class="chart-box" style="height: 280px;"><canvas id="leadTrendChart"></canvas></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-5">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon" style="background:#b8782d"><i class="bi bi-pie-chart-fill"></i></span>Lead Source Mix</h2>
            </div>
            <div class="card-body-pad">
                <div class="chart-box" style="height: 280px;"><canvas id="sourceMixChart"></canvas></div>
            </div>
        </div>
    </div>
</section>

<section class="row g-3 mb-3 dashboard-grid-fade">
    <div class="col-12 col-xl-5">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon"><i class="bi bi-box2-heart-fill"></i></span>Stock by Product</h2>
                <a class="small fw-bold text-decoration-none text-success" href="{{ route('admin.batches.index') }}">Manage batches</a>
            </div>
            <div class="card-body-pad">
                <div class="chart-box"><canvas id="stockProductChart"></canvas></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-4">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon" style="background:#b8782d"><i class="bi bi-shield-check"></i></span>Quality Readiness</h2>
            </div>
            <div class="card-body-pad">
                <div class="metric-strip mb-3">
                    <div><div class="dash-kicker">Products</div><div class="fw-black fs-3">{{ number_format($stats['products']) }}</div></div>
                    <div><div class="dash-kicker">Reports</div><div class="fw-black fs-3">{{ number_format($stats['active_lab_reports']) }}</div></div>
                    <div><div class="dash-kicker">Blogs</div><div class="fw-black fs-3">{{ number_format($stats['published_blogs']) }}</div></div>
                </div>

                @php
                    $qualityTotal = max(1, $stats['current_certificates'] + $stats['active_lab_reports'] + $stats['available_batches']);
                    $qualityPercent = min(100, round((($stats['current_certificates'] + $stats['active_lab_reports']) / $qualityTotal) * 100));
                @endphp
                <div class="d-flex justify-content-between small fw-bold mb-2">
                    <span>Certificates + Reports</span>
                    <span>{{ $qualityPercent }}%</span>
                </div>
                <div class="progress-track mb-3"><div class="progress-fill" data-progress="{{ $qualityPercent }}"></div></div>

                <div class="report-item"><i class="bi bi-patch-check-fill"></i><span class="fw-semibold">Current Certificates</span><span class="pill">{{ number_format($stats['current_certificates']) }}</span></div>
                <div class="report-item"><i class="bi bi-file-earmark-medical-fill"></i><span class="fw-semibold">Active Lab Reports</span><span class="pill">{{ number_format($stats['active_lab_reports']) }}</span></div>
                <div class="report-item"><i class="bi bi-box-seam-fill"></i><span class="fw-semibold">Available Batches</span><span class="pill">{{ number_format($stats['available_batches']) }}</span></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-3">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon"><i class="bi bi-qr-code-scan"></i></span>QR Sessions</h2>
            </div>
            <div class="card-body-pad">
                <div class="chart-box"><canvas id="scanTrendChart"></canvas></div>
            </div>
        </div>
    </div>
</section>

<section class="row g-3 dashboard-grid-fade">
    <div class="col-12 col-xl-4">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon"><i class="bi bi-person-lines-fill"></i></span>Recent Leads</h2>
                <a class="small fw-bold text-decoration-none text-success" href="{{ route('admin.leads.index') }}">View all</a>
            </div>
            <div class="card-body-pad pt-1">
                @forelse ($recentLeads as $lead)
                    <div class="activity-row">
                        <span class="activity-icon"><i class="bi bi-person-fill"></i></span>
                        <div class="min-w-0">
                            <div class="fw-bold text-truncate">{{ $lead->name }}</div>
                            <div class="small text-muted text-truncate">{{ $lead->exhibition?->name ?: ucfirst($lead->source).' lead' }} - {{ optional($lead->submitted_at)->format('d M, h:i A') }}</div>
                        </div>
                        <span class="pill" style="{{ $lead->source === 'scanner' ? '' : 'color:#1d4f91;background:#dbeafe;' }}">{{ ucfirst($lead->source) }}</span>
                    </div>
                @empty
                    <div class="text-center py-4">
                        <i class="bi bi-inbox display-6 text-success"></i>
                        <div class="fw-bold mt-2">No leads yet</div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-5">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon" style="background:#b8782d"><i class="bi bi-box-seam-fill"></i></span>Latest Batches</h2>
                <a class="small fw-bold text-decoration-none text-success" href="{{ route('admin.batches.index') }}">Batch reports</a>
            </div>
            <div class="card-body-pad">
                <div class="table-responsive">
                    <table class="table wide-table align-middle">
                        <thead>
                            <tr>
                                <th>Batch</th>
                                <th>Product</th>
                                <th>Remaining</th>
                                <th>Reports</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($recentBatches as $batch)
                                <tr>
                                    <td class="fw-semibold">{{ $batch->batch_number }}</td>
                                    <td>{{ $batch->productLabel() }}</td>
                                    <td>{{ number_format((float) $batch->remaining_quantity, 2) }} {{ $batch->quantity_unit }}</td>
                                    <td>{{ $batch->activeLabReports->count() }}</td>
                                    <td><span class="pill" style="{{ $batch->status() === 'Available' ? '' : 'color:#8a2c1d;background:#f8d7cf;' }}">{{ $batch->status() }}</span></td>
                                </tr>
                            @empty
                                <tr><td colspan="5" class="text-center py-4">No batches available.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xl-3">
        <div class="content-card">
            <div class="card-head">
                <h2 class="card-title"><span class="title-icon"><i class="bi bi-trophy-fill"></i></span>Top Exhibitions</h2>
            </div>
            <div class="card-body-pad pt-1">
                @forelse ($topExhibitions as $exhibition)
                    <div class="activity-row">
                        <span class="activity-icon" style="background:#b8782d"><i class="bi bi-calendar-event-fill"></i></span>
                        <div class="min-w-0">
                            <div class="fw-bold text-truncate">{{ $exhibition->name }}</div>
                            <div class="small text-muted">{{ number_format($exhibition->scan_events_count) }} scans, {{ number_format($exhibition->submissions_count) }} leads</div>
                        </div>
                        <span class="pill">{{ number_format($exhibition->conversionRate(), 1) }}%</span>
                    </div>
                @empty
                    <div class="text-center py-4">
                        <i class="bi bi-calendar-event display-6 text-success"></i>
                        <div class="fw-bold mt-2">No exhibitions yet</div>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</section>

@push('scripts')
    <script>
        (() => {
            const leadTrend = @json($leadTrend);
            const scanTrend = @json($scanTrend);
            const stockByProduct = @json($stockByProduct);
            const stats = @json($stats);

            const animateNumber = (el) => {
                const target = Number(el.dataset.countTo || 0);
                const duration = 850;
                const started = performance.now();
                const tick = (now) => {
                    const progress = Math.min((now - started) / duration, 1);
                    const eased = 1 - Math.pow(1 - progress, 3);
                    const value = target * eased;
                    el.textContent = target % 1 === 0
                        ? Math.round(value).toLocaleString()
                        : value.toLocaleString(undefined, { maximumFractionDigits: 2 });
                    if (progress < 1) requestAnimationFrame(tick);
                };
                requestAnimationFrame(tick);
            };

            document.querySelectorAll('[data-count-to]').forEach(animateNumber);
            document.querySelectorAll('.progress-fill').forEach((bar) => {
                requestAnimationFrame(() => { bar.style.width = `${bar.dataset.progress || 0}%`; });
            });

            const gridColor = 'rgba(42, 59, 45, .1)';
            const tickColor = '#647064';
            const tooltip = { backgroundColor: '#143a25', padding: 12 };
            const emptyStock = stockByProduct.length ? stockByProduct : [{ label: 'No stock', quantity: 0 }];

            const makeGradient = (ctx, colorA, colorB) => {
                const gradient = ctx.createLinearGradient(0, 0, 0, 260);
                gradient.addColorStop(0, colorA);
                gradient.addColorStop(1, colorB);
                return gradient;
            };

            const leadCanvas = document.getElementById('leadTrendChart');
            if (leadCanvas) {
                const ctx = leadCanvas.getContext('2d');
                new Chart(leadCanvas, {
                    type: 'bar',
                    data: {
                        labels: leadTrend.map(row => row.label),
                        datasets: [
                            { label: 'Website Leads', data: leadTrend.map(row => row.website), backgroundColor: makeGradient(ctx, '#2f7b35', '#9fc37e'), borderRadius: 4, stack: 'leads' },
                            { label: 'Scanner Leads', data: leadTrend.map(row => row.scanner), backgroundColor: makeGradient(ctx, '#b9782c', '#e3bc76'), borderRadius: 4, stack: 'leads' }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: { duration: 900, easing: 'easeOutQuart' },
                        plugins: { legend: { position: 'top', align: 'end' }, tooltip },
                        scales: {
                            x: { stacked: true, grid: { display: false }, ticks: { color: tickColor } },
                            y: { stacked: true, beginAtZero: true, grid: { color: gridColor }, ticks: { color: tickColor, precision: 0 } }
                        }
                    }
                });
            }

            const sourceCanvas = document.getElementById('sourceMixChart');
            if (sourceCanvas) {
                new Chart(sourceCanvas, {
                    type: 'doughnut',
                    data: {
                        labels: ['Scanner Leads', 'Website Leads'],
                        datasets: [{ data: [stats.scanner_leads, stats.website_leads], backgroundColor: ['#2f7b35', '#b9782c'], borderColor: '#fffaf0', borderWidth: 4, hoverOffset: 8 }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        cutout: '64%',
                        animation: { animateRotate: true, duration: 900 },
                        plugins: { legend: { position: 'bottom' }, tooltip }
                    }
                });
            }

            const stockCanvas = document.getElementById('stockProductChart');
            if (stockCanvas) {
                new Chart(stockCanvas, {
                    type: 'bar',
                    data: {
                        labels: emptyStock.map(row => row.label),
                        datasets: [{ label: 'Available Stock', data: emptyStock.map(row => row.quantity), backgroundColor: ['#2f7b35', '#b9782c', '#7f9b55', '#d7a04d', '#143a25'], borderRadius: 4 }]
                    },
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: { duration: 900, easing: 'easeOutQuart' },
                        plugins: { legend: { display: false }, tooltip },
                        scales: {
                            x: { beginAtZero: true, grid: { color: gridColor }, ticks: { color: tickColor } },
                            y: { grid: { display: false }, ticks: { color: tickColor } }
                        }
                    }
                });
            }

            const scanCanvas = document.getElementById('scanTrendChart');
            if (scanCanvas) {
                new Chart(scanCanvas, {
                    type: 'line',
                    data: {
                        labels: scanTrend.map(row => row.label),
                        datasets: [
                            { label: 'Scan Events', data: scanTrend.map(row => row.events), borderColor: '#b9782c', backgroundColor: 'rgba(185, 120, 44, .16)', tension: .36, fill: true },
                            { label: 'Unique Sessions', data: scanTrend.map(row => row.sessions), borderColor: '#2f7b35', backgroundColor: 'rgba(47, 123, 53, .12)', tension: .36, fill: true }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: { duration: 900, easing: 'easeOutQuart' },
                        plugins: { legend: { display: false }, tooltip },
                        scales: {
                            x: { grid: { display: false }, ticks: { color: tickColor, maxRotation: 0 } },
                            y: { beginAtZero: true, grid: { color: gridColor }, ticks: { color: tickColor, precision: 0 } }
                        }
                    }
                });
            }
        })();
    </script>
@endpush

@include('admin.footer')