@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;}
textarea {resize: none;}

</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;">Faça pagamentos dos seus debitos.</h2>
                                <h4 style="text-align: center;">Faça a consulta e realize o pagamento parcelado no cartão ou PIX</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 active" href="#consultar-debitos-veiculo">
                                        <i class="fa fa-car"></i>
                                        <p>Consultar Débitos do Veículo</p>
                                    </a>
                                    <a class="nbcalltoaction-item__link button-link1 tab-link" href="#pagar-um-boleto">
                                        <i class="fa fa-barcode"></i>
                                        <p>Pagar um Boleto</p>
                                    </a>                                    
                                </div>
                                <div class="tab-content nbcalltoaction-item__buttons-wrapper nbcalltoaction-item__buttons-wrapper--center">
                                    <form class="tab-panel" id="consultar-debitos-veiculo" style="margin-top: 25px; text-align:center;" action="{{route('debits_submit',['taxes'])}}" method="post">
                                        <p>Informe a placa e clique em consultar para obter os débitos do veículo.</p>
                                        <div style="display:flex;justify-content: center;margin-top: 25px;">
                                            <span style="display:block;background-image: url('assets/img/placa-mercosul.jpg');background-size: 300px auto;background-repeat: no-repeat;width: 301px; height: 100px;">
                                                <input class="input-lisence_plate" type="text" name="lisence_plate" placeholder="AAA-0000" style="padding:10px;text-align:center;border:none;background-color:transparent;font-size:30px;padding-top:30px;text-transform: uppercase;" minlenght="8" value="{{old('lisence_plate')}}" required>
                                            </span>
                                        </div>

                                        @if(old('response'))
                                        <input type="hidden" name="order_id" value="{{old('response')->order_id}}">
                                        <div class="row" style="text-align:left;margin-bottom:15px;margin-top:15px;">
                                            <div class="col-6" style="margin-bottom:15px;">
                                                <label class="control-label">Modelo</label>
                                                <input class="form-control" value="{{old('response')->vehicle->marcaModelo}}" readonly>
                                            </div>
                                            <div class="col-6" style="margin-bottom:15px;">
                                                <label class="control-label">Ano</label>
                                                <input class="form-control" value="{{old('response')->vehicle->anoModelo}}" readonly>
                                            </div>
                                            <div class="col-6" style="margin-bottom:15px;">
                                                <label class="control-label">Cor</label>
                                                <input class="form-control" value="{{old('response')->vehicle->cor}}" readonly>
                                            </div>
                                            <div class="col-6" style="margin-bottom:15px;">
                                                <label class="control-label">UF</label>
                                                <input class="form-control" value="{{old('response')->vehicle->uf}}" readonly>
                                            </div>
                                        </div>

                                        <p style="margin-bottom:15px;">Selecione os débitos e clique em próximo para efetuar o pagamento.</p>
                                        
                                        @php $amount = 0; @endphp
                                        <div class="row" style="text-align:left;margin-bottom:15px;">
                                            @foreach (old('response')->invoices as $invoice)
                                            @php $amount += $invoice->amount; @endphp
                                            <div class="col-12">
                                                <label class="card">
                                                    <div class="row no-selection">
                                                        <div class="col-4" style="margin-bottom:15px;">
                                                            <label class="control-label">Valor: </label>
                                                            <span>@decimal_brl($invoice->amount)</span>
                                                        </div>
                                                        <div class="col-4" style="margin-bottom:15px;">
                                                            <label class="control-label">Vencimento: </label>
                                                            <span>@date_brl($invoice->expires_in)</span>
                                                        </div>
                                                        <div class="col-4" style="margin-bottom:15px;">
                                                            <label class="control-label">Status: </label>
                                                            <span>{{$invoice->status}}</span>
                                                        </div>
                                                        <div class="col-12" style="margin-bottom:15px;">
                                                            {{$invoice->description}}
                                                        </div>
                                                    </div>
                                                    <div class="check-top-right">
                                                        <div class="input-checkbox">
                                                            <input type="checkbox" value="{{$invoice->id}}" name="invoices[]" data-amount="{{$invoice->amount}}" checked @if($invoice->required) readonly @endif>
                                                            <span class="check"></span>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                            @endforeach
                                        </div>

                                        <div style="margin-bottom:15px;">
                                            <label class="control-label">Total da Dívida</label>
                                            <input type="text" class="form-control" value="@decimal_brl($amount)" readonly>
                                        </div>
                                        <div style="margin-bottom:15px;">
                                            <label class="control-label">Total Selecionado para Pagar</label>
                                            <input type="text" id="amount-selected" class="form-control" value="@decimal_brl($amount)" readonly>
                                        </div>
                                        @endif

                                        <button type="submit" class="nbcalltoaction-item__link button-link1" style="margin-top: 15px;">
                                            Próximo
                                        </button>
                                    </form>
                                    <form class="tab-panel" id="pagar-um-boleto" style="display:none;margin-top: 25px; text-align:center;" action="{{route('debits_submit',['billet'])}}" method="post">
                                        <p>Informe a linha digitável do boleto ou clique em Escanear.</p>
                                        <p>Caso decida escanear, não esqueça de dar permissão ao navegador para acessar a câmera.</p>
                                        <div id="container-billets">
                                            <div class="field-digitable_line" style="display:flex;justify-content: center;margin-top: 25px;">
                                                <input type="hidden" name="barcodes[0][type]" value="digitable_line">
                                                <textarea class="input-barcode-raw"  placeholder="00000.00000 00000.000000 00000.000000 0 00000000000000" minlength="54" maxlength="55" style="padding:10px;text-align:center;font-size:20px;" required></textarea>
                                                <input class="input-barcode" type="hidden" name="barcodes[0][code]">
                                                
                                            </div>
                                        </div>
                                        <!-- <p style="margin-top:15px;margin-bottom:15px;">OU</p>

                                        <p><button id="btn-scan" type="button" style="cursor:pointer;"><img src="assets/img/barcode-scan.jpg"><p>Escanear</p></button></p>
                                        -->

                                        <button id="add-new-billet" type="button" class="nbcalltoaction-item__link button-link1" style="margin-top: 25px;">
                                            Adicionar mais um boleto
                                        </button>
                                        <button type="submit" class="nbcalltoaction-item__link button-link1" style="margin-top: 25px;">
                                            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";$("textarea").autoHeight();$(".tab-link").on('click',function(e){e.preventDefault();$($(this).attr('href')).closest('.tab-content').find('.tab-panel').hide();$(this).closest('.nav-tab').find('.tab-link.active').removeClass('active');$(this).addClass('active');$($(this).attr('href')).animate({height: 'toggle'}, "slow").show();});$('.input-lisence_plate').mask('ZZZ-0A00',{translation:{'Z':{pattern:/[A-Za-z]/}}});var SPMaskBehavior=function(v){return v.charAt(0)=='8'?'00000000000-0 00000000000-0 00000000000-0 00000000000-0':'00000.00000 00000.000000 00000.000000 0 00000000000000'};$('.input-barcode-raw').on('keyup',function(){var e = $(this).closest('div').find('.input-barcode');e.val(e.masked($(this).val()));$(this).val(e.masked($(this).val()));});$('.input-barcode').mask(SPMaskBehavior,{onKeyPress: function(val, e, field, options) {field.mask(SPMaskBehavior.apply({}, arguments), options);}}).on('paste',function(e){var d = e.originalEvent.clipboardData.getData('Text');$(this).val(d);$(this).mask(SPMaskBehavior);$(this).val(d);});$('.input-checkbox input').on('change',function(){var a=0.00;$('.input-checkbox input:checked').each(function(){a+=parseFloat($(this).data('amount'))});$("#amount-selected").val(a.toLocaleString('pt-BR',{style:'currency',currency:'BRL'}))});$("#add-new-billet").on('click',function(){var el=$($("#container-billets .field-digitable_line:first-child").prop('outerHTML').replace(/\[0\]/g, '['+$(".field-digitable_line").length+']'));$("#container-billets").append(el);el.find('.input-barcode').mask(SPMaskBehavior,{onKeyPress: function(val, e, field, options) {field.mask(SPMaskBehavior.apply({}, arguments), options);}}).val('');});})}</script>
<script>
jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ "height": 0, "overflow-y": "hidden" })
        .height(element.scrollHeight?element.scrollHeight - 20:30);
    }
    return this.each(function() {
      autoHeight_(this).on("input", function() {
        autoHeight_(this);
      });
    });
  }
});
@if(session('message'))
Swal.fire({
  icon: 'error',
  title: 'Oops...',
  html: '{!!session("message")!!}',
})
@endif
</script>
@endpush