@extends('layouts.app')

@section('content')
<div class="content-page">
	<div class="content">

		<!-- Start Content-->
		<div class="container-fluid">

			<!-- start page title -->
			<div class="row mt-3 mb-3">
				<div class="col-8 col-sm-8 col-md-8 col-lg-8">
					<div class="page-title-box">
						<h4>App Dashboard Sections</h4>
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item">
								<a href="{{ route('dashboard') }}">Dashboard</a>
							</li>
							<li class="breadcrumb-item">
								App Settings
							</li>
							<li class="breadcrumb-item">
								<a href="{{ route('appDashboardSections') }}">App Dashboard Sections</a>
							</li>
							<li class="breadcrumb-item active">
								New Section
							</li>
						</ol>
					</div>
				</div>
				<div class="col-4 col-sm-4 col-md-4 col-lg-4 text-right">
					<a href="{{route('appDashboardSections')}}" class="btn btn-info mt-4">
						<i class="fa fa-list mr-2"></i>
						View All Sections
					</a>
				</div>
			</div>
			<!-- end page title -->
			@include('flash/flash')
			<div class="row">
				<div class="col-8 offset-2">
					<div class="">
						<form id="valForm" action="{{route('sections.store')}}" method="post">
							@csrf
						
							<div class="row">
								<div class="col-sm-8">
									<div class="form-group">
										<label class="control-label">Section Label</label>
										<input class="form-control" type="text" name="name" data-bv-notempty="true" data-bv-notempty-message="Section Label is required" required placeholder="Section Label">
									</div>
								</div>
								<div class="col-sm-4">
									<div class="form-group">
										<label class="control-label">Visiblility</label>
										<select class="form-control"name="enabled" data-bv-notempty="true" data-bv-notempty-message="Visibility status is required" required>
											<option value=""></option>	
											<option value="Yes">Visible</option>
											<option value="No">Hidden</option>
										</select>
									</div>
								</div>
							</div>
							<h5 class="text-muted">Products under Section</h5>
							<div class="list-group" id="prodList">
								
							</div>
							<button class="btn btn-xs btn-outline-secondary mt-2" type="button" data-toggle="modal" data-target="#productSelectionModal">
								<i class="fa fa-plus mr-1"></i>
								Select Products
							</button>
							<hr>
							<div class="text-right">
								<button class="btn btn-success btn-md" type="submit">
									<i class="fa fa-check mr-1"></i>
									Save Now
								</button>
							</div>
						</form>	
						
					</div>
					
				</div>
			</div>
			
		</div>
		<!-- container -->

	</div>
	<!-- content -->

	

</div>

<div class="modal fade" id="productSelectionModal" tabindex="-1" role="dialog" aria-labelledby="productSelectionModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="productSelectionModalLabel">Select Product for Section</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
        	<label class="control-label">Select Category</label>
        	<select class="form-control" id="productCategory">
        		<option value="">-- Select Category --</option>
        		<br />
<b>Warning</b>:  Undefined variable $categories in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/app_dashboard_sections/create.blade.php</b> on line <b>110</b><br />
<br />
<b>Warning</b>:  foreach() argument must be of type array|object, null given in <b>/home/keshavvps/public_html/keshav/KG2/OJA-Web-main/resources/views/app_dashboard_sections/create.blade.php</b> on line <b>110</b><br />
        	</select>
        </div>
        <div class="form-group">
        	<label class="control-label">
        		Select Category Product
        		<span class="aloader"></span>
        	</label>
        	<select class="form-control" multiple style="height:35px;" id="categoryProduct">
        		<option value=""></option>
        	</select>
        </div>
      </div>
      <div class="modal-footer">
      	<button type="button" class="btn btn-success selectProductBtn">Add to List</button>
        <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
      </div>
    </div>
  </div>
</div>


<script>
	var loading = `<span class="text-danger loading"><i class="fa fa-spin fa-spinner"></i></span>`;
	$(function(){
	 	
	 	//$('#productSelectionModal').modal('show');
	 	
	 	$(document).find('#productSelectionModal').on('shown.bs.modal', function (e) {
		  //console.log('Modal Displayed');
		   $('#productCategory').select2();
		});
		
		$(document).find('#productSelectionModal').on('hidden.bs.modal', function (e) {
		  //console.log('Modal Hidden');
		   $('#productCategory').select2('destroy');
		   $('#productCategory').val('');
		   $('#categoryProduct').html('');
		   if ($('#categoryProduct').hasClass("select2-hidden-accessible")) {
			    $('#categoryProduct').select2('destroy');
		   }
		});
		
		$(document).on('click','.selectProductBtn',function(){
		
			var selProdd = $('#categoryProduct').val();
		
			if(selProdd.length>0){
				for(i=0;i<selProdd.length;i++){
					selProd = selProdd[i].split('~');
					row = `<div class='list-group-item'>`;
					row+= `<input type="hidden" class="skuIds" name="sku_id[]" value="`+selProd[0]+`">`;
					row+= `<div class="row">`;
					row+= `<div class="col-sm-1"><i class="fa fa-bars mt-3 prodHandle" style="cursor:grab;"></i></div>`;
					row+= `<div class="col-sm-1">`;
					row+= `<img src="`+selProd[6]+`" style="width:50px;height:50px;" class="rounded">`;
					row+= `</div>`;
					row+= `<div class="col-sm-10">`;
					row+= `<button class="btn btn-xs btn-outline-danger float-right remSectionProd" type="button"><i class="fa fa-trash"></i></button>`;
					row+= `<h5>`+selProd[1]+`-`+selProd[2]+`</h5>`;
					row+= `<h6>`+selProd[3]+` - `+selProd[4]+`:`+selProd[5]+`</h6>`;
					row+= `</div>`;
					row+= `</div></div>`;
					$('#prodList').append(row);
					buildReOrder();
				}
				buildReOrder()
				$('#productSelectionModal').modal('hide');
			} else {
				Swal.fire(
			      '',
			      '<span class="text-dark font-20"><b>Please select a product.</b></span>',
			      'warning'
			   );
			}
			
		});
		
		$(document).on('click','.remSectionProd',function(){
			$(this).parents('.list-group-item').remove();
		});
		
		
		$(document).on('change','#productCategory',function(){
			var sbox = $(this);
			var catid = sbox.val();
			if(catid){
				$.ajax({
					type:'GET',
					data:{catid:catid,_token:$('[name="csrf-token"]').attr('content')},
					url:"{{route('getCategoryProductsAjax')}}",
					beforeSend:function(){
						$('.aloader').html(loading);
						console.log(this.url);
					},
					success:function(resp){
						if(resp==0){
							
						} else {
							if ($('#categoryProduct').hasClass("select2-hidden-accessible")) {
							    $('#categoryProduct').select2('destroy');
							}
							$('#categoryProduct').html(resp);
							
							$(document).find('.skuIds').each(function(){
								sk = $(this).val();
								console.log(sk);
								$(document).find('option.skoption'+sk).prop('disabled',true);
							});
							
							$('#categoryProduct').select2();
						}
						$('.loading').remove();
					}
				});
				
			} else {
				$('#categoryProduct').html('');
				if ($('#categoryProduct').hasClass("select2-hidden-accessible")) {
				    $('#categoryProduct').select2('destroy');
				}
				
			}
		});
		
		function buildReOrder(){
		 	//sorting of products
		 	sortable('#prodList',{
		 		handle:'.prodHandle',
		 		placeholder: `<div class="list-group-item text-muted bg-light p-4 text-center">Product will be dropped here</div>`
			})[0].addEventListener('sortupdate', function(e) {
				$('.sortUpdateMessage').fadeOut();
				$('.sortUpdateMessage').fadeIn();
			}); 
		}
	 	
	 	 buildReOrder();
	 	
	 	
	 	validateForm();
	 	
	});
	
	function unvalidateForm(){
		var bootstrapValidat = $('#valForm').data('bootstrapValidator');
		if (bootstrapValidat != undefined)
		   { bootstrapValidat.destroy();}
	}
	function validateForm(){
 		$('#valForm').bootstrapValidator();
 	}
</script>
@endsection