@push('style')
<style>
    @import url("https://fonts.googleapis.com/css2?family=Poppins:weight@100;200;300;400;500;600;700;800&display=swap");


    .paymentbody {
 background-color:#fff;
 font-family: "Poppins", sans-serif;
 font-weight: 300;
}

.paymentbody  .container{

 /* height: 100vh; */

}

.accordion{

 border: none;
}

.accordion-header {
     padding: .5rem 1rem;
     margin-bottom: 0;
     background-color: rgba(0,0,0,.03);
     border-bottom: none;
 }

 .btn-light:focus {
     color: #212529;
     background-color: #e2e6ea;
     border-color: #dae0e5;
     box-shadow: 0 0 0 0.2rem rgba(216,217,219,.5);
 }

 .form-control{

   height: 50px;
border: 2px solid #eee;
border-radius: 6px;
font-size: 14px;
 }

 .form-control:focus {
color: #495057;
background-color: #fff;
border-color: #039be5;
outline: 0;
box-shadow: none;

}

.input{

position: relative;
}

.input i{

   position: absolute;
top: 16px;
left: 11px;
color: #989898;
}

.input input{

text-indent: 25px;
}

.accordion-text{

font-size: 13px;
margin-left: 6px;
}

.certificate-text{

font-size: 12px;
}


.billing{
font-size: 11px;
}  

.super-price{

   top: 0px;
font-size: 22px;
}

.super-month{

   font-size: 11px;
}


.line{
color: #bfbdbd;
}

.free-button{

   background: #1565c0;
height: 52px;
font-size: 15px;
border-radius: 8px;
}


.payment-accordion-body{

flex: 1 1 auto;
padding: 24px 1rem !important;

}
</style>
@endpush
    <!-- div class="container d-flex col-lg-12 justify-content-center mx-0 px-0 g-3" -->
        <div class="row w-100 g-3">   
 
            

            <div class="col-md-6">
                <span>Summary</span>

                <div class="card">

                <div class="d-flex justify-content-between p-3">

                    <div class="d-flex flex-column">

                    <span> {{isset($subscription_type) ? $subscription_type['type'] : '' }} <i class="fa fa-caret-down"></i></span>
                    <a href="#" class="billing">Save 20% with annual billing</a>
                    
                    </div>

                    <div class="mt-1">
                    <sup class="super-price"> {{number_format((isset($subscription_type) ? $subscription_type['price'] : 0), 2) }} €</sup>
                    <span class="super-month">/{{isset($subscription_type) ? $subscription_type['days'] : '' }}</span>
                    </div>
                    
                </div>

                <hr class="mt-0 line">

                <div class="p-3">

                    <div class="d-flex justify-content-between mb-2">

                    <span>Refferal Bonuses</span>
                    <span> </span>
                    
                    </div>

                    <div class="d-flex justify-content-between">

                    <span>IVA <i class="fa fa-clock-o"></i></span>
                    <span> </span>
                    
                    </div>
                    

                </div>

                <hr class="mt-0 line">


                <div class="p-3 d-flex justify-content-between">

                    <div class="d-flex flex-column">

                    <span>Today you pay(Euro)</span>
                    <small>After 30 days </small>
                    
                    </div>
                    <span> {{number_format((isset($subscription_type) ? $subscription_type['price'] : 0), 2) }} €</span>

                    

                </div>


                <div class="p-3">

                
                <div class="text-center">
                    <a href="#"> </a>
                </div>
                    
                </div>



                
                </div>
            </div>
              <div class="col-md-6 d-flex content-justify-center align-self-center  justify-content-center  pe-3">  

              <input type="hidden" name="paymentMethod" id="paymentMethod">
            <div class="d-flex pt-2 flex-row bd-highlight justify-content-center mb-2">
                <button type="button" class="btn btn-primary launch" data-bs-toggle="modal" data-bs-target="#staticBackdrop"> <i class="fa fa-rocket"></i> {{ __('applabels.subscribe') }}
                </button>
            </div>
              </div> <!-- col-md-6 -->
        </div>
    </div>


    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> 
        <div class="modal-body"> 
            <div class="text-right"> <i class="fa fa-close close" data-bs-dismiss="modal"></i> </div> <div class="tabs mt-3"> 
                <ul class="nav nav-tabs" id="myTab" role="tablist"> 
                @foreach ($payment_methods as $key => $method)
                    <li class="nav-item" role="presentation"> <a class="nav-method nav-link  @if ($key === array_key_first($payment_methods) )  active @endif " id="{{  str_replace(' ', '', $method['name'] ) }}-tab" data-bs-toggle="tab" href="#{{  str_replace(' ', '', $method['name'] ) }}" role="tab" aria-controls="{{  str_replace(' ', '', $method['name'] ) }}" aria-selected="true">   <img src="{{ $method['iconurl'] }}" width="80"> </a> </li> 
                @endforeach
                </ul> 
            <div class="tab-content" id="myTabContent"> 
               @foreach ($payment_methods as $key => $method)
                <div class="tab-pane fade @if ($key === array_key_first($payment_methods) ) show active @endif" id="{{  str_replace(' ', '', $method['name'] ) }}" role="tabpanel" aria-labelledby="{{ $method['name'] }}-tab"> 
                    <div class="px-5 my-5">  
                            <div class="inputbox mb-3"> 
                                <input type="hidden" name="paymentMethod" class="form-control" value="{{ $method['name'] }}" required="required"> 
                                    <span>{{ $method['name'] }}</span> 
                                    {{ $method['description'] }} <br> {{ $method['code'] }}
                            </div> 
                            <div class="pay px-5 mx-auto text-center"> <button class="btn btn-primary btn-block btn-pay" id="{{ str_replace(' ', '', $method['name'] ) }}btn">SUBSCREVER</button> 
                        </div> 
                    </div> 
                </div> 
                @endforeach
                 
            </div> 
        </div> 
    </div> </div> </div>
</div>