@extends('admin.layouts.layout')
@section('title', 'Dashbaord')
@section('content')

    <div>


        <div class=" flex lg:flex-row flex-col 2xl:gap-6 gap-3 mt-1 w-full">

            <div class="2xl:w-[75%] xl:w-[70%] lg:w-[65%] flex flex-col gap-3 ">
                <div class="grid sm:grid-cols-2 grid-cols-1 2xl:grid-cols-3 gap-3 ">
                    <div class="bg-white block   max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('newsites/admin/images/card-bg-1.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <div
                                class="bg-[#133754] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                                <img src="{{ asset('newsites/admin/images/user-icon.png') }}" alt="images" />
                            </div>

                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Active Users</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ $totalUsers }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Number of Students & Tutors</p>
                    </div>

                    <div class="bg-white max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('newsites/admin/images/card-bg-2.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <div
                                class="bg-[#F4C701] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                                <img src="{{ asset('newsites/admin/images/payment-icon.png') }}" alt="images" />
                            </div>

                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Active Subscriptions</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ $totalSubscriptions }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Number of active tutor subscriptions</p>
                    </div>

                    <div class="bg-white max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('newsites/admin/images/card-bg-3.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('newsites/admin/images/card-payout-icon-3.png') }}" alt="images" />


                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Total Revenue</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            ${{ $totalRevenue }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Lifetime revenue</p>
                    </div>
                    <div class="bg-white block   max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('newsites/admin/images/card-bg-4.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <div
                                class="bg-[#FF9D00] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                                <img src="{{ asset('newsites/admin/images/session-frame.png') }}" alt="images" />
                            </div>

                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Upcoming Sessions</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ $upcomingSessions }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Sessions Schedule This Week</p>
                    </div>

                    <div class="bg-white max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('newsites/admin/images/card-bg-5.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <div
                                class="bg-[#91FF3C] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                                <img src="{{ asset('newsites/admin/images/session-icon.png') }}" alt="images" />
                            </div>

                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Ongoing Sessions</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ $ongoingSessions }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Sessions In Progress</p>
                    </div>

                    <div class="bg-white max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                        style="background-image: url('{{ asset('newsites/admin/images/card-bg-6.png') }}');">
                        <div class="flex items-center justify-between mb-0">
                            <div
                                class="bg-[#31D2FF] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                                <img src="{{ asset('newsites/admin/images/tv-icon.png') }}" alt="images" />
                            </div>


                        </div>
                        <p class="text-sm text-[#313131] Poppins mb-0">Completed Sessions</p>
                        <p class="2xl:text-[28px] text-[20px]  text-[#133754] Poppins font-semibold  mb-0">
                            {{ $completedSessions }}</p>
                        <p class="text-sm Poppins-medium text-[#3F3F3F]">Sessions Conducted on Platform</p>
                    </div>
                </div>
                <div class="flex justify-between py-3    border-[#DADADA]">

                    <div class="flex items-center gap-2 ">
                        <div
                            class="bg-[#1CD8C4] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                            <img src="{{ asset('newsites/admin/images/user-icon.png') }}" alt="images" />
                        </div>
                        <h3 class="text-[#133754] Poppins-medium  sm:text-[16px] text-[17px]  mb-0">Tutors Request</h3>
                    </div>
                    <div>
                        <button onclick="window.location.href='{{ route('admin.tutorRequest') }}'"
                            class="text-[#000000] Poppins-medium text-sm   bg-[#1CD8C4] px-14 rounded-sm py-[10px] cursor-pointer">View
                            All</button>
                    </div>
                </div>







            </div>
            <div class="2xl:w-[25%] xl:w-[30%] lg:w-[35%] flex ">
                <div class="w-full ">


                    <div class="bg-white rounded-[10px] border border-[#DADADA]  shadow">
                        <div class="p-5">

                            <div class="flex items-center gap-2 mb-2">
                                <div
                                    class="bg-[#133754] border border-[#EAEAEA] rounded-[5px] px-[8px] py-[8px]   flex justify-center">
                                    <img src="{{ asset('newsites/admin/images/gross-icon.png') }}" alt="images" />
                                </div>

                                <h3 class="text-[#133754] Poppins-medium  text-[16px]">Revenue Graph</h3>
                            </div>


                            {{-- <div class="flex items-center mt-6 ">
                            <h3 class="text-[#202020] Manrope-b font-bold  text-[16px]">Revenue Over 6 Months</h3>
                        </div>
                         --}}
                        </div>

                        <div class="mx-auto bg-white p-1 rounded-[10px] shadow-[0_4px_10px_rgba(0,0,0,0.05)]">
                            <canvas id="projectChart" height="200"></canvas>
                        </div>
                    </div>




                </div>
            </div>


        </div>
        <div class="bg-white border-t border-[#EDEDED] py-2    max-h-[420px]  ">
            <div class="grid xldesk:grid-cols-4 xl:grid-cols-3  sm:grid-cols-2 grid-cols-1  gap-4.5">
                @include('admin.components.tutorCards', ['tutors' => $totalTutors, 'checkbox' => false])

            </div>


        </div>
    </div>


    @push('script')
        <script>
            const ctx = document.getElementById('projectChart').getContext('2d');

            const projectChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: @json($chartLabels), // ✅ dynamic months
                    datasets: [{
                            label: 'Subscription Revenue',
                            data: @json($subscriptionChartData), // ✅ from controller
                            backgroundColor: '#1BD3BF',
                            borderRadius: 0
                        },
                        {
                            label: 'Booking Revenue',
                            data: @json($bookingChartData), // ✅ from controller
                            backgroundColor: '#A6DED8',
                            borderRadius: 0
                        }
                    ]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                usePointStyle: true
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return '$' + context.raw.toLocaleString();
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,

                            // ✅ OPTIONAL: make dynamic instead of fixed 100000
                            suggestedMax: Math.max(
                                ...@json($subscriptionChartData),
                                ...@json($bookingChartData)
                            ) * 1.2,

                            ticks: {
                                callback: function(value) {
                                    return '$' + (value / 1000) + 'K';
                                },
                                padding: 10
                            },
                            grid: {
                                borderDash: [4, 4],
                                color: '#dfe6e9'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        </script>
    @endpush


@endsection
