@extends('User.layout')

@section('content')

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<style>
    :root{
        --bg:#17161d;
        --card:#221c2d;
        --card2:#2d2439;
        --border:#5d4d78;
        --diamond:#8fd3ff;
        --diamond-soft:#6f8cff;
        --text:#eef5ff;
        --muted:#a9b7c7;
    }

    .diamond-title{
        color:var(--text);
        font-weight:700;
        margin-bottom:20px;
    }

    .diamond-link{
        text-decoration:none;
    }

    .diamond-card{
        background:linear-gradient(145deg,var(--card),var(--card2));
        border:1px solid var(--border);
        border-radius:18px;
        padding:20px;
        overflow:hidden;
        position:relative;
        height:100%;
        transition:all .35s ease;
        box-shadow:0 10px 25px rgba(0,0,0,.18);
    }

    .diamond-card:hover{
        transform:translateY(-6px);
        box-shadow:0 18px 35px rgba(0,0,0,.28);
        border-color:var(--diamond);
    }

    .diamond-card::before{
        content:'';
        position:absolute;
        top:-35px;
        right:-35px;
        width:110px;
        height:110px;
        border-radius:50%;
        background:radial-gradient(circle, rgba(143,211,255,.22), transparent 70%);
    }

    .icon-wrap{
        width:58px;
        height:58px;
        border-radius:16px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(143,211,255,.08);
        border:1px solid rgba(143,211,255,.15);
        color:var(--diamond);
        font-size:28px;
        animation:floatIcon 2.8s ease-in-out infinite;
    }

    @keyframes floatIcon{
        0%,100%{transform:translateY(0);}
        50%{transform:translateY(-6px);}
    }

    .amount{
        font-size:32px;
        font-weight:700;
        color:var(--diamond);
        margin:0;
    }

    .label{
        color:var(--text);
        font-weight:600;
        margin-bottom:8px;
    }

    .growth{
        color:var(--diamond);
        font-weight:700;
    }

    .muted{
        color:var(--muted);
        font-size:14px;
    }

    .mini-line{
        height:5px;
        background:rgba(255,255,255,.04);
        border-radius:30px;
        overflow:hidden;
        margin-top:14px;
    }

    .mini-line span{
        display:block;
        height:100%;
        width:74%;
        border-radius:30px;
        background:linear-gradient(90deg,var(--diamond-soft),var(--diamond));
        animation:loadBar 2s ease;
    }

    @keyframes loadBar{
        from{width:0;}
        to{width:74%;}
    }
</style>

<h5 class="diamond-title">Diamond</h5>

<div class="row g-4">

    <div class="col-lg-3 col-md-6 mb-3">
        <a href="{{ route('user.diamond_deposit') }}" class="diamond-link">
            <div class="diamond-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="icon-wrap">
                        <i class="ti tabler-diamond"></i>
                    </div>
                    <h4 class="amount">₹123</h4>
                </div>

                <p class="label">Diamond Deposit</p>

                <p class="mb-0">
                    <span class="growth">+3.8%</span>
                    <span class="muted ms-2">than last week</span>
                </p>

                <div class="mini-line">
                    <span></span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-lg-3 col-md-6 mb-3">
        <a href="{{ route('user.diamond_roi_income_report') }}" class="diamond-link">
            <div class="diamond-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="icon-wrap">
                        <i class="ti tabler-chart-line"></i>
                    </div>
                    <h4 class="amount">₹123</h4>
                </div>

                <p class="label">Diamond ROI Income</p>

                <p class="mb-0">
                    <span class="growth">+5.1%</span>
                    <span class="muted ms-2">than last week</span>
                </p>

                <div class="mini-line">
                    <span></span>
                </div>
            </div>
        </a>
    </div>

     <div class="col-lg-3 col-md-6 mb-3">
        <a href="{{ route('user.diamond_level_income') }}" class="diamond-link">
            <div class="diamond-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="icon-wrap">
                        <i class="ti tabler-chart-line"></i>
                    </div>
                    <h4 class="amount">₹123</h4>
                </div>

                <p class="label">Diamond Level Income</p>

                <p class="mb-0">
                    <span class="growth">+5.1%</span>
                    <span class="muted ms-2">than last week</span>
                </p>

                <div class="mini-line">
                    <span></span>
                </div>
            </div>
        </a>
    </div>
     <div class="col-lg-3 col-md-6 mb-3">
        <a href="{{ route('user.direct_team') }}" class="diamond-link">
            <div class="diamond-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="icon-wrap">
                        <i class="ti tabler-chart-line"></i>
                    </div>
                    <h4 class="amount">₹123</h4>
                </div>

                <p class="label">Direct Team</p>

                <p class="mb-0">
                    <span class="growth">+5.1%</span>
                    <span class="muted ms-2">than last week</span>
                </p>

                <div class="mini-line">
                    <span></span>
                </div>
            </div>
        </a>
    </div>
     <div class="col-lg-3 col-md-6 mb-3">
        <a href="{{ route('user.level_team') }}" class="diamond-link">
            <div class="diamond-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="icon-wrap">
                        <i class="ti tabler-chart-line"></i>
                    </div>
                    <h4 class="amount">₹123</h4>
                </div>

                <p class="label">Level Team</p>

                <p class="mb-0">
                    <span class="growth">+5.1%</span>
                    <span class="muted ms-2">than last week</span>
                </p>

                <div class="mini-line">
                    <span></span>
                </div>
            </div>
        </a>
    </div>
 <div class="col-lg-3 col-md-6 mb-3">
        <a href="{{ route('user.diamond_level_income') }}" class="diamond-link">
            <div class="diamond-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="icon-wrap">
                        <i class="ti tabler-chart-line"></i>
                    </div>
                    <h4 class="amount">₹123</h4>
                </div>

                <p class="label">Gold Sales Bonus Points</p>

                <p class="mb-0">
                    <span class="growth">Only 9K</span>
                    <span class="muted ms-2">Ornaments Can Purchased</span>
                </p>

                <div class="mini-line">
                    <span></span>
                </div>
            </div>
        </a>
    </div>
     <div class="col-lg-3 col-md-6 mb-3">
        <a href="{{ route('user.diamond_level_income') }}" class="diamond-link">
            <div class="diamond-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="icon-wrap">
                        <i class="ti tabler-chart-line"></i>
                    </div>
                    <h4 class="amount">₹123</h4>
                </div>

                <p class="label">Global Royalty</p>

                <p class="mb-0">
                    <span class="growth">Conditions</span>
                    <span class="muted ms-2">Applied</span>
                </p>

                <div class="mini-line">
                    <span></span>
                </div>
            </div>
        </a>
    </div>
     <div class="col-lg-3 col-md-6 mb-3">
        <a href="{{ route('user.diamond_level_income') }}" class="diamond-link">
            <div class="diamond-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="icon-wrap">
                        <i class="ti tabler-chart-line"></i>
                    </div>
                    <h4 class="amount">₹123</h4>
                </div>

                <p class="label">Promotors & Leaders Bonus Pool</p>

                <p class="mb-0">
                    <span class="growth">Get Eligible</span>
                    <span class="muted ms-2">Soon</span>
                </p>

                <div class="mini-line">
                    <span></span>
                </div>
            </div>
        </a>
    </div>
</div>

@endsection