@extends('frontend.layouts.template')
@section('stylesheet')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="{{ asset('assets/css/date-picker.css') }}">
    <link href="{{ asset('assets/plugins/clockpicker/src/clockpicker.css') }}" rel="stylesheet">

    <style>
    </style>
@endsection
@section('content')
	<!-- START SECTION BREADCRUMB -->
	<div class="breadcrumb_section bg_gray page-title-mini">
		<div class="container">
			<!-- STRART CONTAINER -->
			<div class="row align-items-center">
				<div class="col-md-6">
					<div class="page-title">
						<h1>{{ trans('label.notice_of_payment') }}</h1>
					</div>
				</div>
				<div class="col-md-6">
					<ol class="breadcrumb justify-content-md-end">
						<li class="breadcrumb-item"><a href="{{ url('/') }}">{{ trans('label.home') }}</a></li>
						<li class="breadcrumb-item"><a href="{{ url('account/profile') }}">{{ trans('label.my_account') }}</a></li>
						<li class="breadcrumb-item active">{{ trans('label.notice_of_payment') }}</li>
					</ol>
				</div>
			</div>
		</div><!-- END CONTAINER-->
	</div>
	<!-- END SECTION BREADCRUMB -->

	<!-- START MAIN CONTENT -->
	<div class="main_content">

		<!-- START LOGIN SECTION -->
		<div class="login_register_wrap section">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-xl-8 col-md-10">
						<div class="login_wrap">
							<div class="padding_eight_all bg-white">
								<div class="heading_s1">
<!--									<h3>แจ้งชำระเงิน</h3>-->
								</div>
								<div>
									<h4><b>Order #{{ $order->order_no }}</b></h4>
								</div>
								<div class="pt-3 pb-3">
									<table style="width: 100%;border:1px solid #EFF1F6">
										<tr>
											<td colspan="2" style="background: #EFF1F6;text-align:center;padding: 5px;">{{ trans('label.' . $order->status) }}</td>
										</tr>
										<tr>
											<td style="padding:5px 15px;">{{ trans('label.amount') }}</td>
											<td>฿{{ nb(orderPrice($order),2) }}</td>
										</tr>
										<tr>
											<td style="padding:5px 15px;">{{ trans('label.before') }}</td>
											<td>{{ showDate( date('Y-m-d H:i:s', strtotime('+6 hours '. $order->created_at)),true ) }}</td>
										</tr>
										<tr>
											<td style="padding:5px 15px;" colspan="2">
												<span style="font-size: 14px;color: red;">*{{ trans('msg.expiry_time') }}</span>
											</td>
										</tr>
									</table>
								</div>
								<div class="pb-3">
									<h4><b>{{ trans('label.bank_transfer_instructions') }}</b></h4>
									<div>
										{{ trans('msg.message_tranfer_money1') }}
									</div>
									<div>
										{{ trans('msg.message_tranfer_money2') }}
									</div>
									
								</div>

								<div class="pt-3 pb-5">
									<h5><b>{{ trans('msg.transfer_to_bank_account') }}</b></h5>
                                    @if($payments)
                                    @foreach( $payments as $payment )
                                        @php
                                            $bank = json_decode( $payment->description );
                                        @endphp

                                        <div>
                                            <div style="display: inline-block">
                                                @if( $payment->logo )
                                                <img src="{{ asset( $payment->logo->link ) }}" alt="" style="width: 50px;">
                                                @endif
                                            </div>
                                            <div style="display: inline-block;vertical-align: bottom;padding-left: 15px;">
                                                {{  objectName( $bank->account ) }} <br/>
                                                {{  objectName( $bank->name ) }} <br/>
                                                <strong>{{ $payment->account_id }}</strong>
                                            </div>
                                        </div>
                                    @endforeach
                                    @endif
                                </div>

								<div class="pb-3">
									<h5><b>{{ trans('label.confirm_payment') }}</b></h5>
									<div>{{ trans('msg.after_tranfer') }}</div>
								</div>

								<form id="payment-form" method="post" enctype="multipart/form-data" action="{{ url('account/payment-confirmed/'. $order->id) }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
									<div class="row">
										<div class="form-group col-md-12">
											<label for="">*{{ trans('label.transferred_to') }}</label>
											<select name="payment" class="form-control" id="">
                                                @if($payments)
                                                    @foreach( $payments as $payment )
                                                        @php
                                                            $bank = json_decode( $payment->description );
                                                        @endphp
												        <option value="{{ $payment->id }}">{{  objectName( $bank->name ) }} {{ $payment->account_id }}</option>
                                                    @endforeach
                                                @endif
											</select>
										</div>
										<div class="form-group col-md-6">
											<label for="">*{{ trans('label.transferred_date') }}</label>
											<input type="text" readonly autocomplete="off" class="form-control datepicker bg-white" name="confirm-date" id="confirm-date" placeholder="">
											<small class="err-date text-danger w-100"></small>
										</div>
										<div class="form-group col-md-6">
											<label for="">*{{ trans('label.transferred_time') }}</label>
											<input class="form-control bg-white" readonly autocomplete="off" type="text" name="confirm-time" id="confirm-time" placeholder="">
											<small class="err-time text-danger w-100"></small>
										</div>

										<div class="form-group col-md-12">
											<label for="">*{{ trans('label.attach_tranfer') }}</label>
											<div class="custom-file">
												<input type="file" class="custom-file-input" id="customFile" accept="image/*" name="attach_file">
												<label class="custom-file-label" for="customFile">{{ trans('label.choose_file') }}</label>
											</div>
											<small class="err-attach text-danger w-100"></small>
										</div>
										<div class="form-group col-md-12">
											<button type="submit" class="btn btn-fill-out btn-block" style="width: 200px;margin:0 auto">{{ trans('label.confirm_payment') }}</button>
										</div>
									</div>
								</form>
								<!--
                        <div class="different_login">
                            <span> or</span>
                        </div>
                        <ul class="btn-login list_none text-center">
                            <li><a href="#" class="btn btn-facebook"><i class="ion-social-facebook"></i>Facebook</a></li>
                            <li><a href="#" class="btn btn-google"><i class="ion-social-googleplus"></i>Google</a></li>
                        </ul>
                        <div class="form-note text-center">Already have an account? <a href="login.html">Log in</a></div>
-->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- END LOGIN SECTION -->
	</div>
	<!-- END MAIN CONTENT -->
@endsection
@section('javascript')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script>
<script src="{{ asset('assets/js/moment.js') }}"></script>
<script src="{{ asset('assets/plugins/clockpicker/src/clockpicker.js') }}"></script>
<script type="text/javascript">
    (function($){
		const inputDate = $('#confirm-date');
		const inputTime = $('#confirm-time');
		const fileAttach = $('#customFile');			
		const attachDiv = $('.custom-file-input');

        $('.datepicker').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight: true,
            toggleActive: true,
            autoclose:true
        });
        $('#confirm-time').clockpicker({
            placement: 'bottom',
            align: 'left',
            autoclose: true,
            'default': 'now'
        });
		$('#customFile').on('change',function(e){
			if(e.target){
				const files   = e.target.files[0];
				console.log('has select file ', files );
				$('.custom-file-label').html(files.name);
			}else{
				$('.custom-file-label').html('Choose file');
				console.log('no attach select');
			}
		});
		$('#payment-form').on('submit',function(e){
			const response = validate();
			if( !response )
				return false;
		})
		function validate(){
			let x = 0;
			if( !inputDate.val() ){
				inputDate.addClass('is-invalid');
				$('.err-date').html("* {{ trans('label.please_select') }} {{ trans('label.transferred_date') }}");
				x++;
			}else{
				if( inputDate.hasClass('is-invalid') ){
					inputDate.removeClass('is-invalid');
					$('.err-date').html('');
				}
			}
			if( !inputTime.val() ){
				inputTime.addClass('is-invalid');
				$('.err-time').html("* {{ trans('label.please_select') }} {{ trans('label.transferred_time') }}");
				x++;
			}else{
				if( inputTime.hasClass('is-invalid') ){
					inputTime.removeClass('is-invalid');
					$('.err-time').html('');
				}
			}
			if( !fileAttach.val() ){
				attachDiv.addClass('is-invalid');
				$('.err-attach').html("* {{ trans('label.please_select') }} {{ trans('label.file_attach') }}");
				x++;
			}else{
				if( attachDiv.hasClass('is-invalid') ){
					attachDiv.removeClass('is-invalid');
					$('.err-attach').html('');
				}
			}
			return x == 0 ? true : false;
		}
    }(jQuery));
</script>

@endsection