@extends('frontend.app')
<!-- Main Container  -->
@section('content')
    <!-- ========== MAIN CONTENT ========== -->
        <main id="content" role="main">
            <!-- breadcrumb -->
            <div class="bg-gray-13 bg-md-transparent">
                <div class="container">
                    <!-- breadcrumb -->
                    <div class="my-md-3">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb mb-3 flex-nowrap flex-xl-wrap overflow-auto overflow-xl-visble">
                                <li class="breadcrumb-item flex-shrink-0 flex-xl-shrink-1">
                                    <a href="/user">My Account</a>
                                </li>
                                <li class="breadcrumb-item flex-shrink-0 flex-xl-shrink-1 active" aria-current="page">
                                    My Wallet
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <!-- End breadcrumb -->
                </div>
            </div>
            <!-- End breadcrumb -->
            <div class="container">
                <div class="product-view row" style="margin-bottom:2%;">
					<!--Left Part Start -->
				    @include('frontend.user.partials.left-sidebar')
				    <!--Left Part End -->
				    <!--Right Part Start -->
					<div class="col-xs-12 col-sm-6 col-md-9 right-part" style="margin-top:1%;">
						<div class="right-part" style="background: url('{{ asset('/frontend/img/my_profile_footer.png') }}') no-repeat center bottom;padding-bottom: 20%;width:100%;box-shadow: 0 1px 10px #333;padding:2%;">
							<div class="row">
			                    <div class="col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-3 col-md-6">
			                        
			                        <div class="step last add-wallet">
							          	<h3 style="text-align: center;">
							          		<b>Amount to Pay</b> 
							          	</h3>
							        	<div class="box_general summary" style="margin-bottom: 5%;">
							        		<form action="/user/invoice/payment" method="post">
							        			<input type="hidden" name="_token" value="{{ csrf_token() }}">
												<input type="hidden" class="form-control" name="invoice_id" placeholder="Amount" value="{{ $invoice->id }}">

												<div class="form-group middle">
							        				{{$invoice->currency ?: 'INR' }} {{number_format(($invoice->amount_pending),2)}}

												</div>
												<div class="form-group step middle payments payment-channel">
													<h3>Payment Method</h3>
													@if($paymentChannels)
													<ul>
														@foreach($paymentChannels as $paymentChannel)
														<li>
															<label class="">
																<input type="radio" name="payment_channel_id" value="{{$paymentChannel->id}}" required>
																<span class="checkmark"></span>
																{{$paymentChannel->name}}
															</label>
														</li>
														@endforeach

														@if($wallet && $invoice->invoice_type !== 'wallet')
															<li>
																<label class="container_check">Use Wallet Amount ({{$wallet->amount}})
																	<input type="checkbox" name="is_wallet" value="1">
																	<span class="checkmark" style="width: 20px;"></span>
																</label>
															</li>
														@endif
													</ul>
													@endif
													<input type="submit" class="btn_1 full-width" value="Submit">
												</div>
							        		</form>
							        		@if(isset($message))
						                        <h4 style="font-style: italic;color:green">
						                            {{$message}}
						                        </h4>
						                    @endif
							        	</div>
							        </div>
			                        <br>
			                    </div>
			                </div> 
						</div>
			        </div>
			        <!--Right Part Start -->
			    </div>
            </div>
        </main>
        <!-- ========== END MAIN CONTENT ========== -->
@endsection 

@section('styles')
    
@endsection 

@section('scripts') 
    @parent
    <script>
		$(document).ready(function() {
			$('.create_amount').click(function() {
				$('.add-wallet').show();
				$('.wallet').hide();
			});
			$('.add_amount').click(function() {
				$('.wallet').hide();
				$('.add-wallet').show();
				$('.add_amount').hide();
				$('.payment-channel').show();
			});
		});
	</script>		
@endsection