<html lang="en" translate="no"
      style="--vh: 7.38px; --primary: #114fee; --bg: #000; --bg-tab: transparent; --bg-tabbar: linear-gradient(180deg,#120938,#0b0822); --bg-input: transparent; --btn-bg: linear-gradient(113.99deg,#114fee 6.12%,#b654fd 83.22%);">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/index-hgAkstFo.css">
    <title>{{env('APP_NAME')}}</title>
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/default-B-suEvNA.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/ContainerCard-CZ4SLchf.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/BaseHtml-CEbVem4v.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/BaseMainBtn-8WfiNfVu.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/_type_-BaxNIEn8.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/VideoCard-DqKopoFF.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/index-CCZdQeyK.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/BaseInput-QBaNTw53.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/withdraw-CySGs0HD.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/index-FxcqbBCi.css">
    <link rel="stylesheet" href="{{asset('public/app')}}/assets/index-DSQbqgES.css">
</head>

<body class="">
<div id="app" data-v-app="" class="a-t-1 no-1">
    <div class="box-border w-full">
        <div data-v-b5431ff1="" class="navigation" style="">
            <div data-v-b5431ff1="" class="navigation-content">Product Description
                <div data-v-b5431ff1="" class="tools">
                    <div data-v-b5431ff1=""
                         onclick="window.location.href='{{route('dashboard')}}'"
                         class="icon cursor-pointer i-material-symbols-arrow-back-ios-new-rounded"></div>
                    <div data-v-b5431ff1="" id="navigation-right" class="cursor-pointer"></div>
                </div>
            </div>
        </div>
        <div data-v-33a7ffc6="" class="bg-wrap second-wrap invest-wrap">
            <div data-v-33a7ffc6="" class="banner"><img data-v-33a7ffc6="" class="w-full h-132px"
                                                        src="{{asset('public/app')}}/assets/invest-top-bg-CmtHdXsv.png"></div>
            <div data-v-33a7ffc6="" class="container">
                <div data-v-33a7ffc6="" class="header">
                    <div data-v-33a7ffc6="" class=":uno: base-logo flex items-center w-96px! h-96px!"><img
                            class="site-img h-full w-full"
                            src="https://api.h5metamax.vip/static/image/6646d7580447.webp" draggable="false" alt="logo"
                            style="border-radius: 50%;"></div>
                    <div data-v-33a7ffc6="" class="record-btn">Investment Record</div>
                </div>

                <div data-v-33a7ffc6="" class="product-wrap">
                    <div data-v-33a7ffc6="" class="title">Description Every Details</div>

                    @foreach(\App\Models\Package::where('status', 'active')->get() as $key=>$element)
                    <div data-v-33a7ffc6="" class=":uno: container-card relative rd-$card-radius p-$mg c-$btn-text p-0! product-card">
                        <div data-v-33a7ffc6="" class="top">
                            <div data-v-33a7ffc6="" class="name">{{$element->name}}</div>
                            <div data-v-33a7ffc6="" class="profit">Daily income {{price($element->commission_with_avg_amount / $element->validity)}}</div>
                        </div>
                        <div data-v-33a7ffc6="" class="info">
                            <div data-v-33a7ffc6=""><p data-v-33a7ffc6="" class="p">Every Day income after 24 hour</p>
                                <p data-v-33a7ffc6="" class="p">Fixed Price ：{{price($element->price)}}</p>
                                <p data-v-33a7ffc6="" class="p">Daily Income : {{price($element->commission_with_avg_amount / $element->validity)}}</p>
                                <p data-v-33a7ffc6="" class="p">Total Income : {{price($element->commission_with_avg_amount)}}</p>
                                <p data-v-33a7ffc6="" class="p">Investment period：{{$element->validity}} Days</p>
                            </div>
                            <button data-v-33a7ffc6="" class="invest-btn" onclick="window.location.href='{{route('vip.confirm', $element->id)}}'">Invest now</button>
                        </div>
                    </div>
                    @endforeach

                    <div style="height: 150px;"></div>
                </div>
            </div>
        </div>
        @include('app.layout.manu')
    </div>
    <div></div>
</div>



<div data-v-app=""></div>
<div role="dialog" tabindex="0" class="van-popup van-popup--center van-toast van-toast--middle van-toast--loading"
     style="z-index: 2006; display: block">
    <div class="van-loading van-loading--circular van-toast__loading" aria-live="polite" aria-busy="true"><span
            class="van-loading__spinner van-loading__spinner--circular"><svg class="van-loading__circular"
                                                                             viewBox="25 25 50 50"><circle cx="50"
                                                                                                           cy="50"
                                                                                                           r="20"
                                                                                                           fill="none"></circle></svg></span>
    </div></div>

<script>
    window.onload = function() {
        document.querySelector('.van-toast--loading').style.display = 'none';
    };
</script>
</body>
</html>
