@extends('User.layout')
<style>

    :root {
        --bg: #06131f !important;
        --card: rgba(10, 20, 35, 0.88) !important;
        --border: rgba(255, 255, 255, 0.08) !important;

        --text: #ffffff !important;
        --muted: #9caec7 !important;

        --primary: #00d2ff !important;
        --secondary: #3a7bd5 !important;

        --success: #16a34a !important;
        --danger: #dc2626 !important;

        --glass: rgba(255, 255, 255, 0.04) !important;
    }


    .page-header {
        margin-bottom: 28px !important;
    }

    .page-title {
        font-size: 34px !important;
        font-weight: 800 !important;
        margin-bottom: 6px !important;
        color: #fff !important;
    }

    .page-subtitle {
        color: var(--muted) !important;
        font-size: 15px !important;
    }

    .main-card {
        background: var(--card) !important;
        border: 1px solid var(--border) !important;
        border-radius: 30px !important;
        padding: 30px !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        position: relative !important;
        overflow: hidden !important;

        box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.35),
            0 0 40px rgba(0, 210, 255, 0.08) !important;
    }

    .main-card::before {
        content: "" !important;
        position: absolute !important;
        width: 300px !important;
        height: 300px !important;
        background: rgba(0, 210, 255, 0.08) !important;
        border-radius: 50% !important;
        top: -120px !important;
        left: -120px !important;
        filter: blur(70px) !important;
    }

    .main-card::after {
        content: "" !important;
        position: absolute !important;
        width: 280px !important;
        height: 280px !important;
        background: rgba(58, 123, 213, 0.08) !important;
        border-radius: 50% !important;
        bottom: -120px !important;
        right: -120px !important;
        filter: blur(70px) !important;
    }

    .plan-header {
        margin-bottom: 28px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .plan-title {
        font-size: 28px !important;
        font-weight: 800 !important;
        margin-bottom: 8px !important;
        color: #fff !important;
    }

    .plan-subtitle {
        color: var(--muted) !important;
        font-size: 14px !important;
    }

    /* .filter-box {
        display: flex !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    } */

    .form-select,
    .btn-search {
        height: 48px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .form-select {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
        min-width: 160px !important;
        padding: 0 14px !important;
    }

    .form-select option {
        background: #07131f !important;
        color: #fff !important;
    }

    .form-select:focus {
        box-shadow: none !important;
        border-color: rgba(0, 210, 255, 0.4) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
    }

    .btn-search {
        background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
        color: #fff !important;
        font-weight: 700 !important;
        padding: 0 24px !important;
        border: none !important;
        transition: 0.3s ease !important;
    }

    .btn-search:hover {
        transform: translateY(-2px) !important;
        color: #fff !important;
    }

    .plan-card {
        background:
            linear-gradient(145deg,
                rgba(255, 255, 255, 0.04),
                rgba(255, 255, 255, 0.02)) !important;

        border: 1px solid rgba(255, 255, 255, 0.06) !important;

        border-radius: 26px !important;
        padding: 24px !important;
        height: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        transition: 0.35s ease !important;
    }

    .plan-card:hover {
        transform: translateY(-6px) !important;

        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.35),
            0 0 30px rgba(0, 210, 255, 0.08) !important;
    }

    .badge-level {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;

        padding: 10px 18px !important;
        border-radius: 50px !important;

        background: rgba(0, 210, 255, 0.12) !important;
        border: 1px solid rgba(0, 210, 255, 0.12) !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        margin-bottom: 24px !important;
        color: #fff !important;
    }

    .section-head {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 22px !important;
    }

    .section-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }

    .mini-status {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #fff !important;
        font-size: 18px !important;
    }

    .success {
        background: linear-gradient(135deg, #16a34a, #15803d) !important;
        box-shadow: 0 0 20px rgba(22, 163, 74, 0.35) !important;
    }

    .danger {
        background: linear-gradient(135deg, #dc2626, #991b1b) !important;
        box-shadow: 0 0 20px rgba(220, 38, 38, 0.35) !important;
    }

    .flow-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
    }

    .flow-card {
        background:
            linear-gradient(135deg,
                rgba(0, 210, 255, 0.14),
                rgba(58, 123, 213, 0.12)) !important;

        border-radius: 20px !important;
        padding: 22px 16px !important;
        text-align: center !important;

        border: 1px solid rgba(255, 255, 255, 0.06) !important;

        transition: 0.3s ease !important;
    }

    .flow-card:hover {
        transform: translateY(-4px) !important;
    }

    .flow-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        margin-bottom: 14px !important;
        display: block !important;
        color: #fff !important;
    }

    .flow-icon {
        font-size: 26px !important;
        margin-bottom: 12px !important;
        color: #7dd3fc !important;
    }

    .target {
        font-size: 24px !important;
        font-weight: 800 !important;
        margin-bottom: 10px !important;
        color: #fff !important;
    }

    .current {
        font-size: 13px !important;
        color: var(--muted) !important;
    }

    .divider {
        text-align: center !important;
        margin: 28px 0 !important;
        position: relative !important;
    }

    .divider::before {
        content: "" !important;
        position: absolute !important;
        width: 100% !important;
        height: 1px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        left: 0 !important;
        top: 50% !important;
    }

    .divider span {
        position: relative !important;
        background: #07131f !important;
        padding: 8px 16px !important;
        border-radius: 30px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #9fb2cb !important;
    }

    .target-box {
        background: rgba(255, 255, 255, 0.04) !important;
        border-radius: 20px !important;
        padding: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .target-top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .target-left {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
    }

    .target-icon {
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: rgba(0, 210, 255, 0.12) !important;
        color: #7dd3fc !important;
        font-size: 22px !important;
    }

    .target-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }

    .target-value {
        font-size: 14px !important;
        color: var(--muted) !important;
        margin-top: 5px !important;
    }

    .status-big {
        width: 46px !important;
        height: 46px !important;
        border-radius: 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #fff !important;
        font-size: 20px !important;
    }

    @media(max-width: 991px) {

        .flow-wrapper {
            grid-template-columns: repeat(2, 1fr) !important;
        }
    }

    @media(max-width: 767px) {

        .main-card {
            padding: 20px !important;
            border-radius: 24px !important;
        }

        .page-title {
            font-size: 28px !important;
        }

        .plan-title {
            font-size: 22px !important;
        }

        .plan-header {
            display: flex !important;
            flex-direction: column !important;
            gap: 18px !important;
        }

        .filter-box {
            width: 100% !important;
        }

        .form-select,
        .btn-search {
            width: 100% !important;
        }

        .flow-wrapper {
            grid-template-columns: 1fr !important;
        }

        .target-top {
            flex-direction: column !important;
            align-items: flex-start !important;
        }

        .status-big {
            width: 40px !important;
            height: 40px !important;
            font-size: 18px !important;
        }

        .target-icon {
            width: 46px !important;
            height: 46px !important;
        }
    }

    @media(max-width: 480px) {

        .page-title {
            font-size: 24px !important;
        }

        .plan-title {
            font-size: 20px !important;
        }

        .target-title {
            font-size: 14px !important;
        }

        .target-value {
            font-size: 12px !important;
        }

        .flow-card {
            padding: 18px 14px !important;
        }

        .target {
            font-size: 20px !important;
        }
    }

</style>
@section('content')

    <div class="page-header">

        <h5>
            Gold Sales Bonus Points
        </h5>



    </div>


    <div class="main-card">

       <div
    class="plan-header d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-4">

    <!-- LEFT SIDE -->
    <div class="flex-grow-1">

        <h6 class="plan-title mb-1">
            Gold Sales Bonus Points
        </h6>

        <p class="plan-subtitle mb-0">
            Check your qualification progress with live business targets
        </p>

    </div>

    <!-- RIGHT SIDE -->
    <div class="col-12 col-lg-auto">

        <div class="row g-3 align-items-center">

            <!-- MONTH -->
            <div class="col-12 col-sm-4 col-lg-5">
                <select class="form-select w-100">
                    <option>January</option>
                    <option>February</option>
                    <option>March</option>
                </select>
            </div>

            <!-- YEAR -->
            <div class="col-12 col-sm-4 col-lg-5">
                <select class="form-select w-100">
                    <option>2026</option>
                    <option>2025</option>
                </select>
            </div>

            <!-- BUTTON -->
            <div class="col-12 col-sm-4 col-lg-auto">
                <button class="btn-search">
                    Search
                </button>
            </div>

        </div>

    </div>

</div>
        <!-- ROW -->
        <div class="row g-4">

            <!-- LEFT CARD -->
            <div class="col-12 col-xl-6">

                <div class="plan-card">

                    <div class="badge-level">
                        <i class="ti tabler-award"></i>
                        Level 1 → 4
                    </div>

                    <div class="section-head">

                        <div class="section-title">
                            Minimum 3 Legs
                        </div>

                        <div class="mini-status success">
                            <i class="ti tabler-check"></i>
                        </div>

                    </div>

                    <div class="flow-wrapper">

                        <div class="flow-card">

                            <span class="flow-title">
                                Leg 1
                            </span>

                            <div class="flow-icon">
                                <i class="ti tabler-arrow-down"></i>
                            </div>

                            <div class="target">
                                ₹2 Lakh
                            </div>

                            <div class="current">
                                Current : ₹2,10,000
                            </div>

                        </div>

                        <div class="flow-card">

                            <span class="flow-title">
                                Leg 2
                            </span>

                            <div class="flow-icon">
                                <i class="ti tabler-arrow-down"></i>
                            </div>

                            <div class="target">
                                ₹1 Lakh
                            </div>

                            <div class="current">
                                Current : ₹1,15,000
                            </div>

                        </div>

                        <div class="flow-card">

                            <span class="flow-title">
                                Leg 3
                            </span>

                            <div class="flow-icon">
                                <i class="ti tabler-arrow-down"></i>
                            </div>

                            <div class="target">
                                ₹1 Lakh
                            </div>

                            <div class="current">
                                Current : ₹1,20,000
                            </div>

                        </div>

                    </div>

                    <div class="divider">
                        <span>OR</span>
                    </div>

                <div class="target-box">

    <div
        class="target-top d-flex flex-column flex-sm-row align-items-center justify-content-between text-center text-sm-start gap-3">

        <!-- LEFT -->
        <div
            class="target-left d-flex flex-column flex-sm-row align-items-center gap-3">

            <!-- ICON -->
            <div class="target-icon mx-auto mx-sm-0">
                <i class="ti tabler-user-dollar"></i>
            </div>

            <!-- CONTENT -->
            <div class="d-flex flex-column align-items-center align-items-sm-start">

                <div class="target-title">
                    Self Topup → ₹5 Lakh
                </div>

                <div class="target-value">
                    Current : ₹5,25,000
                </div>

            </div>

        </div>

        <!-- STATUS -->
        <div class="status-big success mx-auto mx-sm-0">
            <i class="ti tabler-check"></i>
        </div>

    </div>

</div>

                    <div class="divider">
                        <span>OR</span>
                    </div>
<div class="target-box">

    <div
        class="target-top d-flex flex-column flex-sm-row align-items-center justify-content-between text-center text-sm-start gap-3">

        <!-- LEFT -->
        <div
            class="target-left d-flex flex-column flex-sm-row align-items-center gap-3">

            <!-- ICON -->
            <div class="target-icon mx-auto mx-sm-0">
                <i class="ti tabler-user-dollar"></i>
            </div>

            <!-- CONTENT -->
            <div class="d-flex flex-column align-items-center align-items-sm-start">

                <div class="target-title">
                    Direct Topup → ₹5 Lakh
                </div>

                <div class="target-value">
                    Current : ₹5,25,000
                </div>

            </div>

        </div>

        <!-- STATUS -->
        <div class="status-big danger mx-auto mx-sm-0">
            <i class="ti tabler-x"></i>
        </div>

    </div>

</div>

                </div>

            </div>

            <!-- RIGHT CARD -->
            <div class="col-12 col-xl-6">

                <div class="plan-card">

                    <div class="badge-level">
                        <i class="ti tabler-crown"></i>
                        Level 5 → 12
                    </div>

                    <div class="section-head">

                        <div class="section-title">
                            Minimum 3 Legs
                        </div>

                        <div class="mini-status danger">
                            <i class="ti tabler-x"></i>
                        </div>

                    </div>

                    <div class="flow-wrapper">

                        <div class="flow-card">

                            <span class="flow-title">
                                Main Leg
                            </span>

                            <div class="flow-icon">
                                <i class="ti tabler-arrow-down"></i>
                            </div>

                            <div class="target">
                                ₹15 Lakh
                            </div>

                            <div class="current">
                                Current : ₹12,50,000
                            </div>

                        </div>

                        <div class="flow-card">

                            <span class="flow-title">
                                Second Leg
                            </span>

                            <div class="flow-icon">
                                <i class="ti tabler-arrow-down"></i>
                            </div>

                            <div class="target">
                                ₹5 Lakh
                            </div>

                            <div class="current">
                                Current : ₹4,20,000
                            </div>

                        </div>

                        <div class="flow-card">

                            <span class="flow-title">
                                Balance Leg
                            </span>

                            <div class="flow-icon">
                                <i class="ti tabler-arrow-down"></i>
                            </div>

                            <div class="target">
                                ₹5 Lakh
                            </div>

                            <div class="current">
                                Current : ₹4,75,000
                            </div>

                        </div>

                    </div>

                    <div class="divider">
                        <span>OR</span>
                    </div>

                <div class="target-box">

    <div
        class="target-top d-flex flex-column flex-sm-row align-items-center justify-content-between text-center text-sm-start gap-3">

        <!-- LEFT -->
        <div
            class="target-left d-flex flex-column flex-sm-row align-items-center gap-3">

            <!-- ICON -->
            <div class="target-icon mx-auto mx-sm-0">
                <i class="ti tabler-user-dollar"></i>
            </div>

            <!-- CONTENT -->
            <div class="d-flex flex-column align-items-center align-items-sm-start">

                <div class="target-title">
                    Self Topup → ₹10 Lakh
                </div>

                <div class="target-value">
                    Current : ₹5,25,000
                </div>

            </div>

        </div>

        <!-- STATUS -->
        <div class="status-big success mx-auto mx-sm-0">
            <i class="ti tabler-check"></i>
        </div>

    </div>

</div>

                    <div class="divider">
                        <span>OR</span>
                    </div>

                 <div class="target-box">

    <div
        class="target-top d-flex flex-column flex-sm-row align-items-center justify-content-between text-center text-sm-start gap-3">

        <!-- LEFT -->
        <div
            class="target-left d-flex flex-column flex-sm-row align-items-center gap-3">

            <!-- ICON -->
            <div class="target-icon mx-auto mx-sm-0">
                <i class="ti tabler-user-dollar"></i>
            </div>

            <!-- CONTENT -->
            <div class="d-flex flex-column align-items-center align-items-sm-start">

                <div class="target-title">
                    Direct Topup → ₹10 Lakh
                </div>

                <div class="target-value">
                    Current : ₹5,25,000
                </div>

            </div>

        </div>

        <!-- STATUS -->
        <div class="status-big danger mx-auto mx-sm-0">
            <i class="ti tabler-x"></i>
        </div>

    </div>

</div>

                </div>

            </div>

        </div>

    </div>


@endsection