@extends('dashboard.layouts.app')
@section('title', trans('admin.home') . ' - ')
@section('speedbar')
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-left mb-0">@lang('admin.home')</h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">@lang('admin.home')</a>
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('css')
    <link rel="stylesheet" type="text/css" href="/vendor/dashboard/app-assets/vendors/css/pickers/pickadate/pickadate.css">

    <link rel="stylesheet" type="text/css" href="/vendor/dashboard/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/vendor/dashboard/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <link rel="stylesheet" type="text/css"
        href="/vendor/dashboard/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css"
        href="/vendor/dashboard/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/vendor/dashboard/app-assets/css/plugins/forms/pickers/form-pickadate.css">
@endpush
@section('content')
    <div class="row">
        <div class="col-lg-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-header d-flex flex-column align-items-start pb-0">
                    <div class="avatar bg-rgba-primary p-50 m-0">
                        <div class="avatar-content">
                            <i class="feather icon-users text-primary font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="text-bold-700 mt-1">
                        {{ $users }}
                    </h2>
                    <p class="mb-0">@lang('admin.users.title')</p>
                </div>
                <br>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-header d-flex flex-column align-items-start pb-0">
                    <div class="avatar bg-rgba-success p-50 m-0">
                        <div class="avatar-content">
                            <i class="feather icon-credit-card text-success font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="text-bold-700 mt-1">
                        {{ $billing }}
                    </h2>
                    <p class="mb-0">@lang('admin.Number of successful transactions')</p>
                </div>
                <br>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-header d-flex flex-column align-items-start pb-0">
                    <div class="avatar bg-rgba-danger p-50 m-0">
                        <div class="avatar-content">
                            <i class="feather icon-shopping-cart text-danger font-medium-5"></i>
                        </div>
                    </div>
                    <div class="row" style="width: 100%">
                        <div class="col-6">
                            <h2 class="text-bold-700 mt-1">{{ $orders }}</h2>
                            <p class="mb-0">@lang('admin.orders.title')</p>
                        </div>
                    </div>
                </div>
                <br>
            </div>
        </div>

        <div class="col-lg-3 col-sm-6 col-12">
            <div class="card">
                <div class="card-header d-flex flex-column align-items-start pb-0">
                    <div class="avatar bg-rgba-warning p-50 m-0">
                        <div class="avatar-content">
                            <i class="feather icon-package text-warning font-medium-5"></i>
                        </div>
                    </div>
                    <h2 class="text-bold-700 mt-1">{{ $products }}</h2>
                    <p class="mb-0">@lang('admin.products.title')</p>
                </div>
                <br>
            </div>
        </div>
    </div>

    <div id="app">
        <dashboard-statics :statics="{{ json_encode($statics) }}"></dashboard-statics>
    </div>

    <div class="row">
        {{--  Chart  --}}
        <div class="col-lg-12 col-sm-12 col-12">
            <div class="card">
                <form action="{{ route('dashboard') }}" class="card-body d-flex">
                    <div class="col-md-4 mb-1">
                        <label class="form-label" for="from">From</label>
                        <input type="text" name="from" value="{{ request()->get('from') }}" id="from"
                            class="form-control flatpickr-basic" placeholder="YYYY-MM-DD" />
                    </div>

                    <div class="col-md-4 mb-1">
                        <label class="form-label" for="to">To</label>
                        <input type="text" name="to" value="{{ request()->get('to') }}" id="to"
                            class="form-control flatpickr-basic" placeholder="YYYY-MM-DD" />
                    </div>
                    <div class="col-md-4 mb-1 d-flex" style="flex-direction: column-reverse;">
                        <button type="submit" class="btn btn-success filter">Filter</button>
                    </div>
                </form>

                <div class="stat">
                    {!! $chart->container() !!}

                    {!! $chart->script() !!}
                </div>
            </div>
        </div>
        {{--  Chart  --}}
    </div>
@endsection
@push('js')
    <script src="/vendor/dashboard/app-assets/js/scripts/pickers/dateTime/pick-a-datetime.js"></script>

    <!-- BEGIN: Page Vendor JS-->
    <script src="/vendor/dashboard/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/vendor/dashboard/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="/vendor/dashboard/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
    <script src="/vendor/dashboard/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
    <script src="/vendor/dashboard/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script src="/vendor/dashboard/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
@endpush
@apexchartsScripts
@vite('resources/js/app.js')