@extends('layouts.front.app')
@section('css')
<style>
/* layout.css Style */
.upload-drop-zone {
  height: 200px;
  border-width: 2px;
  margin-bottom: 20px;
}

/* skin.css Style*/
.upload-drop-zone {
  color: #ccc;
  border-style: dashed;
  border-color: #ccc;
  line-height: 200px;
  text-align: center
}
.upload-drop-zone.drop {
  color: #222;
  border-color: #222;
}
</style>
		
@endsection
@section('content')
<section class="container content">
	<div class="container dark-grey-text">
		<!-- 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') }}" 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">Número: {{ 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(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() }}
					<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="{{ $rateObjectId }}">
								@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