@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:#221f2b;
        --card2:#2a2533;
        --border:#3b3426;
        --gold:#c6a15a;
        --gold-soft:#8f7138;
        --text:#e6dcc9;
        --muted:#a59884;
    }

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

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

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

    .gold-card::before{
        content:'';
        position:absolute;
        top:-35px;
        right:-35px;
        width:110px;
        height:110px;
        border-radius:50%;
        background:radial-gradient(circle, rgba(198,161,90,.25), transparent 70%);
    }

    .icon-wrap{
        width:58px;
        height:58px;
        border-radius:16px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(198,161,90,.08);
        border:1px solid rgba(198,161,90,.15);
        color:var(--gold);
        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(--gold);
        margin:0;
    }

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

    .growth{
        color:var(--gold);
        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(--gold-soft),var(--gold));
        animation:loadBar 2s ease;
    }

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

<h5>Gold</h5>

<div class="row g-4">

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

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

            <p class="mb-0">
                <span class="growth">+4.3%</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">
    <a href="{{ route('user.gold_roi_income_report') }}">   <div class="gold-card">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="icon-wrap">
                    <i class="ti tabler-coins"></i>
                </div>
                <h4 class="amount">₹123</h4>
            </div>

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

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

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

</div>

@endsection