@extends('theme::layouts.app')


@section('content')

	<style type="text/css">

		.dashboard-title{
			font-size: 32px;
			color: #364257;
			margin-right: 80px;
		}
		.dashboard-btn{
			margin-right: 20px;
			font-weight: bold;
			width: 250px;
			padding: 12px !important;
			text-align: center;
			display: flex;
			align-items: center;
			line-height: 30px;
			justify-content: center;
			border-radius: 3px;

		}
		.back-btn {
			background-color: #9B0025;
			color: #FFF;
			padding: 20px 105px;
			width: 250px;
		}

	</style>
	
	<div class="dashboard-title-flex">
		<h2 class="dashboard-title">{{ __("Bookkeeping") }}</h2>
		<div class="dashboard-button-title">
			<a href="#" class="btn primary-button" data-bs-toggle="modal" data-bs-target="#newCategoryModal">{{ __("New Category") }}</a>
			<a href="{{ route('cms.bookkeepings') }}" class="btn btn-error">{{ __("Back") }}</a>
		</div>
	</div>

	<div class="tabs-content">
		<div class="tabs-content-item white-bg no-padd no-box-shadow">
			<table id="categoriesTable">
				<thead>
					<tr>
						<td>{{ __("Category Name") }}</td>
						<td>{{ __("Status") }}</td>
						<td>{{ __("Action") }}</td>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>

	{{-- Modals --}}
	{{-- Add Category Modal --}}
	<div class="modal fade custom-modal" id="newCategoryModal" tabindex="-1" aria-labelledby="newCategoryModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg modal-dialog-centered">
			<div class="modal-content mx-auto">
				<div class="modal-body p-0">
					<p class="modal-title">{{ __("Category detail") }}</p>
	
					<form action="{{ route('cms.bookkeepings.categories.store') }}" class="theme-form" id="addCategoryFrm">
						<div class="row">
							<div class="col-md-12">
								<div class="row mb-5 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">{{ __("Name") }}</label>
									</div>
									<div class="col">
										<input type="text" class="form-control" value="" name="name" required>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
								<div class="row mb-5 align-items-center">
									<div class="col-auto" required>
										<label class="col-form-label">{{ __("Status") }}</label>
									</div>
									<div class="col">
										<select class="w-100" name="status">
											<option value="active" selected>{{ __("Active") }}</option>
											<option value="inactive">{{ __("Inactive") }}</option>
										</select>
									</div>
								</div>
							</div>
						</div>
	
						<div class="d-flex align-items-center justify-content-center">
							<button type="submit" class="btn green-btn mx-3">{{ __("Save") }}</button>
							<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	{{-- Edit Category Modal --}}
	<div class="modal fade custom-modal" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg modal-dialog-centered">
			<div class="modal-content mx-auto">
				<div class="modal-body p-0">
					<p class="modal-title">{{ __("Category detail") }}</p>
	
					<form action="#" class="theme-form" id="editCategoryFrm">
						<div class="row">
							<div class="col-md-12">
								<div class="row mb-5 align-items-center">
									<div class="col-auto">
										<label class="col-form-label">{{ __("Name") }}</label>
									</div>
									<div class="col">
										<input type="text" class="form-control" value="" name="name" required>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-6">
								<div class="row mb-5 align-items-center">
									<div class="col-auto" required>
										<label class="col-form-label">{{ __("Status") }}</label>
									</div>
									<div class="col">
										<select class="w-100" name="status">
											<option value="active" selected>{{ __("Active") }}</option>
											<option value="inactive">{{ __("Inactive") }}</option>
										</select>
									</div>
								</div>
							</div>
						</div>
	
						<div class="d-flex align-items-center justify-content-center">
							<button type="submit" class="btn green-btn mx-3">{{ __("Save") }}</button>
							<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	{{-- Saved Success Modal --}}
	<div class="modal fade validation-modal style2" id="validationModal" tabindex="-1" aria-labelledby="validationModal1Label" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content mx-auto">
				<div class="modal-body p-0">
					<p class="text-center error-message">{{ __("All changes have been saved!") }}</p>
					<button type="button" class="btn br-0" data-bs-dismiss="modal">{{ __("Back") }}</button>
				</div>
			</div>
		</div>
	</div>
@endsection

@section('script')
<script>
	$(document).ready(function(){
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
		});

	    var categoriesTable = $("#categoriesTable").DataTable({
			processing: true,
			serverSide: true,
			ajax: {
				url: '{{ route("cms.bookkeepings.categories.table") }}',
				type: 'post',
				"dataSrc": function ( json ) {
					for (var i = 0; i < json.data.length; i++) {
						$.each( json.data[i], function( key, value ) {
							json.data[i][key] = value ? value : '-';
						});
					}

					return json.data;
				}    
			},
			columns: [
				{data: 'name', name: 'name'},
				{data: 'status', name: 'status'},
				{data: 'actions', name: 'actions', searchable: false, sortable: false}
			],
			order: [[0, "asc"]],
			searchDelay: 500,
		    "language": {
				"paginate": {
					"next": ">",         // Text for the "Next" page button
					"previous": "<"  // Text for the "Previous" page button
				},
      			"emptyTable": '{{ __("No data available in table") }}'
				// Add more text customizations if needed
			}
		});

		$('#addCategoryFrm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							$('#newCategoryModal').modal('hide');
							$('#validationModal').modal('show');
							$('#validationModal .error-message').html(data.message);

							$('#addUserFrm').trigger("reset");
							categoriesTable.ajax.reload();
						}
						else {
							$('#validationModal .error-message').html(data.message);
							$('#validationModal').modal('show');
						}
					},
					error: function(data) {
						var errors = data.responseJSON.errors;
						var errorMessage = '<ul>';
						$.each(errors, function(index, error) {
							console.log(error);
							errorMessage += '<li>' + error[0] + '</li>';
						});
						errorMessage += '</ul>';

						$('#validationModal .error-message').html(errorMessage);
						$('#validationModal').modal('show');
						button.removeAttr('disabled');
						button.html(buttonHtml);
					}
				});
			}
		});

		$(document).on('click', '.remove-category', function(e) {
			var action = $(this).attr('data-action');

			if (action) {
				Swal.fire({
					title: '{{ __("Are you sure?") }}',
					text: '{{ __("You would not be able to revert this!") }}',
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: '{{ __("Yes") }}',
					cancelButtonText: '{{ __("Cancel") }}'
				}).then((result) => {
					if (result.isConfirmed) {
						$.ajax({
							url: action,
							type: "post",
							data: {},
							dataType: 'json',
							success:function(data) {
								if (data.success) {
									$('#validationModal').modal('show');
									$('#validationModal .error-message').html(data.message);

									categoriesTable.ajax.reload();
								}
							},
							error: function(data) {
								var errors = data.responseJSON.errors;
								var errorMessage = '<ul>';
								$.each(errors, function(index, error) {
									console.log(error);
									errorMessage += '<li>' + error[0] + '</li>';
								});
								errorMessage += '</ul>';

								$('#validationModal .error-message').html(errorMessage);
								$('#validationModal').modal('show');
							}
						});
					}
				});
			}
		});

		$(document).on('click', '.view-edit-category', function(e) {
			var actionType = $(this).attr('data-action-type');
			var actionShow = $(this).attr('data-action-show');
			var actionUpdate = $(this).attr('data-action-update');

			if (actionShow && actionUpdate) {
				$.ajax({
					url: actionShow,
					type: "post",
					data: {},
					dataType: 'json',
					success:function(data) {
						if (data.success) {
							$('#editCategoryFrm').attr('action', actionUpdate);
							$('#editCategoryFrm input[name="name"]').val(data.category.name);
							$('#editCategoryFrm select[name="status"]').val(data.category.status);

							if (actionType == 'edit') {
								$('#editCategoryFrm input[name="name"]').removeAttr('disabled');
								$('#editCategoryFrm select[name="status"]').removeAttr('disabled');
							}
							else {
								$('#editCategoryFrm input[name="name"]').attr('disabled', 'disabled');
								$('#editCategoryFrm select[name="status"]').attr('disabled', 'disabled');
							}

							$('#editCategoryModal').modal('show');
						}
					},
					error: function(data) {
						var errors = data.responseJSON.errors;
						var errorMessage = '<ul>';
						$.each(errors, function(index, error) {
							console.log(error);
							errorMessage += '<li>' + error[0] + '</li>';
						});
						errorMessage += '</ul>';

						$('#validationModal .error-message').html(errorMessage);
						$('#validationModal').modal('show');
					}
				});
			}
		});

		$('#editCategoryFrm').submit(function(e) {
			e.preventDefault();
			var action = $(this).attr('action');
			var button = $(this).find('button[type="submit"]');
			var buttonHtml = button.html();

			if (!button.is(':disabled') && action) {
				button.attr('disabled', 'disabled');
				button.html('<i class="fa fa-spinner fa-spin" style="font-size:24px"></i>');

				$.ajax({
					url: action,
					type: "post",
					data: $(this).serialize(),
					dataType: 'json',
					success:function(data) {
						button.removeAttr('disabled');
						button.html(buttonHtml);

						if (data.success) {
							$('#editCategoryModal').modal('hide');
							$('#validationModal').modal('show');
							$('#validationModal .error-message').html(data.message);

							$('#editCategoryFrm').trigger("reset");
							categoriesTable.ajax.reload();
						}
						else {
							$('#validationModal .error-message').html(data.message);
							$('#validationModal').modal('show');
						}
					},
					error: function(data) {
						var errors = data.responseJSON.errors;
						var errorMessage = '<ul>';
						$.each(errors, function(index, error) {
							console.log(error);
							errorMessage += '<li>' + error[0] + '</li>';
						});
						errorMessage += '</ul>';

						$('#validationModal .error-message').html(errorMessage);
						$('#validationModal').modal('show');
						button.removeAttr('disabled');
						button.html(buttonHtml);
					}
				});
			}
		});

	});
</script>
@endsection
