@extends('admin.layout.app')

@section('content')
<div class="content-wrapper">

	<section class="content-header">
		<h1 class="pull-left">
			{{ $title }} List
		</h1>
		<span class="pull-right">
			{{--<a href="{{ route($route.'index').'?export=csv' }}" class="btn btn-success"> <i class="fa fa-file-text-o "></i> CSV Export</a>--}}
			{{--<a href="{{ route($route.'index').'?export=xlsx' }}" class="btn btn-success"> <i class="fa fa-file-excel-o "></i> Excel Export</a>
			<a onclick="deletemultiple();" class="btn btn-danger"> <i class="fa fa-trash"></i> Delete Selected</a>--}}
			<a href="{{ route($route.'create') }}" class="btn btn-success"> <i class="fa fa-plus"></i> Add new</a>
		</span>
		<p>&nbsp;</p>

	</section>

	<section class="content">
		<div class="row">
			<div class="col-xs-12">
				@include('flash')
				<div class="box box-info">
					<div class="box-body">
						{{--<div class="table-responsive">--}}

						<table id="datatable1" class="table table-bordered table-striped ">
							<thead>
							<tr>
							    <!--<th width="50px">Delete</th>-->
								<th width="50px">Sequence</th>
								<th>Name</th>
								<th>Image</th>
								<!--<th>Image Size</th>
								<th>Created At</th>-->
								<th width="100px">Status</th>
								<th width="100px">Action</th>
							</tr>
							</thead>
							<tbody>
							{{--@foreach($records as $key => $record)--}}
							{{--<tr>--}}
							{{--<td>{{ $record['id'] }}</td>--}}
							{{--<td>{{ $record['name'] }}</td>--}}
							{{--<td>{{ $record['created_at']->format('d-m-Y') }}</td>--}}
							{{--<td>--}}
							{{--<input class="myswitch" data-toggle="toggle" data-on="Active" data-off="Inactive" data-size="small" type="checkbox">--}}
							{{--</td>--}}
							{{--<td>--}}
							{{--<a href="{{ route($route.'show',$record['id']) }}" class="btn btn-primary btn-sm" title="View"><i class="fa fa-eye-slash"></i></a>--}}
							{{--<a href="{{ route($route.'edit',$record['id']) }}" class="btn btn-info btn-sm" title="Edit"><i class="fa fa-pencil"></i></a>--}}
							{{--<a href="{{ route($route.'destroy',$record['id']) }}" class="btn btn-danger btn-sm" title="Delete"><i class="fa fa-trash"></i></a>--}}
							{{--</td>--}}
							{{--</tr>--}}
							{{--@endforeach--}}
							</tbody>
							<tfoot>
							<tr>
							    <!--<th>Delete</th>-->
								<th>Sequence</th>
								<th>Name</th>
								<th>Image</th>
								<!--<th>Image Size</th>
								<th>Created At</th>-->
								<th>Status</th>
								<th>Action</th>
							</tr>
							</tfoot>
						</table>
						{{--</div>--}}
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
@endsection

@section('js')
		<!-- DataTables -->
<script type="text/javascript">

	$(document).ready(function () {
		var oTable = $('#datatable1').DataTable({
            responsive: true,
            autoWidth: false,
			stateSave: true,
			processing: true,
			serverSide: true,
			//scrollY: 300,
			ajax: '{{ url('admin/category')  }}',
			columns: [
			    /*{data: 'deletemultiple', name: 'deletemultiple',searchable: false, orderable: false, className: 'text-center'},*/
				{data: 'sequence', name: 'sequence', searchable: false,orderable : false,className : 'text-center',defaultContent:'-'},
				{data: 'name', name: 'name'},
				{data: 'image', name: 'image'},
				/*{data: 'image_size', name: 'image'},
				{data: 'created_at', name: 'created_at'},*/
				{data: 'status', name: 'status', searchable: false,orderable : false,className : 'text-center'},
				{data: 'action', name: 'action', searchable: false, orderable : false,className : 'text-center'},
			],
			
		});

		$("body").on("change", ".inline_update", function () {
			var field = $(this).attr('field');
			var value = $(this).val();
			var row_id = $(this).attr('row_id');
			var obj = $(this)
			$.ajax({
				type: "PUT",
				url: $(obj).attr('ajax_url'),
				data: {
					"_token": "{{ csrf_token() }}",
					"id": row_id,
					"sequence": value,
				},
				beforeSend: function () {
					$('#datatable1').waitMe({effect: 'roundBounce'});
				},
				complete: function () {
					$('#datatable1').waitMe('hide');
				},
				error: function (e) {
					if (e.status == 403) {
						alert('Unauthorized: Access is denied due to invalid credentials.');
					}else{
						alert('internal error occurred.');
					}
				},
				success: function (result) {
					$(obj).after('<span class="text-success txt_inline_notification">Saved</span>');
					$('.txt_inline_notification').delay(1000).fadeOut('slow');
					//oTable.ajax.reload();
				}
			});
			
		});
		$('#datatable1').on('draw.dt', function () {
			$('.chk_status').each(function () {
				$(this).bootstrapToggle();
			});
		});
		$("body").on("change", ".chk_status", function () {
			var row_id = $(this).val();
			if ($(this).is(':checked')) {
				var status = $(this).attr('data-on');// If checked
			} else {
				var status = $(this).attr('data-off'); // If not checked
			}

			$.ajax({
				type: "PUT",
				url: '{{ url('admin/category') }}/' + row_id ,
				data: {
					"_token": "{{ csrf_token() }}",
					"id": row_id,
					"status": status,
				},
				beforeSend: function () {
					$('#datatable1').waitMe({effect: 'roundBounce'});
				},
				complete: function () {
					$('#datatable1').waitMe('hide');
				},
				error: function (e) {
					if (e.status == 403) {
						alert('Unauthorized: Access is denied due to invalid credentials.');
					}else{
						//alert('Error: ' + e);
						alert('internal error occurred.');
					}
				},
				success: function (result) {
					//Success Code.
				}
			});
		});


		$("#datatable1").on('click', '.data-delete', function () {
			var obj = $(this);
			var id = $(this).attr('data-id');

			if (confirm("Are you sure to Delete Data?")) {
				$.ajax({
					type: "DELETE",
					url: "{{ url('admin/category')  }}/" + id,
					data: {
						id: id,
						_token: "{{ csrf_token() }}"
					},
					dataType: 'json',
					beforeSend: function () {
						$(this).attr('disabled', true);
						$('.alert .msg-content').html('');
						$('.alert').hide();
					},
					success: function (resp) {
						oTable.ajax.reload();
						alert(resp.message);
					},
					error: function (e) {
						if (e.status == 403) {
							alert('Unauthorized: Access is denied due to invalid credentials.');
						}else{
							//alert('Error: ' + e);
							alert('internal error occurred.');
						}
					}
				});
			}
		});
	});
</script>
<script>
	function deletemultiple(){
		var id = $.map($('input[name="record_id"]:checked'), function(c){return c.value; });
		if( confirm( 'Are you sure to Delete Data?' ) ) {
			$.ajax(
				{
					url: '{{url('admin/deletemultiplecategory')}}',
					type: 'POST',
					data: {
						"id":id,
						_token: "{{ csrf_token() }}"
					},
					success: function (data)
					{
						alert("Deleted Data successfully!");
						$('#datatable1').DataTable().ajax.reload();
					}
				});
		}
	}
</script>
<script type="text/javascript">
	$(document).ready(function () {
		// $('#example1').DataTable();
		$("body").on('change', '.myswitch', function () {
			if ($(this).is(':checked')) {
				// If checked
				//alert($(this).val());
			} else {
				// If not checked
			}
		});
	});
</script>
@endsection