@extends('admin.layouts.app')
@section('breadcrumb')
    <span>
        داشبورد
    </span>
@endsection
@section('content')

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

        <h3 class="mb-4 fw-bold">
            داشبورد مدیریت
        </h3>
        <div class="row g-4">

            <div class="col-md-3">

                <div class="card shadow-sm border-0 h-100">

                    <div class="card-body">

                        <h6 class="text-muted">
                            مدیران
                        </h6>


                        <h2 class="fw-bold mt-3">
                            {{ $adminsCount ?? 0 }}
                        </h2>

                    </div>

                </div>

            </div>

            <div class="col-md-3">

                <div class="card shadow-sm border-0 h-100">

                    <div class="card-body">

                        <h6 class="text-muted">
                            کاربران
                        </h6>

                        <h2 class="fw-bold mt-3">
                            {{ $usersCount ?? 0 }}
                        </h2>


                    </div>

                </div>

            </div>

            <div class="col-md-3">

                <div class="card shadow-sm border-0 h-100">

                    <div class="card-body">

                        <h6 class="text-muted">
                            تورها
                        </h6>


                        <h2 class="fw-bold mt-3">
                            {{ $toursCount ?? 0 }}
                        </h2>

                    </div>

                </div>

            </div>

            <div class="col-md-3">

                <div class="card shadow-sm border-0 h-100">

                    <div class="card-body">

                        <h6 class="text-muted">
                            پروازها
                        </h6>


                        <h2 class="fw-bold mt-3">
                            {{ $flightsCount ?? 0 }}
                        </h2>
                    </div>

                </div>

            </div>
        </div>

        <div class="card shadow-sm border-0 mt-5">
            <div class="card-header bg-white fw-bold">
                آخرین فعالیت‌ها
            </div>

            <div class="card-body">

                <table class="table table-bordered text-center">

                    <thead>

                    <tr>
                        <th>مدیر</th>
                        <th>عملیات</th>
                        <th>بخش</th>
                        <th>تاریخ</th>
                    </tr>

                    </thead>

                    <tbody>
                    @forelse($logs as $log)
                        <tr>
                            <td>
                                {{ $log->admin->first_name ?? '-' }}
                            </td>

                            <td>
                                {{ $log->action }}
                            </td>
                            <td>
                                {{ $log->model }}
                            </td>

                            <td>
                                {{ $log->created_at->toJalali()->format('Y/m/d H:i') }}
                            </td>
                        </tr>
                    @empty
                        <tr>

                            <td colspan="4">
                                فعالیتی ثبت نشده است
                            </td>
                        </tr>
                    @endforelse
                    </tbody>

                </table>
            </div>
        </div>

        <div class="card shadow-sm border-0 mt-5">


            <div class="card-header bg-white fw-bold">
                نمودار بازدید تورها در ۱۰ روز اخیر
            </div>


            <div class="card-body">

                <canvas id="tourViewsChart" height="100"></canvas>

            </div>
            <div class="card-header bg-white fw-bold">

                نمودار بازدید پروازها در ۱۰ روز اخیر
            </div>
            <div class="card-body">

                <canvas id="flightViewsChart" height="100"></canvas>

            </div>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        const tourChart = document.getElementById('tourViewsChart');
        new Chart(tourChart, {

            type: 'bar',

            data: {

                labels: @json($tourViews->pluck('date')),

                datasets: [{

                    label: 'بازدید تورها',

                    data: @json($tourViews->pluck('total'))

                }]
            }
        });
        const flightChart = document.getElementById('flightViewsChart');
        new Chart(flightChart, {

            type: 'bar',

            data: {

                labels: @json($flightViews->pluck('date')),

                datasets: [{

                    label: 'بازدید پروازها',

                    data: @json($flightViews->pluck('total'))
                }]
            }
        });
    </script>
@endsection