@extends('admin.layouts.master')
@section('title')
Dashboard
@endsection

@section('content')
<div class="group-data-[sidebar-size=lg]:ltr:md:ml-vertical-menu group-data-[sidebar-size=lg]:rtl:md:mr-vertical-menu group-data-[sidebar-size=md]:ltr:ml-vertical-menu-md group-data-[sidebar-size=md]:rtl:mr-vertical-menu-md group-data-[sidebar-size=sm]:ltr:ml-vertical-menu-sm group-data-[sidebar-size=sm]:rtl:mr-vertical-menu-sm pt-[calc(theme('spacing.header')_*_1)] pb-[calc(theme('spacing.header')_*_0.8)] px-4 group-data-[navbar=bordered]:pt-[calc(theme('spacing.header')_*_1.3)] group-data-[navbar=hidden]:pt-0 group-data-[layout=horizontal]:mx-auto group-data-[layout=horizontal]:max-w-screen-2xl group-data-[layout=horizontal]:px-0 group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:ltr:md:ml-auto group-data-[layout=horizontal]:group-data-[sidebar-size=lg]:rtl:md:mr-auto group-data-[layout=horizontal]:md:pt-[calc(theme('spacing.header')_*_1.6)] group-data-[layout=horizontal]:px-3 group-data-[layout=horizontal]:group-data-[navbar=hidden]:pt-[calc(theme('spacing.header')_*_0.9)]">
    <div class="container-fluid group-data-[content=boxed]:max-w-boxed mx-auto">
        <div class="grid grid-cols-12 2xl:grid-cols-12 gap-x-5 mt-5">

            {{-- <div class="col-span-12 card 2xl:col-span-4 2xl:row-span-2">
                <div class="card-body">
                    <div class="flex items-center mb-3">
                        <h6 class="grow text-15">User Statistics</h6>
                        <div class="relative">
                            <a href="#!" class="underline transition-all duration-200 ease-linear text-custom-500 hover:text-custom-600">View All <i data-lucide="move-right" class="inline-block align-middle size-4 ltr:ml-1 rtl:mr-1"></i></a>
                        </div>
                    </div>
                <div id="userStatisticsChart" class="apex-charts" data-chart-colors='["bg-purple-500", "bg-sky-500","bg-red-500"]' dir="ltr"></div>
                </div>
            </div>
            <!--end col--> --}}
            <div class="col-span-12 card md:col-span-6 lg:col-span-3">
                <div class="text-left card-body">
                    <p class="text-slate-500 dark:text-zink-200">{{ translate('Total Members') }} </p>
                    <h5 class="mt-4 mb-2">
                        <span class="counter-value" data-target="{{ $totalMembers }}">0</span>
                    </h5>
                </div>
            </div>
            <!--end col-->
            <div class="col-span-12 card md:col-span-6 lg:col-span-3">
                <div class="text-left card-body">
                    <p class="text-slate-500 dark:text-zink-200">{{ translate('Premium Members') }} </p>
                    <h5 class="mt-4 mb-2"><span class="counter-value" data-target="{{$premium_member}}">0</span></h5>
                </div>
            </div>
            <!--end col-->
            <div class="col-span-12 card md:col-span-6 lg:col-span-3">
                <div class="text-left card-body">
                    <p class="text-slate-500 dark:text-zink-200">{{ translate('Free Members') }} </p>
                    <h5 class="mt-4 mb-2"><span class="counter-value" data-target="{{$free_users}}">0</span></h5>
                </div>
            </div><!--end col-->
            <div class="col-span-12 card md:col-span-6 lg:col-span-3">
                <div class="text-left card-body">
                    <p class="text-slate-500 dark:text-zink-200">{{ translate('Blocked Members') }}</p>
                    <h5 class="mt-4 mb-2"><span class="counter-value" data-target="{{$blockusers}}">0</span></h5>
                </div>
            </div><!--end col-->

            <div class="col-span-12 card">
                <div class="card-body">
                    <div class="grid grid-cols-12 gap-4 mb-3">
                        <div class="col-span-12 md:col-span-8 lg:col-span-8">
                            <div id="ordersOverview" class="apex-charts"
                             data-chart-colors='["bg-custom-500"]'
                             data-monthly-payments="{{ json_encode($monthlyPayments) }}"
                             data-currency-symbol="{{ $currency->symbol }}"
                            dir="ltr"></div>
                        </div>
                        <div class="col-span-12 md:col-span-4 lg:col-span-4">
                            <div class="grid grid-cols-12 gap-4 mb-3">
                                <div class="col-span-12 card md:col-span-6 lg:col-span-6">
                                    <div class="text-left card-body">
                                        <p class="text-slate-500 dark:text-zink-200">{{ translate('Total Earnings') }}</p>

                                        <h5 class="mt-4 mb-2">
                                            {{ formatCurrency($totalEarnings, $currency) }}
                                        </h5>


                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-span-12 card md:col-span-6 lg:col-span-6">
                                    <div class="text-left card-body">
                                        <p class="text-slate-500 dark:text-zink-200">{{ translate('Last 12 Months Earnings' ) }}</p>
                                        <h5 class="mt-4 mb-2">
                                            {{ formatCurrency($earningThisYears, $currency) }}
                                        </h5>

                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-span-12 card md:col-span-6 lg:col-span-6">
                                    <div class="text-left card-body">
                                        <p class="text-slate-500 dark:text-zink-200">{{ translate('Last 6 Months Earnings') }}</p>
                                        <h5 class="mt-4 mb-2">
                                        {{ formatCurrency($earningSixMonths, $currency) }}
                                    </h5>

                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-span-12 card md:col-span-6 lg:col-span-6">
                                    <div class="text-left card-body">
                                        <p class="text-slate-500 dark:text-zink-200">{{ translate('Last Months Earnings') }}</p>
                                        <h5 class="mt-4 mb-2">
                                        {{ formatCurrency($earningLastMonths, $currency) }}
                                    </h5>

                                    </div>
                                </div>
                                <!--end col-->
                            </div>
                        </div>

                    </div>

                    {{-- <div id="salesRevenueOverview" class="apex-charts" data-chart-colors='["bg-custom-500", "bg-custom-400", "bg-custom-300"]' dir="ltr"></div> --}}
                </div>
            </div><!--end col-->

            <div class="col-span-12 card 2xl:col-span-12">
                <div class="card-body">
                    <div class="grid items'';p;-center grid-cols-1 gap-3 mb-5 2xl:grid-cols-12">
                        <div class="2xl:col-span-3">
                            <h6 class="text-15">{{ translate('Top 10 New Registered Users') }}</h6>
                        </div>
                        <!--end col-->
                    </div>
                    <!--end grid-->
                    <div class="overflow-x-auto">
                        <table class="w-full whitespace-nowrap">
                            <thead class="ltr:text-left rtl:text-right bg-slate-100 text-slate-500 dark:text-zink-200 dark:bg-zink-600">
                                <tr>
                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold border-y border-slate-200 dark:border-zink-500">#</th>
                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold border-y border-slate-200 dark:border-zink-500">{{ translate('Username') }}</th>
                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold border-y border-slate-200 dark:border-zink-500">{{ translate('Name') }}</th>
                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold border-y border-slate-200 dark:border-zink-500">{{ translate('Gender') }}</th>
                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold border-y border-slate-200 dark:border-zink-500">{{ translate('Date of Birth') }}</th>
                                    <th class="px-3.5 py-2.5 first:pl-5 last:pr-5 font-semibold border-y border-slate-200 dark:border-zink-500">{{ translate('Age') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                            @foreach ($members as $index => $member)
                            <tr>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">{{ $index + 1 }}</td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">{{$member->user_name}}</td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">{{$member->name}}</td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">{{$member->gender}}</td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">{{ formatDate($member->dob)}}</td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">{{$member->age}}</td>
                            </tr>

                            <!-- <tr>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">
                                    10
                                </td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500"><a href="apps-ecommerce-order-overview.html">#TWT5015100365</a></td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">Marie Prohaska</td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">Male</td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">08 Jun, 2023</td>
                                <td class="px-3.5 py-2.5 first:pl-5 last:pr-5 border-y border-slate-200 dark:border-zink-500">05</td>

                            </tr> -->

                            @endforeach
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
            <!--end col-->

            <div class="col-span-12 card lg:col-span-12 2xl:col-span-12">
                <div class="card-body">
                    <div class="flex items-center mb-3">
                        <h6 class="grow text-15">{{ translate('Best selling packages')}}</h6>
                        {{-- <div class="relative dropdown shrink-0">
                            <button type="button" class="flex items-center justify-center size-[30px] p-0 bg-white text-slate-500 btn hover:text-slate-500 hover:bg-slate-100 focus:text-slate-500 focus:bg-slate-100 active:text-slate-500 active:bg-slate-100 dark:bg-zink-700 dark:hover:bg-slate-500/10 dark:focus:bg-slate-500/10 dark:active:bg-slate-500/10 dropdown-toggle" id="sellingProductDropdown" data-bs-toggle="dropdown">
                                <i data-lucide="more-vertical" class="inline-block size-4"></i>
                            </button>

                            <ul class="absolute z-50 hidden py-2 mt-1 ltr:text-left rtl:text-right list-none bg-white rounded-md shadow-md dropdown-menu min-w-[10rem] dark:bg-zink-600" aria-labelledby="sellingProductDropdown">
                                <li>
                                    <a class="block px-4 py-1.5 text-base transition-all duration-200 ease-linear text-slate-600 dropdown-item hover:bg-slate-100 hover:text-slate-500 focus:bg-slate-100 focus:text-slate-500 dark:text-zink-100 dark:hover:bg-zink-500 dark:hover:text-zink-200 dark:focus:bg-zink-500 dark:focus:text-zink-200" href="#!">1 Weekly</a>
                                </li>
                                <li>
                                    <a class="block px-4 py-1.5 text-base transition-all duration-200 ease-linear text-slate-600 dropdown-item hover:bg-slate-100 hover:text-slate-500 focus:bg-slate-100 focus:text-slate-500 dark:text-zink-100 dark:hover:bg-zink-500 dark:hover:text-zink-200 dark:focus:bg-zink-500 dark:focus:text-zink-200" href="#!">1 Monthly</a>
                                </li>
                                <li>
                                    <a class="block px-4 py-1.5 text-base transition-all duration-200 ease-linear text-slate-600 dropdown-item hover:bg-slate-100 hover:text-slate-500 focus:bg-slate-100 focus:text-slate-500 dark:text-zink-100 dark:hover:bg-zink-500 dark:hover:text-zink-200 dark:focus:bg-zink-500 dark:focus:text-zink-200" href="#!">3 Monthly</a>
                                </li>
                                <li>
                                    <a class="block px-4 py-1.5 text-base transition-all duration-200 ease-linear text-slate-600 dropdown-item hover:bg-slate-100 hover:text-slate-500 focus:bg-slate-100 focus:text-slate-500 dark:text-zink-100 dark:hover:bg-zink-500 dark:hover:text-zink-200 dark:focus:bg-zink-500 dark:focus:text-zink-200" href="#!">6 Monthly</a>
                                </li>
                                <li>
                                    <a class="block px-4 py-1.5 text-base transition-all duration-200 ease-linear text-slate-600 dropdown-item hover:bg-slate-100 hover:text-slate-500 focus:bg-slate-100 focus:text-slate-500 dark:text-zink-100 dark:hover:bg-zink-500 dark:hover:text-zink-200 dark:focus:bg-zink-500 dark:focus:text-zink-200" href="#!">This Yearly</a>
                                </li>
                            </ul>
                        </div> --}}
                    </div>
                    <ul class="flex flex-col gap-5">

                @foreach ($topPackages as $pack)

                <li class="flex items-center gap-3">
                    <div class="flex items-center justify-center w-10 h-10 rounded-md bg-slate-100 dark:bg-zink-600">
                        <img src="{{ asset('admin/packageImages/' . $pack->package->image) }}" alt="" class="h-6">
                    </div>
                    <div class="overflow-hidden grow">
                        <h6 class="truncate">{{ $pack->package->name}}</h6>
                        <div class="text-yellow-500">
                            <i class="ri-star-fill"></i>
                            <i class="ri-star-fill"></i>
                            <i class="ri-star-fill"></i>
                            <i class="ri-star-fill"></i>
                            <i class="ri-star-half-fill"></i>
                        </div>
                    </div>
                    <h6 class="shrink-0"><i data-lucide="shopping-cart" class="inline-block align-middle size-4 text-slate-500 dark:text-zink-200 ltr:mr-1 rtl:ml-1"></i> {{$pack->total_entries}}</h6>
                </li>
                @endforeach



                    </ul>
                </div>
            </div><!--end col-->

        </div><!--end grid-->
    </div>
    <!-- container-fluid -->
</div>
@endsection

@section('scripts')
<script src="{{asset('admin/assets/libs/choices.js/public/assets/scripts/choices.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/@popperjs/core/umd/popper.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/tippy.js/tippy-bundle.umd.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{asset('admin/assets/libs/prismjs/prism.js')}}"></script>
<script src="{{asset('admin/assets/libs/lucide/umd/lucide.js')}}"></script>
<script src="{{asset('admin/assets/js/tailwick.bundle.js')}}"></script>
<!--apexchart js-->
<script src="{{asset('admin/assets/libs/apexcharts/apexcharts.min.js')}}"></script>

<!--dashboard ecommerce init js-->
<script src="{{asset('admin/assets/js/pages/dashboards-ecommerce.init.js')}}"></script>

<!-- App js -->
<script src="{{asset('admin/assets/js/app.js')}}"></script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const counters = document.querySelectorAll('.counter-value');

        counters.forEach(counter => {
            const updateCounter = () => {
                const target = +counter.getAttribute('data-target');
                const count = +counter.innerText;

                const increment = target / 100; // Speed of count

                if(count < target) {
                    counter.innerText = Math.ceil(count + increment);
                    setTimeout(updateCounter, 20);
                } else {
                    counter.innerText = target;
                }
            };

            updateCounter();
        });
    });
</script>
@endsection