@extends('layouts.admin')

@section('content')
@push('styles')
<style>
* { box-sizing: border-box; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-bottom: 20px; width: 100%; }
.stat-card { background: #fff; padding: 20px; border-radius: 6px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.02); display: flex; align-items: center; gap: 15px; overflow: hidden; width: 100%; }
.stat-icon-wrap { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #f8fafc; border-radius: 4px; border: 1px solid #f1f5f9; flex-shrink: 0; }
.stat-content { min-width: 0; flex: 1; }
.stat-value { font-size: 22px; font-weight: bold; color: #1e293b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-label { color: #64748b; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-section { background: #fff; padding: 20px; border-radius: 6px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.02); margin-bottom: 20px; width: 100%; overflow: hidden; }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.card-title { font-size: 16px; font-weight: bold; color: #1e293b; display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-icon { cursor: pointer; color: #666; flex-shrink: 0; }
.svg-icon { width: 24px; height: 24px; color: #4f46e5; flex-shrink: 0; }
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; width: 100%; }
.chart-container { position: relative; height: 220px; width: 100%; max-width: 100%; }
@media(max-width: 768px) { .charts-grid { grid-template-columns: 1fr; } }
</style>
@endpush

<div class="stat-grid">
    <div class="stat-card">
        <div class="stat-icon-wrap">
            <svg class="svg-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        </div>
        <div class="stat-content">
            <div class="stat-label">Total Payments / Users</div>
            <div class="stat-value">{{ (int) $totalUsers }}</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon-wrap">
            <svg class="svg-icon" style="color: #10b981;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
        </div>
        <div class="stat-content">
            <div class="stat-label">Total Orders</div>
            <div class="stat-value">{{ (int) $totalOrders }}</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon-wrap">
            <svg class="svg-icon" style="color: #f59e0b;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        <div class="stat-content">
            <div class="stat-label">Pending Orders</div>
            <div class="stat-value">{{ (int) $pendingOrders }}</div>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-icon-wrap">
            <svg class="svg-icon" style="color: #6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        <div class="stat-content">
            <div class="stat-label">Total Revenue</div>
            <div class="stat-value">{{ format_money($totalRevenue) }}</div>
        </div>
    </div>
</div>

<div class="charts-grid">
    <div class="card-section">
        <div class="card-header">
            <div class="card-title">
                <div class="stat-icon-wrap">
                    <svg class="svg-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
                </div>
                Users Market
            </div>
        </div>
        <div class="chart-container">
            <canvas id="usersMarketChart"></canvas>
        </div>
    </div>

    <div class="card-section">
        <div class="card-header">
            <div class="card-title">
                <div class="stat-icon-wrap">
                    <svg class="svg-icon" style="color: #10b981;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                </div>
                Orders Trend
            </div>
        </div>
        <div class="chart-container">
            <canvas id="ordersMarketChart"></canvas>
        </div>
    </div>

    <div class="card-section">
        <div class="card-header">
            <div class="card-title">
                <div class="stat-icon-wrap">
                    <svg class="svg-icon" style="color: #f59e0b;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                Pending Flow
            </div>
        </div>
        <div class="chart-container">
            <canvas id="pendingMarketChart"></canvas>
        </div>
    </div>

    <div class="card-section">
        <div class="card-header">
            <div class="card-title">
                <div class="stat-icon-wrap">
                    <svg class="svg-icon" style="color: #6366f1;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                Revenue Growth
            </div>
        </div>
        <div class="chart-container">
            <canvas id="revenueMarketChart"></canvas>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const chartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: '#f1f5f9' } },
            x: { grid: { display: false } }
        }
    };

    new Chart(document.getElementById('usersMarketChart').getContext('2d'), {
        type: 'line',
        data: {
            labels: ['Day 1', 'Day 5', 'Day 10', 'Day 15', 'Day 20', 'Day 25', 'Today'],
            datasets: [{
                data: [5, 12, 18, 25, 30, 45, {{ (int) $totalUsers }}],
                borderColor: '#4f46e5',
                backgroundColor: 'rgba(79, 70, 229, 0.05)',
                tension: 0.3,
                fill: true
            }]
        },
        options: chartOptions
    });

    new Chart(document.getElementById('ordersMarketChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: ['Day 1', 'Day 5', 'Day 10', 'Day 15', 'Day 20', 'Day 25', 'Today'],
            datasets: [{
                data: [10, 25, 40, 60, 80, 110, {{ (int) $totalOrders }}],
                backgroundColor: '#10b981',
                borderRadius: 4
            }]
        },
        options: chartOptions
    });

    new Chart(document.getElementById('pendingMarketChart').getContext('2d'), {
        type: 'line',
        data: {
            labels: ['Day 1', 'Day 5', 'Day 10', 'Day 15', 'Day 20', 'Day 25', 'Today'],
            datasets: [{
                data: [2, 5, 3, 8, 4, 6, {{ (int) $pendingOrders }}],
                borderColor: '#f59e0b',
                backgroundColor: 'rgba(245, 158, 11, 0.05)',
                tension: 0.3,
                fill: true
            }]
        },
        options: chartOptions
    });

    new Chart(document.getElementById('revenueMarketChart').getContext('2d'), {
        type: 'line',
        data: {
            labels: ['Day 1', 'Day 5', 'Day 10', 'Day 15', 'Day 20', 'Day 25', 'Today'],
            datasets: [{
                data: [100, 250, 400, 650, 900, 1200, {{ (float) $totalRevenue }}],
                borderColor: '#6366f1',
                backgroundColor: 'rgba(99, 102, 241, 0.05)',
                tension: 0.3,
                fill: true
            }]
        },
        options: chartOptions
    });
</script>
@endpush
@endsection