@extends('dashboard.layout.layout')

@section('content')
<!-- Dashboard Analytics Start -->
<section id="dashboard-analytics">
     <div class="row">
        <div class="col-12 col-md-6 col-lg-6">
            <div class="card card-congratulations">
                <div class="card-body text-center">
                    <img
                        src="{{ asset('dashboardAssets') }}/images/elements/decore-right.png"
                        class="congratulations-img-left"
                        alt="card-img-left"
                    />
                    <img
                        src="{{ asset('dashboardAssets') }}/images/elements/decore-left.png"
                        class="congratulations-img-right"
                        alt="card-img-right"
                    />
                    <div class="avatar avatar-xl bg-primary shadow">
                        <div class="avatar-content">
                            <i data-feather="award" class="font-large-1"></i>
                        </div>
                    </div>
                    <div class="text-center">
                        <h1 class="mb-2 text-white">{!! trans('dashboard.messages.welcome',['name' => auth()->user()->name]) !!}</h1>
                        <p class="m-auto w-75">{{ trans('dashboard.messages.welcome_text', ['project_name' => setting('project_name')]) }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-12 animate__animated animate__fadeInUp">
            <div class="card">
                <div class="card-header flex-column align-items-start pb-0">
                    <div class="avatar bg-light-success p-50 m-0">
                        <div class="avatar-content">
                            <a href="{{ route('dashboard.client.index') }}">
                                <i data-feather="users" class="text-success font-medium-5"></i>
                            </a>
                        </div>
                    </div>
                    <h2 class="fw-bolder mt-1">{{ $clients_count }}</h2>
                    <p class="card-text">{{ trans('dashboard.client.clients') }}</p>
                </div>
                <div id="line-area-chart-5"></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-12 animate__animated animate__fadeInUp">
            <div class="card">
                <div class="card-header flex-column align-items-start pb-0">
                    <div class="avatar bg-light-warning p-50 m-0">
                        <div class="avatar-content">
                            <a href="{{ route('dashboard.driver.index') }}">
                                <i data-feather="truck" class="text-primary font-medium-5"></i>
                            </a>
                        </div>
                    </div>
                    <h2 class="fw-bolder mt-1">{{ $drivers_count }}</h2>
                    <p class="card-text">{{ trans('dashboard.driver.drivers') }}</p>
                </div>
                <div id="line-area-chart-6"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9">
            <div class="row">
                {{--  --}}
                <div class="col-lg-4 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $clients_is_active_count }}</h2>
                                <p>{{ trans('dashboard.client.acive_clients') }}</p>
                            </div>
                            <div class="avatar bg-rgba-warning m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.client.index') }}?status=deactive">
                                        <i data-feather="lock" class="text-warning font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $clients_is_ban_count }}</h2>
                                <p>{{ trans('dashboard.client.banned_clients') }}</p>
                            </div>
                            <div class="avatar bg-rgba-info p-45 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.client.index') }}?status=deactive">
                                        <i data-feather="shield-off" class="text-info font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $drivers_is_active_count }}</h2>
                                <p>{{ trans('dashboard.driver.active_drivers') }}</p>
                            </div>
                            <div class="avatar bg-rgba-danger p-45 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.client.index') }}?status=ban">
                                        <i data-feather="alert-circle" class="text-danger font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $drivers_is_ban_count }}</h2>
                                <p>{{ trans('dashboard.driver.banned_drivers') }}</p>
                            </div>
                            <div class="avatar bg-rgba-danger p-45 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.driver.index') }}?status=deactive">
                                        <i data-feather="slash" class="text-danger font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{--  --}}
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $drivers_is_ban_count }}</h2>
                                <p>{{ trans('dashboard.driver.banned_drivers') }}</p>
                            </div>
                            <div class="avatar bg-rgba-warning p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.driver.index') }}?status=ban">
                                        <i data-feather="corner-down-left" class="text-warning font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $cars_count }}</h2>
                                <p>{{ trans('dashboard.car.cars') }}</p>
                            </div>
                            <div class="avatar bg-rgba-info p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.car.index') }}">
                                        <i data-feather="activity" class="text-info font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $brands_count }}</h2>
                                <p>{{ trans('dashboard.brand.brands') }}</p>
                            </div>
                            <div class="avatar bg-rgba-danger p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.brand.index') }}">
                                        <i data-feather="flag" class="text-danger font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $car_models_count }}</h2>
                                <p>{{ trans('dashboard.car_model.car_models') }}</p>
                            </div>
                            <div class="avatar bg-rgba-warning p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.car_model.index') }}">
                                        <i data-feather="corner-down-left" class="text-warning font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $managers_count }}</h2>
                                <p>{{ trans('dashboard.manager.managers') }}</p>
                            </div>
                            <div class="avatar bg-rgba-violet p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.manager.index') }}">
                                        <i data-feather="user" class="text-warning font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $countries_count }}</h2>
                                <p>{{ trans('dashboard.country.countries') }}</p>
                            </div>
                            <div class="avatar bg-rgba-danger p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.country.index') }}">
                                        <i data-feather="flag" class="text-danger font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $cities_count }}</h2>
                                <p>{{ trans('dashboard.city.cities') }}</p>
                            </div>
                            <div class="avatar bg-rgba-warning p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.city.index') }}">
                                        <i data-feather="corner-down-left" class="text-warning font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $orders_count }}</h2>
                                <p>{{ trans('dashboard.order.orders') }}</p>
                            </div>
                            <div class="avatar bg-rgba-primary p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.order.index') }}">
                                        <i data-feather="shopping-cart" class="text-primary font-medium-5"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $car_packages }}</h2>
                                <p>{{ trans('dashboard.car_package.car_packages') }}</p>
                            </div>
                            <div class="avatar bg-rgba-primary p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.car_package.index') }}">
                                        <i class="icofont-box font-medium-3"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $driver_packages }}</h2>
                                <p>{{ trans('dashboard.driver_package.driver_packages') }}</p>
                            </div>
                            <div class="avatar bg-rgba-primary p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.driver_package.index') }}">
                                        <i class="icofont-building font-medium-3"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $point_packages }}</h2>
                                <p>{{ trans('dashboard.point_package.point_packages') }}</p>
                            </div>
                            <div class="avatar bg-rgba-primary p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.point_package.index') }}">
                                        <i class="icofont-cubes font-medium-3"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $delivery_drivers }}</h2>
                                <p>{{ trans('dashboard.driver.delivery') }}</p>
                            </div>
                            <div class="avatar bg-rgba-primary p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.driver.index') }}">
                                        <i class="icofont-cart font-medium-3"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $trip_drivers }}</h2>
                                <p>{{ trans('dashboard.driver.trip_active') }}</p>
                            </div>
                            <div class="avatar bg-rgba-primary p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.driver.index') }}">
                                        <i class="icofont-cloud font-medium-3"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-12">
                    <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                            <div>
                                <h2 class="text-bold-700 mb-0">{{ $city_to_city_drivers }}</h2>
                                <p>{{ trans('dashboard.driver.city_to_city_active') }}</p>
                            </div>
                            <div class="avatar bg-rgba-primary p-50 m-0">
                                <div class="avatar-content">
                                    <a href="{{ route('dashboard.driver.index') }}">
                                        <i class="icofont-dashboard font-medium-3"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-12">
                    <div class="card text-center" style="color: #ffffff;display: flex;align-items: center;justify-content: center;">
                        <div class="card-content">
                            <div class="card-body">
                                <div class="avatar bg-rgba-info p-50 m-0 mb-1">
                                    <div class="avatar-content">
                                        <i data-feather='clock' class="text-info font-medium-5"></i>
                                    </div>
                                </div>
                                <div class="row d-flex justify-content-center">
                                    <div class="clock text-center">
                                        <span id="Date" class="" style="color: #ffffff"></span>
                                        <p id="islamicDate" class="" style="color: #ffffff"></p>
                                        <span class="">
                                            <ul style="color: #ffffff">
                                                <li id="hours"></li>
                                                <li id="point">:</li>
                                                <li id="min"></li>
                                                <li id="point">:</li>
                                                <li id="sec"></li>
                                            </ul>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

           <div class="card">
                        <div class="card-header rounded rounded d-flex align-items-start pb-0">
                    {{-- <h4 class="card-title mb-sm-0 mb-1">{!! trans('dashboard.order.orders') !!}</h4> --}}
                    <div>
                        <span class="cursor-pointer mr-1">
                            <span class="bullet bullet-sm align-middle" style="background-color: rgba(43, 155, 244, 0.85)">&nbsp;</span>
                            <span class="align-middle">{!! trans('dashboard.order.pending_orders') !!}</span>
                        </span>
                        <span class="cursor-pointer mr-1">
                            <span class="bullet bullet-sm align-middle" style="background-color: rgba(254, 232, 2, 0.85)">&nbsp;</span>
                            <span class="align-middle">{!! trans('dashboard.order.canceled_orders') !!}</span>
                        </span>
                        <span class="cursor-pointer">
                            <span class="bullet bullet-sm align-middle" style="background-color: rgba(63, 208, 189, 0.85)">&nbsp;</span>
                            <span class="align-middle">{!! trans('dashboard.order.finished_orders') !!}</span>
                        </span>
                    </div>
                </div>
                <div class="card-body">
                    <div id="radialbar-chart" style="background-color: #283046"></div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
    </div>

    <div class="divider divider-success">
        <div class="divider-text"><i data-feather="activity"></i></div>
    </div>
    {{-- Charts --}}
    <div class="row">
        <div class="col-12">
            <div class="card border-info">
                <div class="card-header pb-1">
                    <h4 class="card-title">{!! trans('dashboard.chart.charts') !!}</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <form action="{!! route('dashboard.home') !!}" method="get">
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <div class="row">
                                            <label class="font-medium-1 col-md-2">{{ trans('dashboard.general.from_date') }} </label>
                                            <div class="col-md-10">
                                                {!! Form::date("from_date", request('from_date') ? date("Y-m-d",strtotime(request('from_date'))) : null , ['class' => 'form-control expire_date' , 'placeholder' => trans('dashboard.general.from_date')])
                                                !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <div class="row">
                                            <label class="font-medium-1 col-md-2">{{ trans('dashboard.general.to_date') }} </label>
                                            <div class="col-md-10">
                                                {!! Form::date("to_date", request('to_date') ? date("Y-m-d",strtotime(request('to_date'))) : null , ['class' => 'form-control expire_date' , 'placeholder' => trans('dashboard.general.to_date')]) !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-md btn-block btn-primary float-right"> {!! trans('dashboard.general.send') !!}</button>
                                </div>

                            </div>
                        </form>
                        <div class="divider divider-success">
                            <div class="divider-text"><i data-feather="bar-chart-2"></i></div>
                        </div>
                        <div id="client_chart" style="height: 450px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Dashboard Analytics end -->
@endsection
@include('dashboard.home.scripts')