@extends('admin.layout')
@section('content')
<style>
    /* ===== Header ===== */
    .dashboard-header {
        margin-bottom: 8px;
    }

    .dashboard-header h4 {
        font-size: 18px;
        line-height: 22px;
    }

    /* ===== Button ===== */
    .btn-register {
        padding: 6px 14px;
        font-size: 13px;
    }

    /* ===== News Bar ===== */
    .news-bar {
        padding: 4px 10px !important;
        margin-bottom: 10px !important;
    }

    marquee {
        font-size: 13px;
        line-height: 18px;
    }


    .legend {
        margin-top: 10px;
        font-size: 12px;
    }

    /* ===== Carousel Image ===== */
    .login-img {
        height: 318px !important;
    }

    /* ===== Cards ===== */
    .card {
        border-radius: 10px;
    }

    /* ===== Info Cards ===== */
    .info-card {
        padding: 10px !important;
    }

    .info-card h6 {
        font-size: 13px;
        line-height: 18px;
    }

    .info-card h3 {
        font-size: 15px;
        line-height: 20px;
    }

    /* ===== Stats Spacing ===== */
    .mb-4 {
        margin-bottom: 10px !important;
    }

    .mb-3 {
        margin-bottom: 8px !important;
    }

    /* ===== Doughnut Chart ===== */
    .chart-container {
        max-width: 130px;
    }

    canvas {
        max-height: 140px;
    }

    /* ===== Right Card ===== */
    .card.p-3 {
        padding: 10px !important;
    }

    /* ===== Legend Items ===== */
    .legend-item {
        font-size: 12px;
    }

    /* ===== Responsive Tightening ===== */
    @media (max-width: 992px) {


        .login-img {
            height: 316px !important;
        }
    }

    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .dashboard-header h4 {
        margin: 0;
        font-weight: 500;
        font-style: Medium;
        font-size: 24px;
        leading-trim: NONE;
        line-height: 38px;
        letter-spacing: 0px;
        vertical-align: middle;
    }

    .btn-register {
        background: linear-gradient(to bottom, #1b97d3, #0E4E6D) !important;
        color: white;
        padding: 8px 18px;
        border-radius: 8px;
        font-weight: 500;
        border: none;
        transition: 0.3s;
    }

    .btn-register:hover {
        background: linear-gradient(to bottom, #1b97d3, #0E4E6D) !important;
        color: white;
    }

    .news-bar {
        border-radius: 8px;
        /* font-weight: 500; */
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        color: #ffffff !important;
    }

    marquee {
        font-weight: bold;
        font-style: Medium;
        /* font-size: 24px; */
        leading-trim: NONE;
        line-height: 38px;
        letter-spacing: 0px;
        vertical-align: middle;
        color: #ffffffe5;
    }



    .info-card {
        transition: all 0.3s ease;
    }

    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    }

    /* .info-card h6 {
                            font-weight: 500;
                            font-style: Medium;
                            font-size: 24px;
                            leading-trim: NONE;
                            line-height: 38px;
                            letter-spacing: 0px;
                            vertical-align: middle;
                        }

                        .info-card h3 {
                            font-weight: 600;
                            margin: 0px;
                            font-weight: 500;
                            font-style: Medium;
                            font-size: 24px;
                            leading-trim: NONE;
                            line-height: 38px;
                            letter-spacing: 0px;
                            vertical-align: middle;
                        } */

    /* Carousel Dots */
    .carousel-indicators [data-bs-target] {
        background-color: #2C7BE5;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }


    marquee span {
        color: #ffffff;
    }

    .chart-container {
        position: relative;
        width: 100%;
        max-width: 180px;
        margin: 0 auto;
    }

    .img-fluid.ad-img {
        height: 137px !important;
        width: 100% !important;
    }

    .card.carousel-card.p-2.mb-3 {
        height: auto !important;
    }

    .premium-card {
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        border-radius: 14px;
        border: 1px solid rgba(212, 175, 55, 0.2);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
        transition: all 0.25s ease;
        color: #fff;
    }

    /* Hover */
    .premium-card:hover {
        transform: translateY(-4px);
        border-color: #D4AF37;
    }

    /* Icon */
    .premium-icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(212, 175, 55, 0.15);
        color: #D4AF37;
        font-size: 18px;
    }

    /* Labels */
    .label {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.9);
    }

    /* Values */
    .value {
        font-size: 15px;
        font-weight: 600;
        color: #D4AF37;
    }

    /* Gold text */
    .text-gold {
        color: #D4AF37;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    @media (max-width: 980px) {
        .grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 520px) {
        .grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 768px) {
        .card2 {
            height: 263px !important;
            border-radius: 10px !important;
            background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
            padding: 0 !important;
            margin-bottom: 10px;
            margin-top: 12px;
        }

        .img-fluid.ad-img {
            height: 246px !important;
            width: 100% !important;
        }
    }

    .card2 {
        height: 336px !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64) !important;
        padding: 0 !important;
        margin-bottom: 10px;
        margin-top: 12px;
    }


    .fab-main {
        background: var(--color-primary);
        color: var(--color-dark);
    }

    .fab-item {
        background: var(--color-secondary);
    }

    .fab-item:hover {
        background: var(--color-accent);
    }

    .fab-container {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 220px;
        height: 220px;
        z-index: 99999;
    }

    /* Main FAB */
    .fab-main {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #de9642;
        color: #fff;
        border: none;
        font-size: 24px;
        cursor: pointer;
        z-index: 2;
        transition: 0.3s;
    }

    /* Hover effect */
    .fab-main:hover {
        background: #c67f2f;
        /* darker orange */
    }

    /* Child FAB */
    .fab-item {
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #2ba463;
        color: white;
        border: none;
        font-size: 18px;
        opacity: 0;
        transform: scale(0);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    /* Hover effect */
    .fab-item:hover {
        background: #218a52;
        /* darker green */
    }

    .fab-item::after {
        background: #2ba463;
    }

    .fab-item::before {
        border-color: transparent transparent transparent #2ba463;
    }

    /* Tooltip */
    .fab-item::after {
        content: attr(data-tooltip);
        position: absolute;
        right: 65px;
        top: 50%;
        transform: translateY(-50%);
        background: #333;
        color: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: 0.2s ease;
    }

    /* Tooltip arrow */
    .fab-item::before {
        content: "";
        position: absolute;
        right: 55px;
        top: 50%;
        transform: translateY(-50%);
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent #333;
        opacity: 0;
        transition: 0.2s ease;
    }

    /* Show on hover */
    .fab-item:hover::after,
    .fab-item:hover::before {
        opacity: 1;
    }

    /* Active State */
    .fab-container.active .fab-1 {
        transform: translate(-80px, -20px) scale(1);
        opacity: 1;
    }

    .fab-container.active .fab-2 {
        transform: translate(-60px, -80px) scale(1);
        opacity: 1;
    }

    .fab-container.active .fab-3 {
        transform: translate(-10px, -120px) scale(1);
        opacity: 1;
    }

    .fab-container.active .fab-4 {
        transform: translate(40px, -80px) scale(1);
        opacity: 1;
    }

    .layout-overlay {
        pointer-events: none !important;
    }
</style>
<!-- <div class="dashboard-header mb-3">
                <h4>
                    @auth('admin')
                        Welcome,
                        <span class="text-primary">{{ auth('admin')->user()->name }}</span>
                        <span class="text-primary">{{ auth('admin')->user()->role }}</span>
                    @else
                        Welcome, Guest
                    @endauth
                </h4>

                <div>
                    <input type="hidden" id="refLink" value="{{ $referralLink }}">
                    <button type="button" onclick="copyLink()" class="btn btn-primary shadow-sm">
                        <i class="ti tabler-link me-1"></i> Copy
                    </button>
                </div>
            </div> -->
<!-- Welcome + Button -->
<div class="dashboard-header mb-2">
    <h4>
        @auth('admin')
        Welcome,
        <span class="text-primary">{{ auth('admin')->user()->name }}</span>
        <span class="text-primary">{{ auth('admin')->user()->role }}</span>
        @else
        Welcome, Guest
        @endauth
    </h4>

    <input type="text" id="referralLink" value="{{ $referralLink }}" style="position:absolute; left:-9999px;">

    <a href="#" class="btn btn-primary" id="copyReferral">
        <i class="menu-icon icon-base ti tabler-link"></i>
        <span class="btn-text d-md-flex d-none">Ref. Link</span>
    </a>
</div>
<!-- News Bar -->
<div class="news-bar p-2">
    <marquee id="newsMarquee">
        {{ $news->description ?? 'No latest news' }}
    </marquee>
</div>



<div class="row">
    <div class="col-lg-9 mb-3">
        <section class="grid mt-3" id="grid">

            <div class="premium-card p-5">
                <div class="d-flex align-items-center gap-3">
                    <div class="flex-shrink-0">
                        <span class="premium-icon">
                            <i class="ti tabler-user"></i>
                        </span>
                    </div>
                    <div>
                        <h5 class="m-0 fw-semibold text-gold">{{ auth()->guard('admin')->user()->user_id }}</h5>
                        <h6 class="text-white mb-0">{{ auth()->guard('admin')->user()->name }}</h6>

                    </div>
                </div>
                <hr>
                <div class="d-flex justify-content-between mt-1">
                    <div>
                        <h6 class="m-0 text-white small">Email</h6>
                        <small class="m-0 value text-center small">{{ auth()->guard('admin')->user()->email }}</small>
                    </div>
                    <div>
                        <h6 class="m-0 text-white small">Role</h6>
                        <h6 class="m-0 value text-center small">Admin
                            </small>
                    </div>
                </div>
            </div>

            <a href="#" class="text-decoration-none">
                <div class="premium-card p-5 h-100">
                    <div class="d-flex align-items-center">
                        <span class="premium-icon me-3">
                            <i class="ti tabler-coins"></i>
                        </span>
                        <div>
                            <div class="label">Total Users</div>
                            <!-- <div class="value">
                                                                  ₹
                                                              </div> -->
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mt-1">
                        <div>
                            <h6 class="m-0 text-white small">Total user</h6>
                            <h6 class="m-0 value text-center small">{{ $totalUsers }}

                            </h6>
                        </div>
                        <div>
                            <h6 class="m-0 text-white small">Active</h6>
                            <h6 class="m-0 value text-center small">
                                {{ $activeUsers }}
                            </h6>
                        </div>
                    </div>
                </div>
            </a>
            <div class="premium-card p-5">
                <div class="d-flex align-items-center">
                    <span class="premium-icon me-3">
                        <i class="ti tabler-brand-unity"></i>
                    </span>
                    <div>
                        <div class="label">Total Advance</div>
                    </div>
                </div>
                <hr>

                <div class="d-flex justify-content-between mt-1">
                    <div>
                        <h6 class="m-0 text-white small">Total Advance</h6>
                        <h6 class="m-0 value text-center">{{ $totalAdvance }}</h6>
                    </div>
                    <div class="d-flex align-items-center">
                        <a href="{{ route('admin.purchase_advances_history') }}" class="text-warning text-decoration-underline">View</a>
                    </div>
                </div>
            </div>

            <div class="premium-card p-5">
                <div class="d-flex align-items-center">
                    <span class="premium-icon me-3">
                        <i class="ti tabler-coin"></i>
                    </span>
                    <div>
                        <div class="label">Purchase</div>
                    </div>
                </div>
                <hr>
                <div class="d-flex justify-content-between mt-1">

                    <div>
                        <a href="#">
                            <h6 class="m-0 text-white small">Total Purchase</h6>
                            <h6 class="m-0 value text-center"> {{ $totalPurchase }}</h6>
                        </a>
                    </div>
                    <div class="d-flex align-items-center">
                        <a href="{{ route('admin.purchase_list') }}" class="text-warning text-decoration-underline">View</a>
                    </div>
                </div>
            </div>




            <!-- DIRECT TEAM -->

            <div class="premium-card p-5">
                <div class="d-flex align-items-center">
                    <span class="premium-icon me-3">
                        <i class="ti tabler-users-group"></i>
                    </span>
                    <div>
                        <div class="label">Masters</div>
                        <!-- <div class="value"></div> -->
                    </div>
                </div>
                <hr>
                <div class="d-flex justify-content-between mt-1">
                    <div>
                        <h6 class="m-0 text-white small">Profit Master</h6>
                        <h6 class="m-0 value text-center">0</h6>
                    </div>
                    <div>
                        <h6 class="m-0 text-white small"> Level Master</h6>
                        <h6 class="m-0 value text-center">0</h6>
                    </div>
                </div>
            </div>
            </a>

            <!-- LEVEL TEAM -->
            <div class="premium-card p-5">
                <div class="d-flex align-items-center">
                    <span class="premium-icon me-3">
                        <i class="ti tabler-users-group"></i>
                    </span>
                    <div>
                        <div class="label">Advance Payout</div>
                        <!-- <div class="value">13458</div> -->
                    </div>
                </div>
                <hr>
                <div class="d-flex justify-content-between mt-1">
                    <div>
                        <h6 class="m-0 text-white small">Profit Payout</h6>
                        <h6 class="m-0 value text-center">0</h6>
                    </div>
                    <div>
                        <h6 class="m-0 text-white small"> Level Payout</h6>
                        <h6 class="m-0 value text-center">0</h6>
                    </div>
                </div>
            </div>
            </a>

        </section>

    </div>
    <div class="col-lg-3">
        <div class="card2 p-0">
            <div class="referral-card p-2">
                <div id="goldCarousel" class="carousel slide" data-bs-ride="carousel">



                    <!-- Slides -->
                    <div class="carousel-inner rounded-3">
                        <div class="carousel-item active">
                            <img src="{{ asset('assets/login.png') }}" class="d-block w-100 carousel-img">
                            <style>
                                .carousel-img {
                                    width: 100%;
                                    height: 321px;
                                    object-fit: cover;
                                    border-radius: 10px;
                                }
                            </style>
                        </div>

                        <div class="carousel-item">
                            <img src="{{ asset('assets/pure.jpg') }}" class="d-block w-100 carousel-img">

                        </div>

                        <div class="carousel-item">
                            <img src="{{ asset('assets/gold.webp') }}" class="d-block w-100 carousel-img">

                        </div>
                    </div>


                    <!-- Controls -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#goldCarousel"
                        data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>

                    <button class="carousel-control-next" type="button" data-bs-target="#goldCarousel"
                        data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>

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

    </div>
    <!-- <div class="col-lg-9 col-sm-12 mb-3">


                <div id="statsWrapper">
                    <div class="row" id="statsContainer">
                        <div class="text-center p-4">Loading statistics...</div>
                    </div>
                </div>


            </div> -->


</div>
<div class="fab-container">
    <button class="fab-main" id="fabToggle">+</button>

    <a href="{{ route('admin.open_ticket') }}"> <button class="fab-item" data-tooltip="Support"><i
                class="ti tabler-headset"></i></button></a>
    <a href="#"> <button class="fab-item"
            data-tooltip="Purchase Advance"><i class="ti tabler-cash"></i></button></a>
    <a href="#"> <button class="fab-item"
            data-tooltip="Purchase Package"><i class="ti tabler-shopping-cart"></i></button></a>
    <a href="{{ route('admin.profile') }}"> <button class="fab-item" data-tooltip="Profile"><i
                class="ti tabler-user"></i></button></a>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {

        const fab = document.querySelector('.fab-container');
        const toggle = document.getElementById('fabToggle');
        const items = document.querySelectorAll('.fab-item');

        let isOpen = false;

        toggle.addEventListener('click', function(e) {
            e.stopPropagation();
            isOpen = !isOpen;
            fab.classList.toggle('active');

            const radius = 120; // distance from main button
            const angleStep = 90 / (items.length - 1); // spread in 90° arc

            items.forEach((item, index) => {
                if (isOpen) {
                    const angle = (angleStep * index) * (Math.PI / 180);
                    const x = Math.cos(angle) * radius;
                    const y = Math.sin(angle) * radius;

                    item.style.transform = `translate(-${x}px, -${y}px) scale(1)`;
                    item.style.opacity = 1;
                } else {
                    item.style.transform = `translate(0,0) scale(0)`;
                    item.style.opacity = 0;
                }
            });
        });

        document.addEventListener('click', function(e) {
            if (!fab.contains(e.target)) {
                isOpen = false;
                fab.classList.remove('active');

                items.forEach(item => {
                    item.style.transform = `translate(0,0) scale(0)`;
                    item.style.opacity = 0;
                });
            }
        });

    });
</script>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        fetch("{{ route('user.dashboard.data') }}")
            .then(res => res.json())
            .then(data => {
                if (!data.status) return;
                /* ================= NEWS ================= */
                let newsText = '';
                if (data.news.length > 0) {
                    data.news.forEach(news => {
                        newsText += news.description + " \u00A0\u00A0\u00A0 ";
                    });
                } else {
                    newsText = "No latest news available today.";
                }
                const newsEl = document.getElementById('newsMarquee');
                if (newsEl) newsEl.innerHTML = newsText;
                /* ================= POSTERS ================= */
                const indicatorsEl = document.getElementById('carouselIndicators');
                const innerEl = document.getElementById('carouselInner');
                if (data.posters.length > 0) {
                    let indicators = '';
                    let items = '';
                    data.posters.forEach((poster, index) => {
                        let imageUrl = "{{ asset('storage') }}/" + poster.posters_image;
                        indicators += `
                                                    <button type="button"
                                                        data-bs-target="#dashboardCarousel"
                                                        data-bs-slide-to="${index}"
                                                        class="${index === 0 ? 'active' : ''}">
                                                    </button>
                                                `;
                        items += `
                                                    <div class="carousel-item ${index === 0 ? 'active' : ''}">
                                                        <img src="${imageUrl}"
                                                             class="d-block w-100"
                                                             style="height:350px; object-fit:cover;">
                                                    </div>
                                                `;
                    });
                    if (indicatorsEl) indicatorsEl.innerHTML = indicators;
                    if (innerEl) innerEl.innerHTML = items;
                } else {
                    if (innerEl) {
                        innerEl.innerHTML = `
                                                    <div class="carousel-item active">
                                                        <div class="text-center p-5">No banners available</div>
                                                    </div>
                                                `;
                    }
                }
                /* ================= USER STATS ================= */
                const statsEl = document.getElementById('statsContainer');
                if (statsEl) {
                    statsEl.innerHTML = `
                                             <div class="col-md-3 mb-4">
                    <div class="info-card card p-3 h-100"
                         onclick="window.location.href='{{ route('user.purchase_advance_history') }}'"
                         style="cursor:pointer;">

                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="info-title">Total Investment</div>
                                <div class="info-value">
                                    ₹ ${Number(data.stats.investment).toLocaleString()}
                                </div>
                            </div>
                            <div class="icon-box bg-label-primary text-primary">
                                <i class="ti tabler-wallet"></i>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-md-3 mb-4">
                    <div class="info-card card p-3 h-100"
                         onclick="window.location.href='{{ route('user.my_team') }}'"
                         style="cursor:pointer;">

                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="info-title">Level Team</div>
                                <div class="info-value">
                                    ${data.stats.level_team}
                                </div>
                            </div>
                            <div class="icon-box bg-label-success text-success">
                                <i class="ti tabler-network"></i>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-md-3 mb-4">
                    <div class="info-card card p-3 h-100"
                         onclick="window.location.href='{{ route('user.my_direct') }}'"
                         style="cursor:pointer;">

                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="info-title">Direct Team</div>
                                <div class="info-value">
                                    ${data.stats.direct_team}
                                </div>
                            </div>
                            <div class="icon-box bg-label-warning text-warning">
                                <i class="ti tabler-users"></i>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-md-3 mb-4">
                    <div class="info-card card p-3 h-100"
                         onclick="window.location.href='{{ route('user.level_income') }}'"
                         style="cursor:pointer;">

                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="info-title">Level Income</div>
                                <div class="info-value">
                                    ₹ ${Number(data.stats.level_income).toLocaleString()}
                                </div>
                            </div>
                            <div class="icon-box bg-label-danger text-danger">
                                <i class="ti tabler-cash"></i>
                            </div>
                        </div>
                    </div>
                </div>
                                            `;
                }
            })
            .catch(error => {
                console.error("Dashboard Load Error:", error);
            });
    });
</script>

<script>
    document.getElementById("copyReferral").addEventListener("click", function(e) {
        e.preventDefault();

        var copyText = document.getElementById("referralLink");
        copyText.select();
        copyText.setSelectionRange(0, 99999);

        document.execCommand("copy");

        // ✅ Change button text
        let btnText = this.querySelector(".btn-text");
        let icon = this.querySelector("i");

        btnText.innerText = "Copied";
        icon.className = "ti tabler-check"; // change icon

        // ✅ Optional: revert after 2 sec
        setTimeout(() => {
            btnText.innerText = "Ref. Link";
            icon.className = "menu-icon icon-base ti tabler-link";
        }, 2000);
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {

        // 3. USER DOUGHNUT CHART
        const userCtx = document.getElementById('userChart');
        if (userCtx) {
            new Chart(userCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Success', 'Pending', 'Failed'],
                    datasets: [{
                        data: [200, 100, 50],
                        backgroundColor: ['#34C759', '#FFA500', '#FF4C4C'],
                        borderWidth: 0,
                        borderRadius: 10,
                        hoverOffset: 5
                    }]
                },
                options: {
                    cutout: '80%',
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        }


    });
</script>


<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>






<script>
    const chartEl = document.querySelector("#chart");

    const datasets = {
        daily: {
            categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            series: [{
                    name: 'Level',
                    data: [30, 45, 40, 60, 55, 70, 65]
                },
                {
                    name: 'Team Investment',
                    data: [20, 30, 25, 35, 40, 45, 50]
                },
                {
                    name: 'Earnings',
                    data: [25, 50, 45, 55, 60, 75, 70]
                }
            ]
        },
        weekly: {
            categories: ['W1', 'W2', 'W3', 'W4'],
            series: [{
                    name: 'Level',
                    data: [90, 120, 100, 130]
                },
                {
                    name: 'Team Investment',
                    data: [60, 85, 75, 95]
                },
                {
                    name: 'Earnings',
                    data: [80, 140, 110, 150]
                }
            ]
        },
        annual: {
            categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
            series: [{
                    name: 'Level',
                    data: [85, 115, 70, 100, 145, 115, 138, 122, 120, 95, 75, 135]
                },
                {
                    name: 'Team Investment',
                    data: [0, 55, 45, 90, 95, 60, 75, 90, 102, 72, 120, 170]
                },
                {
                    name: 'Earnings',
                    data: [35, 105, 50, 80, 120, 145, 90, 120, 85, 175, 160, 48]
                }
            ]
        }
    };

    function getOptions(data) {
        return {
            chart: {
                type: 'area',
                height: '100%',
                toolbar: {
                    show: false
                },
                zoom: {
                    enabled: false
                },
                foreColor: getComputedStyle(document.documentElement)
                    .getPropertyValue('--text')
            },
            series: data.series,
            colors: ['#ff8c2b', '#007bff', '#22c55e'],
            stroke: {
                curve: 'smooth',
                width: 3
            },
            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.35,
                    opacityTo: 0
                }
            },
            dataLabels: {
                enabled: false
            },
            xaxis: {
                categories: data.categories
            },
            yaxis: {
                min: 0,
                max: 200,
                tickAmount: 4
            },
            grid: {
                strokeDashArray: 4
            },
            legend: {
                show: false
            }
        };
    }

    let chart = new ApexCharts(chartEl, getOptions(datasets.annual));
    chart.render();

    document.querySelectorAll(".tab").forEach(tab => {
        tab.addEventListener("click", () => {
            document.querySelector(".tab.active").classList.remove("active");
            tab.classList.add("active");
            chart.updateOptions(getOptions(datasets[tab.dataset.type]));
        });
    });

    /* =====================
       THEME TOGGLE LOGIC
    ====================== */

    const html = document.documentElement;
    const toggle = document.getElementById("themeToggle");
    const icon = document.getElementById("themeIcon");

    toggle.addEventListener("click", () => {
        const isDark = html.getAttribute("data-bs-theme") === "dark";
        html.setAttribute("data-bs-theme", isDark ? "light" : "dark");
        icon.className = isDark ? "ti ti-sun" : "ti ti-moon";

        chart.updateOptions(getOptions(
            datasets[document.querySelector(".tab.active").dataset.type]
        ));
    });
</script>

@endsection