@extends('layouts.master')

@section('content')
<div class="container">
	<div class="card card-custom gutter-b">
		<div class="card-header flex-wrap py-3">
			<div class="card-title">
				<h3 class="card-label">List of Product Category</h3>
			</div>
			<div class="card-toolbar">
				<!--begin::Button-->
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addProductCategory">
				    <i class="flaticon-plus icon-lg"></i>
				    Add New Product Category
				</button>
				<!--end::Button-->
			</div>
		</div>
		<div class="card-body">
			<!--begin: Datatable-->
			<table class="table table-bordered table-checkable" id="product-category-table">
				<thead>
					<tr>
						<th>No.</th>
						<th>Category</th>
						<th>Publish</th>
						<th>Featured</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<!--end: Datatable-->
		</div>
	</div>
</div>

<!--begin::Modal-->
@include('product_category.add')
@include('product_category.edit')
<!--end::Modal-->

@endsection
@push('script')
<script type="text/javascript">
	var table = $('#product-category-table').DataTable({
        responsive: false,
        scrollX: true,
        lengthMenu: [10, 20, 50, 100],
        columnDefs: [
        {
              "targets": 0,
              "width": "5%"
        },
        {
              "targets": 2,
              "width": "15%"
        },
        {
              "targets": 3,
              "width": "15%"
        },
        {
              "targets": 4,
              "width": "20%"
        }],
        columns: [
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    return '<span><b>'+row.name+'</b><br />'+row.description+'</span>';
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.is_publish == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Publish') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('Not Publish') }}</span></h5>";
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                    if(row.is_featured == 1)
                        return "<h5><span class='badge badge-success'>{{ __('Yes') }}</span></h5>";
                    else
                        return "<h5><span class='badge badge-danger'>{{ __('No') }}</span></h5>";
                }
            },
            {
                "data": null,
                "render": function (data, type, row)  {
                	return '<a href="#" title="Edit" class="btn btn-icon btn-circle btn-light-warning btn-sm mr-2 edit-product-category" data-id="'+row.id+'" data-name="'+row.name+'" data-desc="'+row.description+'" data-publish="'+row.is_publish+'" data-featured="'+row.is_featured+'"><i class="la la-edit icon-xl"></i></a><a href="#" title="Delete" class="btn btn-icon btn-circle btn-light-danger btn-sm delete-category" data-id="'+row.id+'"><i class="la la-trash icon-xl"></i></a>';
                }
            },
        ],

        ajax: {
            method : 'get',
            url: "{{ route('product.category.dt') }}",
            dataSrc:"data",
            dataType : "json"
        }
    }).on('click', 'a.edit-product-category', function(e) {

        e.preventDefault();

        var id 			= $(this).data('id');
        var name 		= $(this).data('name');
        var desc 		= $(this).data('desc');
        var publish 	= $(this).data('publish');
        var featured 	= $(this).data('featured');

        $('#id_edit').val(id);
        $('#name_edit').val(name);
        document.getElementById("description_edit").value = desc;

        if(publish == 1)
        {
        	document.getElementById("publish_edit").checked = true;
        }
        
        if(featured == 1)
        {
        	document.getElementById("featured_edit").checked = true;
        }

        $('#editProductCategory').modal('show');
    }).on('click', 'a.delete-category', function(e) {

        e.preventDefault();

        var id 		= $(this).data('id');
        var _token 	= $("input[name='_token']").val();
        var url 	= "{{ route('product.category.delete', ':id') }}";
        url 		= url.replace(':id',id);

        Swal.fire({
	        title: "Are you sure?",
	        text: "You won't be able to revert this!",
	        icon: "warning",
	        showCancelButton: true,
	        confirmButtonText: "Yes, delete it!"
	    }).then(function(result) {
	        if (result.value) {
		        $.ajax({
		            url: url,
		            type: "POST",
		            dataType: "json",
		            data: {
		                _token : _token
		            },
		            success: function(data) {
		                if(data.status != 'success')
                        {
		                    var errors = data;
		                    $.each(errors, function(index, sm){
		                        toastr.error(sm, {timeOut: 5000});
		                    });
		                }
                        else
                        {
		                	Swal.fire(
				                "Deleted!",
				                "Product category has been deleted.",
				                "success"
				            )
		                    $('#product-category-table').DataTable().ajax.reload(null, false);
		                }
		            }
		        });
	        }
	    });
    });

    $(document).ready(function() {
        $('.save-category-product').on('click', function () {
            addProductCategory();
        });

        $('.update-category-product').on('click', function () {
            updateProductCategory();
        });

        $('#addProductCategory').on('hidden.bs.modal', function() {
            $('#addProductCategory form')[0].reset();
        });    
    });

    function addProductCategory()
    {
     	var name 		= $('#name_add').val();
     	var description = $('#description_add').val();
     	var featured 	= document.getElementById('featured_add').checked ? '1' :'0';
     	var publish 	= document.getElementById('publish_add').checked ? '1' :'0';
     	var _token 		= $("input[name='_token']").val();
        var url 		= "{{ route('product.category.store') }}";

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                name 		: name,
                description : description,
                featured 	: featured,
                publish 	: publish,
                _token  	: _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Add New Product Category!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                    $('#addProductCategory').modal('hide');
                    $('#product-category-table').DataTable().ajax.reload(null, false);
                }
            }
        });
    }

    function updateProductCategory()
    {
    	var id 			= $('#id_edit').val();
     	var name 		= $('#name_edit').val();
     	var description = $('#description_edit').val();
     	var featured 	= document.getElementById('featured_edit').checked ? '1' :'0';
     	var publish 	= document.getElementById('publish_edit').checked ? '1' :'0';
     	var _token 		= $("input[name='_token']").val();
     	var url 		= "{{ route('product.category.update', ':id') }}";
        url 			= url.replace(':id',id);

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            data: {
                name 		: name,
                description : description,
                featured 	: featured,
                publish 	: publish,
                _token  	: _token
            },
            success: function(data) {
                if(data.status != 'success'){
                    var errors = data;
                    $.each(errors, function(index, sm){
                        toastr.error(sm, {timeOut: 5000});
                    });
                } else{
                	Swal.fire({
					  	title: "Success!",
					  	text: "Successfully Updated Product Category!",
					  	icon: "success",
					  	buttonsStyling: false,
					  	showConfirmButton: false,
        				timer: 3000
					 });
                    $('#editProductCategory').modal('hide');
                    $('#product-category-table').DataTable().ajax.reload(null, false);
                }
            }
        });
    }
</script>
@endpush