@extends('layouts.app')

@section('content')
<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
<div class="row well">
    <div class="col-lg-12">
        <div class="pull-left">
            <h3>Manage Kid Categories</h3>
        </div>
        <div class="pull-right">
            <button class="btn btn-primary btn-sm" onclick="window.history.back();">Back</button>
        </div>
    </div>
</div>

<div class="row">	
	<input type="hidden" name="_token" value="{{ csrf_token() }}">
	<div class="row">

		<div class="col-xs-12 col-sm-12 col-md-12">
			<div class="form-group col-md-7">
				<label class="col-md-4">Parent Category:</label>
				<select class="col-md-6 parentId" id="parentId" data-id="childCategory" data-text="Child Category" name="parent_category">
					<option value=''>Select</option>
					@foreach($category as $kidCat)
						<option value="{{ $kidCat->id }}" >{{ $kidCat->name }}</option>
					@endforeach
				</select>
				<div class="col-md-2"></div>
			</div>
			<div class="form-group col-md-2">
				<span id="addKidCategory" data-id="parentId" class="kidCategory">Add</span>
				<span id="editKidCategory" data-id="parentId" class="kidCategory">Edit</span>
				<span id="deleteKidCategory" data-id="parentId" class="kidCategory">Delete</span>
			</div>
		</div>
		
		<div class="col-xs-12 col-sm-12 col-md-12 childCategory"></div>
		<div class="col-xs-12 col-sm-12 col-md-12 subChildCategory"></div>
	</div>	
</div>

@include('elements.kidCategory')

<script type="text/javascript">
$(document).ready(function() {
    //Add kid category record
    $(document).on('click', '#addKidCategory', function(e) {
        
		var id = $(this).data("id");
		var catId = '';

		if(id == 'childCategory') {
			var catId = $("#"+id).val();
			if(catId == '') {
				var catId = $("#parentId").val();
			}
		}else if(id == 'subChildCategory') {
			var catId = $("#subChildCategory").val();
			if(catId == '') {
				var catId = $("#childCategory").val();
			}
		}

        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: "POST",
            url: '/kids/get_kid_category_data?random='+randNumGen(),
            data: { "parent_id": catId },
            success: function(json) { console.log("Data = "+json.result);
                if(json.status == 'success') {
                    $('#createKidCategory #parentId').val(json.result);
                    $('#catType').val(json.type);
					
                    $('#kid-category-modal').modal("show");
                }
            }
        });
    });

	//Edit kid category record
    $(document).on('click', '#editKidCategory', function(e) {
        
		var id = $(this).data("id");
		var parentId = $("#"+id).val();
		console.log('111 = '+parentId);
		if(parentId == '') {
			alert("Please select any category.");
			return false;
		}

        $.ajax({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            type: "POST",
            url: '/kids/get_kid_category_edit_data?random='+randNumGen(),
            data: { "parent_id": parentId },
            success: function(json) {
                if(json.status == 'success') {
                    $('#createKidCategory #parentId').val(json.result);
                    $('#catType').val(json.type);
                    $('#createKidCategory #category-name').val(json.name);
					
                    $('#kid-category-modal').modal("show");
                }
            }
        });
    });

	//Delete kid category record
    $(document).on('click', '#deleteKidCategory', function(e) {
        e.preventDefault();
		var url = window.location.origin + "/kids/kid_category";
		
		var id = $(this).data("id");
		var parentId = $("#"+id).val();

		if(parentId == '') {
			alert("Please select any category.");
			return false;
		}
	    
	    var that = $(this);
	    var checkMsg = confirm("Are you sure you want to delete this record!");
	    if(!checkMsg){return false;}
	    $.ajax({
	        type: "POST",
	        url: '/kids/destroy',
	        data: {"_token": "{{ csrf_token() }}", "id": parentId},
	        success: function (json) {
	            if (json.status == 'success') {
	                alert(json.message);
	            }else {
					alert(json.message);
				}
				window.location.href = url;
	        }
	    });
    });
	
	//Update kid sub child categories record
    $(document).on('change', '.parentId', function(){
		var parentId = $(this).val();
		var id = $(this).data("id");
		var text = $(this).data("text");
		
		if(id == 'childCategory') {
			$('.childCategory'+id).html('');
			$('.subChildCategory').html('');
		}else if(id == 'subChildCategory') {
			$('.subChildCategory').html('');
		}
		// console.log("ID = "+id);
		$.ajax({
			headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
			type: "POST",
			url: "/ajax/kid-child-ajax?random="+randNumGen(),
			data: {"parentId": parentId, "id": id, "text": text},
			cache: false,
			success: function(data){
				$('.'+id).html(data);
			}	
		});
	});
	
	
	//Generate encription key
    function randNumGen() {
        var encKey = "";
        var possible = "0123456789";

        for (var i = 0; i < 20; i++) {
            encKey += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        return encKey;
    }
});
</script>
<style>
	span.kidCategory {
		color: blue;
		cursor: pointer;
		text-decoration: underline;
	}

</style>
@endsection