@extends('admin.layout.master')

@section('content')

<div class="app-content  my-3 my-md-5">
		<div class="side-app">
			<div class="page-header">
				<h4 class="page-title">Third Level Category Add</h4>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{ route('admin.catList') }}">Category</a></li>
					<li class="breadcrumb-item active" aria-current="page">Third Level Category Add</li>
				</ol>

			</div>
			<div class="row ">
				
				<div class="col-lg-12">
					<form class="card" method="post" action="{{ route('admin.catStore')}}" onsubmit="return add()">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Third Level Category Add</h3>
						</div>
						<div class="card-body">
							<div class="row">
								
								<div class="col-sm-6 col-md-8">
									<div class="form-group">
										<label class="form-label">First Level Category</label>
										<span><h5 id="parentcheck" style="color: red; display: none;">  </h5></span>
										<select class="form-control custom-select" name="category"  id="category" data-dependent="subcat" onchange="getval(this)">
											<option value="0">--Select--</option>
											@foreach($cat as $val)
												<option value="{{ $val->id }}">{{$val->cat_name}}</option>
											@endforeach
										</select>
									</div>
								</div>

								<div class="col-sm-6 col-md-8">
									<div class="form-group">
										<label class="form-label">Second Level Category</label>
										<span><h5 id="parent1check" style="color: red; display: none;">  </h5></span>
										<select class="form-control custom-select" name="subcat"  id="subcat">	
											<option value="0">--Select--</option>
										</select>
									</div>
								</div>
								

								<div class="col-sm-6 col-md-8">
									<div class="form-group">
										<label class="form-label"> Third Level Category</label>
										<span><h5 id="childcheck" style="color: red; display: none;">  </h5></span>
										<input type="text" class="form-control" placeholder="Sub Category" name="subsubcat" id="subsubcat">
									</div>
								</div>								
							</div>
						</div>
						<div class="card-footer text-center">
							<button type="submit" class="btn btn-primary btn-lg custom-btn mr-2" >Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection

<script type="text/javascript">
		function getval(sel)
		{
			var catId = sel.value;
			var _token    = $('input[name="_token"]').val();

			if(catId != '')
			{

				$.ajax({
				    method: "POST", 
				    url	  : "{{ route('admin.catFetch') }}", 
				    data  : {'id' : catId, '_token':_token},
				    success: function(result)
				    { 
				       	$('#subcat').html(result);
				       	
					}
				});
			}
		}

		
</script>

<script type="text/javascript">
	function add() {
		var parent = $('#category').val();
		var parent2 = $('#subcat').val();
		var name = $('#subsubcat').val();

		if(parent == '0')
		{
			$('#parentcheck').show();
			$('#parentcheck').html('** Please Select This Field');
			setTimeout(function(){
				  $('#parentcheck').hide();
				}, 2000);

			return false;
		}
		else if(parent2 == '0')
		{
			$('#parent1check').show();
			$('#parent1check').html('** Please Select This Field');
			setTimeout(function(){
				  $('#parent1check').hide();
				}, 2000);

			return false;
		}
		else if(name == '')
		{
			$('#childcheck').show();
			$('#childcheck').html('** Please Fill This Field');
			setTimeout(function(){
				  $('#childcheck').hide();
				}, 2000);

			return false;
		}
		else
		{
			return true;
		}
	}
</script>