@extends('layouts.front.app')

@section('og')
<meta property="og:type" content="home" />
<meta property="og:title" content="{{ config('app.name') }} - Inicial" />
<meta property="og:description" content="{{ config('app.description') }}" />
@endsection

@section('content')
@section('content')
@php
$menu_banner = [
['link' => route('front.category.slug', ['romantico',  15]), 'banner' => 'banner/112.jpg'],
['link' => route('front.category.slug', ['aniversario',  19]), 'banner' => 'banner/113.jpg'],
['link' => route('front.category.slug', ['maternidade',  3]), 'banner' => 'banner/114.jpg'],
['link' => route('front.category.slug', ['presentes',  14]), 'banner' => 'banner/116.jpg'],
['link' => route('front.category.slug', ['decoracao',  20]), 'banner' => 'banner/117.jpg'],
];
@endphp
<!-- MenuSuperior-->
@include(config('site.domain').'.layouts.front.menu-superior')
@include(config('site.domain').'.layouts.front.menu-banner')

<section class="container content">
	<div class="container dark-grey-text">
		
		<!-- Heading -->
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb blue-grey lighten-4">
				<li><a href="{{ route('home') }}" class="opera-text"> <i class="fa fa-home"></i> Home</a><i class="fas fa-angle-double-right mx-2 opera-text"
					aria-hidden="true"></i></li>
					@if(request()->input('order') !== null && request()->input('order') !== '')
					<li> <a href="{{ route('checkout.view', request()->input('order')) }}" class="opera-text"> Checkout</a><i class="fas fa-angle-double-right mx-2 opera-text"
						aria-hidden="true"></i></li>
						@else
						<li> <a href="/cart" class="opera-text"> Carrinho</a><i class="fas fa-angle-double-right mx-2 opera-text"
							aria-hidden="true"></i></li>
							@endif
							<li class="active"> Pagamento por transferência</li>
						</ol>
					</nav>
					<div class="row">
						<div class="col-sm-6 mb-3 mb-md-0">
							<div class="mb-3 card">
								<div class="card-body">
									<h5 class="card-title">Revisão</h5>
									<ul class="list-group list-group-flush">
										<li class="list-group-item">Valor: {{ config('cart.currency_symbol') }} {{ $subtotal }}</li>
										<li class="list-group-item">Imposto: {{ config('cart.currency_symbol') }} {{ $tax }}</li>
										<li class="list-group-item">Frete: {{ config('cart.currency_symbol') }} {{ $shipping }}</li>
										<li class="list-group-item">Total: {{ config('cart.currency_symbol') }} {{ $total }}</li>
									</ul>
								</div>
							</div>
							<div class="card">
								<div class="card-body">
									<h5 class="card-title">Dados para a transferência</h5>
									<ul class="list-group list-group-flush">
										<li class="list-group-item">Informação: {{ config('bank-transfer.name') }} <br><small>{{ config('bank-transfer.description') }}</small></li>
										{{-- <li class="list-group-item">Banco: {{ config('bank-transfer.bank_name') }}</li> --}}
										<li class="list-group-item">Tipo de conta: {{ config('bank-transfer.account_type') }}</li>
										<li class="list-group-item">Favorecido: {{ config('bank-transfer.account_name') }}</li>
										<li class="list-group-item">Agência: {{ config('bank-transfer.bank_swift_code') }}</li>
										<li class="list-group-item">Conta Corrente: {{ config('bank-transfer.account_number') }}</li>
										{{-- <li class="list-group-item">Nota: <span class="red-text">*</span> {{ config('bank-transfer.note') }}</li> --}}
									</ul>
								</div>
							</div>
						</div>
						
						<div class="col-sm-6">
							@if(Route::currentRouteName() === 'checkout.view')
							{{-- @if(request()->input('order') !== null && request()->input('order') !== '') --}}
							<form action="{{ route('checkout.comprovante', ['id' => request()->input('order')]) }}" enctype="multipart/form-data" class="" method="post">
								@else
								<form action="{{ route('bank-transfer.store') }}" enctype="multipart/form-data" class="" method="post">
									@endif
									{{ csrf_field() }}
									@if($order)
									@foreach ($order->comprovantes as $comprovante)
									<div class="mb-3 card">
										<div class="card-body">
											<h5 class="card-title">Comprovante já enviado</h5>
											<p class="card-text">
												@if($comprovante)
												<div class="view overlay zoom rounded m-2 z-depth-1">
													<img src="{{ asset("$comprovante->src") }}" alt="Comprovante de pagamento" class="card-img-top">
												</div>
												@endif
											</p>
											
										</div>
									</div>
									@endforeach
									@endif
									<div class="card">
										<div class="card-body">
											<h5 class="card-title">Efetuar Pagamento por transferência</h5>
											<p class="card-text">
												{{-- @if(request()->input('order') !== null && request()->input('order') !== '')
												<span class="h5">Anexe o comprovante e confirme seu pagamento.</span>
												<input type="file" name="files[]" id="js-upload-files" multiple required>
												@else
												<span class="h5">Você poderá efetuar o pagamento posteriormente e enviar o compovante depois.</span>
												<input type="file" name="files[]" id="js-upload-files" multiple>
												@endif --}}
												<input type="hidden" id="billing_address" name="billing_address" value="{{ $billingAddress }}">
												<input type="hidden" name="shipment_obj_id" value="{{ $shipmentObjId }}">
												<input type="hidden" name="rate" value="{{request()->input('rate')}}">
												<input type="hidden" name="horario_entrega" value="{{request()->input('horario_entrega')}}">
												<input type="hidden" name="entrega_para" value="{{request()->input('entrega_para')}}">
												<input type="hidden" name="mensagem" value="{{request()->input('mensagem')}}">
												<input type="hidden" name="assinatura" value="{{request()->input('assinatura')}}">
												<input type="hidden" name="data_entrega" value="{{request()->input('data_entrega')}}">
												@if(request()->has('courier'))
												<input type="hidden" name="courier" value="{{ request()->input('courier') }}">
												@endif
											</p>
											
										</div>
									</div>
									<div class="btn-group text-center w-100" role="group" aria-label="Próxima etapa">
										@if(request()->input('order') !== null && request()->input('order') !== '')
										<button type="button" class="btn btn-info text-dark btn-bank w-50" data-href="{{ route('checkout.view', request()->input('order')) }}">Voltar</button>
										<button class="btn btn-success text-dark h5-responsive">Enviar comprovante da transferência</button>
										@else
										<button type="button" class="btn btn-info text-dark btn-bank w-50" data-href="{{ route('checkout.index') }}">Voltar</button>
										<button class="btn btn-success text-dark h5-responsive">Pague com transferência bancária</button>
										@endif
									</div>
								</form>
							</div>
						</div>
					</div>
				</section>
				@endsection
				@section('js')
				<script type="text/javascript">
					$(document).ready(function () {
						$('.btn-bank').on('click', function(){
							location.href = $(this).data('href')
						})
					});
					function($) {
						'use strict';
						
						// UPLOAD CLASS DEFINITION
						// ======================
						
						var dropZone = document.getElementById('drop-zone');
						var uploadForm = document.getElementById('js-upload-form');
						
						var startUpload = function(files) {
							console.log(files)
						}
						
						uploadForm.addEventListener('submit', function(e) {
							var uploadFiles = document.getElementById('js-upload-files').files;
							e.preventDefault()
							
							startUpload(uploadFiles)
						})
						
						dropZone.ondrop = function(e) {
							e.preventDefault();
							this.className = 'upload-drop-zone';
							
							startUpload(e.dataTransfer.files)
						}
						
						dropZone.ondragover = function() {
							this.className = 'upload-drop-zone drop';
							return false;
						}
						
						dropZone.ondragleave = function() {
							this.className = 'upload-drop-zone';
							return false;
						}
						
					}(jQuery);
				</script>
				
				@endsection