@extends('layouts.vendor')
@section('styles')

<link href="{{asset('assets/vendor/css/product.css')}}" rel="stylesheet" />
<link href="{{asset('assets/admin/css/jquery.Jcrop.css')}}" rel="stylesheet" />
<link href="{{asset('assets/admin/css/Jcrop-style.css')}}" rel="stylesheet" />

@endsection
@section('content')

<div class="content-area">
	<div class="mr-breadcrumb">
		<div class="row">
			<div class="col-lg-12">
				<h4 class="heading">{{ $langg->lang631 }} <a class="add-btn" href="{{ route('vendor-prod-types') }}"><i
							class="fas fa-arrow-left"></i> {{ $langg->lang550 }}</a></h4>
				<ul class="links">
					<li>
						<a href="{{ route('vendor-dashboard') }}">{{ $langg->lang441 }}</a>
					</li>
					<li>
						<a href="javascript:;">{{ $langg->lang444 }} </a>
					</li>
					<li>
						<a href="{{ route('vendor-prod-index') }}">{{ $langg->lang446 }}</a>
					</li>
					<li>
						<a href="{{ route('vendor-prod-types') }}">{{ $langg->lang445 }}</a>
					</li>
					<li>
						<a href="{{ route('vendor-prod-license-create') }}">{{ $langg->lang631 }}</a>
					</li>
				</ul>
			</div>
		</div>
	</div>


	<form id="geniusform" action="{{route('vendor-prod-store')}}" method="POST"
									enctype="multipart/form-data">
									{{csrf_field()}}
		
	<div class="row">
		<div class="col-lg-8">
			<div class="add-product-content">
				<div class="row">
					<div class="col-lg-12">
						<div class="product-description">
							<div class="body-area">
		
								<div class="gocover"
									style="background: url({{asset('assets/images/'.$gs->admin_loader)}}) no-repeat scroll center center rgba(45, 45, 45, 0.5);">
								</div>
								
									@include('includes.vendor.form-both')
		
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang632 }}* </h4>
												<p class="sub-heading">{{ $langg->lang517 }}</p>
											</div>
										</div>
										<div class="col-lg-12">
											<input type="text" class="input-field" placeholder="{{ $langg->lang632 }}"
												name="name" required="">
										</div>
									</div>
		
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang637 }}*</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<select id="cat" name="category_id" required="">
												<option value="">{{ $langg->lang691 }}</option>
												@foreach($cats as $cat)
												<option data-href="{{ route('vendor-subcat-load',$cat->id) }}"
													value="{{ $cat->id }}">{{$cat->name}}</option>
												@endforeach
											</select>
										</div>
									</div>
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang638 }}*</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<select id="subcat" name="subcategory_id" disabled="">
												<option value="">{{ $langg->lang639 }}</option>
											</select>
										</div>
									</div>
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang640 }}*</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<select id="childcat" name="childcategory_id" disabled="">
												<option value="">{{ $langg->lang641 }}</option>
											</select>
										</div>
									</div>
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang692 }}*</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<select id="type_check" name="type_check">
												<option value="1">{{ $langg->lang693 }}</option>
												<option value="2">{{ $langg->lang694 }}</option>
											</select>
										</div>
									</div>
		
									<div class="row file">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang695 }}*</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<input type="file" name="file" required="">
										</div>
									</div>
		
									<div class="row link hidden">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang696 }}*</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<textarea class="input-field" rows="4" name="link"
												placeholder="{{ $langg->lang696 }}"></textarea>
										</div>
									</div>
		

									<div class="row">
										<div class="col-lg-12">
											<div class="featured-keyword-area">
												<div class="heading-area">
													<h4 class="title">{{ $langg->lang697 }}</h4>
												</div>

												<div class="feature-tag-top-filds" id="license-section">
													<div class="license-area">
														<span class="remove license-remove"><i class="fas fa-times"></i></span>
															<div  class="row">
															   <div class="col-lg-6">
																  <input type="text" name="license[]" class="input-field" placeholder="{{ $langg->lang698 }}" required="">
																</div>
																<div class="col-lg-6">
																   <input type="number" min="1" name="license_qty[]" class="input-field" placeholder="{{ $langg->lang699 }}" value="1">
																</div>
														   </div>
													</div>
												</div>

												<a href="javascript:;" id="license-btn" class="add-fild-btn"><i class="icofont-plus"></i> {{ $langg->lang700 }}</a>
											</div>
										</div>
									</div>



									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">
													{{ $langg->lang680 }}*
												</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<div class="text-editor">
												<textarea name="details" class="nic-edit-p"></textarea>
											</div>
										</div>
									</div>
		
		
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">
													{{ $langg->lang681 }}*
												</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<div class="text-editor">
												<textarea name="policy" class="nic-edit-p"></textarea>
											</div>
										</div>
									</div>
		
									<div class="row">
										<div class="col-lg-12">
											<div class="checkbox-wrapper">
												<input type="checkbox" name="seo_check" class="checkclick" id="allowProductSEO"
													value="1">
												<label for="allowProductSEO">{{ $langg->lang683 }}</label>
											</div>
										</div>
									</div>
		
		
		
									<div class="showbox">
										<div class="row">
											<div class="col-lg-12">
												<div class="left-area">
													<h4 class="heading">{{ $langg->lang684 }} *</h4>
												</div>
											</div>
											<div class="col-lg-12">
												<ul id="metatags" class="myTags">
												</ul>
											</div>
										</div>
		
										<div class="row">
											<div class="col-lg-12">
												<div class="left-area">
													<h4 class="heading">
														{{ $langg->lang685 }} *
													</h4>
												</div>
											</div>
											<div class="col-lg-12">
												<div class="text-editor">
													<textarea name="meta_description" class="input-field"
														placeholder="{{ $langg->lang685 }}"></textarea>
												</div>
											</div>
										</div>
									</div>
		
	
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang701 }} * </h4>
												<p class="sub-heading">{{ $langg->lang668 }}</p>
											</div>
										</div>
										<div class="col-lg-12">
											<input type="text" class="input-field" placeholder="{{ $langg->lang701 }}"
												name="platform">
										</div>
									</div>
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang702 }} * </h4>
												<p class="sub-heading">{{ $langg->lang668 }}</p>
											</div>
										</div>
										<div class="col-lg-12">
											<input type="text" class="input-field" placeholder="{{ $langg->lang702 }}"
												name="region">
										</div>
									</div>
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang703 }} * </h4>
												<p class="sub-heading">{{ $langg->lang668 }}</p>
											</div>
										</div>
										<div class="col-lg-12">
											<input type="text" class="input-field" placeholder="{{ $langg->lang703 }}"
												name="licence_type">
										</div>
									</div>
									<input type="hidden" name="type" value="License">
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
		
											</div>
										</div>
										<div class="col-lg-12 text-center">
											<button class="addProductSubmit-btn" type="submit">{{ $langg->lang690 }}</button>
										</div>
									</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4">
			<div class="add-product-content">
				<div class="row">
					<div class="col-lg-12">
						<div class="product-description">
							<div class="body-area">
		
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang511 }} *</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<div class="img-upload custom-image-upload">
												<div id="image-preview" class="img-preview"
													style="background: url({{ asset('assets/vendor/images/upload.png') }});">
													<label for="image-upload" class="img-label" id="image-label"><i
															class="icofont-upload-alt"></i>{{ $langg->lang512 }}</label>
													<input type="file" name="photo" class="img-upload-p" id="image-upload"
														required>
												</div>
												<p class="img-alert mt-2 text-danger d-none"></p>
												<p class="text">
													{{ isset($langg->lang805) ? $langg->lang805 : 'Prefered Size: (800x800) or Square Size.' }}
												</p>
											</div>
		
										</div>
									</div>
		
		
		
									<input type="file" name="gallery[]" class="hidden" id="uploadgallery" accept="image/*"
										multiple>
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">
													{{ $langg->lang644 }} *
												</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<a href="#" class="set-gallery" data-toggle="modal" data-target="#setgallery">
												<i class="icofont-plus"></i> {{ $langg->lang645 }}
											</a>
										</div>
									</div>
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">
													{{ $langg->lang664 }}*
												</h4>
												<p class="sub-heading">
													({{ $langg->lang665 }} {{$sign->name}})
												</p>
											</div>
										</div>
										<div class="col-lg-12">
											<input name="price" step="0.1" type="number" class="input-field"
												placeholder="{{ $langg->lang666 }}" required="" min="0">
										</div>
									</div>
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang667 }}*</h4>
												<p class="sub-heading">{{ $langg->lang668 }}</p>
											</div>
										</div>
										<div class="col-lg-12">
											<input name="previous_price" step="0.1" type="number" class="input-field"
												placeholder="{{ $langg->lang666 }}" min="0">
										</div>
									</div>
									<div class="row">
										<div class="col-lg-12">
											<div class="featured-keyword-area">
												<div class="left-area">
													<h4 class="heading">{{ $langg->lang686 }}</h4>
												</div>
		
												<div class="feature-tag-top-filds" id="feature-section">
													<div class="feature-area">
														<span class="remove feature-remove"><i class="fas fa-times"></i></span>
														<div class="row">
															<div class="col-lg-6">
																<input type="text" name="features[]" class="input-field"
																	placeholder="{{ $langg->lang687 }}">
															</div>
		
															<div class="col-lg-6">
																<div class="input-group colorpicker-component cp">
																	<input type="text" name="colors[]" value="#000000"
																		class="input-field cp" />
																	<span class="input-group-addon"><i></i></span>
																</div>
															</div>
														</div>
													</div>
												</div>
		
												<a href="javascript:;" id="feature-btn" class="add-fild-btn"><i
														class="icofont-plus"></i> {{ $langg->lang688 }}</a>
											</div>
										</div>
									</div>
		
		
									<div class="row">
										<div class="col-lg-12">
											<div class="left-area">
												<h4 class="heading">{{ $langg->lang689 }} *</h4>
											</div>
										</div>
										<div class="col-lg-12">
											<ul id="tags" class="myTags">
											</ul>
										</div>
									</div>
		
									
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>
</div>

<div class="modal fade" id="setgallery" tabindex="-1" role="dialog" aria-labelledby="setgallery" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered  modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalCenterTitle">{{ $langg->lang619 }}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="top-area">
					<div class="row">
						<div class="col-sm-6 text-right">
							<div class="upload-img-btn">
								<label id="prod_gallery"><i class="icofont-upload-alt"></i>{{ $langg->lang620 }}</label>
							</div>
						</div>
						<div class="col-sm-6">
							<a href="javascript:;" class="upload-done" data-dismiss="modal"> <i
									class="fas fa-check"></i> {{ $langg->lang621 }}</a>
						</div>
						<div class="col-sm-12 text-center">( <small>{{ $langg->lang622 }}</small> )</div>
					</div>
				</div>
				<div class="gallery-images">
					<div class="selected-image">
						<div class="row">


						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@endsection

@section('scripts')

<script src="{{asset('assets/admin/js/jquery.Jcrop.js')}}"></script>
<script src="{{asset('assets/admin/js/jquery.SimpleCropper.js')}}"></script>

<script type="text/javascript">
	// Gallery Section Insert

	$(document).on('click', '.remove-img', function () {
		var id = $(this).find('input[type=hidden]').val();
		$('#galval' + id).remove();
		$(this).parent().parent().remove();
	});

	$(document).on('click', '#prod_gallery', function () {
		$('#uploadgallery').click();
		$('.selected-image .row').html('');
		$('#geniusform').find('.removegal').val(0);
	});


	$("#uploadgallery").change(function () {
		var total_file = document.getElementById("uploadgallery").files.length;
		for (var i = 0; i < total_file; i++) {
			$('.selected-image .row').append('<div class="col-sm-6">' +
				'<div class="img gallery-img">' +
				'<span class="remove-img"><i class="fas fa-times"></i>' +
				'<input type="hidden" value="' + i + '">' +
				'</span>' +
				'<a href="' + URL.createObjectURL(event.target.files[i]) + '" target="_blank">' +
				'<img src="' + URL.createObjectURL(event.target.files[i]) + '" alt="gallery image">' +
				'</a>' +
				'</div>' +
				'</div> '
			);
			$('#geniusform').append('<input type="hidden" name="galval[]" id="galval' + i +
				'" class="removegal" value="' + i + '">')
		}

	});

	// Gallery Section Insert Ends	
</script>

<script type="text/javascript">
	$('.cropme').simpleCropper();
</script>


<script src="{{asset('assets/admin/js/product.js')}}"></script>
@endsection