@extends('template')
@push('css')
<style>

[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction-item__link.button-link1{color: rgba(255, 255, 255, 1); background-color: rgba(26, 31, 113, 1);font-family: "Open Sans_Regular"; text-transform: uppercase; font-size: 14px; font-size: 0.875em; padding: 10px 30px;text-align:center;}
[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction-item__link.button-link1:hover,[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction-item__link.button-link1.active{color: rgba(255, 255, 255, 1) !important; background-color: rgba(255, 204, 0, 1) !important;}
[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction-item__link.button-link1 p {color: rgba(255, 255, 255, 1); font-weight:bold;}
[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction-item__link.button-link1 .fa{color: rgba(255, 255, 255, 1);font-size:60px;}
@media screen and (max-width: 767px){[module-id=nbcalltoaction_114].nbcalltoaction{padding: 60px 0px 60px !important; margin: 0px 0px 0px !important;}
[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction__title{font-size: 40px; font-size: 2.5em !important;}
[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction__subtitle{font-size: 16px; font-size: 1em !important;}
[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction-item__title{font-size: 35px; font-size: 2.1875em !important;}
[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction-item__subtitle{font-size: 16px; font-size: 1em !important;}
[module-id=nbcalltoaction_114].nbcalltoaction .nbcalltoaction-item__title-tag{font-size: 14px; font-size: 0.875em !important;}
}

label.control-label{font-weight:bold; color: rgba(26, 31, 113, 1);}
.border-lighten, .form-control, .card,.check-top-right{border: 1px solid #cecece;}
.form-control{display:block; padding: 5px 15px !important;border-radius: 5px;width:100%;}
.card{padding: 15px !important;border-radius: 5px;width:100%;margin-bottom: 15px;cursor:pointer;}
.input-checkbox{display: block;position: relative;padding-left: 25px !important;margin-bottom: 25px !important;cursor: pointer;font-size: 20px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.input-checkbox input{position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.input-checkbox .check{position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: #eee;}
.input-checkbox:hover input ~ .check {background-color: #ccc;}
.input-checkbox input:checked ~ .check {background-color: #2196F3;}
.check:after {content: "";position: absolute;display: none;}
.input-checkbox input:checked ~ .check:after {display: block;}
.input-checkbox .check:after {left: 9px;top: 5px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.check-top-right{padding:5px !important;position:absolute;right:15px;top:0;border-radius: 0 5px 0 0;}
.check-top-right input[type="checkbox"] {display:block; appearance: auto;}
.no-selection{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.nav-tab{align-items: inherit;}
.brand {cursor:pointer;padding:15px !important;}
.brand img{border-radius: 5px;}
.brand.active {background-color: rgba(255, 204, 0, 1)}
</style>
@endpush
@section('content')
    <section class="nbcalltoaction" module-id="nbcalltoaction_114" style=" padding: 80px 0px 60px;  margin: 0px 0px 0px; ">
        <div class="nbcalltoaction-container nb-container">
            <div class="nb-lg-12 nb-md-12 nb-sm-12 nb-xs-12">
                <div class="nbcalltoaction-item">
                    <div class="nbcalltoaction nbcalltoaction--row" style=""><div class="nbcalltoaction-wrapper">
                        <div class="nbcalltoaction-item__text-wrapper">
                            <div class="nbcalltoaction-item__title" style="font-family: &quot;Montserrat_Bold&quot; text-transform: uppercase; font-size: 50px; font-size: 3.125em; padding: 10px 0px 10px 0px;">
                                <h2 style="text-align: center;">Escolha a forma de pagamento e clique em Próximo!</h4>
                            </div>
                            <div class="nbcalltoaction-item__subtitle" style="font-family: &quot;Montserrat_Regular&quot; text-transform: none; font-size: 16px; font-size: 1em; padding: 10px 0px 10px 0px;">
                                <div class="nav-tab nbcalltoaction-item__buttons-wrapper nbcalltoaction-item__buttons-wrapper--center">
                                    <a class="nbcalltoaction-item__link button-link1 tab-link @if($payment_type=='pix') active @endif" href="{{route('simulates',[request('order_id')])}}?payment_type=pix">
                                        <i class="fa fa-brands fa-pix"></i>
                                        <p>PIX</p>
                                    </a>
                                    <a class="nbcalltoaction-item__link button-link1 tab-link @if($payment_type=='credit') active @endif" href="{{route('simulates',[request('order_id')])}}?payment_type=credit">
                                        <i class="fa fa-credit-card"></i>
                                        <p>Cartão de Crédito</p>
                                    </a>                                    
                                </div>
                                <div class="tab-content nbcalltoaction-item__buttons-wrapper nbcalltoaction-item__buttons-wrapper--center">
                                    <form class="tab-panel" id="simulate" style="margin-top: 25px; text-align:center;width:500px;" action="{{route('buyers',[request('order_id')])}}">
                                        <input type="hidden" name="payment_type" value="{{$payment_type}}">
                                        <div class="row" style="text-align:left;margin-bottom:15px;">
                                            @if($payment_type=='credit')
                                            <input type="hidden" name="brand" value="{{$brand}}">
                                            <p style="magin-top:25px;margin-bottom:25px;">Selecione a bandeira do seu cartão para ver o valor da simulação.</p>
                                            <div class="col-12" style="margin-bottom:25px;">
                                                <div class="row" style="justify-content: space-between;">
                                                    @foreach (['visa' => 'Visa', 'master' => 'Master', 'elo' => 'Elo', 'amex' => 'American Express', 'hipercard' => 'Hipercard'] as $alias => $b)
                                                    <a class="col brand {{$alias == $brand ? 'active' : ''}}" href="{{route('simulates',[request('order_id')])}}?payment_type=credit&brand={{$alias}}">
                                                        <img src="assets/img/brands/{{$alias}}.jpg" alt="{{$b}}">
                                                    </a>  
                                                    @endforeach
                                                </div>
                                            </div>
                                            @endif
                                            @if(count($installments) > 1)
                                            <p style="magin-top:25px;margin-bottom:25px;">Escolha a quantidade de parcelas que cabe melhor no seu bolso.</p>
                                            @endif
                                            @foreach ($installments as $installment)
                                            <div class="col-12">
                                                <label class="card">
                                                    <div class="row no-selection">
                                                        <div class="col-12">
                                                            <label class="control-label">{{$installment->installments > 1 ? "{$installment->installments}X de" : "À vista"}} </label>
                                                            <p>@decimal_brl($installment->amount) no {{$payment_type=='pix' ? 'PIX': 'Crédito'}}</p>
                                                        </div>
                                                    </div>
                                                    <div class="check-top-right">
                                                        <div class="input-checkbox">
                                                            <input type="radio" value="{{$installment->installments}}" name="installment" @if($loop->index == 0) checked @endif>
                                                            <span class="check"></span>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                            @endforeach
                                        </div>
                                        <button type="submit" class="nbcalltoaction-item__link button-link1" style="margin-top: 15px;">
                                            Próximo
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection