@extends('admin.layouts.layout')
@section('title', 'Report And Analytics')
@section('content')


    <div class="w-[full flex flex-col gap-3 justify-between">
        <div class="grid sm:grid-cols-2 xl:grid-cols-3 grid-cols-1 xldesk:grid-cols-4 gap-3">


            <div class="bg-white max-h-[155px] 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">Total Platform Revenue</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">${{$totalAmount ?? 0}}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">Sum of all completed session payments</p>
            </div>


            <div class="bg-white max-h-[155px] 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">Total Sessions Booked</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">{{$totalSessions ?? 0}}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">All sessions scheduled</p>
            </div>

            <div class="bg-white max-h-[155px] 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') }}" />
                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">Total Tutor Earnings</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">${{$totalTutorEarning ?? 0}}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">Total earnings credited to tutors</p>
            </div>
            <div class="bg-white max-h-[155px] 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-red.png') }}');">
                <div class="flex items-center justify-between mb-0">
                    <div
                        class="bg-[#D81C1F] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                        <img src="{{ asset('newsites/admin/images/session-icon-white.png') }}" alt="images" />
                    </div>


                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">Subscription Revenue</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">${{$totalSubEarning ?? 0}}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">{{$totalActiveSub}} Active Subscriptions</p>
            </div>
        </div>
        <div>
            <div class=" mx-auto grid grid-cols-1 2xl:grid-cols-4 desk:grid-cols-3 lg:grid-cols-3 desk:gap-6 gap-2 mt-2">

                <div
                    class="2xl:col-span-3 desk:col-span-2 col-span-2 bg-white border border-[#D8DADF] rounded-[15px] p-4 shadow-sm">
                    <div class="flex items-center gap-3 mb-8">
                        <div class="flex items-center justify-between mb-0">
                            <img src="{{ asset('newsites/admin/images/card-payout-icon-3.png') }}" />
                        </div>
                        <h2 class="text-[#133754] Poppins-medium text-lg">Platform Revenue Over Year</h2>
                    </div>

                    <div class="h-[350px] w-full">
                        <canvas id="revenueChart"></canvas>
                    </div>
                </div>

                <div class="bg-white border border-[#D8DADF] rounded-[15px] overflow-hidden shadow-sm">
                    <div class="p-4 border-b border-gray-100 flex items-center gap-3">
                        <div class="w-9.25 h-8.75 bg-[#F4C701] rounded-[5px] flex items-center justify-center text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                            </svg>
                        </div>
                        <h2 class="text-[#133754] Poppins-medium text-base">Top Performing Tutors</h2>
                    </div>

                    <div class="divide-y divide-gray-100 max-h-[450px]">
                      @foreach ($topTutors as $key=> $tutor)
                            <div class="flex items-center justify-between p-4 hover:bg-gray-50 transition-colors">
                                <div class="flex items-center gap-3">
                                    <div class="relative">
                                        <img src="{{$tutor->tutor->tutorDefaultImage}}" class="w-[48px] h-[48px] rounded-full object-cover" alt="">
                                        <div class="absolute top-0 right-0 w-[12px] h-[12px] bg-[#1CD8C4] border-2 border-white rounded-full"></div>
                                    </div>
                                    <div>
                                        <p class="text-[#212121] Poppins-medium text-[15.62px]">{{$tutor->tutor->name}}</p>
                                        <p class="text-[#009D2C] text-sm Poppins-medium">{{$tutor->total_sessions}} Sessions Completed</p>
                                    </div>
                                </div>
                                <span class="text-[#3D3D3D] text-[13.89px] Poppins">{{$key+1}}</span>
                            </div>
                      @endforeach
                    </div>
                </div>
            </div>



        </div>

        @push('script')
            <script>
                const revenueData = @json($revenue);
                const ctx1 = document.getElementById('revenueChart').getContext('2d');

                const gradient = ctx1.createLinearGradient(0, 0, 0, 400);
                gradient.addColorStop(0, 'rgba(28, 216, 196, 0.2)');
                gradient.addColorStop(1, 'rgba(28, 216, 196, 0)');

                new Chart(ctx1, {
                    type: 'line',
                    data: {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                        datasets: [{
                            label: 'Revenue',
                            data: revenueData,
                            borderColor: '#1CD8C4',
                            borderWidth: 2,
                            borderDash: [5, 5],
                            pointRadius: 0,
                            fill: true,
                            backgroundColor: gradient,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: {
                                    color: '#f0f0f0'
                                },
                                ticks: {
                                    callback: function(value) {
                                        if (value === 0) return '0';
                                        return '$'+value ;
                                    },
                                    color: '#636363',
                                    font: {
                                        family: 'Poppins',
                                        size: 17,
                                    }
                                }
                            },
                            x: {
                                grid: {
                                    display: false
                                },
                                ticks: {
                                    color: '#636363',
                                    font: {
                                        family: 'Poppins',
                                        size: 17,
                                    }
                                }
                            }
                        }
                    }
                });
            </script>
        @endpush


    @endsection
