@extends('layouts.app')
@section('content')


<!-- PAGE-HEADER -->
<div class="page-header">
	<div>
		<h1>Business Unit <small>List & Management</small></h1>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="#">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
		</ol>
	</div>

	<div class="float-end">
		@can('business-unit-create')
		<button type="button" class="modal-effect btn btn-primary d-grid mb-3" data-bs-effect="effect-scale" data-bs-toggle="modal" id="createNewProduct" data-bs-target="#ProgramModel"> Add Business Unit</button>
		@endcan
	</div>

</div>
<!-- PAGE-HEADER END -->



<div class="content mt-3">

	<!-- Default box -->
	<div class="card">

		<div class="card-body">
			<table class="table table-bordered table-hover data-table" width="100%">
				<thead>
					<tr>
						<th>Sr.</th>
						<th>Title</th>
						<th>Description</th>
						<th>Status</th>
						<th>Last Update</th>
						<th width="180px">Action</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<!-- /.card-body -->

	</div>
	<!-- /.card -->
</div>

@include('view-modals/business_unit_addedit')

@stop


@section('scripting')

<script type="text/javascript">
	$(document).ready(function() {

		$(".standardSelect").selectpicker();

		// $('.standardSelect').on('change', function() {
		// 	$(this).valid();
		// 	$('.standardSelect').selectpicker('refresh');
		// });

		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});

		var table = $('.data-table').DataTable({
			processing: true,
			serverSide: true,
			ajax: "{{ url('getBusinessUnitData') }}",
			columns: [{
					data: 'DT_RowIndex',
					name: 'DT_RowIndex'
				},
				{
					data: 'title',
					name: 'title'
				},
				{
					data: 'description',
					name: 'description'
				},
				{
					data: 'status',
					name: 'status',
					orderable: false,
					searchable: false
				},
				{
					data: 'updated_at',
					name: 'status',
					orderable: false,
					searchable: false
				},
				{
					data: 'action',
					name: 'action',
					orderable: false,
					searchable: false
				},
			],

			language: {
				search: "_INPUT_",
				searchPlaceholder: "Search records",
			}
		});

		$('#createNewProduct').click(function() {
			reset_modal();
			$('#saveBtn').val("Create");
			$('#status').val('').trigger("chosen:updated");
			$('#dataForm').trigger("reset");
			$('#modelHeading').html("Create New Business Unit");
			$('#ajaxModel').modal('show');
		});


		$('body').on('click', '.editProduct', function() {
			var product_id = $(this).data('id');
			reset_modal();
			$.get("{{ url('businessUnit/edit') }}" + '/' + product_id, function(data) {
				$('#modelHeading').html("Edit Business Unit");
				$('#saveBtn').val("Save Changes");
				$('#ajaxModel').modal('show');
				$('#bu_id').val(data.id);
				$('#title').val(data.title);
				$('#description').val(data.description);
				$('#status').val(data.status);
				$('.standardSelect').selectpicker('refresh');
			})
		});

		$('#saveBtn').click(function(e) {
			e.preventDefault();
			$(this).html('Sending..');

			$.ajax({
				data: $('#dataForm').serialize(),
				url: "{{ url('businessUnit/store') }}",
				type: "POST",
				dataType: 'json',

				success: function(data) {
					$('#dataForm').trigger("reset");
					$('#ajaxModel').modal('hide');
					table.draw();
					swal({
						title: "Good job!",
						text: data.msg,
						icon: "success",
					});
				},
				error: function(data) {
					if (data.status == 422) {
						var x = data.responseJSON;
						$.each(x.errors, function(index, value) {
							$("#" + index).addClass("is-invalid");
							$("#" + index + "-error").html(value[0]);
						});
					}
					$('#saveBtn').html('Save Changes');
				}
			});
		});

		$('body').on('click', '.deleteProduct', function() {

			var product_id = $(this).data("id");

			swal({
					title: "Are you sure?",
					text: "Once deleted, you will not be able to recover this Category!",
					icon: "warning",
					buttons: true,
					dangerMode: true,
				})
				.then((willDelete) => {
					if (willDelete) {

						$.ajax({
							type: "GET",
							url: "{{ url('businessUnit/delete') }}" + '/' + product_id,
							success: function(data) {
								table.draw();
								swal("Great! Category has been deleted!", {
									icon: "success",
								});
							},
							error: function(data) {
								console.log('Error:', data);
							}
						});
					} else {
						swal("Your category delete request Cancelled!")
					}

				})


		});

		$('.standardSelect').selectpicker('refresh');

		//$(".standardSelect").select2();

	});


	function reset_modal() {
		$("#bu_id").val("");
		$("#title").val("");
		$("#description").val("");
		$("#status").val("");
		$('.standardSelect').selectpicker('refresh');

		// Remove is-invalid from all relevant fields
		$("#title").removeClass("is-invalid");
		$("#description").removeClass("is-invalid");
		$("#status").removeClass("is-invalid");

		// Clear error message spans
		$("#title-error").html("");
		$("#description-error").html("");
		$("#status-error").html("");

		$('#saveBtn').html('Save Changes');
	}
</script>
@stop