@extends('portal.layaout.square_layaout')
@extends('portal.layaout.navbar')
@extends('portal.layaout.sidebar')
@section('content')

		<div class="container">
			
			<div class="portlet light">
				<div class="portlet-body">
					<div class="invoice">
						<div class="row invoice-logo">
							<div class="col-xs-6 invoice-logo-space">
								{{-- <img src="{{asset('static/assets/admin/pages/media/invoice/walmart.png')}}" class="img-responsive" alt=""/> --}}
                                <img src="{{asset('static/logo/spotship_invoice.png')}}" class="img-responsive" alt="" width="296px" height="84px"/>
							</div>
							<div class="col-xs-6">
								<p>
									#{{$Reference}} / {{date('M d Y')}} <span class="muted">Spotship Quote Number </span>
									<span class="label" style="{{$Quote->Label}}; margin-left:390px">{{$Quote->Status}} </span>	
								</p>
							</div>
						</div>
						<hr/>
						<div class="row">
							<div class="col-xs-4">
								<h3>Client:</h3>
								<ul class="list-unstyled">
									<li>
										{{$Quote->Contact}}
									</li>
									<li>
										{{$Quote->Phone}}
									</li>
									<li>
										{{$Quote->Email}}
									</li>
									<li>
										
									</li>
									<li>
										
									</li>
								</ul>
							</div>
							<div class="col-xs-4">
								<h3>Shipment Details:</h3>
								<ul class="list-unstyled">
									<li>
										From <strong>{{$Quote->ShipFromZipCode}}</strong> to <strong>{{$Quote->ShipToZipCode}}</strong>
									</li>
									<li>
										@php
											if($Quote->iServiceType == 1){ $Service = 'LTL';}
											if($Quote->iServiceType == 2){ $Service = 'SMALL PARCEL';}
											if($Quote->iServiceType == 3){ $Service = 'TRUCK LOAD';}
										@endphp
										Type of Service: <strong>{{$Service}}</strong>
									</li>
									<li>
										Pick Up Date: <strong>{{date('M d Y',strtotime($Quote->PDate))}}</strong>
									</li>
									<li>
										Delivery Date: <strong>{{date('M d Y',strtotime($Quote->DDate))}}</strong>
									</li>
									<li>
										
									</li>
									<li>
									
									</li>
								</ul>
							</div>
							<div class="col-xs-4 invoice-payment">
								<h3>Company Details:</h3>
								<ul class="list-unstyled">
									<li>
										<strong>{{$Company->CompanyName}}</strong>
									</li>
									<li>
										<strong>{{$Company->CompanyType}}</strong>
									</li>
									<li>
										<strong>{{$Company->City}} {{$Company->State}}, {{$Company->ZipCode}}</strong>
									</li>
									<li>
										
									</li>
									<li>
									
									</li>
								</ul>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<table class="table table-striped table-hover">
								<thead>
								<tr>
									<th>
										 #
									</th>
									<th>
										 Concept
									</th>
									<th class="hidden-480">
										 Description
									</th>
									<th>
										 Total
									</th>
								</tr>
								</thead>
								<tbody>
								@foreach($tableAmounts as $amount)
									@if($amount['Flag'] == 1)
									<tr>
										<td># </td>
										<td>{{$amount['Concept']}}</td>
										<td>{{$amount['Description']}}</td>
										<td style="text-align: right">$ {{$amount['Cost']}}</td>
									</tr>

									@endif
								@endforeach
								</tbody>
								</table>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-4">
								<div class="well">
									<address>
									<strong>{{$Company->CompanyName}}</strong><br/>
									{{$Company->Address}}.<br/>
									{{$Company->City}}, {{$Company->State}} {{$Company->ZipCode}}<br/>
									<strong>Phone</strong><br/>
									{{$Company->Phone}}
									</address>
									<address>
									<strong>Email</strong><br/>
									<a>{{$Company->Email}}</a>
									</address>
								</div>
							</div>
							<div class="col-xs-8 invoice-block">
								<ul class="list-unstyled amounts">
									 <li>
										<strong>Sub - Total amount:</strong> $ {{number_format($TotalInvoice, 2, '.', ',')}}
									</li>
									<li>
										<strong>Discount:</strong> $ {{number_format(0, 2, '.', ',')}}
									</li>
									<li>
										<strong>Grand Total:</strong> $ {{number_format($TotalInvoice, 2, '.', ',')}}
										<input type="hidden" id="quote_reference" value="{{$Reference}}">
									</li>
								</ul>
								<br/>
								<div class="row">
									<div class="col-md-6">
										<button class="btn blue" onclick="javascript:window.print();" id="btn_print">
										Print <i class="fa fa-print"></i>
										</button>
									</div>
									@php $statusArray = array(3,4,5); @endphp
									@if(!in_array($Quote->iStatusQuote, $statusArray))
									<div class="col-md-6">
										<button class="btn green" id="btn_payment_method" onclick="showPaymentMethod();">
										Choose Payment Method <i class="fa fa-check"></i>
										</button>
									</div>
									@endif
								</div>
								{{-- <div id="wrapper">
									<div id="card"></div>
									<button id="pay">Pay</button>
								</div> --}}

								{{-- <form id="payment-form">
									<fieldset class="buyer-inputs">
									  <input
										type="text"
										autocomplete="given-name"
										aria-required="true"
										aria-label="First Name"
										required="required"
										placeholder="Given Name"
										name="givenName"
										spellcheck="false"
									  />
							  
									  <input
										type="text"
										autocomplete="family-name"
										aria-required="true"
										aria-label="Last Name"
										required="required"
										placeholder="Family Name"
										name="familyName"
										spellcheck="false"
									  />
									</fieldset>
									<button id="ach-button" type="button">Pay with Bank Account</button>
								  </form>
								  <div id="payment-status-container"></div>  --}}


								   {{-- <form id="payment-form">
									<div id="google-pay-button"></div>
								  </form>
								  <div id="payment-status-container"></div> --}}


								  {{-- <form id="payment-form">
									<div id="google-pay-button"></div>
									<div id="card-container"></div>
									<button id="card-button" type="button">Pay $1.00</button>
								  </form>
								  <div id="payment-status-container"></div> --}}

								{{-- <form id="payment-form">
									<div id="afterpay-button"></div>
									<div id="card-container"></div>
									<button id="card-button" type="button">Pay $ {{$TotalInvoice}}</button>
								  </form>
								  <div id="payment-status-container"></div>  --}}

							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- END PAGE CONTENT INNER -->
			<div class="modal fade small" id="payment_modal" tabindex="-1" role="basic" aria-hidden="true">
				<form action="" method="POST">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
								<h4 class="modal-title">Choose your Payment Method</h4>
							</div>
							<div class="modal-body">
								{{-- WORKING METHOD --}}
								<div class="row">
									<div class="col-md-12">
										<form id="payment-form">
											<div id="afterpay-button"></div>
											<div id="card-container"></div>
											<button id="card-button" type="button">Pay $ {{$TotalInvoice}}</button>
										</form>
										<div id="payment-status-container"></div>
									</div>
								</div>
								{{-- END WORKING METHOD --}}
								
								{{-- GOOGLE METHOD --}}
								{{-- <div class="row">
									<div class="col-md-12">
										<form id="payment-form">
											<div id="google-pay-button"></div>
											<div id="card-container"></div>
											<button id="card-button" type="button">Pay $1.00</button>
										  </form>
										  <div id="payment-status-container"></div>
									</div>
								</div> --}}
								{{-- END GOOGLE METHOD --}}
							</div>
							<div class="modal-footer">
								<button type="button" class="btn default" data-dismiss="modal">Close</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
				</form>
				<!-- /.modal-dialog -->
			</div>
		</div>

@endsection