@extends('admin.layouts.app')

@section('breadcrumb')
    <div>
        <p class="fw-medium fs-18 mb-0">
            سلام،
            {{ auth('admin')->user()->first_name }}
            عزیز
        </p>

        <p class="fs-13 text-muted mb-0">
            به داشبورد خوش آمدید
        </p>
    </div>
@endsection

@section('content')


        <div class="container-fluid pt-4">

            <div class="row">

                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">

                    <div class="card custom-card overflow-hidden">

                        <div class="card-body">

                            <div class="d-flex gap-3">

                                <div class="avatar avatar-md bg-info svg-white">

                                    <i class="ri-eye-line fs-24"></i>

                                </div>

                                <div class="flex-fill">

                                    <div class="fw-medium fs-13 mb-1 text-dark">
                                        بازدید کل سایت
                                    </div>

                                    <div class="fs-22 fw-semibold mb-1 text-info">
                                        {{ $indexPageCont }}
                                    </div>

                                    <div class="d-flex align-items-center fs-11">
                        <span class="text-default op-6">
                            کل بازدیدها
                        </span>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">

                    <div class="card custom-card overflow-hidden">

                        <div class="card-body">

                            <div class="d-flex gap-3">

                                <div class="avatar avatar-md bg-primary svg-white">

                                    <i class="ri-flight-takeoff-line fs-24"></i>

                                </div>

                                <div class="flex-fill">

                                    <div class="fw-medium fs-13 mb-1 text-dark">
                                        تعداد پروازها
                                    </div>

                                    <div class="fs-22 fw-semibold mb-1 text-primary">
                                        {{ $flightsCount }}
                                    </div>

                                    <div class="d-flex align-items-center fs-11">
                                        <span class="text-default op-6">
                                            کل پروازها
                                        </span>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">

                    <div class="card custom-card overflow-hidden">

                        <div class="card-body">

                            <div class="d-flex gap-3">

                                <div class="avatar avatar-md bg-success svg-white">

                                    <i class="ri-user-line fs-24"></i>

                                </div>

                                <div class="flex-fill">

                                    <div class="fw-medium fs-13 mb-1 text-dark">
                                        تعداد کاربران
                                    </div>

                                    <div class="fs-22 fw-semibold mb-1 text-success">
                                        {{ $usersCount }}
                                    </div>

                                    <div class="d-flex align-items-center fs-11">
                                        <span class="text-default op-6">
                                            کل کاربران
                                        </span>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12">

                    <div class="card custom-card overflow-hidden">

                        <div class="card-body">

                            <div class="d-flex gap-3">

                                <div class="avatar avatar-md bg-secondary svg-white">

                                    <i class="ri-bookmark-line fs-24"></i>

                                </div>

                                <div class="flex-fill">

                                    <div class="fw-medium fs-13 mb-1 text-dark">
                                        تعداد رزروها
                                    </div>

                                    <div class="fs-22 fw-semibold mb-1 text-secondary">
                                        {{ $bookingsCount }}
                                    </div>

                                    <div class="d-flex align-items-center fs-11">
                                        <span class="text-default op-6">
                                            کل رزروها
                                        </span>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <div class="row mt-4">

                <div class="col-xl-12">

                    <div class="card custom-card">

                        <div class="card-header">
                            <div class="card-title">
                                نمودار بازدید سایت (۱۰ روز اخیر)
                            </div>
                        </div>

                        <div class="card-body">
                            <canvas id="visitsChart" height="90"></canvas>
                        </div>

                    </div>

                </div>

            </div>

        </div>


    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        new Chart(document.getElementById('visitsChart'), {
            type: 'bar',
            data: {
                labels: @json($visits->map(fn($v) => verta($v->visit_date)->format('m/d'))),
                datasets: [{
                    label: 'تعداد بازدید',
                    data: @json($visits->pluck('total')),
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderRadius: 6,
                    maxBarThickness: 40
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: { beginAtZero: true, ticks: { precision: 0 } }
                },
                plugins: {
                    legend: { display: false }
                }
            }
        });
    </script>

@endsection