@extends('frontend.layouts.template')

@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.waiting_approve') }}</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.my_approval') }}</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>{{ trans('label.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.from') }}</td>
											<td>{{ $order->user->firstname }} {{ $order->user->lastname }}</td>
										</tr>
										<tr>
											<td style="padding:5px 15px;">{{ trans('label.wbs_code') }}</td>
											<td>{{ $order->wbs == 1 ? '' : 'ไม่มี เนื่องจาก ' }} {{ $order->wbs_value }}</td>
										</tr>
										<tr>
											<td style="padding:5px 15px;">{{ trans('label.event_code') }}</td>
											<td>{{ $order->event_code }}</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">
									<div class="table-responsive shop_cart_table">
										<table class="table">
											<thead>
												<tr>
													<th class="product-thumbnail">&nbsp;</th>
													<th class="product-name">{{ trans('label.product') }}</th>
													<th class="product-quantity">{{ trans('label.quantity') }}</th>
												</tr>
											</thead>
											<tbody>
                                                @if( $order->details)
                                                    @foreach( $order->details as $detail)
                                                    @php
                                                        // $total += $detail->price * $detail->quantity;
                                                        $product = $detail
                                                    @endphp
												<tr>
													<td class="product-thumbnail"><a href="{{ url('product/detail/'. $detail->product_id .'/'. encodelink( $detail->product_name ) ) }}"><img src="{{ asset( $detail->product_image ) }}" alt="{{ $detail->product_name }}"></a></td>
                                                    <td class="product-name" data-title="Product"><a href="#">{{ $detail->product_name }}</a></td>
													<td class="product-quantity" data-title="Quantity">
														<div class="quantity">
															{{ $detail->quantity }}
														</div>
													</td>
												</tr>
                                                    @endforeach
                                                @endif
											</tbody>
										</table>
									</div>
								</div>

								<form method="post" id="form-approval" enctype="multipart/form-data" action="{{ url('account/approval-confirmed/'. $order->id) }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                    <input type="hidden" name="order_id" value="{{ $order->id }}" />
                                    <div class="form-group form-row mb-4">
                                        <div class="col-md-6 col-sm-6">
                                            <div class="custome-radio">
                                                <input class="form-check-input" type="radio" name="approval" id="approval" value="approved">
                                                <label class="form-check-label label_info" for="approval"><span> {{ trans('label.approved') }}</span></label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-6">
                                            <div class="custome-radio">
                                                <input class="form-check-input" type="radio" name="approval" id="unapprove" value="unapproved">
                                                <label class="form-check-label label_info" for="unapprove"><span> {{ trans('label.unapproved') }}</span></label>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-sm-12 mt-4" id="approve_remark">
                                            <label class="w-100">{{ trans('label.reason_unapprove') }}</label>
                                            <textarea class="form-control" name="approve_remark"></textarea>
                                        </div>

                                    </div>
									<div class="row">
										<div class="form-group col-md-12">
											<button type="submit" class="btn btn-fill-out btn-block" name="register" style="width: 200px;margin:0 auto">{{ trans('label.save') }}</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- END LOGIN SECTION -->
	</div>
	<!-- END MAIN CONTENT -->
@endsection
@section('javascript')
    <script type="text/javascript">
    (function($){
        $('#form-approval').on('submit',function(e){
           if( !confirm("{{ trans('msg.confirm_approve_order') }}") ) return false;
        })
        $('#approve_remark').hide();
        $('input[name="approval"]').on('change',function(e){
            let id = $(this).attr('id');
            if( $(this).is(':checked') ){
                let val = $(this).val();
                console.log('approve val : ', val);
                if( val == 'approved'){
                    $('#approve_remark').hide();
                    $('#unapprove').prop('checked',false);
                }else{
                    $('#approve_remark').show();
                    $('#approval').prop('checked',false);
                }
            }
       })
    }(jQuery));
    </script>
@endsection