@extends('layouts.client_template')
@section('content')
<main class="OpenNewAcc">
    <!-- start banner -->
    <div class="green_part"></div>
    <section class="banner choose_plan spacer bg-back-blue">
      <div class="Open_new_banner container">
        <div class="row my_info align-items-center justify-content-end pb-lg-5">
          <div class="bg_left">
              <img src="{{asset('images/open_left.png')}}" alt="">
            </div>
            <div class="bg_right">
              <img src="{{asset('images/open_right.png')}}" alt="">
            </div>
          <div class="col-12 Open_banner_title">
              <h1 class="text-orange text-center">Choose the best plan for you</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis </p>
          </div>
        </div>
      </div>
    </section>
    <!-- end banner -->

<style>


@media (max-width: 1567px){
.horizontal_boxes .h_box {
    width: 40% !important;

}
}

.newdesigngp[type="radio"] {
    display: none;
}

.newdesigngp[type="radio"]:not(:disabled)~.newdesigngplbl {
    cursor: pointer;
}

.newdesigngp[type="radio"]:disabled~.newdesigngplbl {
    color: hsla(150, 5%, 75%, 1);
    border-color: hsla(150, 5%, 75%, 1);
    box-shadow: none;
    cursor: not-allowed;
}

.newdesigngplbl {
    height: 100%;
    display: block;
    background: #fff;
    border: 2px solid #ea7648;
    border-radius: 5px;
    padding: 3rem 1rem;
    margin-bottom: 0rem;
    text-align: center;
    box-shadow: 0px 3px 10px -2px hsl(150deg 5% 65% / 50%);
    position: relative;
}

.newdesigngp[type="radio"]:checked+.newdesigngplbl {
    background: hsla(0deg, 0%, 94%, 1);
    color: hsla(215, 0%, 100%, 1);
    box-shadow: 0px 1px 10px #7b90a7;
}

.newdesigngp[type="radio"]:checked+.newdesigngplbl::after {
    color: hsla(215, 5%, 25%, 1);
    font-family: FontAwesome;
    border: 2px solid #ea7648;
    content: "\f00c";
    font-size: 24px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    background: hsla(0deg, 0%, 94%, 1);
    box-shadow: 0px 2px 5px -2px hsla(0, 0%, 0%, 0.25);
}

.single-account {
    margin-bottom: 40px;
}

.single-account.has-error .newdesigngplbl {
    border: 2px solid #ff0000;
}

.single-account h3 {
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
}

.single-account h3 .gpttl {
    color: #f37b4c;
}

.single-account h3 {
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
    color: #ffffff;
    font-weight: 600;
    font-size: 22px;
}

.twoclm {
    display: flex;
    max-width: 230px;
    margin: 0 auto;
    padding: 5px 0px;
}

.nameclm {
    flex-basis: 0;
    flex-grow: 1;
    text-align: left;
    color: #888;
    font-weight: 500;
}

.leverage {
    padding: 7px 8px;
    height: 30px;
}

.valclm {
    color: #ffffff;
}

.accountbttn {
    text-align: center;
}

.accountbttn button {
    width: 200px;
}

#changeleverage .form-control {
    margin-bottom: 0;
}

#changeleverage .close {
    color: #ff0000;
    opacity: 1;
}
</style>
<!-- <section class="content-header">
    <h4 class="mainsection-title"><i class="fa fa-group"></i>&nbsp;&nbsp; Add Account</h4>
</section> -->

<section class="content">
    <div class="flash-message">
        @foreach(['danger','warning','success','info'] as $msg)
        @if(Session::has('alert-'.$msg))
        <p class="alert alert-{{ $msg }}">{{ Session::get('alert-'.$msg) }} <a href="#" class="close"
                data-dismiss="alert" aria-label="close">&times;</a></p>
        @endif
        @endforeach
    </div>
    @if(count($groups) > 0)
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <form class="" role="form" method="POST" action="{{ url('/client/openaccountstore') }}"
                enctype="multipart/form-data">
                {{ csrf_field() }}

                @foreach($groups as $key=>$val)
                <section class="horizontal_boxes container">
                

                    <div class="main_horizontal row align-items-center justify-content-center">
                        <div class="h_box {{ $errors->has('group') ? ' has-error' : '' }}">        
                            <input type="radio" @if($key == '0') checked @endif id="control_0{{$key}}" class="newdesigngp" name="group"
                                value="{{$val->mtgroup}}">
                                <label class="newdesigngplbl  rounded-3 box-shadow" for="control_0{{$key}}">                    
                            <div class="h_box_title">
                                <h3>{{$val->name}}</h3>
                            </div>
                            <div class="h_box_subtitle d-flex justify-content-center align-items-center">
                                <span class="text-black fw-medium px-3">$</span><h2 class="text-black m-0 fw-medium px-3">{{$val->minimum_deposit}}</h2><div class="px-3"><p>min</p><p>deposit</p></div>
                            </div>
                            <div class="h_box_contant d-flex justify-content-center">
                                <div>
                                    <div class="hbox_details">
                                        <b class="text-black fw-bold">Spread from :</b>
                                    </div>
                                    <div class="hbox_details">
                                        <b class="text-black fw-bold">Platform :</b>
                                    </div>
                                    <div class="hbox_details">
                                        <b class="text-black fw-bold">Commission :</b>
                                    </div>
                                    <div class="hbox_details">
                                        <b class="text-black fw-bold">Levarage :</b>
                                    </div>
                                    <div class="hbox_details">
                                        <b class="text-black fw-bold">Swap :</b>
                                    </div>
                                </div>
                                <div>
                                    <div class="hbox_details">
                                        <span class="text-black">{{$val->spread_from}}</span>
                                    </div>
                                    <div class="hbox_details">
                                        <span class="text-black">Vertex</span>
                                    </div>
                                    <div class="hbox_details">
                                        <span class="text-black">{{$val->commission}}</span>
                                    </div>
                                    <div class="hbox_details">
                                        <span class="text-black">1:500</span>
                                    </div>
                                    <div class="hbox_details">
                                        <span class="text-black">{{$val->swap}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                @endforeach
                
              
                <div class="accountbttn">
                    
                    <button class="plans_btn btn btn-danger" type="submit"
                        onclick="this.disabled=true;this.value='Sending, please wait...';this.form.submit();">Submit</button>
                </div>
            </form>
        </div>
    </div>
    @endif
</section>
</main>
@endsection