<!doctype html>
<html lang="en">
<head>
    <meta data-n-head="ssr" charset="utf-8">
    <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
    <meta data-n-head="ssr" data-hid="description" name="description" content="{{env('APP_NAME')}} APP">
    <title>{{env('APP_NAME')}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{asset('public/vip.css')}}">
    <link rel="stylesheet" href="{{asset('public/pop.css')}}">
    <style>
        .product-list-item .top .purchased[data-v-1c49ced6] {
            display: none;
        }
        .coming {
            position: absolute;
            top: 21px;
            right: 4px;
        }
    </style>
</head>
<body>
@include('alert-message')
<?php
    use \App\Models\PackageCategory;
    use \App\Models\Package;
    $menu = PackageCategory::get()->toArray();
    $packageOne = Package::where('Status', '!=','inactive')->whereNull('package_id')->get();
    $packagetwo = Package::where('Status', '!=','inactive')->where('tab', 'fixed')->get();
    $packagethree = Package::where('Status', '!=','inactive')->where('tab', 'event')->get();
?>
<div id="__nuxt">
    <div id="__layout">
        <div>
            <section class="products-page flex flex-col">
                <div class="products-page-header">
                    <div class="products-page-header-tabs">
                        <div data-key="0" class="tabActivate1 active" onclick="window.location.href='{{route('vip')}}'">Investible Products</div>
                        <div data-key="1" class="tabActivate2" onclick="window.location.href='{{route('my.vip')}}'">My Investment</div>
                    </div>
                </div>
                <div class="products-page-content flex-1">
                    <div class="van-tabs van-tabs--card">
                        <div class="van-tabs__content van-tabs__content--animated">
                            <div class="van-tabs__track" style="transform: translate3d(0%, 0px, 0px); transition-duration: 0.3s;">
                                <div role="tabpanel" class="van-tab__pane-wrapper">
                                    <div class="van-tab__pane">
                                        <!--   All Products   -->
                                        <div data-v-1c49ced6="" class="product-list" id="product">
                                            <div id="running_product">
                                                <link rel="stylesheet" href="{{asset('public/tab.css')}}">
                                                <style>
                                                    .tab-main-box {
                                                        padding: 10px 10px;
                                                    }
                                                </style>
                                                <div class="tab-teaser">
                                                    <div class="tab-menu">
                                                        <ul>
                                                            <li><a href="javascript:void(0)" class="active" data-rel="tab-1">{{$menu[0]['name']}}</a></li>
                                                            <li><a href="javascript:void(0)" data-rel="tab-2" class="">{{$menu[1]['name']}}</a></li>
                                                            <li><a href="javascript:void(0)" data-rel="tab-3" class="">{{$menu[2]['name']}}</a></li>
                                                        </ul>
                                                    </div>

                                                    <div class="tab-main-box">
                                                        <div class="tab-box" id="tab-1" style="display:block;">
                                                            @if($packageOne->count() > 0)
                                                            @foreach($packageOne as $key=>$element)
                                                                <?php
                                                                $myVip = \App\Models\Purchase::where('user_id', auth()->id())->where('package_id', $element->id)->where('status', 'active')->first();
                                                                ?>
                                                                <div data-v-1c49ced6="" class="product-list-item rounder" style="margin-top: 10px;width: 48%;position: relative;margin:10px 1%;">
                                                                    @if($element->status == 'coming')
                                                                        <div class="coming">
                                                                            <img src="{{asset('public/coming.png')}}" style="width: 100%;" alt="">
                                                                        </div>
                                                                    @endif
                                                                    <div class="product_image">
                                                                        <img style="width: 100%;height: 135px;border-radius: 1%;" src="{{asset($element->photo)}}" alt="">
                                                                    </div>

                                                                    <div>
                                                                        <h3 class="egbxyahv">{{$element->name}}</h3>
                                                                        <p class="egbxsdfeyahv">{{$element->title}}</p>
                                                                    </div>

                                                                    <div>
                                                                        <div style="display: flex;justify-content: space-between;">
                                                                            <div class="egbxya10hv">Day Income:</div>
                                                                            <?php
                                                                            $ddIncome = $element->commission_with_avg_amount != 0 ? $element->commission_with_avg_amount / $element->validity : 0;
                                                                            ?>
                                                                            <div class="egbxya10hv">{{price($ddIncome)}}</div>
                                                                        </div>
                                                                        <div style="display: flex;justify-content: space-between;margin: 10px 0;">
                                                                            <div class="egbxya10hv">Earnings Days:</div>
                                                                            <div class="egbxya10hv">{{$element->validity}}Day</div>
                                                                        </div>
                                                                        <div style="display: flex;justify-content: space-between;">
                                                                            <div class="egbxya10hv">Total Income:</div>
                                                                            <div class="egbxya10hv">{{price($element->commission_with_avg_amount)}}</div>
                                                                        </div>
                                                                    </div>

                                                                    <div>
                                                                        <h1 class="pkjn">{{price($element->price)}}</h1>
                                                                    </div>

                                                                    <div>
                                                                        @if($myVip)
                                                                            <button class="bbBtn" style="background: #0000a069;">Active</button>
                                                                        @else
                                                                            @if($element->status == 'coming')
                                                                                <button class="bbBtn" style="background: #0000a069;">Coming</button>
                                                                            @else
                                                                                <button class="bbBtn" onclick="openPop('{{$element->id}}', '{{$element->name}}', '{{price($element->price)}}', '{{price($element->commission_with_avg_amount)}}')">Buy Now</button>
                                                                            @endif
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                            @else
                                                                <img style="width: 100%;" src="{{asset('public/not-found.png')}}" alt="">
                                                            @endif
                                                        </div>
                                                        <div class="tab-box" id="tab-2">
                                                            @if($packagetwo->count() > 0)
                                                            @foreach($packagetwo  as $key=>$element)
                                                                <?php
                                                                $myVip = \App\Models\Purchase::where('user_id', auth()->id())->where('package_id', $element->id)->first();
                                                                ?>
                                                                <div data-v-1c49ced6="" class="product-list-item rounder"  style="margin-top: 10px;width: 48%;position: relative;margin:10px 1%;">
                                                                    @if($element->status == 'coming')
                                                                        <div class="coming">
                                                                            <img src="{{asset('public/coming.png')}}" style="width: 100%;" alt="">
                                                                        </div>
                                                                    @endif
                                                                    <div class="product_image">
                                                                        <img style="width: 100%;height: 135px;border-radius: 1%;" src="{{asset($element->photo)}}" alt="">
                                                                    </div>

                                                                    <div>
                                                                        <h3 class="egbxyahv">{{$element->name}}</h3>
                                                                        <p class="egbxsdfeyahv">{{$element->title}}</p>
                                                                    </div>

                                                                    <div>
                                                                        <div style="display: flex;justify-content: space-between;">
                                                                            <div class="egbxya10hv">Day Income:</div>
                                                                            <?php
                                                                            $ddIncome = $element->commission_with_avg_amount != 0 ? $element->commission_with_avg_amount / $element->validity : 0;
                                                                            ?>
                                                                            <div class="egbxya10hv">{{price($ddIncome)}}</div>
                                                                        </div>
                                                                        <div style="display: flex;justify-content: space-between;margin: 10px 0;">
                                                                            <div class="egbxya10hv">Earnings Days:</div>
                                                                            <div class="egbxya10hv">{{$element->validity}}Day</div>
                                                                        </div>
                                                                        <div style="display: flex;justify-content: space-between;">
                                                                            <div class="egbxya10hv">Total Income:</div>
                                                                            <div class="egbxya10hv">{{price($element->commission_with_avg_amount)}}</div>
                                                                        </div>
                                                                    </div>

                                                                    <div>
                                                                        <h1 class="pkjn">{{price($element->price)}}</h1>
                                                                    </div>

                                                                    <div>
                                                                        @if($myVip)
                                                                            <?php $dateChecker = new \Carbon\Carbon($myVip->validity); ?>
                                                                            @if($dateChecker->isPast())
                                                                                <button class="bbBtn" style="background: #0000a069;">Expired</button>
                                                                            @else
                                                                                <button class="bbBtn" style="background: #0000a069;">Active</button>
                                                                            @endif
                                                                        @else
                                                                            @if($element->status == 'coming')
                                                                                <button class="bbBtn" style="background: #0000a069;">Coming</button>
                                                                            @else
                                                                                <button class="bbBtn" onclick="openPop('{{$element->id}}', '{{$element->name}}', '{{price($element->price)}}', '{{price($element->commission_with_avg_amount)}}')">Buy Now</button>
                                                                            @endif
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                            @else
                                                                <img style="width: 100%;" src="{{asset('public/not-found.png')}}" alt="">
                                                            @endif
                                                        </div>
                                                        <div class="tab-box" id="tab-3">
                                                            @if($packagethree->count() > 0)
                                                            @foreach($packagethree as $key=>$element)
{{--                                                                    {{$element->status}}--}}
                                                                <?php
                                                                $myVip = \App\Models\Purchase::where('user_id', auth()->id())->where('package_id', $element->id)->first();
                                                                ?>
                                                                <div data-v-1c49ced6="" class="product-list-item rounder" style="margin-top: 10px;width: 48%;position: relative;margin:10px 1%;">
                                                                    @if($element->status == 'coming')
                                                                    <div class="coming">
                                                                        <img src="{{asset('public/coming.png')}}" style="width: 100%;" alt="">
                                                                    </div>
                                                                    @endif
                                                                    <div class="product_image">
                                                                        <img style="width: 100%;height: 135px;border-radius: 1%;" src="{{asset($element->photo)}}" alt="">
                                                                    </div>

                                                                    <div>
                                                                        <h3 class="egbxyahv">{{$element->name}}</h3>
                                                                        <p class="egbxsdfeyahv">{{$element->title}}</p>
                                                                    </div>

                                                                    <div>
                                                                        <div style="display: flex;justify-content: space-between;">
                                                                            <div class="egbxya10hv">Day Income:</div>
                                                                            <?php
                                                                            $ddIncome = $element->commission_with_avg_amount != 0 ? $element->commission_with_avg_amount / $element->validity : 0;
                                                                            ?>
                                                                            <div class="egbxya10hv">{{price($ddIncome)}}</div>
                                                                        </div>
                                                                        <div style="display: flex;justify-content: space-between;margin: 10px 0;">
                                                                            <div class="egbxya10hv">Earnings Days:</div>
                                                                            <div class="egbxya10hv">{{$element->validity}}Day</div>
                                                                        </div>
                                                                        <div style="display: flex;justify-content: space-between;">
                                                                            <div class="egbxya10hv">Total Income:</div>
                                                                            <div class="egbxya10hv">{{price($element->commission_with_avg_amount)}}</div>
                                                                        </div>
                                                                    </div>

                                                                    <div>
                                                                        <h1 class="pkjn">{{price($element->price)}}</h1>
                                                                    </div>

                                                                    <div>
                                                                        @if($myVip)
                                                                            <?php $dateChecker = new \Carbon\Carbon($myVip->validity); ?>
                                                                            @if($dateChecker->isPast())
                                                                                <button class="bbBtn" style="background: #0000a069;">Expired</button>
                                                                            @else
                                                                                <button class="bbBtn" style="background: #0000a069;">Active</button>
                                                                            @endif
                                                                        @else
                                                                            @if($element->status == 'coming')
                                                                                <button class="bbBtn" style="background: #0000a069;">Coming</button>
                                                                            @else
                                                                                <button class="bbBtn" onclick="openPop('{{$element->id}}', '{{$element->name}}', '{{price($element->price)}}', '{{price($element->commission_with_avg_amount)}}')">Buy Now</button>
                                                                            @endif
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                            @else
                                                                <img style="width: 100%;" src="{{asset('public/not-found.png')}}" alt="">
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @include('app.layout.menu')
            </section>
        </div>
    </div>
</div>

<div class="pop" style="display: none;">
    <div class="popContainer">
        <div class="popHeader">
            <h2 class="pname">Package</h2>
        </div>
        <div class="popBody">
            <h3>Are you sure registered this product</h3>
            <ol style="padding-left: 20px;">
                <li>Price: <span class="ppprice"></span></li>
                <li>Total Return : <span class="ppTotalPrice"></span></li>
            </ol>
        </div>
        <div class="popFooter" style="overflow: hidden;">
            <div style="width: 49%;float: left;margin-right: 2%">
                <button class="popBtn" onclick="closePop()">Cancel</button>
            </div>
            <div style="width: 49%;float: left;" id="sufferBtn">

            </div>
        </div>
    </div>
</div>

<script>
    function closePop() {
        let element = document.querySelector('.pop');
        element.style.display = 'none'
    }

    function openPop(packageId, packageName, packagePrice, packageTotalCommission, ) {
        document.querySelector('.pname').innerHTML = packageName;
        document.querySelector('.ppprice').innerHTML = packagePrice;
        document.querySelector('.ppTotalPrice').innerHTML = packageTotalCommission;
        let element = document.querySelector('.pop');
        element.style.display = 'block';

        document.querySelector('#sufferBtn').innerHTML = `
                <a class="packageBuyBtn popBtn" style="display:block;text-align:center;text-decoration:none;" href="{{url('purchase/confirmation')}}/${packageId}">Confirm</a>
            `
        {{--setAttribute('onclick', '{{url('purchase/confirmation')}}'+'/'+packageId);--}}
    }
</script>
@include('app.main.vip_js')
</body>
</html>
