@extends('template.coin.layouts.base')

@section('title', __('My Plans'))

@section('css')
<link href="{{getTemplateFiles('coin')}}/assets/user/css/app.css?ver=132" type="text/css" rel="stylesheet"> 
<style>
    .nk-plan-start::after {
    font-family: Nioicon;
    vertical-align: middle;
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgb(128, 148, 174);
    margin-left: -0.7rem;
    border-width: initial !important;
    border-style: none !important;
    border-color: initial !important;
    border-image: initial !important;
}
</style>
@endsection

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
          
            
            <div class="nk-block-head">
                <div class="nk-block-head-sub"><span>Investment</span></div>
                <div class="nk-block-between-md g-4">
                    <div class="nk-block-head-content">
                        <h2 class="nk-block-title fw-normal">Invested Plans
</h2>
                        <div class="nk-block-des"><p>At a glance summary of your investment.</p></div>
                    </div>
                    <div class="nk-block-head-content">
                        <ul class="nk-block-tools gx-3">
                          
                            <li>
                                <a href="{{secure_url('deposits')}}" class="btn btn-primary"><span>Deposit</span> <em class="icon ni ni-arrow-long-right"></em></a>
                            </li>
                            <li>
                                <a href="{{secure_url('withdrawals')}}" class="btn btn-dim btn-outline-light"><span>Withdraw</span> <em class="icon ni ni-arrow-long-right"></em></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="nk-block">
    <div class="row gy-gs">
        <div class="col-md-6 col-lg-5 col-xxl-4">
            <div class="card card-full card-bordered card-wg on-left is-primary">
                <div class="card-inner">
                    <div class="nk-wgacc">
                        <div class="nk-wgacc-title text-base">
                           Total Investment
                            <em class="icon ni ni-info fs-13px text-soft nk-tooltip" title="" data-original-title="The available balance in your investment account."></em>
                        </div>
                        <div class="nk-wgacc-group flex-lg-nowrap gx-4">
                            <div class="nk-wgacc-sub">
                                <div class="nk-wgacc-amount">
                                    <div class="number number-md">{{__format_number($total_invested->count)}} <small class="currency">{{$user->user_curr()}}</small></div>
                                </div>
                                <div class="nk-wgacc-subtitle">Total Invested</div>
                            </div>
                           <div class="nk-wgacc-sub">
                                                    <span class="nk-wgacc-sign text-soft"><em class="icon ni ni-plus"></em></span>
                                                    <div class="nk-wgacc-amount">
                                                        <div class="number number-sm">{{__format_number($total_roi->count)}} <small class="currency">{{$user->user_curr()}}</small></div>
                                                    </div>
                                                    <div class="nk-wgacc-subtitle">Total Profit</div>
                                                </div>
                        </div>
                    </div>
                
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-7 col-xxl-8">
            <div class="card card-bordered">
                <div class="card-inner-group">
                    <div class="card-inner">
                        <div class="row gy-gs">
                            <div class="col-md-12">
                                <div class="nk-wgacc">
                                    <div class="nk-wgacc-group flex-md-nowrap gx-4">
                                        <div class="flex-shrink-0">
                                            <div class="nk-wgacc-title text-base">
                                                Total Profit
                                                <em class="icon ni ni-info fs-13px text-soft nk-tooltip" title="" data-original-title="The investment currently actived without pending."></em>
                                            </div>
                                            <div class="nk-wgacc-group flex-md-nowrap gx-4">
                                                <div class="nk-wgacc-sub">
                                                    <div class="nk-wgacc-amount">
                                                        <div class="number number-md">{{__format_number($active_invested->count)}} <small class="currency">{{$user->user_curr()}}</small></div>
                                                    </div>
                                                    <div class="nk-wgacc-subtitle">Currently Invested</div>
                                                </div>
                                                <div class="nk-wgacc-sub">
                                                    <span class="nk-wgacc-sign text-soft"><em class="icon ni ni-plus"></em></span>
                                                    <div class="nk-wgacc-amount">
                                                        <div class="number number-sm">{{__format_number($active_roi->count)}} <small class="currency">{{$user->user_curr()}}</div>
                                                    </div>
                                                    <div class="nk-wgacc-subtitle">Approx Profit</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="nk-wgacc-sub flex-grow-1 ml-lg-1 ml-xxl-5 d-md-none d-lg-block">
                                            <div class="nk-wgacc-ck lg mb-0">
                                                <div class="chartjs-size-monitor">
                                                    <div class="chartjs-size-monitor-expand"><div class=""></div></div>
                                                    <div class="chartjs-size-monitor-shrink"><div class=""></div></div>
                                                </div>
                                                <canvas class="chart-liner chartjs-render-monitor" id="dailyInvestment" style="display: block; width: 203px; height: 95px;" width="203" height="95"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                </div>
            </div>
        </div>
    </div>
</div>
@if($active_plans->isNotEmpty())

<div class="nk-block nk-block-lg">
    <div class="nk-block-head-sm">
        <div class="nk-block-head-content">
            <h5 class="nk-block-title" style="color:green">Active Plans <span class="count text-base">({{$active_plans->count()}})</span></h5>
        </div>
    </div>

    <div class="nk-plan-list">
        @foreach($active_plans as $active_plan)
        <div class="nk-plan-item">
            <div class="nk-plan-icon is-running">
                <em class="icon ni ni-update"></em>
            </div>
            <div class="nk-plan-info w-max-275px">
                <div class="nk-plan-name">{{$active_plan->dplan()->name}}</div>
                <div class="nk-plan-desc">Invested: <span class="amount">{{__format_number($active_plan->amount)}} {{$user->user_curr()}}</span></div>
            </div>
            <div class="nk-plan-term">
                <div class="nk-plan-start nk-plan-order">
                    <span class="nk-plan-label text-soft">Start Date</span>
                    <span class="nk-plan-value date">{{__date_parse($active_plan->activated_at)}}</span>
                </div>
                <div class="nk-plan-end nk-plan-order">
                    <span class="nk-plan-label text-soft">End Date</span>
                    <span class="nk-plan-value date">@if(!empty($active_plan->end_date)) {{__date_parse($active_plan->end_date)}} @else Unlimited @endif</span>
                </div>
            </div>
            <div class="nk-plan-amount">
                
                <div class="nk-plan-amount-b nk-plan-order">
                    <span class="nk-plan-label text-soft">
                        Profit
                    </span>
                    <span class="nk-plan-value amount">{{__format_number($active_plan->roi)}} {{$user->user_curr()}}</span>
                </div>
            </div>
            <div class="nk-plan-more">
                <a class="btn btn-icon btn-lg btn-round btn-trans" href="{{route('myinvestment.plan' , $active_plan->txn_id)}}"><em class="icon ni ni-forward-ios"></em></a>
            </div>
            <div class="nk-plan-progress">
                <div class="progress-bar" data-progress="0" style="width: 0%;"></div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@else

@endif

@if($paused_plans->isNotEmpty())
<div class="nk-block nk-block-lg">
    <div class="nk-block-head-sm">
        <div class="nk-block-between">
            <div class="nk-block-head-content">
                <h5 class="nk-block-title" style="color:red">Paused Plans <span class="count text-base">({{$paused_plans->count()}})</span></h5>
            </div>
            
        </div>
    </div>

    <div class="nk-plan-list">
       
        
        @foreach($paused_plans as $paused_plan)
        <div class="nk-plan-item">
            <div class="nk-plan-icon is-running">
                <em class="icon ni ni-pause"></em>
            </div>
            <div class="nk-plan-info w-max-275px">
                <div class="nk-plan-name">{{$paused_plan->dplan()->name}}</div>
                <div class="nk-plan-desc">Invested: <span class="amount">{{__format_number($paused_plan->amount)}} {{$user->user_curr()}}</span></div>
            </div>
            <div class="nk-plan-term">
                <div class="nk-plan-start nk-plan-order">
                    <span class="nk-plan-label text-soft">Start Date</span>
                    <span class="nk-plan-value date">{{__date_parse($paused_plan->activated_at)}}</span>
                </div>
                <div class="nk-plan-end nk-plan-order">
                    <span class="nk-plan-label text-soft">End Date</span>
                    <span class="nk-plan-value date">@if(!empty($paused_plan->end_date)) {{__date_parse($paused_plan->end_date)}} @else Unlimited @endif</span>
                </div>
            </div>
            <div class="nk-plan-amount">
                
                <div class="nk-plan-amount-b nk-plan-order">
                    <span class="nk-plan-label text-soft">
                        Profit
                    </span>
                    <span class="nk-plan-value amount">{{__format_number($paused_plan->roi)}} {{$user->user_curr()}}</span>
                </div>
            </div>
            <div class="nk-plan-more">
                <a class="btn btn-icon btn-lg btn-round btn-trans" href="{{route('myinvestment.plan' , $paused_plan->txn_id)}}"><em class="icon ni ni-forward-ios"></em></a>
            </div>
            <div class="nk-plan-progress">
                <div class="progress-bar" data-progress="0" style="width: 0%;"></div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endif

@if($inactive_plans->isNotEmpty())
<div class="nk-block nk-block-lg">
    <div class="nk-block-head-sm">
        <div class="nk-block-between">
            <div class="nk-block-head-content">
                <h5 class="nk-block-title">Inactive Plans <span class="count text-base">({{$inactive_plans->count()}})</span></h5>
            </div>
           
        </div>
    </div>

    <div class="nk-plan-list">
       
        
        @foreach($inactive_plans as $inactive_plan)
        <div class="nk-plan-item">
            <div class="nk-plan-icon is-running">
                <em class="icon ni ni-offer"></em>
            </div>
            <div class="nk-plan-info w-max-275px">
                <div class="nk-plan-name">{{$inactive_plan->dplan()->name}}</div>
                <div class="nk-plan-desc">Invested: <span class="amount">{{__format_number($inactive_plan->amount)}} {{$user->user_curr()}}</span></div>
            </div>
            <div class="nk-plan-term">
                <div class="nk-plan-start nk-plan-order">
                    <span class="nk-plan-label text-soft">Start Date</span>
                    <span class="nk-plan-value date">{{__date_parse($inactive_plan->activated_at)}}</span>
                </div>
                <div class="nk-plan-end nk-plan-order">
                    <span class="nk-plan-label text-soft">End Date</span>
                    <span class="nk-plan-value date">{{__date_parse($inactive_plan->end_date)}}</span>
                </div>
            </div>
            <div class="nk-plan-amount">
                
                <div class="nk-plan-amount-b nk-plan-order">
                    <span class="nk-plan-label text-soft">
                        Profit
                    </span>
                    <span class="nk-plan-value amount">{{__format_number($inactive_plan->roi)}} {{$user->user_curr()}}</span>
                </div>
            </div>
            <div class="nk-plan-more">
                <a class="btn btn-icon btn-lg btn-round btn-trans" href="{{route('myinvestment.plan' , $inactive_plan->txn_id)}}"><em class="icon ni ni-forward-ios"></em></a>
            </div>
            <div class="nk-plan-progress">
                <div class="progress-bar" data-progress="0" style="width: 0%;"></div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endif

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

@endsection