@extends('admin.layout.index')
@section('style')
    <style>
        /* 5 باکس در یک ردیف روی نمایشگر خیلی بزرگ */
        @media (min-width: 1400px) {
            .stats-row > [class*="col-"] {
                width: 20% !important;
                flex: 0 0 20% !important;
            }
        }

        /* عنوان‌ها */
        .stats-title {
            display: block;
            clear: both;
            font-size: 1.4rem;
            font-weight: 800;
            color: #2d2d2d;
            margin: 1rem 0 1.5rem;
            text-align: right;
            position: relative;
            padding-right: 15px;
        }

        .stats-title::after {
            content: "";
            position: absolute;
            bottom: -8px;
            right: 0;
            width: 70px;
            height: 4px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }

        /* کارت‌ها */
        .stat-card {
            border: none;
            border-radius: 18px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            min-height: 130px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
        }

        .stat-card .card-body {
            padding: 1.3rem;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        /* آیکون‌ها */
        .stat-card i {
            font-size: 2.2rem !important;
            margin-bottom: 0.8rem !important;
            color: #fff !important;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            opacity: 0.9;
        }

        /* اعداد و کپشن‌ها */
        .stat-card h3 {
            font-size: 1.8rem;
            font-weight: 800;
            margin-bottom: 0.4rem;
            color: #fff;
            line-height: 1.2;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .stat-card p {
            font-size: 1rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.3;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            margin: 0;
        }

        /* رنگ‌ها - هماهنگ با کامنت‌ها */
        .stat-card.bg-info {
            background: #E97451 !important;
        }

        .stat-card.bg-success {
            background: #50C878 !important;
        }

        .stat-card.bg-primary {
            background: #5C8374 !important;
        }

        .stat-card.bg-warning {
            background:  #FFC107 !important;
        }

        .stat-card.bg-warning h3,
        .stat-card.bg-warning p,
        .stat-card.bg-warning i {
            color: #2d2d2d !important;
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
        }

        /* رنگ‌های جدید برای کارت‌های فعلی */
        .stat-card.bg-purple {
            background: #FFC107 !important;
        }

        /* فاصله‌ها */
        .stats-row {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 18px;
            margin-bottom: 2.5rem;
        }

        /* استایل‌های جدید برای بخش نمودار و آمار کناری */
        .chart-section {
            margin: 2.5rem 0;
        }

        .chart-with-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            margin-bottom: 2.5rem;
            direction: rtl;
        }

        .chart-container {
            flex: 1;
            min-width: 380px;
        }

        .stats-sidebar {
            width: 380px;
            background: #1a2980;
            border-radius: 22px;
            padding: 2.2rem;
            box-shadow: 0 18px 35px rgba(26, 41, 128, 0.2),
            0 0 0 1px rgba(255, 255, 255, 0.1);
            color: white;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(8px);
            margin-left: 0;
        }

        .stats-sidebar::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
        }

        /* رنگ سازمانی مخصوص کارت کاربران */
        .stat-card.bg-org {
            background:  #FFC107 !important;
            border: 1px solid rgba(255,255,255,0.06);
        }

        /* متن و آیکون */
        .stat-card.bg-org h3,
        .stat-card.bg-org p,
        .stat-card.bg-org i {
            color: #fff !important;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        }

        /* اگر بخواهید آیکون کاربران کمی متمایز شود */
        .stat-card.bg-org i {
            font-size: 2.2rem !important;
            opacity: 0.98;
        }

        .sidebar-title {
            font-size: 1.6rem;
            font-weight: 800;
            margin-bottom: 2.2rem;
            text-align: right;
            position: relative;
            padding-bottom: 12px;
            text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .sidebar-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 90px;
            height: 3px;
            background: linear-gradient(90deg, #ff6b6b, #ffd93d);
            border-radius: 3px;
            box-shadow: 0 2px 10px rgba(255, 107, 107, 0.4);
        }

        .stat-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 22px 18px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            transition: all 0.3s ease;
            position: relative;
            border-radius: 14px;
            margin-bottom: 8px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(8px);
        }

        .stat-item:hover {
            transform: translateX(-8px);
            background: rgba(255, 255, 255, 0.1);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
        }

        .stat-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }

        .stat-label {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.95);
            font-weight: 700;
            text-align: right;
            flex: 1;
            margin-left: 20px;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        }

        .stat-value {
            font-size: 1.7rem;
            font-weight: 800;
            color: #fff;
            display: flex;
            align-items: center;
            direction: ltr;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
        }

        .stat-value span {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.85);
            margin-right: 10px;
            font-weight: 600;
        }

        /* بهبود آیکون‌ها */
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 18px;
            font-size: 2.8rem;
            color: #fff;
            text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
        }

        .stat-item:hover .stat-icon {
            transform: scale(1.08);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }

        /* رنگ‌های مختلف و واضح برای آیکون‌های سایدبار */
        .stat-item:nth-child(1) .stat-icon {
            background: linear-gradient(135deg, #FF6B6B, #FF8E53);
            border: 2px solid rgba(255, 255, 255, 0.6);
        }

        .stat-item:nth-child(2) .stat-icon {
            /*background: linear-gradient(135deg, #4ECDC4, #44A08D);*/
            /*border: 2px solid rgba(255, 255, 255, 0.6);*/
        }

        /* استایل مخصوص برای آیکون‌های arrow */
        .fa-arrow-up, .fa-arrow-down {
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        }

        /* بهبود آیکون کاربران (بازدید روزانه) */
        .fa-users {
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        }

        /* بهبود آیکون نمودار (میانگین روزانه) */
        .fa-chart-bar {
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        }

        .chart-card {
            border-radius: 22px;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
            border: none;
            overflow: hidden;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            margin-right: 0;
        }

        .chart-card .card-body {
            padding: 2.2rem;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.8rem;
            padding: 0 0.8rem;
        }

        .chart-title {
            font-size: 1.3rem;
            font-weight: 800;
            color: #2d2d2d;
            margin: 0;
        }

        .chart-period {
            font-size: 0.9rem;
            color: #6c757d;
            font-weight: 600;
        }

        /* موبایل */
        @media (max-width: 1200px) {
            .chart-with-stats {
                flex-direction: column;
            }

            .stats-sidebar {
                width: 100%;
                order: 0;
            }

            .chart-container {
                order: 1;
                min-width: 100%;
            }
        }

        @media (max-width: 768px) {
            .stat-card {
                min-height: 120px;
            }

            .stat-card h3 {
                font-size: 1.6rem;
            }

            .stat-card i {
                font-size: 2rem !important;
            }

            .stats-sidebar {
                padding: 1.8rem 1.3rem;
            }

            .stat-value {
                font-size: 1.5rem;
            }

            .stat-label {
                font-size: 1rem;
            }

            .stat-icon {
                width: 55px;
                height: 55px;
                font-size: 2.4rem;
            }

            .stat-item:nth-child(3) .stat-icon,
            .stat-item:nth-child(4) .stat-icon {
                font-size: 2.8rem;
            }

            .sidebar-title {
                font-size: 1.4rem;
            }
        }

        @media (max-width: 576px) {
            .stats-sidebar {
                padding: 1.6rem;
                border-radius: 18px;
            }

            .stat-item {
                padding: 18px 14px;
            }

            .stat-value {
                font-size: 1.3rem;
            }

            .stat-label {
                font-size: 0.95rem;
            }

            .stat-icon {
                width: 50px;
                height: 50px;
                font-size: 2.2rem;
                margin-left: 14px;
            }

            .stat-item:nth-child(3) .stat-icon,
            .stat-item:nth-child(4) .stat-icon {
                font-size: 2.5rem;
            }

            .sidebar-title {
                font-size: 1.3rem;
                margin-bottom: 1.8rem;
            }

            .stats-title {
                font-size: 1.2rem;
                margin: 0.8rem 0 1.2rem;
            }

            .chart-card .card-body {
                padding: 1.8rem 1.3rem;
            }
        }
        .stat-icon i {
            font-size: 2rem;
            color: #fff;
        }

    </style>
@endsection

@section('script')
    <script>
        const chartData = {
            dates: @json($chartDates),
            values: @json($chartValues)
        };

        const ctx = document.getElementById("visitChart");
        if (ctx) {
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: chartData.dates,
                    datasets: [{
                        label: "بازدید",
                        data: chartData.values,
                        borderColor: "rgba(102, 126, 234, 1)",
                        backgroundColor: "rgba(102, 126, 234, 0.1)",
                        pointBackgroundColor: "rgba(102, 126, 234, 1)",
                        pointBorderColor: "#fff",
                        pointBorderWidth: 2,
                        lineTension: 0.4,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        borderWidth: 3,
                        fill: true,
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: true,
                                color: "rgba(0,0,0,0.05)"
                            },
                            ticks: {
                                maxTicksLimit: 7,
                                fontColor: "#6e707e",
                                fontFamily: "Tahoma",
                                fontSize: 11
                            }
                        }],
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                callback: value => Number.isInteger(value) ? `${value} نفر` : null,
                                fontColor: "#6e707e",
                                fontFamily: "Tahoma",
                                fontSize: 11
                            },
                            gridLines: {
                                color: "rgba(0,0,0,0.05)",
                                borderDash: [3],
                                drawBorder: false
                            }
                        }]
                    },
                    legend: {display: false},
                    tooltips: {
                        backgroundColor: "rgb(255,255,255)",
                        bodyFontColor: "#858796",
                        titleFontColor: '#6e707e',
                        borderColor: '#dddfeb',
                        borderWidth: 1,
                        xPadding: 12,
                        yPadding: 12,
                        displayColors: false,
                        intersect: false,
                        mode: 'index',
                        caretPadding: 8,
                        callbacks: {
                            label: (item) => `بازدید: ${item.yLabel} نفر`
                        }
                    }
                }
            });
        }
    </script>
@endsection

@section('content')
    <div class="content d-flex flex-column flex-column-fluid">
        <div class="post d-flex flex-column-fluid">
            <div class="container-fluid">

                <!-- عنوان و باکس‌ها -->
                <span class="stats-title">آمار کلی</span>
                <div class="row g-5 stats-row">


                    <div class="col-xl-3 col-md-6"
                         onclick="window.location.href='{{route('admin.representation.index')}}'">
                        <div class="card bg-info text-white stat-card">
                            <div class="card-body">
                                <i class="fas fa-store"></i>
                                <h3>{{ \App\Models\Seller::where('status',0)->count() }}</h3>
                                <p>درخواست‌های نمایندگی</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-3 col-md-6"
                         onclick="window.location.href='{{route('admin.products.index')}}'">
                        <div class="card bg-success text-white stat-card">
                            <div class="card-body">
                                <i class="fas fa-box-open"></i>
                                <h3>{{ \App\Models\Product::count() }}</h3>
                                <p>محصولات</p>
                            </div>
                        </div>
                    </div>


                    <div class="col-xl-3 col-md-6"
                         onclick="window.location.href='{{route('admin.user.index')}}'">
                        <div class="card bg-org text-white stat-card">
                            <div class="card-body">
                                <i class="fas fa-users"></i>
                                <h3>{{ \App\Models\User::count() }}</h3>
                                <p>کاربران</p>
                            </div>
                        </div>
                    </div>


                    <div class="col-xl-3 col-md-6"
                         onclick="window.location.href='{{route('admin.orders.index')}}'">
                        <div class="card bg-primary text-white stat-card">
                            <div class="card-body">
                                <i class="fas fa-shopping-cart"></i>
                                <h3>{{ \App\Models\Order::count() }}</h3>
                                <p>سفارشات</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- بخش نمودار با فاصله مناسب -->
                <div class="chart-section">
                    <span class="stats-title">نمودار بازدید 30 روز اخیر</span>
                    <div class="chart-with-stats">
                        <!-- سایدبار آمار - سمت راست -->
                        <div class="stats-sidebar">
                            <div class="sidebar-title">آمار بازدید روزانه</div>

                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="fas fa-calendar-day"></i>
                                </div>
                                <div class="stat-label">بازدید امروز</div>
                                <div class="stat-value">{{ number_format($todayVisits) }}<span>نفر</span></div>
                            </div>

                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                                <div class="stat-label">بازدید دیروز</div>
                                <div class="stat-value">{{ number_format($yesterdayVisits) }}<span>نفر</span></div>
                            </div>

                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <div class="stat-label">بازدید این ماه</div>
                                <div class="stat-value">{{ number_format($monthVisits) }}<span>نفر</span></div>
                            </div>

                            <div class="stat-item">
                                <div class="stat-icon">
                                    <i class="fas fa-chart-bar"></i>
                                </div>
                                <div class="stat-label">مجموع بازدیدها</div>
                                <div class="stat-value">{{ number_format($totalVisits) }}<span>نفر</span></div>
                            </div>
                        </div>

                        <!-- نمودار - سمت چپ -->
                        <div class="chart-container">
                            <div class="card chart-card">
                                <div class="card-body">
                                    <div class="chart-header">
                                        <h3 class="chart-title">نمودار بازدیدها</h3>
                                        <span class="chart-period">30 روز گذشته</span>
                                    </div>
                                    <div style="height: 380px;">
                                        <canvas id="visitChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div><!-- /.container-xxl -->
        </div><!-- /.post -->
    </div><!-- /.content -->
@endsection