@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-md-12 margin-tb">
        <div class="pull-left">
            <h3>Categories</h3>
        </div>
        <div class="pull-right">
        	<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#add-category-modal"><b>Add Category</b></button>
        </div>
    </div>
</div>

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

<table class="table table-bordered table-responsive">
	<tr>
		<th>Id</th>
		<th>Name</th>
		<th>Action</th>
	</tr>

	@foreach ($categories as $key => $category)
	<tr class="cat_{{ $category->id }}">
		<td>{{ $category->id }}</td>
		<td>{{ $category->name }}</td>
		<td class="col-md-1">
			<a class="btn btn-danger btn-sm btn-block deleteCat" data-id="{{ $category->id }}" href="#">Delete</a>
		</td>
	</tr>
	@endforeach
</table>

@include('elements.popup')

{!! $categories->render() !!}

<script src="{{ asset('/js/custom.js') }}"></script>
<script type="text/javascript">
//Delete record
$(document).on('click', '.deleteCat', 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: '/admins/delete_category',
        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 if (json.status == 'failure') {
                //that.css("display", "block");
            }
        }
    });
});
</script>
@endsection