@extends('master')

@section('title', 'Home')


{{--@section('toolbar')--}}
{{--    <x-tool-bar main-page="{{__('app.home.Dashboard')}}" sub-page="{{__('app.home.Home')}}" route="home" />--}}
{{--@endsection--}}

@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Row-->
        <div class="row g-5 g-xl-8">
            <div class="col-xl-4">
                <!--begin::Statistics Widget 5-->
                <a href="{{route('users.index')}}"
                    class="card bg-danger hoverable card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <div class="text-white fw-bold fs-2 mb-2 mt-5">@lang('app.home.users')</div>
                        <div class="fw-semibold text-white">{{$lastUsersCount}}</div>
                    </div>
                    <!--end::Body-->
                </a>
                <!--end::Statistics Widget 5-->
            </div>
            <div class="col-xl-4">
                <!--begin::Statistics Widget 5-->
                <a href="{{route('banks.index')}}" class="card bg-primary hoverable card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <!--end::Svg Icon-->
                        <div class="text-white fw-bold fs-2 mb-2 mt-5">@lang('app.home.banks')</div>
                        <div class="fw-semibold text-white"> {{$banksCount}}</div>
                    </div>
                    <!--end::Body-->
                </a>
                <!--end::Statistics Widget 5-->
            </div>
            <div class="col-xl-4">
                <!--begin::Statistics Widget 5-->
                <a href="{{route('fuel_eg.index')}}"
                    class="card bg-success hoverable card-xl-stretch mb-5 mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <div class="text-white fw-bold fs-2 mb-2 mt-5">@lang('app.home.fuels')</div>
                        <div class="fw-semibold text-white">{{$fuelsCount}}</div>
                    </div>
                    <!--end::Body-->
                </a>
                <!--end::Statistics Widget 5-->
            </div>
        </div>
        <!--end::Row-->
        <div class="row g-5 g-xl-8">
            <div class="col-xl-4">
                <!--begin::Statistics Widget 5-->
                <a href="{{route('gold_eg.index')}}"
                    class="card bg-warning hoverable card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <div class="text-white fw-bold fs-2 mb-2 mt-5">@lang('app.home.golds')</div>
                        <div class="fw-semibold text-white">{{$goldsCount}}</div>
                    </div>
                    <!--end::Body-->
                </a>
                <!--end::Statistics Widget 5-->
            </div>
            <div class="col-xl-4">
                <!--begin::Statistics Widget 5-->
                <a href="{{route('silver_eg.index')}}" class="card bg-secondary hoverable card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <!--end::Svg Icon-->
                        <div class="text-dark fw-bold fs-2 mb-2 mt-5">@lang('app.home.silvers')</div>
                        <div class="fw-semibold text-dark"> {{$silversCount}}</div>
                    </div>
                    <!--end::Body-->
                </a>
                <!--end::Statistics Widget 5-->
            </div>
            <div class="col-xl-4">
                <!--begin::Statistics Widget 5-->
                <a href="{{route('countries.index')}}" class="card  hoverable card-xl-stretch mb-xl-8">
                    <!--begin::Body-->
                    <div class="card-body">
                        <!--end::Svg Icon-->
                        <div class="text-dark fw-bold fs-2 mb-2 mt-5">@lang('app.home.countries')</div>
                        <div class="fw-semibold text-dark"> {{$countriesCount}}</div>
                    </div>
                    <!--end::Body-->
                </a>
                <!--end::Statistics Widget 5-->
            </div>
           
        </div>
    </div>


    <div class="card">
        <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
            <!--begin::Card title-->
            <div class="card-title">
                <h3>@lang('app.home.LastUsers')</h3>
            </div>
            <!--begin::Card title-->

        </div>
        <!--end::Card header-->

        <!--begin::Card body-->
        <div class="card-body table-responsive pt-0">
            <!--begin::Table-->
            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_broadcastings_table">
                <!--begin::Table head-->
                <thead>
                    <!--begin::Table row-->
                    <tr class="text-start text-gray-400 fw-bold fs-7 text-uppercase gs-0">
                        <th>#</th>
                        <th class="min-w-125px">@lang('app.users.Name')</th>
                        <th class="min-w-125px">@lang('app.users.email')</th>
                        <th class="min-w-125px">@lang('app.users.Created At')</th>
                    </tr>
                    <!--end::Table row-->
                </thead>

                <tbody class="fw-semibold text-gray-600">
                    @forelse ($lastUsers as $user)
                     <tr>
                        <td>{{ $loop->index + 1 }}</td>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>{{ $user->created_at->diffForHumans() }}</td>

                     </tr>
                        
                    @empty
                    <tr>
                        <td colspan="4" class="text-center">
                            Not Found Users 

                        </td>
                    </tr>
                        
                    @endforelse

                </tbody>

            </table>
            <!--end::Table-->
        </div>
        <!--end::Card body-->
    </div>


    {{-- <div style="margin-bottom: 10rem"></div>


    <div class="row"> --}}


        {{-- <div class="card col-md-6">
            <!--begin::Card header-->
            <div class="card-header border-0 pt-6">
                <!--begin::Card title-->
                <div class="card-title">

                </div>
                <!--begin::Card title-->

            </div>
            <!--end::Card header-->



            <div class="card-body pt-0">
                <canvas id="myChart"></canvas>
            </div>

        </div> --}}



    @endsection

{{--    @push('scripts')--}}
{{--        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>--}}

{{--        <script>--}}
{{--            $(document).ready(function() {--}}
{{--                const ctx = document.getElementById('myChart');--}}
{{--                let x = "{{ $x }}";--}}
{{--                let y = "{{ $y }}";--}}

{{--                x = x.split(',')--}}
{{--                y = y.split(',')--}}


{{--                function months(config) {--}}
{{--                    var cfg = config || {};--}}
{{--                    var count = cfg.count || 12;--}}
{{--                    var section = cfg.section;--}}
{{--                    var values = [];--}}
{{--                    var i, value;--}}

{{--                    for (i = 0; i < count; ++i) {--}}
{{--                        value = MONTHS[Math.ceil(i) % 12];--}}
{{--                        values.push(value.substring(0, section));--}}
{{--                    }--}}

{{--                    return values;--}}
{{--                }--}}


{{--                new Chart(ctx, {--}}
{{--                    type: 'bar',--}}
{{--                    data: {--}}
{{--                        // labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],--}}
{{--                        labels: x,--}}
{{--                        datasets: [{--}}
{{--                            label: "# @lang('app.home.Home')",--}}
{{--                            data: y,--}}
{{--                            backgroundColor: [--}}
{{--                                'rgba(255, 99, 132, 0.2)',--}}
{{--                                'rgba(255, 159, 64, 0.2)',--}}
{{--                                'rgba(255, 205, 86, 0.2)',--}}
{{--                                'rgba(75, 192, 192, 0.2)',--}}
{{--                                'rgba(54, 162, 235, 0.2)',--}}
{{--                                'rgba(153, 102, 255, 0.2)',--}}
{{--                                'rgba(201, 203, 207, 0.2)'--}}
{{--                            ],--}}
{{--                            borderColor: [--}}
{{--                                'rgb(255, 99, 132)',--}}
{{--                                'rgb(255, 159, 64)',--}}
{{--                                'rgb(255, 205, 86)',--}}
{{--                                'rgb(75, 192, 192)',--}}
{{--                                'rgb(54, 162, 235)',--}}
{{--                                'rgb(153, 102, 255)',--}}
{{--                                'rgb(201, 203, 207)'--}}
{{--                            ],--}}
{{--                            borderWidth: 1--}}
{{--                        }]--}}
{{--                    },--}}
{{--                    options: {--}}
{{--                        scales: {--}}
{{--                            y: {--}}
{{--                                beginAtZero: true--}}
{{--                            }--}}
{{--                        }--}}
{{--                    }--}}
{{--                });--}}
{{--            });--}}
{{--        </script>--}}
{{--    @endpush--}}