@extends('user.layout')
@section('content')
<style>
     .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;
        }
          .btn-vip {
            background: #1c5a64 !important;
            color: #ffffff;
            font-weight: 600;
            border: none;
            transition: 0.3s;
        }

        .btn-og {
            background-color: #121212 !important;
            color: #ffffff;
        }
        .btn-btn
        {
            width: 158px !important;
        }

        /* 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>
<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);
    }
    .btn-login {

            background: #0A1f44;
            color: #ffd700;

        }


    /* .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;
        }
    }
.btn-login:hover {

            background: #0A1f44;
            color: #ffd700;

        }

    .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;
    }
</style>
<!-- <div class="d-flex justify-content-between align-items-center mb-3"> -->
    <!-- <div>
        Welcome,&nbsp;<span class="text-primary">{{ Auth::user()->name }}</span>
    </div> -->
    <!-- <div class="d-flex flex-wrap justify-content-end gap-2 mb-3">

                <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>&nbsp;&nbsp;Omiga IPL
                </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> -->
<!-- Welcome + Button -->
<!-- <div class="dashboard-header mb-2">
                    <h4 class="fw-bold">
                        Welcome,&nbsp;<span class="text-primary">{{ Auth::user()->name }}</span>
                    </h4>
                    <input type="text" id="referralLink" value="{{ $referralLink }}" style="position:absolute; left:-9999px;">

                    <a href="#" class="btn btn-register" id="copyReferral">
                        <i class="menu-icon icon-base ti tabler-link"></i> <span class="d-md-flex d-none">New Registration</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()->user()->user_id }}
                        </h5>
                        <h6 class="text-white mb-0">
                            {{ auth()->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()->user()->email }}
                        </small>
                    </div>
                    <div>
                        <h6 class="m-0 text-white small">Role</h6>
                        <h6 class="m-0 value text-center small">Member
                            </small>
                    </div>
                </div>
            </div>

            <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">My 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 small">₹{{ number_format($totalInvestment ?? 0, 2) }}

                        </h6>
                    </div>
                    <div class="d-flex justify-content-center align-items-center">
                        <h6 class="m-0 text-white small"></h6>
                        <a href="{{ route('user.purchase_advance') }}" class="m-0 value text-center small 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-brand-unity"></i>
                    </span>
                    <div>
                        <div class="label">My Purchase</div>
                    </div>
                </div>
                <hr>

                <div class="d-flex justify-content-between mt-1">
                    <div>
                        <h6 class="m-0 text-white small">Total Purchase</h6>
                        <h6 class="m-0 value text-center">₹{{ number_format($totalPurchase ?? 0, 2) }}</h6>
                    </div>
                    <div>
                        <a href="{{ route('user.purchase_card') }}" class="m-0 value text-center small 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">My Earnings</div>
                    </div>
                </div>
                <hr>
                <div class="d-flex justify-content-between mt-1">

                    <div>
                        <a href="#">
                            <h6 class="m-0 text-white small">Profit Income</h6>
                            <h6 class="m-0 value text-center">₹0</h6>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <h6 class="m-0 text-white small">Level Income</h6>
                            <h6 class="m-0 value text-center">₹0</h6>
                        </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">Direct Team</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">Members</h6>
                        <h6 class="m-0 value text-center">{{ $directTeamCount ?? 0 }}</h6>
                    </div>
                    <div>
                        <h6 class="m-0 text-white small"> Purchased Members</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">Level Team</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">Members</h6>
                        <h6 class="m-0 value text-center">{{ $levelTeamCount ?? 0 }}</h6>
                    </div>
                    <div>
                        <h6 class="m-0 text-white small"> Purchased Members</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>

<style>
    .purchase-modal {
        background: linear-gradient(135deg, #0f2f36, #133d45, #1c5a64);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 20px;
        backdrop-filter: blur(20px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        position: relative;
        overflow: visible;
    }

    .custom-close {
        position: absolute;
        top: 12px;
        right: 12px;
        /* width: 32px;
  height: 32px; */
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.25) !important;
        font-size: 20px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
        z-index: 50;
        backdrop-filter: blur(6px);
    }

    .custom-close:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: scale(1.1);
    }

    /* soft glow background */
    .purchase-modal::before {
        content: "";
        position: absolute;
        top: -80px;
        left: -80px;
        width: 200px;
        height: 200px;
        background: rgba(255, 215, 0, 0.25);
        filter: blur(60px);
        border-radius: 50%;
    }

    .purchase-modal::after {
        content: "";
        position: absolute;
        bottom: -80px;
        right: -80px;
        width: 200px;
        height: 200px;
        background: rgba(34, 197, 94, 0.25);
        filter: blur(60px);
        border-radius: 50%;
    }

    /* button */
    .attention-btn {
        /* background: linear-gradient(90deg, #22c55e, #16a34a); */
        background-color: #D4AF37;
        color: white;
        font-weight: 700;
        padding: 12px 28px;
        border-radius: 14px;
        border: none;
        box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
        transition: all 0.3s ease;
    }

    .attention-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 15px 35px rgba(34, 197, 94, 0.45);
    }

    /* modal backdrop dark premium */
    .modal-backdrop.show {
        opacity: 0.75;
        backdrop-filter: blur(5px);
    }
</style>
@if(auth()->check() && auth()->user()->is_activate_purchase == 0)

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

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

            <!-- Body -->
            <div class="modal-body text-center px-4 pb-5 pt-5">
                <h4 class="fw-bold text-white mb-3">
                    Get Active and Start Earning
                </h4>

                <p class="text-light mb-4 small opacity-75">
                    Activate your account by making a purchase and unlock opportunities to earn income and access premium features.
                </p>

                <a href="{{ route('user.purchase_card') }}">
                    <button class="btn attention-btn">
                        Activate Now
                    </button>
                </a>

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

                        <a href="{{ route('user.open_ticket') }}"> <button class="fab-item" data-tooltip="Support"><i
                                    class="ti tabler-headset"></i></button></a>
                        <a href="{{ route('user.purchase_advance') }}"> <button class="fab-item"
                                data-tooltip="Purchase Advance"><i class="ti tabler-cash"></i></button></a>
                        <a href="{{ route('user.purchase_card') }}"> <button class="fab-item"
                                data-tooltip="Purchase Package"><i class="ti tabler-shopping-cart"></i></button></a>
                        <a href="{{ route('user.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>
    document.addEventListener("DOMContentLoaded", function() {
        let modal = new bootstrap.Modal(document.getElementById('purchasedModal'));
        modal.show();
    });
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></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");

        alert("Referral link copied");

    });
</script>

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