@extends('admin.layouts.app')

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

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

@section('content')

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

        <!-- Start:: row-1 -->
        <div class="row">

            <div>
                <div class="row">


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

                        <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="fal fa-shopping-bag fs-24"></i>

                                    </div>

                                    <div class="flex-fill">

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

                                        <div class="fs-22 fw-semibold mb-1 text-primary">
                                            {{ number_format($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 class="col-xl-3 col-lg-6 col-md-6 col-sm-6">

                        <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="fal fa-plane fs-24"></i>

                                    </div>

                                    <div>

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

                                        <div class="fs-22 fw-semibold mb-1 text-secondary">
                                            {{ number_format($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-6 col-md-6 col-sm-6">

                        <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="fal fa-suitcase-rolling fs-24"></i>

                                    </div>

                                    <div>

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

                                        <div class="fs-22 fw-semibold mb-1 text-success">
                                            {{ number_format($toursCount) }}
                                        </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-6 col-md-6 col-sm-6">

                        <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="fal fa-users fs-24"></i>
                                    </div>

                                    <div>

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

                                        <div class="fs-22 fw-semibold mb-1 text-info">
                                            {{ number_format($usersCount) }}
                                        </div>

                                        <div class="d-flex align-items-center fs-11">
                        <span class="text-default op-6">
                            Total users
                        </span>
                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                    {{-- ⬇️ کارت جدید: تعداد بازدیدها ⬇️ --}}
                    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6">

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

                            <div class="card-body">

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

                                    <div class="avatar avatar-md bg-warning svg-white">
                                        <i class="fal fa-eye fs-24"></i>
                                    </div>

                                    <div>

                                        <div class="flex-fill fw-medium fs-13 mb-1 text-dark">
                                            تعداد بازدیدها
                                        </div>

                                        <div class="fs-22 fw-semibold mb-1 text-warning">
                                            {{ number_format($viewsCount) }}
                                        </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>

        </div>
        <!-- End:: row-1 -->

        <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
                            class="apex-chart"
                            data-options='@json($visitsChartOptions)'
                        ></div>
                    </div>

                </div>

            </div>

        </div>

    </div>

@endsection