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

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


@section('content')
 <!-- [ breadcrumb ] start -->
                          <div class="page-header card">
                              <div class="row align-items-end">
                                  <div class="col-lg-8">
                                      <div class="page-header-title">
                                          <i class="feather icon-credit-card bg-c-blue"></i>
                                          <div class="d-inline">
                                              <h5>Investment Plans</h5>
                                             
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-lg-4">
                                      <div class="page-header-breadcrumb">
                                          <ul class=" breadcrumb breadcrumb-title">
                                              <li class="breadcrumb-item">
                                                  <a href="/accounts/dashboard"><i class="feather icon-home"></i></a>
                                              </li>
                                             
                                              <li class="breadcrumb-item">
                                                  <a href="#">Investment</a>
                                              </li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <!-- [ breadcrumb ] end -->
                      <div class="pcoded-inner-content">
                        <!-- Main-body start -->
                        <div class="main-body">
                            <div class="page-wrapper">
                                <!-- Page-body start -->
                                <div class="page-body">
                                
            	@if(Session::has('message'))
            	<div class="card">
		        <div class="row">
                    <div class="col-lg-12">
                        <div class="alert alert-success alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <i class="fa fa-check-circle"></i> {{ Session::get('message') }}
                        </div>
                    </div>
                </div> 
                </div>
                @endif
                	@if(Session::has('errmessage'))
		        <div class="row">
                    <div class="col-lg-12">
                        <div class="alert alert-danger alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <i class="fa fa-times-circle"></i> {{ Session::get('errmessage') }}
                        </div>
                    </div>
                </div>
                @endif
                @if(Session::has('sucmessage'))
		        <div class="row">
                    <div class="col-lg-12">
                        <div class="alert alert-success alert-dismissable">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <i class="fa fa-times-circle"></i> {{ Session::get('sucmessage') }}
                        </div>
                    </div>
                </div>
                @endif
                                    <!-- Inverse table card start -->
  
                                    <!-- Inverse table card end -->
                                    <style>
                                        body {
    min-height: 100vh;
    background: url("https://images.unsplash.com/photo-1598125443421-779f98323fe4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    font-family: Roboto;
    font-size: 16px;
}


.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4%;
    padding: 12% 0;
}

.cardx {
    padding: 50px;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid #000;
    backdrop-filter: blur(10px) !important;
    border-radius: 25px !important;
    color: #fff;
}

.card_title {
    font-weight: normal;
    font-size: 24px;
    margin-bottom: 20px;
}

.pricing {
    font-weight: normal;
    font-size: 24px;
}

.pricing .small {
    font-size: 16px;
}

hr {
    margin-top: 30px;
}

.features {
    margin: 40px 0;
    list-style-position: inside;
}

.features li {
    padding-bottom: 10px;
}

a.cta_btn {
    width: 100%;
    display: inline-block;
    text-align: center;
    background: rgba(21, 23, 24, 0.7);
    border-radius: 29px;
    padding: 20px 0;
    color: white;
    text-decoration: none;
    letter-spacing: 2px;
    transition: background .3s ease;
}

a.cta_btn:hover {
    background: #000;
}
.link {
    position: fixed;
    background-color: #D12322;
    padding: 23px 40px;
    right: -99px;
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    transform: rotate(-90deg);
    font-size: 18px;
    font-weight: 500;
    color: #FFF;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .1s ease-in-out;
}

.link i {
    padding-left: 7px;
}

.link:hover {
    text-decoration: underline;
    background-color: black;
}
@media only screen and (max-width: 1024px) {
    .grid {
        grid-template-columns: 1fr 1fr;
        gap: 2%;

    }
}

@media only screen and (max-width: 425px) {
    .grid {
        grid-template-columns: 1fr;
        gap: 2%;
        padding-bottom: 25%;
    }

    .container {
        padding: 0 1rem;
    }

    body {
        font-size: 14px;
    }

    .card {
        padding: 30px;
    }

    .card_title {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .pricing {
        font-size: 18px;
    }

    hr {
        margin-top: 50px;
    }

    a.cta_btn {
        font-size: 11px;
    }
}
                                    </style>
                                    <div class="container">
        <div class="grid">
              @if(!empty($plans))
            	@foreach($plans as $plan)
            <div class="cardx">
                <h2 class="card_title">	{{$plan->name}}</h2>
                <p class="pricing">{{system_settings('currency_symbol')}}{{$plan->price}}+</p>
                
                <hr>
                <ul class="features">
                    <li><strong>Minimum ROI: {{$plan->percs}}% {{$plan->intervals}}</strong> </li>
                    <li>Minimum: {{system_settings('currency_symbol')}}{{$plan->price}}</li>
                    <li>Maximum: {{system_settings('currency_symbol')}}{{$plan->max_price}}</li>
                <li>Wallet: @if(!empty($plan->getwallets()))
                   @foreach($plan->getwallets() as $key=>$planwallet)
                   {{$planwallet->wallet_name}} , 
                   
                   @endforeach
                   @endif
                   </li>
                    <li>Duration: {{$plan->expiration}} Days</li>
                   
                   
                </ul>
                <a data-toggle="modal" href="#" data-target="#planModal{{$plan->id}}" class="cta_btn">JOIN</a>
            </div>
            <div class="modal fade" id="planModal{{$plan->id}}" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Buy a Plan - ({{$plan->name}})<br/>
              Minimum : {{system_settings('currency_symbol')}}{{number_format($plan->price,2,'.',',')}}
              </h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <form role="form" method="post" action="{{ route('joinplan')}}">
                @csrf
                 <input type="hidden" name="inv_id" value="{{$plan->id}}" />
            <div class="modal-body">
                 <div class="form-group row">
                
                  </div>
                  <div class="form-group row">
                    
                    <div class="col-sm-10">
                      <label style="color:#000">Select Payment Wallet </label>  
                       <select name="wid" class="form-control" required>
                                          @if(!empty($plan->getwalletios()))
                                         @foreach($plan->getwalletios() as $key=>$wallet)
                                            <option value="{{$wallet->id}}">
                                                
                                                {{$wallet->dwallet()->wallet_name}} Account <small>({{$wallet->sym}})</small>  / {{number_format($wallet->balance,2,'.',',')}} {{system_settings('currency')}}
                                            </option>
                                            @endforeach
                                            @endif
                                        </select>
                    </div>
                  </div>
             
               <div class="form-group row">
                    
                    <div class="col-sm-10">
                      <label style="color:#000"> Enter the amount you want to use </label>  
                      <input type="number" name="pid" required class="form-control" style="color:#000" value="{{$plan->min_price}}" min="{{$plan->min_price}}" id="inputEmail3" placeholder="Enter Amount Here">
                    </div>
                  </div>
             
         
            
            </div>
            <div class="modal-footer justify-content-between">
              
              <button type="submit"  class="btn btn-primary">Submit</button>
            </div>
            </form>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
                @endforeach
                @endif
        </div>
    </div>

                                 
                                </div>
                                <!-- Page-body end -->
                            </div>
                        </div>
                        <!-- Main-body end -->

                        
                    </div>
@endsection