@extends('layouts.front.app')

@section('content')
<section class="container content">
	<!--Modal: modalPush-->
	<div class="modal fade p-5" id="modalEnviaPagamento" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
	aria-hidden="true">
	<div class="modal-dialog modal-notify modal-warning" role="document">
		<!--Content-->
		<div class="modal-content text-center">
			<!--Header-->
			<div class="modal-header d-flex justify-content-center">
				<p class="heading">Prossessando pagamento</p>
			</div>

			<!--Body-->
			<div class="modal-body">

				<i class="fas fa-bell fa-4x animated rotateIn mb-4"></i>

				<p> <span class="txtProcessando">Estamos processando seu pagamento, aguarde...</span>
					<div class="spinner-grow text-danger" role="status">
						<span class="sr-only">Carregando...</span>
					</div></p>

			</div>

			<!--Footer-->
			<div class="modal-footer flex-center">
				<a type="button" class="btn btn-outline-info waves-effect" data-dismiss="modal">Ok</a>
			</div>
		</div>
		<!--/.Content-->
	</div>
</div>
<!--Modal: modalPush-->

	<!--Modal: modalRelatedContent-->

	<div class="container dark-grey-text mt-5">
		<!-- Menu Superior -->
		<div class="container h-100">
			<!-- MenuSuperior-->
			@include('layouts.front.menu-superior')
			<!--/.MenuSuperior-->
		</div>
		<!-- /.Menu Superior -->
		<!-- Heading -->
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb blue-grey lighten-4">
				<li><a href="{{ route('home') }}"> <i class="fa fa-home"></i> Home</a><i class="fas fa-angle-double-right mx-2"
					aria-hidden="true"></i></li>
					<li class="breadcrumb-item"><a class="black-text" href="{{ route('checkout.view', $pedido_id) }}">Pagamento</a><i class="fas fa-angle-double-right mx-2" aria-hidden="true"></i></li>
					<li class="active">Cielo</li>

				</ol>
			</nav>
			<!--Grid row-->
			<div class="row">

				<!--Grid column-->
				<div class="col-md-12">

					<!--Card group-->
					<div class="card-group">

						<!--Card-->
						<div class="card card-personal mb-4">

							<!--Card content-->
							<div class="card-body">
								<!--Title-->
								<h4 class="card-title">Checkout transparente</h4>
								<img src="{{ asset('storage/cielo-logo-pagamento.png') }}" alt="Pagamento Cielo" srcset="">
								<hr>
								<h2 class="h2-responsive card-meta"><strong>Pedido: {{ $pedido_id }}</strong><span class="card-meta float-right"><i class="fas fa-hand-holding-usd"></i> {{ config('cart.currency_symbol') }} {{ number_format($total, 2, ',', '.') }}</span></h2>
								<hr>
								<form action="{{ route('cielo.store') }}" class="form-horizontal" method="post" id="formPagamento">
									{{ csrf_field() }}
									<!--Accordion wrapper-->
									<div class="accordion md-accordion accordion-4 col-lg-12 z-depth-1-half" id="accordionEx2" role="tablist" aria-multiselectable="true">

										{{--  Pagamento por Débito   --}}
										<div class="card-body">

											<!-- Card header -->
											<div class="card-header z-depth-1 blue lighten-2" role="tab" id="div_credito">
												<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx2" href="#divCredito" aria-expanded="false"
												aria-controls="divCredito">
												<h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">
													<!-- Default unchecked -->
													<div class="custom-control custom-checkbox">
														<input type="checkbox" class="custom-control-input" id="cielo_credito" name="pagamento_cielo" value="credito">
														<label class="custom-control-label" for="cielo_credito"><i class="fas fa-credit-card"></i> Pagamento por Crédito</label>
													</div>
												</h4>
											</a>
										</div>

										<!-- Card body -->
										<div id="divCredito" class="collapse" role="tabpanel" aria-labelledby="credito" data-parent="#accordionEx2">
											<div class="card-text rgba-white-strong dark-text">
												<div id="credito" class="text-left">
													<div class="row">
														<div class="paymentCont w-100">
															<div class="headingWrap">
																<h3 class="headingTop text-center">Escolha a bandeira de seu cartão</h3>
															</div>
															<div class="paymentWrap">
																<div class="paymentBtnGroup btn-group-justified" data-toggle="buttons">
																	@if (config('cielo.credito.visa'))
																	<label class="btn paymentMethod active">
																		<div class="method visa cartao_visa"></div>
																		<input type="radio" name="tipo_cartao_credito" class="cartao_visa" value="visa" checked>
																	</label>
																	@endif
																	@if (config('cielo.credito.master'))
																	<label class="btn paymentMethod">
																		<div class="method master-card cartao_master"></div>
																		<input type="radio" name="tipo_cartao_credito" class="cartao_master" value="master">
																	</label>
																	@endif
																	@if (config('cielo.credito.amex'))
																	<label class="btn paymentMethod">
																		<div class="method amex cartao_amex"></div>
																		<input type="radio" name="tipo_cartao_credito" class="cartao_amex" value="amex">
																	</label>
																	@endif
																	@if (config('cielo.credito.elo'))
																	<label class="btn paymentMethod">
																		<div class="method elo cartao_elo"></div>
																		<input type="radio" name="tipo_cartao_credito" class="cartao_elo" value="elo">
																	</label>
																	@endif
																	@if (config('cielo.credito.discover'))
																	<label class="btn paymentMethod">
																		<div class="method discover cartao_discover"></div>
																		<input type="radio" name="tipo_cartao_credito" class="cartao_discover" value="discover">
																	</label>
																	@endif
																	@if (config('cielo.credito.diners'))
																	<label class="btn paymentMethod">
																		<div class="method diners cartao_diners"></div>
																		<input type="radio" name="tipo_cartao_credito" class="cartao_diners" value="diners">
																	</label>
																	@endif
																	@if (config('cielo.credito.aura'))
																	<label class="btn paymentMethod">
																		<div class="method aura cartao_aura"></div>
																		<input type="radio" name="tipo_cartao_credito" class="cartao_aura" value="aura">
																	</label>
																	@endif
																	@if (config('cielo.credito.jcb'))
																	<label class="btn paymentMethod">
																		<div class="method jcb cartao_jcb"></div>
																		<input type="radio" name="tipo_cartao_credito" class="cartao_jcb" value="jcb">
																	</label>
																	@endif
																</div>
																<div class="row">
																	@php
																	$preco_valido = $total;
																	@endphp
																	<label for="parcela" class="parcela">Quantidade de parcelas</label>
																	<select name="parcela" id="parcela" class="form-control text-center txtuppercase parcela">
																		<option value="1">Selecione</option>
																		@for($p = 1 ; $p <= @config('payees.parcels') ; $p++)
																		@if (round($preco_valido / $p, 2) > config('payees.parcel_min') )
																		<option value="{{ $p }}" data-parcelas="{{ $p }}">{{ $p }} de {{ config('cart.currency_symbol') }} {{ number_format(round($preco_valido/$p,2), 2, ',', '.') }}</option>
																		@endif
																		@endfor
																	</select>
																	<input type="hidden" name="qtde_parcelas">
																</div>
																<div class="row">
																	<div class="col-md-6 mb-3">
																		<label for="nome_cartao_credito">Nome do portador do cartão</label>
																		<input type="text" class="nome_cartao form-control" id="nome_cartao_credito" name="nome_cartao_credito" placeholder="">
																		<small class="text-muted">Nome completo conforme impresso no cartão</small>
																		<div class="invalid-feedback">
																			Nome do portador do cartão é obrigatório
																		</div>
																	</div>
																	<div class="col-md-6 mb-3">
																		<label for="numero_cartao_credito">Numero do Cartão</label>
																		<input type="text" class="numero_cartao form-control" id="numero_cartao_credito" name="numero_cartao_credito" placeholder="0000 0000 0000 0000">
																		<div class="invalid-feedback">
																			Numero do Cartão é obrigatório
																		</div>
																	</div>
																</div>
																<div class="row">
																	<div class="col-md-3 mb-3">
																		<label for="expira_cartao_credito">Expiração</label>
																		<input type="text" class="validade form-control" id="expira_cartao_credito" name="expira_cartao_credito" placeholder="MM/AAAA">
																		<div class="invalid-feedback">
																			Data de expiração é obrigatório
																		</div>
																	</div>
																	<div class="col-md-3 mb-3">
																		<label for="cvv_credito">CVV</label>
																		<input type="text" class="cvv form-control" id="cvv_credito" name="cvv_credito" placeholder="000">
																		<div class="invalid-feedback">
																			Código de Segurança é obrigatório
																		</div>
																	</div>
																</div>
																<input type="hidden" id="billing_address" name="billing_address" value="{{ $billingAddress }}">
																<input type="hidden" name="total" value="{{ $total }}">
																<input type="hidden" name="order_id" value="{{ $pedido_id }}">
																<input type="hidden" name="customer_id" value="{{ Auth::user()->id }}">
																@if(request()->has('courier'))
																<input type="hidden" name="courier" value="{{ request()->input('courier') }}">
																@endif

															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									{{--  ./Pagamento por Débito   --}}

									{{-- Pagamento por Crédito  --}}
									<div class="card-body">

										<!-- Card header -->
										<div class="card-header z-depth-1 green lighten-2" role="tab" id="div_debito">
											<a data-toggle="collapse" data-parent="#accordionEx2" href="#divDebito" aria-expanded="true"
											aria-controls="divDebito">
											<h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">

												<!-- Default unchecked -->
												<div class="custom-control custom-checkbox">
													<input type="checkbox" class="custom-control-input" id="cielo_debito" name="pagamento_cielo" value="debito">
													<label class="custom-control-label" for="cielo_debito"><i class="fas fa-money-check-alt"></i> Pagamento por Débito</label>
												</div>
											</h4>
										</a>
									</div>

									<!-- Card body -->
									<div id="divDebito" class="collapse" role="tabpanel" aria-labelledby="heading10" data-parent="#accordionEx2">
										<div class="card-text rgba-white-strong dark-text">
											<div id="debito" class="text-left">
												<div class="row">
													<div class="paymentCont">
														<div class="headingWrap">
															<h3 class="headingTop text-center">Escolha a bandeira de seu cartão</h3>
														</div>
														<div class="paymentWrap">
															<div class="paymentBtnGroup btn-group-justified" data-toggle="buttons">
																@if (config('cielo.debito.visa'))
																<label class="btn paymentMethod active">
																	<div class="method visa cartao_visa"></div>
																	<input type="radio" name="tipo_cartao_debito" class="cartao_visa" value="visa" checked>
																</label>
																@endif
																@if (config('cielo.debito.master'))
																<label class="btn paymentMethod">
																	<div class="method master-card cartao_master"></div>
																	<input type="radio" name="tipo_cartao_debito" class="cartao_master" value="master">
																</label>
																@endif
																@if (config('cielo.debito.elo'))
																<label class="btn paymentMethod">
																	<div class="method elo cartao_elo"></div>
																	<input type="radio" name="tipo_cartao_debito" class="cartao_elo" value="elo">
																</label>
																@endif
																@if (config('cielo.debito.discover'))
																<label class="btn paymentMethod">
																	<div class="method discover cartao_discover"></div>
																	<input type="radio" name="tipo_cartao_debito" class="cartao_discover" value="discover">
																</label>
																@endif
																@if (config('cielo.debito.diners'))
																<label class="btn paymentMethod">
																	<div class="method diners cartao_diners"></div>
																	<input type="radio" name="tipo_cartao_debito" class="cartao_diners" value="diners">
																</label>
																@endif
																@if (config('cielo.debito.aura'))
																<label class="btn paymentMethod">
																	<div class="method aura cartao_aura"></div>
																	<input type="radio" name="tipo_cartao_debito" class="cartao_aura" value="aura">
																</label>
																@endif
																@if (config('cielo.debito.jcb'))
																<label class="btn paymentMethod">
																	<div class="method jcb cartao_jcb"></div>
																	<input type="radio" name="tipo_cartao_debito" class="cartao_jcb" value="jcb">
																</label>
																@endif
															</div>
															<div class="row">
																<div class="col-md-6 mb-3">
																	<label for="nome_cartao_debito">Nome do portador do cartão</label>
																	<input type="text" class="nome_cartao form-control" id="nome_cartao_debito" placeholder="" name="nome_cartao_debito">
																	<small class="text-muted">Nome completo conforme impresso no cartão</small>
																	<div class="invalid-feedback">
																		Nome do portador do cartão é obrigatório
																	</div>
																</div>
																<div class="col-md-6 mb-3">
																	<label for="numero_cartao_debito">Número do Cartão</label>
																	<input type="text" class="numero_cartao form-control" name="numero_cartao_debito" id="numero_cartao_debito" placeholder="0000 0000 0000 0000">
																	<div class="invalid-feedback">
																		Numero do Cartão é obrigatório
																	</div>
																</div>
															</div>
															<div class="row">
																<div class="col-md-3 mb-3">
																	<label for="expira_cartao_debito">Expiração</label>
																	<input type="text" class="validade form-control" name="expira_cartao_debito" id="expira_cartao_debito" placeholder="MM/AAAA">
																	<div class="invalid-feedback">
																		Data de Expiração obrigatório
																	</div>
																</div>
																<div class="col-md-3 mb-3">
																	<label for="cvv_debito">CVV</label>
																	<input type="text" class="cvv form-control" name="cvv_debito" id="cvv_debito" placeholder="000">
																	<div class="invalid-feedback">
																		Código de Segurança obrigatório
																	</div>
																</div>
															</div>

														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-12">
										<div class="footerNavWrap clearfix">
											{{--  <div class="btn btn-success pull-left btn-fyi">
												<span class="glyphicon glyphicon-chevron-left"></span>
												<button class="btn btn-success"><a href="{{ route('checkout.view', $pedido_id) }}"><i class="fa fa-arrow-circle-left"></i> VOLTAR</a></button>

											</div>  --}}
											<!-- Send button -->
										<input type="hidden" name="cpf" value="{{ $cpf }}">
											<button class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" id="enviaPagamento">PAGAR</button>
											{{--  <div class="btn btn-success pull-right btn-fyi">

												<button onclick="return confirm('Tem certeza??')" class="btn btn-success">PAGAR <i class="fa fa-dollar"></i></button>
												<span class="glyphicon glyphicon-chevron-right"></span>
											</div>  --}}
										</div>
									</div>
								</div>
								{{-- ./Pagamento por Crédito  --}}
							</div>
							<!--/.Accordion wrapper-->
						</form>
					</div>
					<!--Card content-->

				</div>
				<!--Card-->

			</div>
			<!--Card group-->

		</div>
		<!--Grid column-->

	</div>
	<!--Grid row-->
</div>
</section>
@endsection

@section('js')
<script type="text/javascript">
	$(document).ready(function () {
		$('#div_debito').on('click', function(){
			$('#cielo_debito').prop( "checked", true )
			$('#cielo_credito').prop( "checked", false )
			$('.numero_cartao').mask('9999 9999 9999 9999');
			$('.validade').mask('99/9999')
			$('.cvv').mask('999')
		})

		$('#div_credito').on('click', function(){
			$('#cielo_credito').prop( "checked", true )
			$('#cielo_debito').prop( "checked", false )
		})

		/*$('.txtuppercase').keyup(function() {
			$(this).val($(this).val().toUpperCase())
		});*/

		$('.numero_cartao').mask('9999 9999 9999 9999')
		$('.validade').mask('99/9999')
		$('.cvv').mask('999')
		/*$('.nome_cartao').on('keyup', function(){
			$(this).val($(this).val().toUpperCase())
		})*/

		$('div.master-card').on('click', function(){
			$('input[value=master]').attr('checked', true)
			$('input[value=amex]').removeAttr('checked')
			$('input[value=aura]').removeAttr('checked')
			$('input[value=discover]').removeAttr('checked')
			$('input[value=diners]').removeAttr('checked')
			$('input[value=elo]').removeAttr('checked')
			$('input[value=jcb]').removeAttr('checked')
			$('input[value=visa]').removeAttr('checked')
			$('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
			$('.numero_cartao').mask('9999 9999 9999 9999')
			$('.cvv').attr('placeholder', '000')
			$('.cvv').mask('999')
		})

		$('div.visa').on('click', function(){
			$('input[value=visa]').attr('checked', true)
			$('input[value=amex]').removeAttr('checked')
			$('input[value=aura]').removeAttr('checked')
			$('input[value=discover]').removeAttr('checked')
			$('input[value=diners]').removeAttr('checked')
			$('input[value=elo]').removeAttr('checked')
			$('input[value=jcb]').removeAttr('checked')
			$('input[value=master]').removeAttr('checked')
			$('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
			$('.numero_cartao').mask('9999 9999 9999 9999')
			$('.cvv').attr('placeholder', '000')
			$('.cvv').mask('999')
		})

		$('div.elo').on('click', function(){
			$('input[value=elo]').attr('checked', true)
			$('input[value=amex]').removeAttr('checked')
			$('input[value=aura]').removeAttr('checked')
			$('input[value=discover]').removeAttr('checked')
			$('input[value=diners]').removeAttr('checked')
			$('input[value=jcb]').removeAttr('checked')
			$('input[value=master]').removeAttr('checked')
			$('input[value=visa]').removeAttr('checked')
			$('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
			$('.numero_cartao').mask('9999 9999 9999 9999')
			$('.cvv').attr('placeholder', '000')
			$('.cvv').mask('999')
		})

		$('div.diners').on('click', function(){
			$('input[value=diners]').attr('checked', true)
			$('input[value=amex]').removeAttr('checked')
			$('input[value=aura]').removeAttr('checked')
			$('input[value=discover]').removeAttr('checked')
			$('input[value=elo]').removeAttr('checked')
			$('input[value=jcb]').removeAttr('checked')
			$('input[value=master]').removeAttr('checked')
			$('input[value=visa]').removeAttr('checked')
			$('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
			$('.numero_cartao').mask('9999 9999 9999 9999')
			$('.cvv').attr('placeholder', '000')
			$('.cvv').mask('999')
		})

		$('div.discover').on('click', function(){
			$('input[value=discover]').attr('checked', true)
			$('input[value=amex]').removeAttr('checked')
			$('input[value=aura]').removeAttr('checked')
			$('input[value=diners]').removeAttr('checked')
			$('input[value=elo]').removeAttr('checked')
			$('input[value=jcb]').removeAttr('checked')
			$('input[value=master]').removeAttr('checked')
			$('input[value=visa]').removeAttr('checked')
			$('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
			$('.numero_cartao').mask('9999 9999 9999 9999')
			$('.cvv').attr('placeholder', '000')
			$('.cvv').mask('999')
		})

		$('div.jcb').on('click', function(){
			$('input[value=jcb]').attr('checked', true)
			$('input[value=master]').removeAttr('checked')
			$('input[value=amex]').removeAttr('checked')
			$('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
			$('.numero_cartao').mask('9999 9999 9999 9999')
			$('.cvv').attr('placeholder', '000')
			$('.cvv').mask('999')
		})

		$('div.aura').on('click', function(){
			$('input[value=aura]').attr('checked', true)
			$('input[value=master]').removeAttr('checked')
			$('input[value=amex]').removeAttr('checked')
			$('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
			$('.numero_cartao').mask('9999 9999 9999 9999')
			$('.cvv').attr('placeholder', '000')
			$('.cvv').mask('999')
		})

		$('div.amex').on('click', function(){
			$('input[value=amex]').attr('checked', true)
			$('input[value=master]').removeAttr('checked')
			$('input[value=visa]').removeAttr('checked')
			$('.numero_cartao').attr('placeholder', '0000 000000 00000')
			$('.numero_cartao').mask('9999 999999 99999')
			$('.cvv').attr('placeholder', '0000')
			$('.cvv').mask('0000')
		})

		$('#enviaPagamento').on('click', function(e){
			e.preventDefault()
			if($('input[name=pagamento_cielo]').val() === ''){
				$('div.modal-dialog>p.txtProcessando').html('Seleciona o tipo de pagamento.')
				return false
			} else {
				$('.txtProcessando').html('Estamos processando seu pagamento, aguarde...')
				$('#modalEnviaPagamento').modal( 'show' )
				$('#formPagamento').submit();
			}
		})
	});
</script>
@endsection