@extends('User.layout')

<style>
    .btn-vip {
        background: #1c5a64 !important;
        color: #ffd700 !important;
        font-weight: 600;
        border: none;
        transition: 0.3s;
    }

    .btn-og {
        background-color: #121212 !important;
        color: #ffd700 !important;
    }


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

    .slider {
        /* border-radius: 15px; */
        overflow: hidden;
    }

    .slider-img {
        height: 200px;
        object-fit: cover;
    }

    /* Optional: smooth shadow */
    .slider {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .marquee-card {
        background: linear-gradient(to bottom, #0A1F44, #0A1F44) !important;
        color: #FFD700 !important;
        font-weight: bold !important;
    }

    .stat-card {
        position: relative;
    }

    .stat-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        background: linear-gradient(to bottom, #0A1F44, #0A1F44);
    }

    .icon-box {
        width: 55px;
        height: 55px;
        background: #ffe5e5;
    }

    .marquee-container {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        background: #f8f9fa;
        padding: 8px 0;
    }

    .marquee-text {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 10s linear infinite;
        font-weight: 500;
    }

    @keyframes marquee {
        0% {
            transform: translateX(0%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .gold-card {
        border-radius: 16px;
        background: linear-gradient(135deg, #fff8e1, #fff);
        border-left: 5px solid #c9a227;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }

    .gold-card h5 {
        font-weight: 600;
        color: #c9a227;
    }

    .apexcharts-text tspan {
        fill: currentColor !important;
        font-weight: bold !important;
    }

    .apexcharts-legend-text {
        color: currentColor !important;
        font-weight: bold !important;

    }

    /* .card-img {
        height: 300px;
    } */

    .slider {
        border-radius: 15px;
        overflow: hidden;
    }

    .slider-img {
        height: 300px;
        object-fit: cover;
    }

    /* Optional: smooth shadow */
    .slider {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .contact-list {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        /* max-width: 70%;
        margin: 0 auto; */

    }

    .icon-link {
        display: flex;
        background: #fff;
        width: 60px;
        height: 60px;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        border-radius: 50%;
        margin: 15px 15px;

        border: 1px solid rgba(0, 0, 0, 0.09);
        transition: transform 0.5s;
    }

    .cont-icon {
        color: #777;
        font-size: 25px;
        transition: transform 0.5s;
    }

    .icon-link:hover {
        box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2),
            inset 4px 4px 6px -1px rgba(255, 255, 255, 0.7),
            -0.5px -0.5px 0px rgba(255, 255, 255, 1),
            0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
            0px 12px 10px -10px rgba(0, 0, 0, 0.05);
        box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
            -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
        transform: translateY(2px);
    }

    .icon-link:hover .cont-icon {
        transform: scale(0.95);
    }

    @media only screen and (max-width: 800px) {
        .contact-list {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 100%;
            margin: 0 auto;
        }
    }

    figure {

        overflow-x: auto;
        background: #f8f8f8;
        margin: 0;
        padding: 0 5px;

    }

    code {
        color: #008080;
        padding: 0 10px;
        outline: none;
    }

    .code01 {
        color: #00009e;
    }

    .code02 {
        color: #008080;
    }

    .code03 {
        color: #dd1144
    }

    figure::-webkit-scrollbar {
        height: 7px !important;
    }

    /* Track */
    figure::-webkit-scrollbar-track {
        background: #f8f8f8;
        border-radius: 0px;
    }

    /* Handle */
    figure::-webkit-scrollbar-thumb {
        background: #d5d7de;
        border-radius: 0px;
    }

    .code-box {
        display: flex;
        margin: 0 auto;
        justify-content: center;
        padding: 0 10px 100px 10px;
    }

    .copyBtn {
        background: #f8f8f8;
        border-left: 1px solid #d5d7de;
        border-top: 0;
        border-right: 1px solid #d5d7de;
        border-bottom: 0;
        outline: none;
        border-radius: 0;
        color: #333;
        cursor: pointer;
        position: relative;
        z-index: 2
    }

    .copyBtn:after {
        content: "Copied";
        position: absolute;
        top: 100%;
        left: -4px;
        padding: 10px 5px 5px 5px;
        background: #333;
        color: #d5d7de;
        border-radius: 5px;
        clip-path: polygon(50% 0, 75% 25%, 100% 25%, 100% 100%, 0 100%, 0 25%, 25% 25%);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-100%);
        z-index: 0;
        transition: transform 0.5s ease;

    }

    .copyBtn:focus:after {
        animation: topBottom 1s linear;
    }

    @keyframes topBottom {
        0% {
            transform: translateY(-70%);
            opacity: 0.3;
        }

        30% {
            transform: translateY(-50%);
            opacity: 0.9;
        }

        70% {
            transform: translateY(-70%);
            opacity: 0.7;
        }

        100% {
            transform: translateY(-80%);
            opacity: 0;
        }
    }


    /* button {
        appearance: none;
        border: 1px solid var(--stroke);
        background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
        color: var(--text);
        padding: 10px 14px;
        border-radius: 14px;
        cursor: pointer;
        backdrop-filter: blur(10px);
    } */

    /* button:hover {
        background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
    } */

    .toggle {
        display: flex;
        gap: 8px;
        align-items: center;
        color: var(--muted);
        border: 1px solid var(--stroke);
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .05);
    }

    .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;
        }
    }

    .card2 {
        height: 153px !important;
        border-radius: 10px !important;
        background-color: #0A1F44 !important;
        padding: 0 !important;
        margin-bottom: 10px;
        margin-top: 12px;
    }

    /* .card::before {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(500px 220px at 30% 10%, rgba(0, 220, 255, .18), transparent 55%),
            radial-gradient(520px 220px at 70% 80%, rgba(140, 90, 255, .16), transparent 60%);
        opacity: .7;
        pointer-events: none;
    } */

    .label {
        position: relative;
        color: var(--muted);
        font-weight: 700;
        letter-spacing: .3px;
        font-size: 12px;
    }

    .value {
        position: relative;
        margin-top: 10px;
        font-size: 34px;
        font-weight: 900;
        letter-spacing: .3px;
    }

    .meta {
        position: relative;
        margin-top: 8px;
        color: var(--muted);
        font-size: 12px;
    }

    .foot {
        margin-top: 10px;
        color: var(--muted);
        font-size: 12px;
    }

    /* subtle pulse class added by JS */
    .pulse {
        outline: 2px solid rgba(0, 220, 255, .35);
        box-shadow: 0 0 0 6px rgba(0, 220, 255, .10), var(--shadow);
    }

    /* Icon circle styling */
    .icon-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        color: #fff;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .spinning-coin {
        animation: coinSpin 2s linear infinite;
        transform-style: preserve-3d;
    }

    @keyframes coinSpin {
        0% {
            transform: rotateY(0deg);
        }

        100% {
            transform: rotateY(360deg);
        }
    }

    .premium-badge {
        font-size: 13px;
        color: #FFD700;
    }

    /* Base Card */
    .premium-card {
        background-color: #0A1F44;
        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.6);
    }

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

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

    .btn-submit {
        background-color: #ffd700 !important;
        color: white !important;
    }

    .gold-widget {
        /* width: 320px; */
        padding: 20px;
        border-radius: 15px;
        background: linear-gradient(145deg, #0f172a, #1e293b);
        color: #fff;
        font-family: 'Segoe UI', sans-serif;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        position: relative;
        overflow: hidden;
    }

    /* Gold shine overlay */
    .gold-widget::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(120deg, transparent, rgba(255, 215, 0, 0.2), transparent);
        transform: rotate(25deg);
        animation: shine 4s infinite;
    }

    @keyframes shine {
        0% {
            transform: translateX(-100%) rotate(25deg);
        }

        100% {
            transform: translateX(100%) rotate(25deg);
        }
    }

    .gold-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 15px;
    }

    .live-dot {
        width: 10px;
        height: 10px;
        background: #00ff9d;
        border-radius: 50%;
        animation: blink 1s infinite;
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.3;
        }
    }

    .live-text {
        font-size: 12px;
        color: #00ff9d;
        font-weight: bold;
    }

    .title {
        margin-left: auto;
        font-size: 14px;
        color: #d4af37;
    }

    .gold-body {
        text-align: center;
        margin: 15px 0;
    }

    .price {
        font-size: 36px;
        font-weight: 700;
        background: linear-gradient(90deg, #ffd700, #d4af37, #fff8dc);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .unit {
        font-size: 14px;
        color: #ccc;
    }

    .gold-footer {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
    }

    .change.up {
        color: #00ff9d;
    }

    .change.down {
        color: #ff4d4d;
    }

    .update-time {
        color: #aaa;
    }

    .gold-calc {
        margin-top: 15px;
        text-align: center;
    }

    .gold-calc label {
        font-size: 12px;
        color: #bbb;
    }

    .gold-calc input {
        width: 100%;
        margin-top: 5px;
        padding: 10px;
        border-radius: 10px;
        border: none;
        outline: none;
        text-align: center;
        font-weight: bold;
        background: #0f172a;
        color: #fff;
        border: 1px solid rgba(212, 175, 55, 0.3);
    }

    /* Breakdown */
    .gold-breakdown {
        margin-top: 15px;
        font-size: 13px;
    }

    .gold-breakdown div {
        display: flex;
        justify-content: space-between;
        margin-bottom: 6px;
        color: #ddd;
    }

    .gold-breakdown .total {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(212, 175, 55, 0.3);
        font-weight: bold;
        font-size: 15px;
        color: #ffd700;
    }

    /* CTA */
    .gold-action {
        margin-top: 15px;
    }

    .buy-btn {
        width: 100%;
        padding: 12px;
        border-radius: 12px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        background: linear-gradient(135deg, #d4af37, #ffd700, #fff8dc);
        color: #000;
        transition: 0.3s;
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
    }

    .buy-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
    }

    @media (max-width: 768px) {
        .card2 {
            height: 263px !important;
            border-radius: 10px !important;
            background-color: #0A1F44 !important;
            padding: 0 !important;
            margin-bottom: 10px;
            margin-top: 12px;
        }

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

    .gold-number-input {
        -moz-appearance: textfield;
        appearance: textfield;
    }

    /* Chrome / Edge / Safari */
    .gold-number-input::-webkit-inner-spin-button,
    .gold-number-input::-webkit-outer-spin-button {
        opacity: 1;
        cursor: pointer;

        /* gold-like tint */
        filter: invert(84%) sepia(93%) saturate(746%) hue-rotate(2deg) brightness(105%) contrast(101%);
    }

    /* Focus only this input */
    .gold-number-input:focus {
        outline: 2px solid #ffd700;
    }

    <style>#welcomeModal img {
        max-height: 200px;
        object-fit: cover;
        width: 100%;
    }

    .salary-btn {
        position: relative;
        overflow: visible;
    }

    .finger-icon {
        display: inline-block;
        margin-right: 6px;
        animation: fingerBounce 1.2s infinite;
    }

    @keyframes fingerBounce {

        0%,
        100% {
            transform: translateX(0);
        }

        50% {
            transform: translateX(4px);
        }
    }
</style>

@section('content')


    <!-- <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Welcome,&nbsp;<b class="text-danger">User Name</b></h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('gold_calculator') }}"><button class="btn btn-primary p-2"><i
                        class="ti tabler-calculator"></i></button> </a>
        </div>
    </div> -->

    <div class="d-flex flex-wrap justify-content-end gap-2 mb-3">


        <a href="{{ route('royalty_view') }}" class="btn btn-primary salary-btn" data-bs-toggle="tooltip"
            data-bs-placement="top" title="Salary" style="color: #FFD700 !important;
            font-weight: bold !important;">

            <span class="finger-icon">👉🏻</span>
            To&nbsp;Get&nbsp;Royalty
        </a>

        <a href="{{ route('user.salary_view') }}" class="btn btn-primary salary-btn" data-bs-toggle="tooltip"
            data-bs-placement="top" title="Salary" style="color: #FFD700 !important;
            font-weight: bold !important;">

            <span class="finger-icon">👉🏻</span>
            To&nbsp;Get&nbsp;Salary
        </a>
        <a href="{{ route('block_details') }}" class="btn btn-primary salary-btn" data-bs-toggle="tooltip"
            data-bs-placement="top" title="Salary" style="color: #FFD700 !important;
            font-weight: bold !important;">

            <span class="finger-icon">👉🏻</span>
            To&nbsp;Get&nbsp;profit
        </a>

        <!-- <a href="https://omigaipl.com/home_shoppy/user" class="btn btn-btn btn-info d-none d-sm-inline" target="_blank"
            data-bs-toggle="tooltip" data-bs-placement="top" title="Omiga IPL Login">

            <i class="ti tabler-login-2"></i>
            <span>&nbsp;&nbsp;Omiga IPL</span>
        </a>

        <a href="https://omigavip.com/user/login" class="btn btn-btn btn-vip d-none d-sm-inline" target="_blank" data-bs-toggle="tooltip"
            data-bs-placement="top" title="VIP Login" style="color: #FFD700 !important;
            font-weight: bold !important;">

            <i class="ti tabler-login-2"></i>
            <span>&nbsp;&nbsp;Omiga VIP</span>
        </a> -->




        <!-- <a href="https://og24plus.com/user/login" target="_blank" class="btn btn-btn btn-login" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="OG24 Login">
                                <i class="ti tabler-login-2"></i>&nbsp;&nbsp;OG24 Login
                            </a> -->


        <!-- <a href="https://og3plus.com/user/login" target="_blank" class="btn btn-btn btn-og" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="OG3 Login">

                                <i class="ti tabler-login-2"></i>&nbsp;&nbsp;OG3 Login
                            </a> -->

    </div>
    <div class="card marquee-container marquee-card p-3">
        <div class="marquee-text fw-bold"> @foreach($newsList as $news)
            {{ $news->description }}
        @endforeach
        </div>

    </div>
     <div class="d-flex flex-wrap justify-content-end gap-2 d-lg-none mt-3">



        <!-- <a href="{{ route('user.salary_view') }}" class="btn btn-primary salary-btn" data-bs-toggle="tooltip"
            data-bs-placement="top" title="Salary" style="color: #FFD700 !important;
            font-weight: bold !important;">

            <span class="finger-icon">👉🏻</span>
            To&nbsp;Get&nbsp;Salary
        </a> -->
        <!-- <a href="{{ route('block_details') }}" class="btn btn-primary salary-btn" data-bs-toggle="tooltip"
            data-bs-placement="top" title="Salary" style="color: #FFD700 !important;
            font-weight: bold !important;">

            <span class="finger-icon">👉🏻</span>
            Block
        </a> -->

        <a href="https://omigaipl.com/home_shoppy/user" class="btn btn-btn btn-info" target="_blank"
            data-bs-toggle="tooltip" data-bs-placement="top" title="Omiga IPL Login">

            <i class="ti tabler-login-2"></i>
            <span >&nbsp;&nbsp;Omiga IPL</span>
        </a>

        <a href="https://omigavip.com/user/login" class="btn btn-btn btn-vip" target="_blank" data-bs-toggle="tooltip"
            data-bs-placement="top" title="VIP Login" style="color: #FFD700 !important;
            font-weight: bold !important;">

            <i class="ti tabler-login-2"></i>
            <span >&nbsp;&nbsp;Omiga VIP</span>
        </a>




        <!-- <a href="https://og24plus.com/user/login" target="_blank" class="btn btn-btn btn-login" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="OG24 Login">
                                <i class="ti tabler-login-2"></i>&nbsp;&nbsp;OG24 Login
                            </a> -->


        <!-- <a href="https://og3plus.com/user/login" target="_blank" class="btn btn-btn btn-og" data-bs-toggle="tooltip"
                                data-bs-placement="top" title="OG3 Login">

                                <i class="ti tabler-login-2"></i>&nbsp;&nbsp;OG3 Login
                            </a> -->

    </div>
    <div class="row mt-3">
        <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 justify-content-between">

                        <!-- Left Content -->
                        <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">
                                    {{ $user->user_id }}
                                </h5>

                                <h6 class="text-light mb-0">
                                    {{ $user->name }}
                                </h6>
                            </div>
                        </div>

                        <!-- Right Badge -->
                        <div>
                            <i class="premium-badge"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
                                    viewBox="0 0 24 24" fill="currentColor"
                                    class="icon icon-tabler icons-tabler-filled icon-tabler-crown">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                    <path
                                        d="M19 19h-14c-.5 0 -.9 -.3 -1 -.8l-2 -10c0 -.4 .1 -.8 .5 -1.1c.4 -.2 .8 -.2 1.1 0l4.1 3.3l3.4 -5.1c.4 -.6 1.3 -.6 1.7 0l3.4 5.1l4.1 -3.3c.3 -.3 .8 -.3 1.1 0c.4 .2 .5 .6 .5 1.1l-2 10c0 .5 -.5 .8 -1 .8z" />
                                </svg></i>

                        </div>

                    </div>

                    <hr>
                    <div class="d-flex justify-content-between mt-1">
                        <div>
                            <h6 class="m-0 text-white small">Email</h6>
                            <h6 class="m-0 value text-center small">{{ $user->email }}</h6>
                        </div>
                        <div>
                            <h6 class="m-0 text-white small">Role</h6>
                            <h6 class="m-0 value text-center small">{{ ucwords(str_replace('_', ' ', $user->user_type)) }}
                            </h6>
                        </div>
                    </div>
                </div>

                <a href="{{route('user.wallet_request')}}" class="text-decoration-none">
                    <div class="premium-card p-5 h-100">

                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="premium-icon me-3">
                                    <i class="ti tabler-coins"></i>
                                </span>

                                <div>
                                    <div class="label">My Wallet</div>
                                </div>
                            </div>

                            <div>
                                <img src="{{ asset('assets/image/coin.png') }}" height="25px" alt="coin"
                                    class="spinning-coin">
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between mt-1">
                            <div>
                                <h6 class="m-0 text-white small">Total Wallet</h6>
                                <h6 class="m-0 value text-center small">₹
                                    {{ number_format($user->credit_wallet) }}
                                </h6>
                            </div>
                            <div>
                                <h6 class="m-0 text-white small">Available Wallet</h6>
                                <h6 class="m-0 value text-center small">
                                    {{ number_format($user->credit_wallet - $user->debit_wallet, 2) }}
                                </h6>
                            </div>
                        </div>
                    </div>
                </a>
                <a href="{{route('omiga5star')}}" class="text-decoration-none">
                    <div class="premium-card p-5">
                        <div class="d-flex align-items-center justify-content-between">
                            <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">Omiga 5 Star</div>
                                </div>
                            </div>

                            <div>
                                <img src="{{ asset('assets/image/coin.png') }}" height="25px" alt="coin"
                                    class="spinning-coin">
                            </div>
                        </div>
                        <hr>

                        <div class="d-flex justify-content-center mt-1">
                            <div>
                                <h6 class="m-0 text-white small">Purchase Amount</h6>
                                <h6 class="m-0 value text-center">{{ $starpurchase }}</h6>
                            </div>
                            <!-- <div>
                                <h6 class="m-0 text-white small">Unit Value</h6>
                                <h6 class="m-0 value text-center">{{ $totalUnitValue }}</h6>
                            </div> -->
                        </div>
                    </div>
                </a>
                <a href="{{route('block')}}" class="text-decoration-none">
                    <div class="premium-card p-5">
                        <div class="d-flex align-items-center justify-content-between">
                            <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">Standard Unit</div>
                                </div>
                            </div>

                            <div>
                                <img src="{{ asset('assets/image/coin.png') }}" height="25px" alt="coin"
                                    class="spinning-coin">
                            </div>
                        </div>
                        <hr>

                        <div class="d-flex justify-content-between mt-1">
                            <div>
                                <h6 class="m-0 text-white small">Units</h6>
                                <h6 class="m-0 value text-center">{{ $totalUnits }}</h6>
                            </div>
                            <div>
                                <h6 class="m-0 text-white small">Unit Value</h6>
                                <h6 class="m-0 value text-center">{{ $totalUnitValue }}</h6>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="premium-card p-5">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <span class="premium-icon me-3">
                                <i class="ti tabler-coin"></i>
                            </span>

                            <div>
                                <div class="label">Standard Earnings</div>
                            </div>
                        </div>

                        <div>
                            <img src="{{ asset('assets/image/coin.png') }}" height="25px" alt="coin" class="spinning-coin">
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mt-1">

                        <div>
                            <a href="{{route('profit_income')}}">
                                <h6 class="m-0 text-white small">Profit Income</h6>
                                <h6 class="m-0 value text-center">₹ {{ number_format($profit, 2) }}</h6>
                            </a>
                        </div>
                        <div>
                            <a href="{{route('level_income_table')}}">
                                <h6 class="m-0 text-white small">Level Income</h6>
                                <h6 class="m-0 value text-center">₹ {{ number_format($level, 2) }}</h6>
                            </a>
                        </div>
                    </div>
                </div>

                  <a href="{{route('block')}}" class="text-decoration-none">
                    <div class="premium-card p-5">
                        <div class="d-flex align-items-center justify-content-between">
                            <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">Micro Unit</div>
                                </div>
                            </div>

                            <div>
                                <img src="{{ asset('assets/image/coin.png') }}" height="25px" alt="coin"
                                    class="spinning-coin">
                            </div>
                        </div>
                        <hr>

                        <div class="d-flex justify-content-between mt-1">
                            <div>
                                <h6 class="m-0 text-white small">Units</h6>
                                <h6 class="m-0 value text-center">{{ $microUnits }}</h6>
                            </div>
                            <div>
                                <h6 class="m-0 text-white small">Unit Value</h6>
                                <h6 class="m-0 value text-center">{{ $microUnitValue }}</h6>
                            </div>
                        </div>
                    </div>
                </a>
                <div class="premium-card p-5">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <span class="premium-icon me-3">
                                <i class="ti tabler-coin"></i>
                            </span>

                            <div>
                                <div class="label">Micro Earnings</div>
                            </div>
                        </div>

                        <div>
                            <img src="{{ asset('assets/image/coin.png') }}" height="25px" alt="coin" class="spinning-coin">
                        </div>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between mt-1">

                        <div>
                            <a href="{{route('profit_income')}}">
                                <h6 class="m-0 text-white small">Profit Income</h6>
                                <h6 class="m-0 value text-center">₹ {{ number_format($microprofit, 2) }}</h6>
                            </a>
                        </div>
                        <div>
                            <a href="{{route('level_income_table')}}">
                                <h6 class="m-0 text-white small">Level Income</h6>
                                <h6 class="m-0 value text-center">₹ {{ number_format($microlevel, 2) }}</h6>
                            </a>
                        </div>
                    </div>
                </div>




                <!-- DIRECT TEAM -->
                @if(auth()->user()->user_type !== 'super_promoter')
                    <a href="{{ route('user.direct_team') }}" class="text-decoration-none">
                @else
                        <a href="javascript:void(0)" class="text-decoration-none" onclick="return false;">
                    @endif
                        <div class="premium-card p-5">
                            <div class="d-flex align-items-center justify-content-between">
                                <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">Direct Team</div>
                                    </div>
                                </div>

                                <div>
                                    <img src="{{ asset('assets/image/coin.png') }}" height="25px" alt="coin"
                                        class="spinning-coin">
                                </div>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between mt-1">
                                <div>
                                    <h6 class="m-0 text-white small">Members</h6>
                                    <h6 class="m-0 value text-center">{{ $directTeam }}</h6>
                                </div>
                                <div>
                                    <h6 class="m-0 text-white small"> Purchased Members</h6>
                                    <h6 class="m-0 value text-center">{{ $directPurchased }}</h6>
                                </div>
                            </div>
                        </div>
                    </a>

                    <!-- LEVEL TEAM -->
                    @if(auth()->user()->user_type !== 'super_promoter')
                        <a href="{{ route('user.level_team') }}" class="text-decoration-none">
                    @else
                            <a href="javascript:void(0)" class="text-decoration-none" onclick="return false;">
                        @endif <div class="premium-card p-5">
                                <div class="d-flex align-items-center justify-content-between">
                                    <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">Level Team</div>
                                        </div>
                                    </div>

                                    <div>
                                        <img src="{{ asset('assets/image/coin.png') }}" height="25px" alt="coin"
                                            class="spinning-coin">
                                    </div>
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between mt-1">
                                    <div>
                                        <h6 class="m-0 text-white small">Members</h6>
                                        <h6 class="m-0 value text-center">{{ $levelTeam }}</h6>
                                    </div>
                                    <div>
                                        <h6 class="m-0 text-white small"> Purchased Members</h6>
                                        <h6 class="m-0 value text-center">{{ $levelPurchased }}</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">

                        <!-- Indicators -->
                        <div class="carousel-indicators">
                            @foreach($banners as $key => $banner)
                                <button type="button" data-bs-target="#goldCarousel" data-bs-slide-to="{{ $key }}"
                                    class="{{ $key == 0 ? 'active' : '' }}">
                                </button>
                            @endforeach
                        </div>

                        <!-- Slides -->
                        <div class="carousel-inner text-center">

                            @forelse($banners as $key => $banner)
                                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                    <img src="{{ asset('storage/' . $banner->image) }}" class="img-fluid rounded-3 ad-img"
                                        alt="Banner">
                                </div>
                            @empty
                                <!-- Fallback -->
                                <div class="carousel-item active">
                                    <img src="{{ asset('assets/image/no-image.png') }}" class="img-fluid rounded-3 ad-img"
                                        alt="No Banner">
                                </div>
                            @endforelse

                        </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 class="gold-widget">
                <div class="gold-header">
                    <span class="live-dot"></span>
                    <span class="live-text">LIVE</span>
                    <span class="title">Gold Price Today</span>
                </div>

                <div class="gold-body">
                    <h2 class="price" id="livePrice"> ₹ {{ number_format($gold->gold_price_inr_1gm ?? 0) }}</h2>
                    <p class="unit">per gram</p>
                </div>

                <div class="gold-footer">
                    <span class="change up">▲ +25 (0.36%)</span>
                    <span class="update-time">Updated just now</span>
                </div>

                <!-- Default = 8 grams -->
                <div class="gold-calc">
                    <input type="number" id="grams" value="8" min="1" class="gold-number-input">
                </div>

                <!-- Breakdown -->
                <div class="gold-breakdown">
                    <div><span>Gold Value</span> <span id="goldValue"></span></div>
                    <div><span>Making Charge </span> <span id="makingCharge"></span></div>
                    <div><span>GST </span> <span id="gst"></span></div>

                    <div class="total">
                        <span>Total</span>
                        <span id="total"></span>
                    </div>
                </div>

                <div class="gold-action">
                    <a href="{{ route('investment_add') }}">
                        <button class="buy-btn">💎 Own It Now</button>
                    </a>
                </div>
            </div>
        </div>
    </div>


    </div>
    <!-- Auto Open Modal -->
    <!-- <div class="modal fade" id="welcomeModal" tabindex="-1" aria-labelledby="welcomeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-sm">
                    <div class="modal-content border-0 bg-transparent shadow-none">

                        <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3 z-3"
                            data-bs-dismiss="modal" aria-label="Close"></button>

                        <img src="{{ asset('assets/image/live.jpeg') }}"
                             class="rounded-4 shadow-lg"
                             alt="Welcome Banner" height="478px">
                    </div>
                </div>
            </div> -->
    <!-- <script>
            document.addEventListener("DOMContentLoaded", function () {
                let myModal = new bootstrap.Modal(document.getElementById('welcomeModal'));
                myModal.show();
            });
            </script> -->
    <script>
        let pricePerGram = {{ $gold->gold_price_inr_1gm ?? 0 }};
        let makingPercent = {{ $gold->making_charge_1gm ?? 0 }};
        let gstPercent = {{ $gold->gst ?? 3 }};

        function calculate() {
            let grams = parseFloat(document.getElementById('grams').value) || 1;

            let goldValue = grams * pricePerGram;
            let makingCharge = grams * makingPercent;
            let subTotal = goldValue + makingCharge;
            let gst = subTotal * (gstPercent / 100);
            let total = subTotal + gst;

            document.getElementById('livePrice').innerText = `₹ ${goldValue.toLocaleString()}`;
            document.getElementById('goldValue').innerText = `₹ ${goldValue.toLocaleString()}`;
            document.getElementById('makingCharge').innerText = `₹ ${makingCharge.toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
            document.getElementById('gst').innerText = `₹ ${gst.toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
            document.getElementById('total').innerText = `₹ ${total.toLocaleString(undefined, { maximumFractionDigits: 0 })}`;
        }

        // Update price dynamically
        function updateGoldPrice(price, change, isUp = true) {
            pricePerGram = price;

            document.getElementById('livePrice').innerText = `₹ ${price.toLocaleString()}`;

            const changeEl = document.querySelector('.change');
            changeEl.innerText = `${isUp ? '▲' : '▼'} ${change}`;
            changeEl.className = `change ${isUp ? 'up' : 'down'}`;

            document.querySelector('.update-time').innerText = "Updated just now";

            calculate();
        }

        // Event
        document.getElementById('grams').addEventListener('input', calculate);

        // Initial load (default 8g)
        calculate();
    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- <script>
                                // Data for the bar chart (heights in pixels)
                                const barHeights = [50, 80, 58, 100]; // You can change these dynamically

                                const chartContainer = document.getElementById('impressions-chart');

                                // Clear container just in case
                                chartContainer.innerHTML = '';

                                // Generate bars
                                barHeights.forEach(height => {
                                    const bar = document.createElement('div');
                                    bar.style.width = '20px';
                                    bar.style.height = height + 'px';
                                    bar.style.background = '#7C3AED';
                                    bar.style.borderRadius = '4px';
                                    chartContainer.appendChild(bar);
                                });
                            </script> -->
    @php
        $isActive = auth()->guard('web')->user()->active_package;
    @endphp

    @if(!$isActive)

        <div class="modal fade" id="purchasedModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content purchase-modal">

                    <!-- Close -->
                    <button type="button" class="btn-close btn-close-white ms-auto m-3" data-bs-dismiss="modal"></button>

                    <!-- Body -->
                    <div class="modal-body text-center px-4 pb-5">

                        <h4 class="fw-bold text-white mb-3">
                            Unlock Premium Access
                        </h4>

                        <p class="text-light mb-4 small">
                            Purchase a unit to get exclusive access and unlock all premium features.
                        </p>

                        <a href="{{ route('investment_add') }}"><button class="btn attention-btn ">
                                Purchase Now
                            </button></a>

                    </div>

                </div>
            </div>
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                let modal = new bootstrap.Modal(document.getElementById('purchasedModal'));
                modal.show();
            });
        </script>
    @endif


    <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
    </script>
@endsection