@extends('admin.layouts.admin')
@section('title', 'Dashboard - Seeding Social Media')
@section('content')

<style>
    :root {
        --primary-color: #2563eb;
        --secondary-color: #64748b;
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --danger-color: #ef4444;
        --info-color: #06b6d4;
        --dark-color: #1e293b;
        --light-bg: #f8fafc;
        --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    * {
        box-sizing: border-box;
    }

    body {
        background-color: var(--light-bg);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        margin: 0;
        padding: 0;
    }

    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
        max-width: 100%;
    }

    .dashboard-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, #3b82f6 100%);
        padding: 2rem 0;
        margin: -1rem -1rem 2rem -1rem;
        border-radius: 0 0 24px 24px;
    }

    .dashboard-title {
        color: white;
        font-weight: 700;
        font-size: 2rem;
        margin: 0;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .dashboard-subtitle {
        color: rgba(255,255,255,0.95);
        font-size: 1rem;
        margin: 0.5rem 0 0 0;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        letter-spacing: 0.025em;
    }

    .dashboard-subtitle i {
        font-size: 0.9rem;
        opacity: 0.8;
    }

    /* Clock styles */
    .live-clock {
        color: rgba(255,255,255,0.95);
        font-weight: 600;
        font-family: 'Courier New', monospace;
        letter-spacing: 1px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Stats Grid - Optimized for desktop */
    .stats-container {
        margin-bottom: 2rem;
    }

    .stats-grid {
        display: grid;
        gap: 1rem;
        /* Desktop: 4 columns */
        grid-template-columns: repeat(4, 1fr);
    }

    .stat-card {
        background: white;
        border: none;
        border-radius: 12px;
        box-shadow: var(--card-shadow);
        transition: all 0.3s ease;
        height: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--card-shadow-hover);
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--primary-color), var(--info-color));
    }

    .stat-card.bg-success::before { background: linear-gradient(90deg, var(--success-color), #34d399); }
    .stat-card.bg-warning::before { background: linear-gradient(90deg, var(--warning-color), #fbbf24); }
    .stat-card.bg-primary::before { background: linear-gradient(90deg, var(--primary-color), #3b82f6); }
    .stat-card.bg-info::before { background: linear-gradient(90deg, var(--info-color), #22d3ee); }
    .stat-card.bg-danger::before { background: linear-gradient(90deg, var(--danger-color), #f87171); }

    .stat-card-body {
        padding: 1.2rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        flex: 1;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 1.3rem;
        flex-shrink: 0;
        color: white;
    }

    .stat-icon.bg-success { background: linear-gradient(135deg, var(--success-color), #34d399); }
    .stat-icon.bg-warning { background: linear-gradient(135deg, var(--warning-color), #fbbf24); }
    .stat-icon.bg-primary { background: linear-gradient(135deg, var(--primary-color), #3b82f6); }
    .stat-icon.bg-info { background: linear-gradient(135deg, var(--info-color), #22d3ee); }
    .stat-icon.bg-danger { background: linear-gradient(135deg, var(--danger-color), #f87171); }

    .stat-content {
        flex: 1;
        min-width: 0;
    }

    .stat-value {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--dark-color);
        margin: 0 0 0.2rem 0;
        line-height: 1.2;
        word-break: break-all;
    }

    .stat-label {
        font-size: 0.8rem;
        color: var(--secondary-color);
        margin: 0;
        font-weight: 500;
        line-height: 1.3;
    }

    /* Charts Grid */
    .charts-container {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: 1fr 1fr;
    }

    .chart-card {
        background: white;
        border: none;
        border-radius: 16px;
        box-shadow: var(--card-shadow);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .chart-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, #3b82f6 100%);
        color: white;
        padding: 1rem 1.2rem;
        font-weight: 600;
        font-size: 0.9rem;
        letter-spacing: 0.025em;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .chart-body {
        padding: 1.2rem;
        flex: 1;
    }

    .chart-full-width {
        grid-column: 1 / -1;
    }

    /* Responsive Design */
    
    /* Large Desktop: 1400px+ */
    @media (min-width: 1400px) {
        .container-fluid {
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .stats-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 1.2rem;
        }
        .stat-value {
            font-size: 1.5rem;
        }
    }

    /* Desktop: 1200px - 1399px */
    @media (max-width: 1399px) and (min-width: 1200px) {
        .stats-grid {
            grid-template-columns: repeat(4, 1fr);
        }
        .stat-value {
            font-size: 1.35rem;
        }
    }

    /* Large Tablet: 992px - 1199px */
    @media (max-width: 1199px) and (min-width: 992px) {
        .stats-grid {
            grid-template-columns: repeat(3, 1fr);
        }
        .charts-container {
            grid-template-columns: 1fr;
        }
        .stat-value {
            font-size: 1.3rem;
        }
    }

    /* Tablet: 768px - 991px */
    @media (max-width: 991px) and (min-width: 768px) {
        .dashboard-header {
            padding: 1.5rem 0;
        }
        .dashboard-title {
            font-size: 1.75rem;
        }
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.25rem;
        }
        .charts-container {
            grid-template-columns: 1fr;
            gap: 1.25rem;
        }
        .stat-card-body {
            padding: 1.25rem;
        }
        .stat-value {
            font-size: 1.5rem;
        }
    }

    /* Mobile Large: 576px - 767px */
    @media (max-width: 767px) and (min-width: 576px) {
        .container-fluid {
            padding-left: 0.75rem;
            padding-right: 0.75rem;
        }
        .dashboard-header {
            padding: 1.25rem 0;
            margin: -0.75rem -0.75rem 1.75rem -0.75rem;
        }
        .dashboard-title {
            font-size: 1.5rem;
        }
        .dashboard-subtitle {
            font-size: 0.9rem;
            flex-direction: row;
            justify-content: center;
        }
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.125rem;
        }
        .stats-container {
            margin-bottom: 2.25rem;
        }
        .charts-container {
            grid-template-columns: 1fr;
            gap: 1.125rem;
        }
        .stat-card-body {
            padding: 1.125rem;
            gap: 0.875rem;
        }
        .stat-icon {
            width: 50px;
            height: 50px;
            font-size: 1.3rem;
        }
        .stat-value {
            font-size: 1.4rem;
        }
        .stat-label {
            font-size: 0.875rem;
        }
        .chart-header {
            padding: 1rem 1.25rem;
            font-size: 0.9rem;
        }
        .chart-body {
            padding: 1.25rem;
        }
    }

    /* Mobile Small: 375px - 575px */
    @media (max-width: 575px) {
        .container-fluid {
            padding-left: 0.625rem;
            padding-right: 0.625rem;
        }
        .dashboard-header {
            padding: 1rem 0;
            margin: -0.625rem -0.625rem 1.5rem -0.625rem;
        }
        .dashboard-title {
            font-size: 1.375rem;
            flex-direction: column;
            gap: 0.5rem;
            text-align: center;
        }
        .dashboard-subtitle {
            font-size: 0.85rem;
            text-align: center;
            flex-direction: row;
            justify-content: center;
        }
        .stats-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        .stats-container {
            margin-bottom: 2rem;
        }
        .charts-container {
            grid-template-columns: 1fr;
            gap: 1rem;
        }
        .stat-card-body {
            padding: 1rem;
            gap: 0.875rem;
        }
        .stat-icon {
            width: 48px;
            height: 48px;
            font-size: 1.25rem;
        }
        .stat-value {
            font-size: 1.3rem;
        }
        .stat-label {
            font-size: 0.825rem;
        }
        .chart-header {
            padding: 0.9rem 1rem;
            font-size: 0.875rem;
        }
        .chart-body {
            padding: 1.1rem;
        }
    }

    /* Extra Small Mobile: < 375px */
    @media (max-width: 374px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        .dashboard-header {
            margin: -0.5rem -0.5rem 1.25rem -0.5rem;
        }
        .dashboard-title {
            font-size: 1.25rem;
        }
        .stats-grid {
            gap: 0.875rem;
        }
        .charts-container {
            gap: 0.875rem;
        }
        .stat-value {
            font-size: 1.2rem;
        }
        .stat-label {
            font-size: 0.8rem;
        }
        .stat-card-body {
            padding: 0.9rem;
        }
        .stat-icon {
            width: 44px;
            height: 44px;
            font-size: 1.15rem;
        }
        .chart-header {
            padding: 0.8rem 0.9rem;
            font-size: 0.85rem;
        }
        .chart-body {
            padding: 1rem;
        }
    }

    /* Loading state */
    .chart-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        color: var(--secondary-color);
    }

    /* Specific mobile chart adjustments */
    @media (max-width: 767px) {
        .chart-loading {
            min-height: 250px;
        }
    }

    @media (max-width: 575px) {
        .chart-loading {
            min-height: 220px;
        }
    }
</style>

<div class="dashboard-header">
    <div class="container-fluid">
        <h1 class="dashboard-title">
            <i class="fas fa-user-shield"></i>
            <span>Xin chào Admin!</span>
        </h1>
        <p class="dashboard-subtitle">
            <i class="fas fa-calendar-alt me-2"></i>
            <span class="live-clock" id="liveClock">{{ now()->format('l, d/m/Y - H:i:s') }}</span>
        </p>
    </div>
</div>

<div class="container-fluid">

    <!-- Stats Grid -->
    <div class="stats-container">
        <div class="stats-grid">
            @php
                $stats = [
                    ['label' => 'Tổng khách hàng', 'value' => $totalUser, 'icon' => 'users', 'bg' => 'success'],
                    ['label' => 'Số dư khả dụng', 'value' => $totalBalance, 'icon' => 'wallet', 'bg' => 'warning'],
                    ['label' => 'Tổng nạp tiền', 'value' => $totalRecharge, 'icon' => 'piggy-bank', 'bg' => 'primary'],
                    ['label' => 'KH tháng ' . now()->format('m'), 'value' => $totalUserMonth, 'icon' => 'user-plus', 'bg' => 'info'],
                    ['label' => 'KH hôm nay', 'value' => $totalUserToday, 'icon' => 'user-check', 'bg' => 'info'],
                    ['label' => 'Tổng doanh thu', 'value' => $totalRevenue, 'icon' => 'chart-line', 'bg' => 'danger'],
                    ['label' => 'Tổng đơn hàng', 'value' => $totalOrder, 'icon' => 'shopping-bag', 'bg' => 'warning'],
                    ['label' => 'Đơn tháng ' . now()->format('m'), 'value' => $OrderMonth, 'icon' => 'calendar-alt', 'bg' => 'warning'],
                    ['label' => 'Đơn hôm nay', 'value' => $OrderToday, 'icon' => 'calendar-day', 'bg' => 'warning'],
                    ['label' => 'Đơn tuần này', 'value' => $OrderWeek, 'icon' => 'calendar-week', 'bg' => 'info'],
                    ['label' => 'Nạp hôm nay', 'value' => $totalRechargeToday, 'icon' => 'credit-card', 'bg' => 'primary'],
                    ['label' => 'Nạp tháng ' . now()->format('m'), 'value' => $totalRechargeMonth, 'icon' => 'credit-card', 'bg' => 'primary'],
                    ['label' => 'Chi tiêu hôm nay', 'value' => $totalTieuToday, 'icon' => 'hand-holding-usd', 'bg' => 'primary'],
                    ['label' => 'Doanh thu hôm nay', 'value' => $totalRenvenueToday, 'icon' => 'trending-up', 'bg' => 'danger'],
                    ['label' => 'Doanh thu tuần', 'value' => $totalRenvenueWeek, 'icon' => 'chart-bar', 'bg' => 'danger'],
                    ['label' => 'Doanh thu tháng ' . now()->format('m'), 'value' => $totalRenvenueMonth, 'icon' => 'chart-pie', 'bg' => 'danger'],
                ];
            @endphp

            @foreach ($stats as $stat)
                <div class="stat-card {{ $stat['bg'] }}">
                    <div class="stat-card-body">
                        <div class="stat-icon bg-{{ $stat['bg'] }}">
                            <i class="fas fa-{{ $stat['icon'] }}"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-value">{{ number_format($stat['value']) }}</div>
                            <div class="stat-label">{{ $stat['label'] }}</div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Charts Grid -->
    <div class="charts-container">
        <div class="chart-card chart-full-width">
            <div class="chart-header">
                <i class="fas fa-tasks"></i>
                TRẠNG THÁI ĐƠN HÀNG
            </div>
            <div class="chart-body">
                <div id="order-statistics">
                    <div class="chart-loading">
                        <i class="fas fa-spinner fa-spin me-2"></i>
                        Đang tải biểu đồ...
                    </div>
                </div>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <i class="fas fa-users"></i>
                THỐNG KÊ KHÁCH HÀNG
            </div>
            <div class="chart-body">
                <div id="user-dashboard">
                    <div class="chart-loading">
                        <i class="fas fa-spinner fa-spin me-2"></i>
                        Đang tải biểu đồ...
                    </div>
                </div>
            </div>
        </div>
        
        <div class="chart-card">
            <div class="chart-header">
                <i class="fas fa-credit-card"></i>
                THỐNG KÊ NẠP TIỀN
            </div>
            <div class="chart-body">
                <div id="bank-static">
                    <div class="chart-loading">
                        <i class="fas fa-spinner fa-spin me-2"></i>
                        Đang tải biểu đồ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="/theme/js/chart/apex-chart/apex-chart.js"></script>
<script src="/theme/js/chart/apex-chart/stock-prices.js"></script>
<script src="/theme/js/chart/apex-chart/chart-custom.js"></script>

<script>
'use strict';

// Live Clock Function
function updateClock() {
    const now = new Date();
    const days = ['Chủ Nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'];
    
    const day = days[now.getDay()];
    const date = String(now.getDate()).padStart(2, '0');
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const year = now.getFullYear();
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    
    const timeString = `${day}, ${date}/${month}/${year} - ${hours}:${minutes}:${seconds}`;
    document.getElementById('liveClock').textContent = timeString;
}

// Start the clock
updateClock();
setInterval(updateClock, 1000);

// Modern color palette for social media theme
const colors = {
    primary: '#2563eb',
    secondary: '#64748b', 
    success: '#10b981',
    warning: '#f59e0b',
    danger: '#ef4444',
    info: '#06b6d4',
    purple: '#8b5cf6',
    pink: '#ec4899'
};

// Common chart options
const baseOptions = {
    chart: {
        fontFamily: 'Inter, sans-serif',
        toolbar: { show: false },
        zoom: { enabled: false }
    },
    grid: {
        borderColor: '#e2e8f0',
        strokeDashArray: 3
    },
    tooltip: {
        theme: 'light',
        style: {
            fontSize: '12px'
        }
    },
    legend: {
        fontSize: '12px',
        fontWeight: 500
    },
    responsive: [{
        breakpoint: 768,
        options: {
            chart: {
                height: 280
            },
            legend: {
                position: 'bottom'
            }
        }
    }]
};

// Order Statistics Chart
setTimeout(function () {
    const orderOptions = {
        ...baseOptions,
        chart: {
            ...baseOptions.chart,
            height: 400,
            type: 'area'
        },
        dataLabels: { enabled: false },
        stroke: {
            curve: 'smooth',
            width: 3
        },
        colors: [colors.info, colors.primary, colors.danger, colors.warning, colors.secondary, colors.success],
        series: [
            { name: 'Đang chờ', data: @json($totalOrderStatus['totalPending']) },
            { name: 'Đang chạy', data: @json($totalOrderStatus['totalProcessing']) },
            { name: 'Đã huỷ', data: @json($totalOrderStatus['totalCanceled']) },
            { name: 'Chờ hoàn tiền', data: @json($totalOrderStatus['totalPendingRefundCancel']) },
            { name: 'Hoàn tiền', data: @json($totalOrderStatus['totalRefund']) },
            { name: 'Hoàn thành', data: @json($totalOrderStatus['totalCompleted']) }
        ],
        xaxis: {
            categories: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10', 'T11', 'T12'],
            labels: { style: { colors: colors.secondary, fontSize: '12px' } }
        },
        yaxis: {
            labels: { style: { colors: colors.secondary, fontSize: '12px' } }
        },
        legend: {
            ...baseOptions.legend,
            position: 'top',
            horizontalAlign: 'right'
        },
        fill: {
            type: 'gradient',
            gradient: {
                opacityFrom: 0.6,
                opacityTo: 0.1
            }
        }
    };

    document.querySelector('#order-statistics .chart-loading').style.display = 'none';
    const orderChart = new ApexCharts(document.querySelector('#order-statistics'), orderOptions);
    orderChart.render();
}, 700);

// User Statistics Chart
setTimeout(function () {
    const userOptions = {
        ...baseOptions,
        chart: {
            ...baseOptions.chart,
            height: 380,
            type: 'bar'
        },
        dataLabels: { enabled: false },
        colors: [colors.primary],
        series: [{
            name: 'Khách hàng mới',
            data: @json($data['user'])
        }],
        xaxis: {
            categories: @json($labels),
            labels: { 
                style: { colors: colors.secondary, fontSize: '11px' },
                rotate: -45
            }
        },
        yaxis: {
            labels: { style: { colors: colors.secondary, fontSize: '12px' } }
        },
        plotOptions: {
            bar: {
                borderRadius: 8,
                columnWidth: '60%'
            }
        },
        tooltip: {
            ...baseOptions.tooltip,
            y: { formatter: val => val + ' khách hàng' }
        }
    };

    document.querySelector('#user-dashboard .chart-loading').style.display = 'none';
    const userChart = new ApexCharts(document.querySelector("#user-dashboard"), userOptions);
    userChart.render();
}, 700);

// Recharge Statistics Chart  
setTimeout(function () {
    const rechargeOptions = {
        ...baseOptions,
        chart: {
            ...baseOptions.chart,
            height: 380,
            type: 'area'
        },
        dataLabels: { enabled: false },
        stroke: {
            curve: 'smooth',
            width: 3
        },
        colors: [colors.success],
        series: [{
            name: 'Nạp tiền',
            data: @json($data['recharge'])
        }],
        xaxis: {
            categories: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10', 'T11', 'T12'],
            labels: { style: { colors: colors.secondary, fontSize: '12px' } }
        },
        yaxis: {
            labels: { 
                style: { colors: colors.secondary, fontSize: '12px' },
                formatter: val => new Intl.NumberFormat('vi-VN').format(val) + 'đ'
            }
        },
        tooltip: {
            ...baseOptions.tooltip,
            y: { formatter: val => new Intl.NumberFormat('vi-VN').format(val) + 'đ' }
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.1,
                stops: [0, 100]
            }
        }
    };

    document.querySelector('#bank-static .chart-loading').style.display = 'none';
    const rechargeChart = new ApexCharts(document.querySelector('#bank-static'), rechargeOptions);
    rechargeChart.render();
}, 700);

// Auto refresh data every 5 minutes
setInterval(function() {
    // Add auto refresh logic here if needed
    console.log('Dashboard data refreshed at:', new Date().toLocaleTimeString());
}, 300000);
</script>
@endsection