@extends('layouts.admin', ['title' => 'هدیه خرید'])

@section('content')

<h3>مدیریت محصولات - کالاهای مربوط به آپشن پکیج انتخابی

	( {{ $productsOption->title }} )
</h3>
<hr />


<div class="row">
	<div class="col-md-5">

		<h4>محصول جدید</h4>

		<form action="{{ url('/admin/option/products/' . $productId . '/package/' . $optionId )}}" method="post">
			@csrf

			<div class="form-group">
				<label for="from">محصول</label>
				<select name="product_id" id="product_id" class="form-control">
					<option selected>انتخاب کنید...</option>
					@foreach ($products as $item)
					<option value="{{ $item->id }}">{{ $item->title }}</option>
					@endforeach
				</select>
				<span class="error">{{ $errors->first('product_id') }}</span>
			</div>

			<div class="row">
				<div class="col-md-6">
					<div class="form-group">
						<label for="num">تعداد</label>
						<input type="number" class="form-control ltr" id="num" name="num" min="1"
							value="{{ old('num')??1 }}">
						<span class="error">{{ $errors->first('num') }}</span>
					</div>
				</div>
				<div class="col-md-6">

					<div class="form-group">
						<label for="amount">قیمت واحد (تومان)</label>
						<input type="number" class="form-control ltr" id="amount" name="amount" min="0"
							value="{{ old('amount')??0 }}">
						<span class="error">{{ $errors->first('amount') }}</span>
					</div>

				</div>
			</div>

			<button type="submit" class="btn btn-primary">ذخیره</button>
			<a href="{{ route('admin.product.edit', $productId ) }}?step=3" class="btn btn-link">بازگشت</a>

			<p class="success">{{ session('message') }}</p>
			<p class="error">{{ session('error') }}</p>

		</form>
	</div>

	<div class="col-md-7">
		@if(count($dataProduct)==0)
		<div class="alert alert-info" role="alert">
			اطلاعاتی برای نمایش دادن وجود ندارد.
		</div>
		@else
		<table class="table table-striped">
			<tr>
				<th>محصول</th>
				<th>تعداد</th>
				<th>قیمت واحد (تومان)</th>
				<th>عملیات</th>
			</tr>

			@foreach($dataProduct as $item)
			<tr>

				<td>{{ getProductTitleWithIdsHash($item->ids_hash) }}</td>
				<td>{{ $item->num }}</td>
				<td>{{ number_format($item->amount, 0, '', ',') }}</td>
				<td style="width: 150px;">
					<a href="/admin/option/products/{{ $productId }}/package/{{ $optionId }}/edit/{{ $item->id }}"
						class="btn btn-primary btn-sm">ویرایش</a>
					<a href="/admin/option/products/{{ $productId }}/package/{{ $optionId }}/delete/{{ $item->id }}"
						onclick="return confirm('آیا میخواهید آیتم مورد نظر حذف شود؟');"
						class="confirm-delete btn btn-danger btn-sm">حذف</a>
				</td>
			</tr>
			@endforeach
		</table>
		@endif

	</div>

</div>

<div class="modal fade" tabindex="-1" id="addModal" role="dialog" aria-labelledby="gridSystemModalLabel">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="gridSystemModalLabel">انتخاب کالا به همراه آپشن</h4>
			</div>
			<div class="modal-body">
				<form action="/admin/option/products/{{ $productId }}/package/{{ $optionId }}/add-product-options"
					method="POST" id="form-add-product-with-option">
					@csrf
					<div id="modalBodyContent"></div>
				</form>
			</div>
			<div class="modal-footer">
				<div class="row">
					<div class="col-md-5">

					</div>
					<div class="col-md-7">
						<button type="button" class="btn btn-default" data-dismiss="modal">بستن</button>
						<button type="submit" form="form-add-product-with-option" class="btn btn-primary">تایید</button>
					</div>
				</div>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


@stop

@section('javascript')

<script>
	var arrayOptions = {
		{!! $arrayOptions !!} 
	};

	jQuery("#product_id").change(function(){
		var currID = jQuery(this).val();
		var currTitle = jQuery('#product_id option:selected').text();

		var data = arrayOptions[currID];
		var indexCheckBox = 0;
		var indexCheckBoxGroup = 0;
		
		if (typeof data !== 'undefined') 
		{ 
			jQuery("#modalBodyContent").html("");
			var htmlTemp = `
			<label  >${currTitle}</label>
			<input type="hidden" name="hovOpProductId" value="${currID}" />
			<div class="row">
				<div class="col-md-3">
					<input type="text" class="form-control pNumR" value="" name="hovNum" placeholder="تعداد" />
				</div> 
				<div class="col-md-3">
					<input type="text" class="form-control pNumR" value="" name="hovAmount" placeholder="قیمت واحد (تومان)" />
				</div> 
				
				<div class="col-md-6">
					<label >
						<input type="checkbox" name="chkhovWithoutOption" value="true">    
						کالای بدون آپشن را هم شامل شود
					</label> 
				</div>   
			</div> 
			`;

			Object.keys(data).forEach(function(k){ 
				htmlTemp += `
				<hr/>
				<h4>${k}</h4> 
				`;

				indexCheckBoxGroup++;

				Object.keys(data[k]).forEach(function(k2){ 
					var typeTTT="اجباری";
					if(data[k][k2].multiselect == true)
						typeTTT="اختیاری";

					indexCheckBox++;

					htmlTemp += ` 
					<input type="${data[k][k2].multiselect == true ? 'checkbox' : 'radio'}" value="${data[k][k2].id}" name="crhovOptions[${indexCheckBoxGroup}]" class="checkboxOptionProducts" id="chk${indexCheckBox}" />
					<label for="chk${indexCheckBox}">${data[k][k2].title} (${typeTTT})</label> 
					`; 
				}); 
			});
			
			jQuery("#modalBodyContent").html(htmlTemp);
			jQuery("#addModal").modal();
		}
	});

</script>

@endsection