@extends('layouts.back-end.body')
@section('content')

<div class="app-content pt-3 p-md-3 p-lg-4">
    <div class="container-xl">
		<div class="row g-3 align-items-center justify-content-between">
			<div class="col-auto">
            <h1 class="app-page-title"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-person-fill-gear" viewBox="0 0 16 16">
  <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-9 8c0 1 1 1 1 1h5.256A4.493 4.493 0 0 1 8 12.5a4.49 4.49 0 0 1 1.544-3.393C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4Zm9.886-3.54c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"/>
</svg> <span class="sub-navicate">{{__("message.customer")}}{{__("message.vip")}} <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/>
            <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/>
            </svg> @if($title) {{__("message.edit")}} @endif</h1></span>
			</div>
            @if($title == 'View') 
			<div class="col-auto no-padding-margin" id="back-to-list">
                        <div class="page-utilities">
                            <div class="row g-2 justify-content-start justify-content-md-end align-items-center">
                                <div class="col-auto">
                                    <div class="table-search-form row gx-1 align-items-center">
                                        <div class="col-auto">
                                        <a href="{{route('customer-vip.index')}}"><button type="button" onclick="redirect_back();" class="btn btn-warning float-right cancel-margin"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                </svg> {{__("message.go back")}}</button></a>
                                        </div>
                                    </div>
                                </div><!--//col-->
                            </div><!--//row-->
                        </div><!--//table-utilities-->
                    </div><!--//col-auto-->
			</div>
            @endif
		</div>
    
		<form class="form-horizontal" id="form-customer-vip" method="POST" action="{{ !isset($row)?route('customer-vip.store'):route('customer-vip.update',$row->id) }}" enctype="multipart/form-data">
		@csrf
			@if (isset($row))
				<input name="_method" type="hidden" value="PUT">
			@endif
			<div class="app-card app-card-notification shadow-sm mb-4">
				<div class="app-card-body p-4 input-p-4">
					<div class="col-lg-12 col-md-12 col-sm-12 row middle-decoration slide-padding">
						<div class="col-lg-6 col-md-6 col-sm-12 tab-language">
							<label>{{__("message.title")}}<span class="red">*</span></label>
							<input type="text" class="form-control require-input" name="title" value="{{isset($row['title']) ? $row['title'] : ''}}" placeholder="Please input">
						</div>
						<div class="col-lg-6 col-md-6 col-sm-12">
							<label>{{__("message.limit order")}} <span class="red">*</span></label>
							<input type="text" class="form-control" name="order" onkeypress="return numberOnly(event)" value="{{isset($row['order']) ? $row['order'] : ''}}" placeholder="Please input">
						</div>
						<div class="col-lg-6 col-md-6 col-sm-12">
							<label>{{__("message.ramdom")}} <span class="red">*</span></label>
							<select class="form-select" name="is_random">							 
							 	<option value="1" @if(isset($row['is_random']) && $row['is_random']==1) selected @endif>{{__("message.yes")}}</option>
							    <option value="0" @if(isset($row['is_random']) && $row['is_random']==0) selected @endif>{{__("message.no")}}</option>
							</select>
						</div>
						
						<div class="col-lg-6 col-md-6 col-sm-12">
							<label>{{__("message.sort number")}} <span class="red">*</span></label>
							<input type="text" class="form-control require-input" name="sort_number" value="{{isset($row['sort_number']) ? $row['sort_number'] : ''}}" placeholder="Please input" onkeypress="return numberOnly(event)">
						</div>
						<div class="col-lg-6 col-md-6 col-sm-12">
							<label>{{__("message.show to customer")}} <span class="red">*</span></label>
							<select class="form-select" name="is_show_to_customer">							 
							 	<option value="1" @if(isset($row['is_show_to_customer']) && $row['is_show_to_customer']==1) selected @endif>{{__("message.show")}}</option>
							    <option value="0" @if(isset($row['is_show_to_customer']) && $row['is_show_to_customer']==0) selected @endif>{{__("message.hide")}}</option>
							</select>
						</div>
						<div class="col-lg-12 col-md-12 col-sm-12 input-next">
							<label style="margin-bottom: 0px;">{{__("message.description")}}</label>
							<textarea class="text-area" id="description" rows="4" name="description" placeholder="" style="margin-top: 10px;"></textarea>
						</div>
						<hr class="mb-4" style="height: 0px;">
						@if(isset($row['vip_package']))
							@foreach($row['vip_package'] as $kp => $vp)
							@php
								$my_product  = '';
								$product = isset($vp['product']['product_title']) ? $vp['product']['product_title'] : '';
								$price = isset($vp['product']['price']) ? $vp['product']['price'] : 0;
								$commission_price = isset($vp['product']['commission']['price']) ? $vp['product']['commission']['price'] : 0;
								$my_product = 'Price: '.number_format($price,2).'THB'.'Product: '.$product.'Commission: '.number_format($commission_price,2).'THB'; 
							@endphp
								<input type="hidden" id="vip_package_{{ $kp }}" value="{{ $vp->id}}" />
								<div id="tab-{!! $kp !!}" class="add-product"  style="display: contents;padding: 0px;">
								
									@if($kp == 0)
									<div class="col-10 col-md-3">
										<h5 class="section-title" >{{__("message.project")}}{{__("message.vip")}}</h5>
										<div class="section-intro" style="background-color: gainsboro;padding: 4px;"><i>{{__("message.please select products created")}} </i></div>
									</div>
									<div class="col-2 col-md-1 btn-card txt-card">
										<input type="text" class="form-control require-input require-input-readonly" value="1" readOnly>
									</div>
									<div class="col-12 col-md-5 select-div">
										<div class="app-card app-card-settings p-4">
											<!-- <input type="hidden" id="product_id_{!! $kp !!}" name="product[{{ $kp }}][product_id]" value="{!! isset($vp['product_id']) ? $vp['product_id'] : 0 !!}"/> -->

											<!-- <input type="text" class="form-control require-input" title="{!! $my_product !!}" value="{!! $my_product !!}" readOnly/> -->

											<select class="form-select edit-select2" aria-label="Default select example" name="product[{{ $kp }}][product_id]">
											 @foreach($products as $pro)
											  	<option  value="{!! $pro->id!!}" @if($pro->id==$vp['product_id']) selected @endif>
											  		{!! 'Price: '.number_format($pro->price,2).'฿'.'- Product: '.$pro->product_title.'- Commission: '.number_format($pro->commission->price??0,2).'฿' !!}
											  	</option>
											  @endforeach
											</select>	

										</div><!--//app-card-->
									</div>
									<div class="col-12 col-md-2 btn-card txt-card input-group">
									<input type="text" class="form-control require-input require-input-readonly" name="product[{{ $kp }}][percent]" value="{!! isset($vp['percent']) ? $vp['percent'] : 0 !!}">
									<input type="hidden" class="form-control require-input require-input-readonly" name="product[{{ $kp }}][vip_package_id]" value="{!! isset($vp['id']) ? $vp['id'] : 0 !!}">
										<div class="input-group-append" style="height: 40px;">
											<span class="input-group-text" id="basic-addon2">%</span>
										</div>
									</div>
									<div class="col-12 col-md-1 btn-card">
										<div class="app-card app-card-settings">
											<span  id="remove-order-{!! $kp !!}" onclick="removeOrder({!! $kp !!})"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="pointer bi bi-dash-square-dotted" viewBox="0 0 16 16">
											<path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834 0h.916v-1h-.916v1zm1.833 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z"/>
											</svg></span>
										</div>
									</div>
									@else
									<div class="col-10 col-md-3"></div>
									<div class="col-2 col-md-1 btn-card txt-card">
										<input type="text" class="form-control require-input require-input-readonly" value="{{ ($kp + 1) }}" readOnly>
									</div>
									<div class="col-12 col-md-5 select-div">
										<div class="app-card app-card-settings p-4">

											<!-- <input type="hidden" id="product_id_{!! $kp !!}" name="product[{{ $kp }}][product_id]" value="{!! isset($vp['product_id']) ? $vp['product_id'] : 0 !!}"/>

											<input type="text" class="form-control require-input" value="{!! $my_product !!}" readOnly />	 -->	
											<select class="form-select edit-select2" aria-label="Default select example" name="product[{{ $kp }}][product_id]"> 
											 @foreach($products as $pro)
											  	<option  value="{!! $pro->id!!}" @if($pro->id==$vp['product_id']) selected @endif>
											  		{!! 'Price: '.number_format($pro->price,2).'฿'.'- Product: '.$pro->product_title.'- Commission: '.number_format($pro->commission->price??0,2).'฿' !!}
											  	</option>
											  @endforeach
											</select>	
										</div><!--//app-card-->
									</div>
									<div class="col-12 col-md-2 btn-card txt-card input-group">
									<input type="text" class="form-control require-input require-input-readonly" name="product[{{ $kp }}][percent]" value="{!! isset($vp['percent']) ? $vp['percent'] : 0 !!}">

									<input type="hidden" class="form-control require-input require-input-readonly" name="product[{{ $kp }}][vip_package_id]" value="{!! isset($vp['id']) ? $vp['id'] : 0 !!}">

										<div class="input-group-append" style="height: 40px;">
											<span class="input-group-text" id="basic-addon2">%</span>
										</div>
									</div>
									<div class="col-12 col-md-1 btn-card">
										<div class="app-card app-card-settings">
											<span  id="remove-order-{!! $kp !!}" onclick="removeOrder({!! $kp !!})"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="pointer bi bi-dash-square-dotted" viewBox="0 0 16 16">
											<path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834 0h.916v-1h-.916v1zm1.833 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z"/>
											</svg></span>
										</div>
									</div>
									@endif
								</div>
							@endforeach
							<div id="tab-{!! count($row['vip_package']) !!}" class="add-product"  style="display: contents;padding: 0px;">
								<div class="col-10 col-md-3">
								@if(isset($row['vip_package']))
									@if(count($row['vip_package']) < 1)
									<span id="project-vip">
										<h5 class="section-title" >{{__("message.project")}}{{__("message.vip")}}</h5>
										<div class="section-intro" style="background-color: gainsboro;padding: 4px;"><i>{{__("message.please select products created")}}  </i></div>
									</span>
									@else
									<span id="project-vip" style="display:none;">
										<h5 class="section-title" >{{__("message.project")}}{{__("message.vip")}}</h5>
										<div class="section-intro" style="background-color: gainsboro;padding: 4px;"><i>{{__("message.please select products created")}}  </i></div>
									</span>
									@endif
								@endif
								</div>
								<div class="col-2 col-md-1 btn-card txt-card">
									<input type="text" class="form-control require-input require-input-readonly" value="{!! (count($row['vip_package']) + 1) !!}" readOnly>
								</div>
								<div class="col-12 col-md-5 select-div">
									<div class="app-card app-card-settings p-4">
										<input type="hidden" id="product_id_{!! count($row['vip_package']) !!}" name="product[{!! count($row['vip_package']) !!}][product_id]" value=""/>
										<select class="select2" id="select2_{!! count($row['vip_package']) !!}" class="form-control" style="width: 100%;"></select>					
									</div><!--//app-card-->
								</div>

								<div class="col-12 col-md-2 btn-card txt-card input-group">
								<input type="text" class="form-control require-input require-input-readonly" name="product[{!! count($row['vip_package']) !!}][percent]" value="0">
									<div class="input-group-append" style="height: 40px;">
										<span class="input-group-text" id="basic-addon2">%</span>
									</div>
								</div>
								<div class="col-12 col-md-1 btn-card">
									<div class="app-card app-card-settings">
										<span  id="add-order"><svg xmlns="http://www.w3.org/2000/svg" id="add-more" width="32" height="32" fill="currentColor" class="pointer bi bi-plus-square-dotted" viewBox="0 0 16 16">
											<path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834-1v1h.916v-1h-.916zm1.833 1h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
										</svg></span>
									</div>
								</div>
							</div>
						@else
						<div id="tab-0" class="add-product"  style="display: contents;padding: 0px;">
							<div class="col-10 col-md-3">
								<h5 class="section-title" >{{__("message.project")}}{{__("message.vip")}}</h5>
								<div class="section-intro" style="background-color: gainsboro;padding: 4px;"><i>{{__("message.please select products created")}}  </i></div>
							</div>
							<div class="col-2 col-md-1 btn-card txt-card">
								<input type="text" class="form-control require-input require-input-readonly" value="1" readOnly>
							</div>
							<div class="col-12 col-md-5 select-div">
								<div class="app-card app-card-settings p-4">
									<input type="hidden" id="product_id_0" name="product[0][product_id]" value=""/>
									<select class="select2" id="select2_0" class="form-control" style="width: 100%;"></select>					
								</div><!--//app-card-->
							</div>
							<div class="col-12 col-md-2 btn-card txt-card input-group">
								<input type="text" class="form-control require-input require-input-readonly" name="product[0][percent]" value="0">
								<div class="input-group-append" style="height: 40px;">
									<span class="input-group-text" id="basic-addon2">%</span>
								</div>
							</div>
							<div class="col-12 col-md-1 btn-card">
								<div class="app-card app-card-settings">
									<span  id="add-order"><svg xmlns="http://www.w3.org/2000/svg" id="add-more" width="32" height="32" fill="currentColor" class="pointer bi bi-plus-square-dotted" viewBox="0 0 16 16">
										<path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834-1v1h.916v-1h-.916zm1.833 1h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
									</svg></span>
								</div>
							</div>
						</div>
							
						@endif

						<div class="col-lg-12 col-md-12 col-sm-12 input-next">
                            <div class="form-check">
								<input class="form-check-input" type="checkbox" name="is_active" value="{{isset($row['is_active']) ? $row['is_active'] : '1'}}" id="flexCheckApprove">
								<label class="form-check-label" for="flexCheckApprove">
									{{__("message.active")}} 
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
            @if($title !== 'View')
			<div class="btn-save-change">
				<button type="submit" class="btn app-btn-primary float-right">
					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-check" viewBox="0 0 16 16">
					<path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
					<path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
					</svg> 
					{{__("message.save change")}} 
				</button>

				<button type="button" onclick="redirect_back();" class="btn btn-warning float-right cancel-margin"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
				<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
				</svg> {{__("message.go back")}} </button>

			</div>
            @endif
		</form>
	</div>
</div>
<style type= text/css>
	.txt-card{
		padding-top: 0rem;
	}
	.select-div{
		padding:0px;
	}
	.btn-card{
		padding-top: 1.5rem;
		text-align: center;
	}
	.pointer{
		cursor: pointer;
	}
	.select2-container .select2-selection--single {
   		height: 40px !important;
	}

	.select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 40px !important;
	}

	.select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 40px !important;
	}
	.select2-hidden-accessible {
		position: initial !important;
	}
	input.require-input-readonly{
		text-align:center;
	}
	@media (max-width: 575.98px) { 
		.btn-card{
			padding-top: 0rem;
			text-align: right;
		}
		.txt-card{
			padding-top: 1.5rem;
		}
	}
	@media (max-width: 767.98px) { 
		.btn-card{
			padding-top: 0rem;
			text-align: right;
		}
		.txt-card{
			padding-top: 1.5rem;
		}
	}
</style>
<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

<script type="text/javascript">

	  function removeProduct(rowId) {
        $.confirm({
            escapeKey: 'cancel',
            type: 'red',
            title: '<label class="text-danger">{{trans("global.delete")}}</label>',
            content: '{{trans("global.confirm_delete")}}',
            theme: 'material',
            buttons: {
                formSubmit: {
                    text: '{{trans("global.delete")}}',
                    btnClass: 'btn-red',
                    action: function () {
                        if(!rowId){
                            return false;
                        }
                        $.ajax({
                            type: 'POST',
							url: '{{ url("admin/remove-product") }}',
                            data:{
                                'id':rowId,
                                '_token':'{{ csrf_token() }}',
                                'ajaxRequestHtml':'true'
                            },
                            success: function (data) {
                                if(data.code != 404){
                                    $.notify(data.message, {
                                        placement: {
                                            from: "bottom"
                                        },
                                        animate: {
                                            enter: 'animated fadeInRight',
                                            exit: 'animated fadeOutRight'
                                        },
                                        className:'success',
                                        delay: 5000
                                    });
                                    $("#customer-vip-table").dataTable().fnDraw();
                                }
                            },
                            error: function (request, status, error) {
                                $.notify(request.responseJSON.message, {
                                    placement: {
                                        from: "bottom"
                                    },
                                    animate: {
                                        enter: 'animated fadeInRight',
                                        exit: 'animated fadeOutRight'
                                    },
                                    className:'error',
                                    delay: 5000
                                });
                            }
                        });
                    }
                },
                '{{trans("global.cancel")}}': function () {
                    //close
                },
            }
        });
    }

	$('#add-order').click(function(){
		let incre = $('.add-product').length;
		if(incre == 1){
			let txt = $('.add-product').attr('id');
			let res = txt.substring(txt.length - 1);
			if(res > incre){
				incre = parseInt(res) + 1;
			}
		} 
		if($("#tab-"+incre).length == 1) {
			incre = incre + 2;
		}
		let str = "";
		str = str + '<div id="tab-'+ incre +'" class="add-product" style="display: contents;padding: 0px;">';
		str = str + '<div class="col-10 col-md-3"></div>';
		str = str + '<div class="col-2 col-md-1 btn-card"><input type="text" class="form-control require-input require-input-readonly" value="'+ (incre + 1) +'" readOnly></div>';
		str = str + '<div class="col-12 col-md-5 select-div"><div class="app-card app-card-settings p-4">';
		str = str + '<input type="hidden" id="product_id_'+ incre +'" name="product['+ incre +'][product_id]" value=""/>';
		str = str + '<select class="select2" id="select2_'+ incre +'" class="form-control" style="width: 100%;"></select>';
		str = str + '</div></div><div class="col-12 col-md-2 btn-card txt-card input-group">';
		str = str + '<input type="text" class="form-control require-input require-input-readonly" name="product['+ incre +'][percent]" value="0">';
		str = str + '<div class="input-group-append" style="height: 40px;"><span class="input-group-text" id="basic-addon2">%</span></div></div>';
		str = str + '<div class="col-12 col-md-1 btn-card"><div class="app-card app-card-settings">';
		str = str + '<span id="remove-order-'+ incre +'" onclick="removeOrder('+ incre +')"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="pointer bi bi-dash-square-dotted" viewBox="0 0 16 16"><path d="M2.5 0c-.166 0-.33.016-.487.048l.194.98A1.51 1.51 0 0 1 2.5 1h.458V0H2.5zm2.292 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zm1.833 0h-.916v1h.916V0zm1.834 0h-.917v1h.917V0zm1.833 0h-.917v1h.917V0zM13.5 0h-.458v1h.458c.1 0 .199.01.293.029l.194-.981A2.51 2.51 0 0 0 13.5 0zm2.079 1.11a2.511 2.511 0 0 0-.69-.689l-.556.831c.164.11.305.251.415.415l.83-.556zM1.11.421a2.511 2.511 0 0 0-.689.69l.831.556c.11-.164.251-.305.415-.415L1.11.422zM16 2.5c0-.166-.016-.33-.048-.487l-.98.194c.018.094.028.192.028.293v.458h1V2.5zM.048 2.013A2.51 2.51 0 0 0 0 2.5v.458h1V2.5c0-.1.01-.199.029-.293l-.981-.194zM0 3.875v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 5.708v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zM0 7.542v.916h1v-.916H0zm15 .916h1v-.916h-1v.916zM0 9.375v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .916v.917h1v-.917H0zm16 .917v-.917h-1v.917h1zm-16 .917v.458c0 .166.016.33.048.487l.98-.194A1.51 1.51 0 0 1 1 13.5v-.458H0zm16 .458v-.458h-1v.458c0 .1-.01.199-.029.293l.981.194c.032-.158.048-.32.048-.487zM.421 14.89c.183.272.417.506.69.689l.556-.831a1.51 1.51 0 0 1-.415-.415l-.83.556zm14.469.689c.272-.183.506-.417.689-.69l-.831-.556c-.11.164-.251.305-.415.415l.556.83zm-12.877.373c.158.032.32.048.487.048h.458v-1H2.5c-.1 0-.199-.01-.293-.029l-.194.981zM13.5 16c.166 0 .33-.016.487-.048l-.194-.98A1.51 1.51 0 0 1 13.5 15h-.458v1h.458zm-9.625 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zm1.834 0h.916v-1h-.916v1zm1.833 0h.917v-1h-.917v1zm1.833 0h.917v-1h-.917v1zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z"/></svg></span>';
		str = str + '</div></div></div>';

		$(str).insertAfter( "#tab-"+ (incre - 1));

		$("select#select2_"+incre).select2({
			minimumInputLength: -1,
			ajax: {
			url: "{!! url('admin/get-product') !!}",
			dataType: 'json',
			delay: 250,
			data: (params) => {
				return {
				q: params.term,
				"_token":'{{ csrf_token() }}'
				}
			},
			processResults: (data, params) => {
				const results = data.items.map(item => {
				// let img = '{{ asset("storage") }}'+ '/' +item.thumbnail;
				return {
					id: item.id,
					text: 'Price: '+ convertFormate(item.price)+ '฿' + '- ' + 'Product: ' +item.product_title+ '- ' + 'Commission: ' +convertFormate(item.commission.price)+ '฿' };
				});
				return {
				results: results };

			} } }).change(function(){
				$('#product_id_'+incre).val($(this).val());
			});
	});

	function removeOrder(id){
		let count = $('.add-product').length;
		if(count == 2){
			$('#project-vip').removeAttr('style');
		}
		let vip_package_id = $('#vip_package_'+id).val();
		if(vip_package_id != ''){
			removeProduct(vip_package_id);
		}
		$('#tab-'+id).remove();
	}

	function numberOnly(evt){
		var charCode = (evt.which) ? evt.which : evt.keyCode;
		if (charCode > 31 
		&& (charCode < 48 || charCode > 57))
			return false;

		return true;
	}

	$('#form-customer-vip :checkbox').change(function() {
		// this will contain a reference to the checkbox   
		if (this.checked) {
			$('#flexCheckApprove').val(1);
			$('#flexCheckApprove').attr('checked',true);
		} else {
			$('#flexCheckApprove').val(0);
			$('#flexCheckApprove').attr('checked',false);
		}
	});
	// redirect back to listing page
    function redirect_back(){
        location.href = '{{ url('/admin/customer-vip') }}';
    }
	// check user is approve or padding
	var is_active = $('#flexCheckApprove').val();
	if(is_active == 1){
		$('#flexCheckApprove').attr('checked',true);
	} else {
		$('#flexCheckApprove').attr('checked',false);
	}

	function convertFormate(nStr)
	{
		nStr += '';
		x = nStr.split('.');
		x1 = x[0];
		x2 = x.length > 1 ? '.' + x[1] : '';
		var rgx = /(\d+)(\d{3})/;
		while (rgx.test(x1)) {
			x1 = x1.replace(rgx, '$1' + ',' + '$2');
		}
		return x1 + x2;
	}

    $(function () {
		let res = "{!! isset($row['vip_package']) ? count($row['vip_package']) : 0 !!}";
		$("select#select2_"+res).select2({
		minimumInputLength: -1,
		ajax: {
		url: "{!! url('admin/get-product') !!}",
		dataType: 'json',
		delay: 250,
		data: (params) => {
			return {
			q: params.term,
			"_token":'{{ csrf_token() }}'
			}
		},
		processResults: (data, params) => {
			const results = data.items.map(item => {
			// let img = '{{ asset("storage") }}'+ '/' +item.thumbnail;
			return {
				id: item.id,
				text: 'Price: '+ convertFormate(item.price)+ '฿' + '- ' + 'Product: ' +item.product_title+ '- ' + 'Commission: ' +convertFormate(item.commission.price)+ '฿' };
			});
			return {
			results: results };

		} } }).change(function(){
			$('#product_id_'+res).val($(this).val());
		});
		
		var description =  `{{ isset($row->description) ? $row->description : "" }}`;
		$('#description').html(description);

		$("select.edit-select2").select2();
    });
</script>
@endsection