@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: #20232b;
            --card2: #2b3038;
            --border: #4a5360;
            --silver: #bfc7d1;
            --silver-soft: #8c98a8;
            --text: #e6eaf0;
            --muted: #9aa3af;
        }

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

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

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

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

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

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

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

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

        @keyframes loadBar {
            from {
                width: 0;
            }

            to {
                width: 74%;
            }
        }
    </style>

    <h5>Silver</h5>

    <div class="row g-4">

        <div class="col-lg-3 col-md-6">
            <a href="{{ route('user.silver_deposit') }}" class="silver-link">
                <div class="silver-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">Silver 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">
            <a href="{{ route('user.silver_roi_income_report') }}" class="silver-link">
                <div class="silver-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">Silver 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>

@endsection