@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%;}
.form-control[readonly] {opacity: .6 !important;background: #ddd !important; border-color: #ddd !important;}
.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)}
.text-danger{color: #ea4040;}
.form-input{margin-bottom:15px;}


</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;">Informe seus dados cadastrais 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="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_submit',[request('order_id')])}}" method="post">
                                        <input type="hidden" name="payment_type" value="{{$payment_type}}">
                                        @if($payment_type=='credit')
                                        <input type="hidden" name="brand" value="{{$brand}}">
                                        @endif
                                        <div class="row" style="text-align:left;margin-bottom:15px;">
                                            <div class="col-6 form-input">
                                                <label class="control-label">CPF ou CNPJ <i class="fa fa-asterisk text-danger"></i></label>
                                                <input class="form-control input-doc" name="doc" required>
                                            </div>
                                            <div class="col-12 form-input">
                                                <label class="control-label">Nome Completo <i class="fa fa-asterisk text-danger"></i></label>
                                                <input class="form-control" name="name" required>
                                            </div>                                            
                                            <div class="col-6 form-input">
                                                <label class="control-label">Aniversário <i class="fa fa-asterisk text-danger"></i></label>
                                                <input class="form-control input-date" name="birthdate" required>
                                            </div>
                                            <div class="col-6 form-input">
                                                <label class="control-label">Celular <i class="fa fa-asterisk text-danger"></i></label>
                                                <input class="form-control input-cell" name="cell_number" required>
                                            </div>
                                            <div class="col-12 form-input">
                                                <label class="control-label">E-mail</label>
                                                <input class="form-control" name="email" required>
                                            </div>

                                            <div class="col-12 form-input"><p style="font-size:20px;">Endereço</p></div>

                                            <div class="col-4 form-input">
                                                <label class="control-label">CEP <i class="fa fa-asterisk text-danger"></i></label>
                                                <input class="form-control input-cep" name="address[postal_code]" required>
                                            </div>
                                            <div class="col-8 form-input">
                                                <label class="control-label">Endereço <i class="fa fa-asterisk text-danger"></i></label>
                                                <input class="form-control" name="address[street]" required>
                                            </div>
                                            <div class="col-4 form-input">
                                                <label class="control-label">Número</label>
                                                <input class="form-control" name="address[number]">
                                            </div>
                                            <div class="col-8 form-input">
                                                <label class="control-label">Complemento</label>
                                                <input class="form-control" name="address[complement]">
                                            </div>
                                            <div class="col-5 form-input">
                                                <label class="control-label">Bairro <i class="fa fa-asterisk text-danger"></i></label>
                                                <input class="form-control" name="address[neighborhood]" required>
                                            </div>
                                            <div class="col-5 form-input">
                                                <label class="control-label">Cidade <i class="fa fa-asterisk text-danger"></i></label>
                                                <input class="form-control" name="address[city]" required>
                                            </div>
                                            <div class="col-2 form-input">
                                                <label class="control-label">UF <i class="fa fa-asterisk text-danger"></i></label>
                                                <select class="form-control" name="address[state]" required>
                                                @foreach (['AC','AM','AL','AP','BA','CE','DF','ES','GO','MA','MG','MS','MT','PA','PB','PE','PI','PR','RJ','RN','RO','RR','RS','SE','SC','SP','TO'] as $uf)
                                                    <option value="{{$uf}}">{{$uf}}</option>
                                                @endforeach
                                                </select>
                                            </div>
                                        </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
@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<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";
var maskDoc = function(val) {return val.replace(/\D/g, '').length > 11 ? '00.000.000/0000-00' : '000.000.000-009';};
$('.input-doc').mask(maskDoc, {placeholder: '000.000.000-00',onKeyPress: function(doc, e, field, options) {field.mask(maskDoc.apply({}, arguments), options);}}).on('paste', function(e){var d = e.originalEvent.clipboardData.getData('Text');$(this).val(d);$(this).mask(maskDoc);$(this).val(d);});
$(".input-date").mask('00/00/0000',{placeholder:"  /  /    "});
$('.input-cell').mask('(00) 00000-0000',{placeholder:"(  )      -    "});
$('.input-cep').mask('00000-000', {
    onComplete: function(cep, e) {
        if(cep) {
            $.ajax({
                url: 'https://viacep.com.br/ws/'+cep+'/json/',
                data: {postal_code:cep}, 
                success:function(d){
                    $(e.currentTarget).closest("form").find("input[name*='[street]']").val(d.logradouro);
                    $(e.currentTarget).closest("form").find("input[name*='[neighborhood]']").val(d.bairro);
                    $(e.currentTarget).closest("form").find("input[name*='[city]']").prop('readonly',true).val(d.localidade);
                    $(e.currentTarget).closest("form").find("select[name*='[state]']").attr('readonly',true).val(d.uf).trigger('change');
                },
                error: function(d){
                    $(e.currentTarget).closest("form").find("input[name*='[street]']").val('');
                    $(e.currentTarget).closest("form").find("input[name*='[neighborhood]']").val('');
                    $(e.currentTarget).closest("form").find("input[name*='[city]']").prop('readonly',false).val('');
                    $(e.currentTarget).closest("form").find("select[name*='[state]']").attr('readonly',false).val('');
                }
            });
        } else {
            $(e.currentTarget).closest("form").find("input[name*='[street]']").val('');
            $(e.currentTarget).closest("form").find("input[name*='[neighborhood]']").val('');
            $(e.currentTarget).closest("form").find("input[name*='[city]']").prop('readonly',false).val('');
            $(e.currentTarget).closest("form").find("select[name*='[state]']").attr('readonly',false).val('');
        }
    }
});
})}</script>

@if(session('message'))
<script>
Swal.fire({
  icon: 'error',
  title: 'Oops...',
  html: '{!!session("message")!!}',
})
</script>
@endif
@endpush