@extends('layouts.adminmaster')

@section('title', 'Trew India Pvt Ltd')

@section('content')

    <!-- Start right Content here -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0 font-size-18">Dashboard</h4>


                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-xl-4">

                        <!-- Welcome Back / Profile Summary Card -->
                        <div class="card border-0 shadow-sm overflow-hidden">
                            <div class="bg-primary-subtle">
                                <div class="row">
                                    <div class="col-7">
                                        <div class="text-primary p-3">
                                            <h5 class="fw-bold mb-1">Welcome Back!</h5>
                                            <p class="mb-0 small">Trew India Dashboard</p>
                                        </div>
                                    </div>
                                    <div class="col-5 align-self-end">
                                        <img src="{{ asset('assets/dashboard/images/profile-img.png') }}"
                                            alt="Profile Banner" class="img-fluid">
                                    </div>
                                </div>
                            </div>
                            <div class="card-body pt-0">
                                <div class="text-center">
                                    <div class="avatar-md mx-auto mt-n4 mb-3">
                                        <img src="{{ asset('assets/dashboard/images/users/avatar-1.jpg') }}" alt="Admin"
                                            class="rounded-circle img-thumbnail shadow-sm border-0">
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                                        <div>
                                            <h5 class="fw-semibold mb-0">Admin Panel</h5>
                                            <p class="text-muted small mb-0">System Administrator</p>
                                        </div>

                                        <a href="{{ route('profile.edit') }}"
                                            class="btn btn-outline-primary btn-sm px-3 mt-2 mt-sm-0">
                                            <i class="mdi mdi-account-circle-outline me-1"></i> View Profile
                                        </a>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <!-- Monthly Category Performance -->
                        <div class="card shadow-sm border-0 mt-4">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Monthly Category Performance</h4>
                                <div class="row align-items-center">
                                    <div class="col-sm-6">
                                        <p class="text-muted mb-1">This Month Overview</p>
                                        <h3 class="fw-bold mb-1">1,245 Orders</h3>
                                        <p class="text-success mb-3 fw-semibold">
                                            +12% <i class="mdi mdi-arrow-up"></i>
                                            <span class="text-muted">from last month</span>
                                        </p>

                                        <ul class="list-unstyled mt-3 mb-4 small">
                                            <li class="d-flex justify-content-between align-items-center mb-2">
                                                <span><i class="bx bx-check-circle text-success me-2"></i>House Keeping
                                                </span>
                                                <span class="fw-semibold">320</span>
                                            </li>
                                            <li class="d-flex justify-content-between align-items-center mb-2">
                                                <span><i class="bx bx-check-circle text-warning me-2"></i>Kitchen
                                                    Care</span>
                                                <span class="fw-semibold">270</span>
                                            </li>
                                            <li class="d-flex justify-content-between align-items-center mb-2">
                                                <span><i class="bx bx-check-circle text-info me-2"></i>Fabric Care</span>
                                                <span class="fw-semibold">215</span>
                                            </li>
                                            <li class="d-flex justify-content-between align-items-center mb-2">
                                                <span><i class="bx bx-check-circle text-primary me-2"></i>Paper
                                                    Products</span>
                                                <span class="fw-semibold">180</span>
                                            </li>
                                            <li class="d-flex justify-content-between align-items-center">
                                                <span><i class="bx bx-check-circle text-danger me-2"></i>Mops & Tools</span>
                                                <span class="fw-semibold">150</span>
                                            </li>
                                        </ul>

                                        <div class="mt-2">
                                            <a href="javascript:void(0);" class="btn btn-primary btn-sm">
                                                View Full Report <i class="mdi mdi-arrow-right ms-1"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="col-sm-6 d-flex justify-content-center align-items-center">
                                        <div id="radialBar-chart" class="apex-charts"
                                            style="max-width: 240px; width: 100%;"></div>
                                    </div>
                                </div>
                                <p class="text-muted mb-0 mt-3 small">
                                    Visualize which category drives the most sales each month and their growth rate.
                                </p>
                            </div>
                        </div>

                        <!-- ApexCharts Radial Chart -->
                        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                const options = {
                                    chart: {
                                        height: 260,
                                        type: "radialBar",
                                        sparkline: {
                                            enabled: true
                                        },
                                    },
                                    series: [78],
                                    colors: ["#556ee6"],
                                    plotOptions: {
                                        radialBar: {
                                            startAngle: -135,
                                            endAngle: 135,
                                            hollow: {
                                                margin: 0,
                                                size: "70%",
                                                background: "#f8f9fa",
                                                dropShadow: {
                                                    enabled: true,
                                                    top: 2,
                                                    left: 0,
                                                    blur: 4,
                                                    opacity: 0.15,
                                                },
                                            },
                                            track: {
                                                background: "#e9ecef",
                                                strokeWidth: "97%",
                                            },
                                            dataLabels: {
                                                show: true,
                                                name: {
                                                    offsetY: 70,
                                                    color: "#999",
                                                    fontSize: "14px",
                                                    fontWeight: 500,
                                                    text: "Top Category",
                                                },
                                                value: {
                                                    formatter: function() {
                                                        return "House Keeping";
                                                    },
                                                    color: "#495057",
                                                    fontSize: "18px",
                                                    show: true,
                                                    offsetY: -5,
                                                    fontWeight: 700,
                                                },
                                            },
                                        },
                                    },
                                    stroke: {
                                        lineCap: "round"
                                    },
                                    labels: ["Performance"],
                                };

                                const chart = new ApexCharts(document.querySelector("#radialBar-chart"), options);
                                chart.render();
                            });
                        </script>

                        <style>
                            .card-body {
                                position: relative;
                            }

                            #radialBar-chart {
                                margin: auto;
                            }

                            .avatar-md {
                                width: 75px;
                                height: 75px;
                            }

                            .bg-primary-subtle {
                                background: linear-gradient(135deg, rgba(85, 110, 230, 0.1), rgba(85, 110, 230, 0.2));
                            }
                        </style>
                    </div>


                    <div class="col-xl-8">
                        <div class="row">
                            <!-- Total Products -->
                            <div class="col-md-4">
                                <div class="card mini-stats-wid">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="flex-grow-1">
                                                <p class="text-muted fw-medium">Total Products</p>
                                                {{-- <h4 class="mb-0">{{ $totalProducts }}</h4> --}}
                                            </div>

                                            <div class="flex-shrink-0 align-self-center">
                                                <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                                    <span class="avatar-title">
                                                        <i class="bx bx-copy-alt font-size-24"></i>
                                                    </span>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Total Customers -->
                            <div class="col-md-4">
                                <div class="card mini-stats-wid">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="flex-grow-1">
                                                <p class="text-muted fw-medium">Total Customers</p>
                                                {{-- <h4 class="mb-0">{{ $totalCustomers }}</h4> --}}
                                            </div>

                                            <div class="flex-shrink-0 align-self-center">
                                                <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                                                    <span class="avatar-title rounded-circle bg-primary">
                                                        <i class="bx bx-user font-size-24"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Total Enquiries -->
                            <div class="col-md-4">
                                <div class="card mini-stats-wid">
                                    <div class="card-body">
                                        <div class="d-flex">
                                            <div class="flex-grow-1">
                                                <p class="text-muted fw-medium">Total Enquiries</p>
                                                {{-- <h4 class="mb-0">{{ $totalEnquiries }}</h4> --}}
                                            </div>

                                            <div class="flex-shrink-0 align-self-center">
                                                <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                                                    <span class="avatar-title rounded-circle bg-primary">
                                                        <i class="bx bx-message-square-dots font-size-24"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- end row -->

                        <!-- ApexCharts CDN -->
                        <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

                        <!-- Chart Section -->
                        <div class="card">
                            <div class="card-body">
                                <div class="d-sm-flex flex-wrap align-items-center justify-content-between">
                                    <h4 class="card-title mb-4">Orders by Product Category</h4>
                                    <div class="d-flex gap-2 align-items-center">
                                        <!-- Tabs -->
                                        <ul class="nav nav-pills mb-0" id="filter-tabs">
                                            <li class="nav-item">
                                                <a class="nav-link" data-type="week" href="#">Week</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-type="month" href="#">Month</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link active" data-type="year" href="#">Year</a>
                                            </li>
                                        </ul>

                                        <!-- Month Dropdown -->
                                        <select id="month-select" class="form-select form-select-sm d-none ms-2">
                                            <option value="Jan">January</option>
                                            <option value="Feb">February</option>
                                            <option value="Mar">March</option>
                                            <option value="Apr">April</option>
                                            <option value="May">May</option>
                                            <option value="Jun">June</option>
                                            <option value="Jul">July</option>
                                            <option value="Aug">August</option>
                                            <option value="Sep">September</option>
                                            <option value="Oct">October</option>
                                            <option value="Nov">November</option>
                                            <option value="Dec">December</option>
                                        </select>

                                        <!-- Year Dropdown -->
                                        <select id="year-select" class="form-select form-select-sm d-none ms-2">
                                            <option value="2023">2023</option>
                                            <option value="2024" selected>2024</option>
                                            <option value="2025">2025</option>
                                        </select>
                                    </div>
                                </div>

                                <!-- Chart -->
                                <div id="orders-by-category-chart" class="apex-charts mt-4"></div>
                            </div>
                        </div>

                        <!-- Script -->
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                const chartEl = document.querySelector("#orders-by-category-chart");
                                const monthSelect = document.querySelector("#month-select");
                                const yearSelect = document.querySelector("#year-select");

                                // Updated Data Sets for Cleaning Categories
                                const dataSets = {
                                    week: {
                                        categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                                        series: [{
                                                name: 'House Keeping Products',
                                                data: [12, 14, 15, 17, 19, 20, 22]
                                            },
                                            {
                                                name: 'Kitchen Care',
                                                data: [8, 10, 9, 12, 14, 16, 18]
                                            },
                                            {
                                                name: 'Fabric Care',
                                                data: [10, 12, 11, 13, 15, 16, 17]
                                            },
                                            {
                                                name: 'Paper Product',
                                                data: [6, 7, 6, 8, 9, 10, 11]
                                            },
                                            {
                                                name: 'Mops & Tools',
                                                data: [4, 5, 6, 7, 8, 8, 9]
                                            },
                                            {
                                                name: 'Others',
                                                data: [3, 4, 4, 5, 5, 6, 7]
                                            },
                                        ]
                                    },
                                    month: {
                                        Jan: {
                                            categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
                                            series: [{
                                                    name: 'House Keeping Products',
                                                    data: [40, 45, 42, 50]
                                                },
                                                {
                                                    name: 'Kitchen Care',
                                                    data: [25, 30, 28, 32]
                                                },
                                                {
                                                    name: 'Fabric Care',
                                                    data: [20, 22, 21, 24]
                                                },
                                                {
                                                    name: 'Paper Product',
                                                    data: [12, 14, 13, 15]
                                                },
                                                {
                                                    name: 'Mops & Tools',
                                                    data: [10, 11, 12, 13]
                                                },
                                                {
                                                    name: 'Others',
                                                    data: [8, 9, 10, 11]
                                                },
                                            ]
                                        },
                                        Feb: {
                                            categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
                                            series: [{
                                                    name: 'House Keeping Products',
                                                    data: [42, 46, 48, 52]
                                                },
                                                {
                                                    name: 'Kitchen Care',
                                                    data: [28, 32, 30, 35]
                                                },
                                                {
                                                    name: 'Fabric Care',
                                                    data: [22, 25, 24, 27]
                                                },
                                                {
                                                    name: 'Paper Product',
                                                    data: [14, 15, 16, 17]
                                                },
                                                {
                                                    name: 'Mops & Tools',
                                                    data: [11, 12, 13, 14]
                                                },
                                                {
                                                    name: 'Others',
                                                    data: [9, 10, 10, 12]
                                                },
                                            ]
                                        }
                                    },
                                    year: {
                                        2023: {
                                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
                                                'Nov', 'Dec'
                                            ],
                                            series: [{
                                                    name: 'House Keeping Products',
                                                    data: [45, 48, 50, 55, 57, 60, 62, 65, 70, 72, 74, 78]
                                                },
                                                {
                                                    name: 'Kitchen Care',
                                                    data: [28, 30, 32, 35, 36, 38, 40, 42, 44, 45, 47, 50]
                                                },
                                                {
                                                    name: 'Fabric Care',
                                                    data: [20, 22, 24, 25, 27, 29, 30, 32, 34, 35, 37, 38]
                                                },
                                                {
                                                    name: 'Paper Product',
                                                    data: [10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
                                                },
                                                {
                                                    name: 'Mops & Tools',
                                                    data: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
                                                },
                                                {
                                                    name: 'Others',
                                                    data: [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
                                                },
                                            ]
                                        },
                                        2024: {
                                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
                                                'Nov', 'Dec'
                                            ],
                                            series: [{
                                                    name: 'House Keeping Products',
                                                    data: [55, 58, 60, 63, 65, 68, 70, 74, 76, 80, 85, 90]
                                                },
                                                {
                                                    name: 'Kitchen Care',
                                                    data: [35, 38, 40, 42, 45, 48, 50, 52, 54, 56, 58, 60]
                                                },
                                                {
                                                    name: 'Fabric Care',
                                                    data: [25, 27, 28, 30, 32, 33, 35, 36, 38, 40, 41, 43]
                                                },
                                                {
                                                    name: 'Paper Product',
                                                    data: [14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]
                                                },
                                                {
                                                    name: 'Mops & Tools',
                                                    data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
                                                },
                                                {
                                                    name: 'Others',
                                                    data: [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
                                                },
                                            ]
                                        }
                                    }
                                };

                                let currentChart;

                                function renderChart({
                                    categories,
                                    series
                                }) {
                                    if (currentChart) currentChart.destroy();
                                    const options = {
                                        chart: {
                                            type: 'bar',
                                            height: 350,
                                            stacked: true,
                                            toolbar: {
                                                show: false
                                            }
                                        },
                                        plotOptions: {
                                            bar: {
                                                horizontal: false,
                                                columnWidth: '40%',
                                                endingShape: 'rounded'
                                            }
                                        },
                                        dataLabels: {
                                            enabled: false
                                        },
                                        series,
                                        xaxis: {
                                            categories
                                        },
                                        colors: ['#556ee6', '#f1b44c', '#34c38f', '#50a5f1', '#f46a6a', '#6f42c1'],
                                        legend: {
                                            position: 'bottom'
                                        },
                                        fill: {
                                            opacity: 1
                                        },
                                        grid: {
                                            borderColor: '#f1f1f1'
                                        }
                                    };
                                    currentChart = new ApexCharts(chartEl, options);
                                    currentChart.render();
                                }

                                // Initial render (Year - 2024)
                                renderChart(dataSets.year["2024"]);

                                // Tab click handler
                                document.querySelectorAll("#filter-tabs .nav-link").forEach(link => {
                                    link.addEventListener("click", function(e) {
                                        e.preventDefault();
                                        document.querySelectorAll("#filter-tabs .nav-link").forEach(l => l.classList
                                            .remove("active"));
                                        this.classList.add("active");

                                        const type = this.dataset.type;
                                        monthSelect.classList.add("d-none");
                                        yearSelect.classList.add("d-none");

                                        if (type === "week") {
                                            renderChart(dataSets.week);
                                        } else if (type === "month") {
                                            monthSelect.classList.remove("d-none");
                                            renderChart(dataSets.month["Jan"]);
                                        } else if (type === "year") {
                                            yearSelect.classList.remove("d-none");
                                            renderChart(dataSets.year["2024"]);
                                        }
                                    });
                                });

                                // Month change
                                monthSelect.addEventListener("change", function() {
                                    const selected = this.value;
                                    if (dataSets.month[selected]) renderChart(dataSets.month[selected]);
                                });

                                // Year change
                                yearSelect.addEventListener("change", function() {
                                    const selected = this.value;
                                    if (dataSets.year[selected]) renderChart(dataSets.year[selected]);
                                });
                            });
                        </script>



                    </div>
                </div>
                <!-- end row -->
            </div>
            <!-- container-fluid -->
        </div>
        <!-- End Page-content -->
    @endsection