@extends('user::layouts.backend-master')

@section('breadcrumb_title', $breadcrumbTitle)

@section('content')

    <!-- Page Header -->
    <div class="flex justify-between items-center gap-3 mb-5">
        <div>
            <h1 class="h3 mb-0">{{ $pageTitle }}</h1>
            <p class="text-muted mb-0">{{ trans('payment::translate.View payment analytics and performance metrics') }}</p>
        </div>
        <div class="text-end">
            <a href="{{ route('admin.payment-methods.index') }}" class="btn btn-primary inline-block">
                <i class="fas fa-arrow-left me-2"></i>{{ trans('payment::translate.Back to Payment Methods') }}
            </a>
        </div>
    </div>

    <div class="lg:col-span-2 grid sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-5">
        <!-- single card  -->
        <div class="flex lg:col-span-2 xl:col-span-1 flex-col rounded-xl bg-white py-5 px-6 gap-4 border border-border">
            <div class="size-[58px] text-main bg-main/10 rounded-full flex justify-center items-center p-1 relative">
                <svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M28.4355 26.5538C28.4355 28.9188 26.6205 30.8254 24.3655 30.8254H19.7639C17.8022 30.8254 16.2072 29.1571 16.2072 27.1038C16.2072 24.8671 17.1789 24.0788 18.6272 23.5654L26.0155 20.9988C27.4639 20.4854 28.4355 19.6971 28.4355 17.4604C28.4355 15.4071 26.8405 13.7388 24.8789 13.7388H20.2772C18.0222 13.7388 16.2072 15.6454 16.2072 18.0104"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M22.334 11.2822V33.2822" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                        stroke-linejoin="round"></path>
                    <path
                        d="M22.3346 40.6154C12.2094 40.6154 4.0013 32.4073 4.0013 22.2821C4.0013 12.1568 12.2094 3.94873 22.3346 3.94873C32.4599 3.94873 40.668 12.1568 40.668 22.2821C40.668 32.4073 32.4599 40.6154 22.3346 40.6154Z"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </div>
            <div class="grid gap-1 flex-1">
                <h2 class="text-2xl">{{ exchangeAmount($total_amount) }}</h2>
                <p class="">{{ trans('backend::translate.Total Sale') }}</p>
            </div>
        </div>
        <!-- single card  -->
        <div class="flex lg:col-span-2 xl:col-span-1 flex-col rounded-xl bg-white py-5 px-6 gap-4 border border-border">
            <div class="size-[58px] text-main bg-main/10 rounded-full flex justify-center items-center p-1 relative">
                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.2318 15.9243L4.39091 9.77282L18.2318 3.62131L32.0727 9.77282L18.2318 15.9243Z"
                        stroke="currentColor" stroke-width="1.84545" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M11.31 6.69698L25.1509 12.8485" stroke="currentColor" stroke-width="1.84545"
                        stroke-linejoin="round"></path>
                    <path
                        d="M32.073 9.77278V15.9243M33.6109 30.2787H27.4594L18.2381 34.3788M18.2381 34.3788L4.3912 28.2273V9.79365M18.2381 34.3788V15.9243"
                        stroke="currentColor" stroke-width="1.84545" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M33.6109 20.538H28.9973M33.6109 25.1516H28.9973" stroke="currentColor" stroke-width="1.84545"
                        stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </div>
            <div class="grid gap-1 flex-1">
                <h2 class="text-2xl">{{ $total_orders }}</h2>
                <p class="">{{ trans('backend::translate.Number of Order') }}</p>
            </div>
        </div>
        <!-- single card  -->
        <div class="flex lg:col-span-2 xl:col-span-1 flex-col rounded-xl bg-white py-5 px-6 gap-4 border border-border">
            <div class="size-[58px] text-main bg-main/10 rounded-full flex justify-center items-center p-1 relative">
                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <ellipse cx="15" cy="22.5" rx="10" ry="5" stroke="currentColor"
                        stroke-width="2" stroke-linejoin="round"></ellipse>
                    <ellipse cx="15" cy="8.125" rx="6.25" ry="5.625" stroke="currentColor"
                        stroke-width="2" stroke-linejoin="round"></ellipse>
                </svg>
            </div>
            <div class="grid gap-1 flex-1">
                <h2 class="text-2xl">{{ exchangeAmount($current_month_amount) }}</h2>
                <p>{{ trans('backend::translate.This Month Sale') }}</p>
            </div>
        </div>

        <!-- single card  -->
        <div class="flex lg:col-span-2 xl:col-span-1 flex-col rounded-xl bg-white py-5 px-6 gap-4 border border-border">
            <div class="size-[58px] text-main bg-main/10 rounded-full flex justify-center items-center p-1 relative">
                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M15.8846 5.17957C17.1587 2.49548 20.84 2.49548 22.1141 5.17957L24.316 9.81837C24.822 10.8842 25.7999 11.623 26.9313 11.7939L31.855 12.5378C34.7039 12.9682 35.8415 16.6083 33.78 18.6976L30.2171 22.3084C29.3985 23.138 29.0249 24.3334 29.2182 25.5048L30.0593 30.6034C30.5459 33.5535 27.5677 35.8032 25.0196 34.4103L20.6157 32.0031C19.6038 31.45 18.3949 31.45 17.383 32.0031L12.9791 34.4103C10.431 35.8032 7.45277 33.5535 7.93943 30.6034L8.7805 25.5048C8.97375 24.3334 8.60019 23.138 7.78156 22.3084L4.21873 18.6976C2.15722 16.6083 3.29479 12.9682 6.14373 12.5378L11.0674 11.7939C12.1988 11.623 13.1767 10.8842 13.6827 9.81837L15.8846 5.17957Z"
                        stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path>
                </svg>
            </div>
            <div class="grid gap-1 flex-1">
                <h2 class="text-2xl">{{ $total_ratting }}</h2>
                <p class="">{{ trans('backend::translate.Total Rating') }}</p>
            </div>
        </div>
    </div>

    <!-- count section  -->
    <div class="grid lg:grid-cols-3 gap-5 max-h-fit mb-5">
        <!-- Project Status  -->
        <div class="card lg:col-span-1">
            @include('payment::components.payment-methods-usage')
        </div>

        {{-- Revenue Overview --}}
        <div class="card lg:col-span-2">
            <h2 class="">{{ trans('backend::translate.Payment Per Month') }}</h2>
            <!-- chart  -->
            <div class="mt-5 w-full h-[346px]">
                 @include('payment::components.payment-per-month')
            </div>
        </div>
    </div>

    <!-- Recent Transactions Table -->
    <div class="card mb-4">
        @include('backend::orders.latest_order')
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            //revenue overview
            const revenueOverviewctx = document.querySelector("#revenueOverview").getContext("2d");
            const gradient = revenueOverviewctx.createLinearGradient(0, 0, 0, 400);
            gradient.addColorStop(0, "rgba(31, 97, 236, 0.2)");
            gradient.addColorStop(1, "rgba(31, 97, 236, 0)");

            new Chart(revenueOverviewctx, {
                type: "line",
                data: {
                    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',
                        'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                    ],
                    datasets: [{
                        label: "Payment",
                        data: [1200, 1900, 3000, 5000, 2000, 3000, 4500,
                            3800, 4200, 3900, 4100, 4300
                        ],
                        backgroundColor: gradient,
                        borderColor: "#1F61EC",
                        pointRadius: 0,
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                display: false
                            }
                        },
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });


            const paymentMethodctx = document.querySelector("#paymentMethodUsage").getContext("2d");
            new Chart(paymentMethodctx, {
                type: "pie",
                data: {
                    labels: ["Paypal", "Stripe", "Mollie", "Payos"],
                    datasets: [{
                        label: "Payment Methods",
                        data: [40, 28, 22, 10],
                        backgroundColor: ["#17BA3A", "#1F61EC", "#EBF0FD", "#FFC301"],
                        borderWidth: 0,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    rotation: 0,
                    layout: {
                        padding: {
                            left: 10,
                            right: 10,
                            top: 10,
                            bottom: 10,
                        },
                    },
                    plugins: {
                        legend: {
                            display: false,
                            position: "bottom",
                        },
                        title: {
                            display: false,
                        },
                    },
                },
            });
        });
    </script>
@endpush