@extends('admin.layouts.app')

@section('title', 'داشبورد مدیریت')

@section('breadcrumb')
    <div>
        <h1 class="page-title fw-medium fs-18 mb-2">
            داشبورد
        </h1>

        <nav>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item active">
                    داشبورد
                </li>
            </ol>
        </nav>
    </div>
@endsection


@section('content')

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

        {{-- ========================================= --}}
        {{-- دکمه خروجی --}}
        {{-- ========================================= --}}

        <div class="d-flex justify-content-end mb-3">

            <a href="{{ route('admin.dashboard.export') }}"
               class="btn btn-success btn-sm">

                <i class="ri-file-excel-2-line me-1"></i>

                خروجی Excel

            </a>

        </div>


        {{-- ========================================= --}}
        {{-- کارت های آماری --}}
        {{-- ========================================= --}}

        <div class="row">

            {{-- کاربران --}}
            <div class="col-xl-3 col-md-6">

                <div class="card custom-card">

                    <div class="card-body">

                        <div class="d-flex align-items-center justify-content-between">

                            <div>

                            <span class="text-muted fs-12">
                                کاربران
                            </span>

                                <h4 class="fw-semibold mb-0 mt-1">
                                    {{ $usersCount ?? 0 }}
                                </h4>

                            </div>

                            <div class="avatar avatar-lg bg-primary-transparent">

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

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- تورها --}}
            <div class="col-xl-3 col-md-6">

                <div class="card custom-card">

                    <div class="card-body">

                        <div class="d-flex align-items-center justify-content-between">

                            <div>

                            <span class="text-muted fs-12">
                                تورها
                            </span>

                                <h4 class="fw-semibold mb-0 mt-1">
                                    {{ $toursCount ?? 0 }}
                                </h4>

                            </div>

                            <div class="avatar avatar-lg bg-success-transparent">

                                <i class="ri-map-pin-line fs-4"></i>

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- پروازها --}}
            <div class="col-xl-3 col-md-6">

                <div class="card custom-card">

                    <div class="card-body">

                        <div class="d-flex align-items-center justify-content-between">

                            <div>

                            <span class="text-muted fs-12">
                                پروازها
                            </span>

                                <h4 class="fw-semibold mb-0 mt-1">
                                    {{ $flightsCount ?? 0 }}
                                </h4>

                            </div>

                            <div class="avatar avatar-lg bg-warning-transparent">

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

                            </div>

                        </div>

                    </div>

                </div>

            </div>


            {{-- فرودگاه ها --}}
            <div class="col-xl-3 col-md-6">

                <div class="card custom-card">

                    <div class="card-body">

                        <div class="d-flex align-items-center justify-content-between">

                            <div>

                            <span class="text-muted fs-12">
                                فرودگاه‌ها
                            </span>

                                <h4 class="fw-semibold mb-0 mt-1">
                                    {{ $airportsCount ?? 0 }}
                                </h4>

                            </div>

                            <div class="avatar avatar-lg bg-info-transparent">

                                <i class="ri-flight-land-line fs-4"></i>

                            </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">

                        {{-- مهم: ارتفاع مشخص --}}
                        <div style="height: 350px;">

                            <canvas id="visitChart"></canvas>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

@endsection



@section('scripts')

    {{-- Chart.js --}}

    <script src="{{ asset('assets/js/chart.js') }}"></script>


    <script>

        document.addEventListener('DOMContentLoaded', function () {

            console.log('Dashboard JS Loaded');

            /*
            |--------------------------------------------------------------------------
            | بررسی Chart.js
            |--------------------------------------------------------------------------
            */

            if (typeof Chart === 'undefined') {

                console.error('Chart.js پیدا نشد!');

                return;
            }


            console.log('Chart.js version:', Chart.version);


            /*
            |--------------------------------------------------------------------------
            | Canvas
            |--------------------------------------------------------------------------
            */

            const canvas = document.getElementById('visitChart');


            if (!canvas) {

                console.error('Canvas با id=visitChart پیدا نشد!');

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | داده های PHP
            |--------------------------------------------------------------------------
            */

            const labels = @json($chartLabels ?? []);

            const values = @json($chartValues ?? []);


            console.log('Chart Labels:', labels);

            console.log('Chart Values:', values);


            /*
            |--------------------------------------------------------------------------
            | ساخت نمودار
            |--------------------------------------------------------------------------
            */

            new Chart(canvas, {

                type: 'bar',

                data: {

                    labels: labels,

                    datasets: [

                        {

                            label: 'تعداد بازدید',

                            data: values,

                            backgroundColor: 'rgba(54, 162, 235, 0.7)',

                            borderColor: 'rgba(54, 162, 235, 1)',

                            borderWidth: 1,

                            borderRadius: 5

                        }

                    ]

                },


                options: {

                    responsive: true,

                    maintainAspectRatio: false,

                    plugins: {

                        legend: {

                            display: true,

                            position: 'top'

                        }

                    },

                    scales: {

                        y: {

                            beginAtZero: true,

                            ticks: {

                                precision: 0

                            }

                        }

                    }

                }

            });

        });

    </script>

@endsection