@extends('User.layout')
<style>
    .premium-card-link {
        text-decoration: none;
        color: inherit;
    }

    /* Card base */
    .premium-card {
        border: none;
        border-radius: 18px !important;
        background: linear-gradient(257deg, #92c9d4, #138fa7) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        cursor: pointer;
        height: 17.5vh !important;
    }

    /* Hover effect (app-like lift) */
    .premium-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
    }

    /* Card body spacing */
    .premium-card .card-body {
        padding: 22px;
    }

    /* Amount text */
    .premium-card .amount {
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 6px;
        color: #ffffff;
    }

    /* Label text */
    .premium-card .label {
        font-size: 0.85rem;
        font-weight: 500;
        color: #ffffff;
        letter-spacing: 0.3px;
    }

    /* Icon box */
    .premium-card .icon-box {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #138fa7;
        background: linear-gradient(135deg, #e0e7ff, #eef2ff) !important;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
    }

    /* Optional: different accent colors */
    .premium-card.gold .icon-box {
        background: linear-gradient(135deg, #fff3cd, #fffbeb) !important;
        color: #d97706;
    }

    .premium-card.green .icon-box {
        background: linear-gradient(135deg, #dcfce7, #ecfdf5) !important;
        color: #16a34a;
    }

    /* Contest popup only */
    #contestModal {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    /* Popup box */
    #contestModal .popup-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 400px;
        width: 90%;
        background: #fff;
        border-radius: 8px;
    }



    .profile-avatar {
        width: 55px;
        height: 55px;
        border-radius: 10px;
        overflow: hidden;
        background: #6c63ff20;
    }

    .profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .user-id {
        font-size: 14px;
        font-weight: 600;
    }

    .user-name {
        font-size: 16px;
        font-weight: 600;
    }

    .stats {
        font-size: 13px;
        margin: 0;
    }

    .profile-card {
        border: none;
        border-radius: 18px !important;
        background: linear-gradient(257deg, #92c9d4, #138fa7) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        cursor: pointer;
        height: 17.5vh !important;
        padding: 0;
        color: white !important;
    }

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

    .btn-og {
        background-color: #121212;
        color: #ffd700;
        font-weight: 600;
        border: none;
        transition: 0.3s;
    }

    .btn-ogplus {
        background-color: #0A1F44;
        color: #ffd700;
        font-weight: 600;
        border: none;
        transition: 0.3s;
    }

    .link {
        text-decoration: underline;
        text-underline-offset: 4px;
    }


    /* MAIN HEADER */
    .top-header-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 0 !important;
    }

    /* BUTTON GROUP */
    .salary-btn-group {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
    }

    /* EACH ITEM */
    .salary-btn-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* BUTTON */
    .add-btn {
        border-radius: 14px;
        position: relative;
        overflow: hidden;
        transition: all 0.35s ease;
        animation: pulseBtn 2s infinite;
        white-space: nowrap;
    }

    .add-btn:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 10px 25px rgba(13, 202, 240, 0.35);
    }

    /* HAND ICON */
    .btn-ico {
        font-size: 24px;
        display: inline-flex;
        animation: bounceHand 1.5s infinite;
    }

    /* LEFT HAND */
    .left-icon {
        animation-direction: normal;
    }

    /* RIGHT HAND */
    .right-icon {
        animation-direction: reverse;
    }

    /* HAND ANIMATION */
    @keyframes bounceHand {

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

        50% {
            transform: translateX(6px);
        }
    }

    /* BUTTON PULSE */
    @keyframes pulseBtn {
        0% {
            box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.5);
        }

        70% {
            box-shadow: 0 0 0 14px rgba(13, 202, 240, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(13, 202, 240, 0);
        }
    }

    /* MOBILE */
    @media (max-width: 768px) {
        .top-header-wrapper {
            flex-direction: column;
            align-items: flex-start;
        }

        .salary-btn-group {
            width: 100%;
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }

        .salary-btn-item {
            width: 100%;
            display: flex;
            align-items: center;
        }

        .add-btn {
            width: auto;
        }
    }
</style>
@section('content')
    <div class="row">

        <div class="col-12">

            <div class="top-header-wrapper">

                <div class="page-title-box">
                    <h5 class="mb-0">
                        Welcome Back,
                        User Name
                    </h5>
                </div>

                <div class="salary-btn-group">

                    <div class="salary-btn-item">

                        <span class="btn-ico left-icon">👉🏻</span>

                        <a href="#" class="btn btn-info text-white px-4 py-2 fw-semibold shadow-sm add-btn">

                            To Get Salary
                        </a>

                    </div>

                    <div class="salary-btn-item">
                        <span
                            class="d-inline d-lg-none">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <a href="#" class="btn btn-info text-white px-4 py-2 fw-semibold shadow-sm add-btn">

                            To Get GSBP
                        </a>

                        <span class="btn-ico right-icon">👈🏻</span>


                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- Cards Row -->
    <div class="row g-3 mt-2">
        <div class="col-12 col-md-6 col-lg-3">
            <div class="card profile-card silver">
                <div class="card-body">

                    <!-- Top Section -->
                    <!--<div class="d-flex align-items-center">-->

                    <!-- Profile Image -->
                    <!--<div class="profile-avatar me-3">-->
                    <!--    <img src="https://i.pravatar.cc/60" alt="Profile">-->
                    <!--</div>-->

                    <div class="d-flex flex-column align-items-center text-center">
                        <div class="fw-bold">OMITEST001</div>
                        <div class="fw-bold">Test</div>
                    </div>

                    <div class="d-flex justify-content-between stats pt-3">
                        <div>
                            <div class="stat-title fw-bold">Level Team</div>
                            <div class="stat-value fw-bold">0</div>
                        </div>
                        <div class="text-end">
                            <div class="stat-title fw-bold">My Team</div>
                            <div class="stat-value fw-bold">0</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-12 col-md-6 col-lg-3">
            <a href="user/diamond_dashboard" class="premium-card-link">
                <div class="card premium-card silver">
                    <div class="card-body d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="amount">0</h4>
                            <h6 class="label">Diamond Advance</h6>
                        </div>
                        <div class="icon-box">
                            <i class="ti tabler-upload"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <a href="user/gold_dashboard" class="premium-card-link">
                <div class="card premium-card gold">
                    <div class="card-body d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="amount">0</h4>
                            <h6 class="label">Gold Advance</h6>
                        </div>
                        <div class="icon-box">
                            <i class="ti tabler-coin"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <a href="user/silver_dashboard" class="premium-card-link">
                <div class="card premium-card silver">
                    <div class="card-body d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="amount">0</h4>
                            <h6 class="label">Silver Advance</h6>
                        </div>
                        <div class="icon-box">
                            <i class="ti tabler-coin"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 col-lg-3">
            <a href="user/user_product_wallet" class="premium-card-link">
                <div class="card premium-card silver">
                    <div class="card-body d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h4 class="amount">₹00</h4>
                            <h6 class="label">Product Wallet</h6>
                        </div>
                        <div class="icon-box">
                            <i class="ti tabler-wallet"></i>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
@endsection