@extends('Admin.layout')
@section('content')

<div class="row">

    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">

        <a href="" class="text-decoration-none">

            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">

                        <div>
                            <h6 class="mb-1 text-dark">Total Revenue</h6>
                        </div>

                        <span class="badge bg-label-success rounded p-2">
                            <i class="icon-base ti tabler-soup icon-26px"></i>
                        </span>

                    </div>

                    <h5 class="fw-bold mt-3 mb-0 text-dark">45,00,000</h5>

                </div>

            </div>

        </a>

    </div>

    <!-- Total Delivery Partner -->

    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">

        <a href="" class="text-decoration-none">

            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">

                        <div>
                            <h6 class="mb-1 text-dark">Total Orders</h6>
                        </div>

                        <span class="badge bg-label-info rounded p-2">
                            <i class="icon-base ti tabler-truck icon-26px"></i>
                        </span>

                    </div>

                    <h5 class="fw-bold mt-3 mb-0 text-dark">40</h5>

                </div>

            </div>

        </a>

    </div>

    <!-- Total Users -->

    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">

        <a href="" class="text-decoration-none">

            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">

                        <div>
                            <h6 class="mb-1 text-dark">Total Customers</h6>
                        </div>

                        <span class="badge bg-label-primary rounded p-2">
                            <i class="icon-base ti tabler-users icon-26px"></i>
                        </span>

                    </div>

                    <h5 class="fw-bold mt-3 mb-0 text-dark"> 1,250</h5>

                </div>

            </div>

        </a>

    </div>

    <!-- Total Revenue -->

    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">

        <a href="" class="text-decoration-none">

            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">

                        <div>
                            <h6 class="mb-1 text-dark">Total Products</h6>
                        </div>

                        <span class="badge bg-label-success rounded p-2">
                            <i class="icon-base ti tabler-currency-rupee icon-26px"></i>
                        </span>

                    </div>

                    <h5 class="fw-bold mt-3 mb-0 text-dark"> 100 </h5>

                </div>

            </div>

        </a>

    </div>

    <!-- Total Orders -->

    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">

        <!-- <a href="#" class="text-decoration-none"> -->

            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">

                        <div>
                            <h6 class="mb-1 text-dark">Pending Orders</h6>
                        </div>

                        <span class="badge bg-label-danger rounded p-2">
                            <i class="icon-base ti tabler-bulb icon-26px"></i>
                        </span>

                    </div>

                    <h5 class="fw-bold mt-3 mb-0 text-dark">20</h5>

                </div>

            </div>

        <!-- </a> -->

    </div>

    <!-- New Orders -->

    <div class="col-lg-3 col-md-6 col-sm-6 mb-4">

        <a href="" class="text-decoration-none">

            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">

                        <div>
                            <h6 class="mb-1 text-dark"> Refunds </h6>
                        </div>

                        <span class="badge bg-label-warning rounded p-2">
                            <i class="icon-base ti tabler-list-check icon-26px"></i>
                        </span>

                    </div>

                    <h5 class="fw-bold mt-3 mb-0 text-dark">50</h5>

                </div>

            </div>

        </a>

    </div>

<div class="col-lg-6 col-md-6 col-sm-6 mb-4">

        <div class="card h-100">

            <div class="card-body">

                <div class="d-flex justify-content-between align-items-center">

                    <div>

                        <h6 class="mb-1 text-dark">
                            Today's Gold Price
                        </h6>

                        <div class="d-flex align-items-center gap-2">

                            <span class="bg-success rounded-circle d-inline-block"
                                style="width: 8px; height: 8px;">
                            </span>

                            <small class="text-success fw-semibold">
                                LIVE
                            </small>

                        </div>

                    </div>


                    <span class="badge bg-primary-subtle text-primary rounded p-2">

                        <i class="icon-base ti tabler-currency-rupee icon-26px"></i>

                    </span>

                </div>


                <h5 class="fw-bold mt-3 mb-0 text-dark">
                    ₹14,290
                </h5>

                <small class="text-muted">
                    22K Gold / gram
                </small>

            </div>

        </div>

    </div>
</div>

<div class="card">
    <div class="card-header border-0">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">

            <!-- Sales Information -->
            <div>

                <span class="text-muted d-block mb-2">
                    Sales 2022
                </span>

                <div class="d-flex align-items-center gap-2">

                    <h5 class="mb-0 fw-semibold">
                        ₹3,4500
                    </h5>

                    <span class="text-primary d-flex align-items-center gap-1">
                        <i class="ti tabler-circle-filled"></i>
                        <span>1.3%</span>
                    </span>

                    <span class="text-muted text-uppercase small">
                        VS LAST YEAR
                    </span>

                </div>
            </div>

            <!-- Period -->
            <div class="btn-group" role="group">

                <button type="button"
                    class="btn btn-label-primary"
                    data-period="daily">
                    Daily
                </button>

                <button type="button"
                    class="btn btn-label-primary"
                    data-period="weekly">
                    Weekly
                </button>

                <button type="button"
                    class="btn btn-primary active"
                    data-period="annually">
                    Annually
                </button>

            </div>

        </div>
    </div>

    <div class="card-body pt-0">
        <div id="salesChart"></div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {

        const salesChartEl = document.querySelector('#salesChart');

        if (!salesChartEl) return;

        // Get your actual Vuexy / Bootstrap primary color
        const primaryColor = getComputedStyle(document.documentElement)
            .getPropertyValue('--bs-primary')
            .trim();

        const monthlyData = [
            2400,
            3200,
            1900,
            2700,
            3000,
            4000,
            3100,
            3700,
            3350,
            2600,
            2500,
            3700
        ];

        const monthlyCategories = [
            'JAN',
            'FEB',
            'MAR',
            'APR',
            'MAY',
            'JUN',
            'JUL',
            'AUG',
            'SEP',
            'OCT',
            'NOV',
            'DEC'
        ];

        const chart = new ApexCharts(salesChartEl, {

            series: [{
                name: 'Sales',
                data: monthlyData
            }],

            chart: {
                type: 'area',
                height: 380,
                toolbar: {
                    show: false
                },
                zoom: {
                    enabled: false
                }
            },

            // Your Vuexy primary orange
            colors: [primaryColor],

            stroke: {
                curve: 'smooth',
                width: 3
            },

            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.35,
                    opacityTo: 0.05,
                    stops: [0, 90, 100]
                }
            },

            dataLabels: {
                enabled: false
            },

            markers: {
                size: 0,

                hover: {
                    size: 7
                }
            },

            grid: {
                borderColor: '#e9e9ef',

                xaxis: {
                    lines: {
                        show: false
                    }
                }
            },

            xaxis: {

                categories: monthlyCategories,

                axisBorder: {
                    show: false
                },

                axisTicks: {
                    show: false
                },

                labels: {
                    style: {
                        colors: Array(12).fill(primaryColor)
                    }
                }
            },

            yaxis: {

                min: 0,
                max: 5000,
                tickAmount: 5,

                labels: {

                    formatter: function(value) {

                        if (value === 0) {
                            return '0';
                        }

                        return (value / 1000) + 'k';
                    },

                    style: {
                        colors: Array(6).fill(primaryColor)
                    }
                }
            },

            tooltip: {

                shared: false,
                intersect: false,

                custom: function({
                    series,
                    seriesIndex,
                    dataPointIndex
                }) {

                    const value =
                        series[seriesIndex][dataPointIndex];

                    return `
                    <div class="bg-primary text-white p-2 rounded">

                        <div>
                            ${value.toLocaleString('en-IN')} sales
                        </div>

                        <strong>
                            ₹${value.toLocaleString('en-IN')}
                        </strong>

                    </div>
                `;
                }
            },

            annotations: {

                xaxis: [{
                    x: 'SEP',
                    borderColor: primaryColor
                }],

                points: [{
                    x: 'SEP',
                    y: 3350,

                    marker: {
                        size: 7,
                        fillColor: primaryColor,
                        strokeColor: '#fff',
                        strokeWidth: 3
                    }
                }]
            }

        });

        chart.render();


        // Daily / Weekly / Annually
        document.querySelectorAll('[data-period]').forEach(button => {

            button.addEventListener('click', function() {

                document
                    .querySelectorAll('[data-period]')
                    .forEach(btn => {

                        btn.classList.remove(
                            'active',
                            'btn-primary'
                        );

                        btn.classList.add(
                            'btn-label-primary'
                        );
                    });

                this.classList.remove(
                    'btn-label-primary'
                );

                this.classList.add(
                    'btn-primary',
                    'active'
                );


                const period = this.dataset.period;

                let data;
                let categories;


                if (period === 'daily') {

                    data = [
                        1200, 1600, 1400, 2200,
                        1900, 2500, 2800, 3100,
                        2900, 3300, 3500, 3200
                    ];

                    categories = [
                        'MON',
                        'TUE',
                        'WED',
                        'THU',
                        'FRI',
                        'SAT',
                        'SUN',
                        'MON',
                        'TUE',
                        'WED',
                        'THU',
                        'FRI'
                    ];

                } else if (period === 'weekly') {

                    data = [
                        1800, 2500, 2200, 3100,
                        2800, 3600, 3200, 4000,
                        3500, 2900, 3300, 3800
                    ];

                    categories = [
                        'W1',
                        'W2',
                        'W3',
                        'W4',
                        'W5',
                        'W6',
                        'W7',
                        'W8',
                        'W9',
                        'W10',
                        'W11',
                        'W12'
                    ];

                } else {

                    data = monthlyData;

                    categories = monthlyCategories;
                }


                chart.updateOptions({

                    colors: [primaryColor],

                    xaxis: {
                        categories: categories
                    },

                    annotations: {

                        xaxis: [{
                            x: categories.includes('SEP') ?
                                'SEP' :
                                categories[Math.floor(categories.length / 2)],

                            borderColor: primaryColor
                        }]
                    }

                });


                chart.updateSeries([{
                    name: 'Sales',
                    data: data
                }]);

            });

        });

    });
</script>

@endsection