@extends('layouts.app')

@section('content')
<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">
<div class="row well">
    <div class="pull-left">
        <h3>Kid Categories</h3>
    </div>
	<div class="pull-right">
        <a class="btn btn-success btn-sm space_buttons pull-right" href="{{ route('kids.create') }}"><b>Manage Kid Category</b></a>
    </div>
</div>

@if ($message = Session::get('success'))
<div class="alert alert-success">
    <p>{{ $message }}</p>
</div>
@endif

<div class="row">
<table class="table table-bordered table-striped">
    <tr>
        <th>S.No.</th>
        <th>Title</th>
        <th>Parent</th>
        <th>Action</th>
    </tr>

    @foreach ($category as $val)
		<tr class="cat_{{ $val->id }}">
			<td>{{ $val->id }}</td>
			<td>{{ $val->name }}</td>
			@if(isset($parentCat[$val->id]) && ($parentCat[$val->id] != ''))
				<td>{{ $parentCat[$val->id] }}</td>
			@else
				<td>&nbsp;</td>
			@endif
			<td>
				<div style="text-align:center;">
					<a class="btn btn-primary btn-sm btn-block space_buttons" href="{{ route('kids.edit',$val->id) }}">Edit</a>
					<a class="btn btn-danger btn-sm btn-block space_buttons deleteRole" data-id="{{ $val->id }}" href="#">Delete</a>
				</div>
			</td>
		</tr>
    @endforeach
</table>

<script type="text/javascript">
$(document).ready(function() {
	$(document).on('click', '.deleteRole', function (e) {
	    e.preventDefault();
	    
	    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": $(this).data('id')},
	        success: function (json) {
	            if (json.status == 'success') {
	                that.closest('.cat_'+json.id).delay(1000).html('<td colspan="5" style="text-align:center;">'+json.message+'</td>').fadeOut(1000, function(){
				      	$(this).remove();
				    });
	            }else {
					that.closest('.cat_'+json.id).delay(1000).html('<td colspan="5" style="text-align:center;">'+json.message+'</td>').fadeOut(1000);
				}
	        }
	    });
	});
});
</script>
@endsection