@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;}
</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;">Agora só efetuar o pagamento!</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="tab-content nbcalltoaction-item__buttons-wrapper nbcalltoaction-item__buttons-wrapper--center">
                                    @if($payment_type=='credit')
                                    <form class="tab-panel" style="margin-top: 25px; text-align:center;width:500px;" action="{{route('payments',[request('order_id')])}}">
                                        <input type="hidden" name="paymen_type" value="{{$payment_type}}">
                                        
                                        <div class="row" style="text-align:left;margin-bottom:15px;">
                                            
                                            <input type="hidden" name="brand" value="{{$brand}}">
                                            <p style="magin-top:25px;margin-bottom:25px;">Selecione a bandeira do seu cartã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)
                                                    <label class="col brand {{$alias == $brand ? 'active' : ''}}">
                                                        <img src="assets/img/brands/{{$alias}}.jpg" alt="{{$b}}">
                                                        <input type="checkbox" name="brand" value="{{$alias}}">
                                                    </label>  
                                                    @endforeach
                                                </div>
                                            </div>                                            
                                        </div>   
                                        <button type="submit" class="nbcalltoaction-item__link button-link1" style="margin-top: 15px;">
                                            Confirmar
                                        </button>                                        
                                    </form>
                                    @else
                                    <div class="panel">
                                        <div class="col-12">
                                            <label class="control-label">Código PIX</label>
                                            <input class="form-control" value="{{$pix->qrcode}}">
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>window.onload = (event) => {$(function(){"use strict";})}</script>
@endpush