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


@section('content')
	<button type="button" class="d-none reload-main-table"></button>

	<style type="text/css">

		.dashboard-title{
			font-size: 32px;
			color: #364257;
			margin-right: 80px;
		}

		.pop-up-btn-confirm {
			background-image: linear-gradient(to right, #62C5BD , #C8E1A4) !important;
			width: 200px;
		}

		.pop-up-btn-deny {
			width: 200px;
		}

		select {
			background-color: #EBEBE4;
		}

		.fix-text{
			white-space: pre;
			text-overflow: ellipsis;
			width: 130px;
			overflow: hidden;
		}

		.tabs-navigation.blue-tabs li{
			background-image: linear-gradient(to right, #575757 , #010101) !important;
			width: 100%;
		}

		.tabs-navigation.blue-tabs li.active a {
			background: white;
		}

		.tabs-navigation.blue-tabs li a{
			width: 100%;
			padding: 10px;
		}

		.tabs-navigation.blue-tabs li.active .tab-number {
			background: #EBEBE4;
			color: #364257;
		}

		.blue-text{
			color: #2C21FE;
		}

		.max-25{
			width: 100%;
			max-width: 25px;
		}

		#bookkeepingLogTable {
			border-collapse: collapse;
			width: 100%;
		}

		#bookkeepingLogTable td, th {
			border: 1px solid #dddddd;
			text-align: left;
			padding: 8px;
		}

		#bookkeepingActionLogsListTable_wrapper {
			border: 2px solid #D6DEE9 !important;
			box-shadow: none !important;
			margin-bottom: 30px;
		}
		#bookkeepingActionLogsListTable_wrapper tbody tr {
    		background-color: #D6DEE9;
    		color: #364257;
		}

	</style>
	<div class="dashboard-title-flex nowrap">
		<h2 class="dashboard-title">Bookkeeping</h2>
		<div class="dashboard-button-title">
			<a href="#" class="btn primary-button" data-bs-toggle="modal" data-bs-target="#uploadDocumentModal">{{ __("Upload Document") }}</a>
			<a href="{{ route('cms.bookkeepings.document-libraries') }}" class="btn primary-button">{{ __("Document Library") }}</a>
			<a href="#" class="btn primary-button view-bookkeeping-action-logs">{{ __("Bookkeeping Action Log") }}</a>
			<a href="{{ route('cms.bookkeepings.categories') }}" class="btn primary-button">{{ __("Category List") }}</a>
		</div>
	</div>

	<div class="tabs-navigation blue-tabs">
		<ul>
			<li class="active"><a href="#" class="js-tab-navigate" data-id="#in-queue"><img class="dashboard-detail-image" src="{{ asset('themes/tailwind/images/tick-timer.svg') }}"> {{ __("In Queue List") }} <span class="tab-number" id="queueTotal" style="display:none;">0</span></a></li>
			<li><a href="#" class="js-tab-navigate" data-id="#completed"><img class="dashboard-detail-image" src="{{ asset('themes/tailwind/images/tick-circle.svg') }}"> {{ __("Completed List") }} <span class="tab-number" id="completedTotal" style="display:none;">0</span></a></li>
		</ul>
	</div>

	<div class="tabs-content">
		<div class="tabs-content-item white-bg no-padd" id="in-queue">
			<div class="sidebyside paddingy-10 paddingx-10">
				<p class="blue-text">{{ __("Number of file in process") }}: <span id="process_count">0</span></p>
				<p class="blue-text">{{ __("Total item(s) in Queue") }}: <span id="queue_count">0</span></p>
			</div>
			<table id="bookkeepingInQueueTable" class="">
				<thead>
					<tr>
						<td>{{ __("Original Name") }}</td>
						<td>{{ __("Company") }}</td>
						<td>{{ __("Category") }}</td>
						<td>{{ __("Vendor") }}</td>
						<td>{{ __("Batch Name") }}</td>
						<td>{{ __("Remark") }}</td>
						<td>{{ __("Upload date&time") }}</td>
						<td>{{ __("Status") }}</td>
						<td style="width: 70px; max-width: 100%;">{{ __("Xero Status") }}</td>
						<td style="width: 70px; max-width: 100%;">{{ __("Xero Amount") }}</td>
						<td>{{ __("Action") }}</td>
					</tr>
				</thead>
				<tbody>
					{{-- <tr>
						<td>DCE Consultant Ltd.</td>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
						</td>
						<td><img class="max-25" src="{{ asset('themes/tailwind/images/success.svg') }}"></td>
						<td>$4000</td>
						<td><button type="button"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button></td>
					</tr>
					<tr>
						<td>DCE Consultant Ltd.</td>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
						</td>
						<td><img class="max-25" src="{{ asset('themes/tailwind/images/success.svg') }}"></td>
						<td>$4000</td>
						<td><button type="button"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button></td>
					</tr>
					<tr>
						<td>DCE Consultant Ltd.</td>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
						</td>
						<td><img class="max-25" src="{{ asset('themes/tailwind/images/error.svg') }}"></td>
						<td>$4000</td>
						<td><button type="button"><img class="max-25" src="{{ asset('themes/tailwind/images/more.svg') }}"></button></td>
					</tr> --}}
				</tbody>
			</table>
		</div>
		<div class="tabs-content-item white-bg no-padd" id="completed" style="display: none;">
			<table id="bookkeepingCompletedTable" class="">
				<thead>
					<tr>
						<td>{{ __("Original Name") }}</td>
						<td>{{ __("Company") }}</td>
						<td>{{ __("Category") }}</td>
						<td>{{ __("Vendor") }}</td>
						<td>{{ __("Batch Name") }}</td>
						<td>{{ __("Remark") }}</td>
						<td>{{ __("Upload date&time") }}</td>
						<td>{{ __("Status") }}</td>
						<td style="width: 70px; max-width: 100%;">{{ __("Xero Status") }}</td>
						<td style="width: 70px; max-width: 100%;">{{ __("Xero Amount") }}</td>
					</tr>
				</thead>
				<tbody>
					{{-- <tr>
						<td>DCE Consultant Ltd.</td>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
						</td>
						<td><img class="max-25" src="{{ asset('themes/tailwind/images/success.svg') }}"></td>
						<td>$4000</td>
					</tr>
					<tr>
						<td>DCE Consultant Ltd.</td>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
						</td>
						<td><img class="max-25" src="{{ asset('themes/tailwind/images/success.svg') }}"></td>
						<td>$4000</td>
					</tr>
					<tr>
						<td>DCE Consultant Ltd.</td>
						<td>
							<div class="flex justify-start">
								<img class="max-25" src="{{ asset('themes/tailwind/images/jpg.svg') }}">
								<span class="fix-text">DCE Ltd.CI</span>
							</div>
						</td>
						<td>CI</td>
						<td><span class="grey-text">processing...</span></td>
						<td>ABC Copy of DCE Ltd.CI</td>
						<td>DCE Ltd.CI</td>
						<td>20230515-14:43</td>
						<td>
							<select>
								<option>Submitted</option>
								<option>Submitted</option>
								<option>Submitted</option>
							</select>
						</td>
						<td><img class="max-25" src="{{ asset('themes/tailwind/images/error.svg') }}"></td>
						<td>$4000</td>
					</tr> --}}
				</tbody>
			</table>
		</div>
	</div>

	{{-- Modals --}}
	{{-- Upload Document Modal --}}
	@include('theme::cms.bookkeepings.document-libraries.upload-document-modal')
	
	<div class="modal fade custom-modal" id="updateXeroInformationModal" tabindex="-1" aria-labelledby="updateXeroInformationModalLabel" 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">{{ __("Update Xero information") }}</p>

					<form action="#" class="theme-form" id="updateXeroInformationModalFrm">
						<input type="hidden" name="id">
						<div class="mx-auto text-center" style="max-width: 300px;">
							<div class="row mb-4 align-items-center">
								<div class="col-auto">
									<label class="col-form-label">{{ __("Xero Status") }}</label>
								</div>
								<div class="col">
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="radio" name="xero_status" id="xeroStatus0" value="0" required>
										<label class="form-check-label" for="xeroStatus0">{{ __("N/A") }}</label>
									</div>
									<div class="form-check form-check-inline">
										<input class="form-check-input" type="radio" name="xero_status" id="xeroStatus1" value="1" required>
										<label class="form-check-label" for="xeroStatus1">{{ __("Checked") }}</label>
									</div>
								</div>
							</div>
							<div class="row mb-5 align-items-center">
								<div class="col-auto">
									<label class="col-form-label">{{ __("Xero Amount") }}</label>
								</div>
								<div class="col">
									<input type="text" class="form-control number-only" value="" name="xero_amount" required>
								</div>
							</div>
						</div>
						<div class="d-flex align-items-center justify-content-center">
							<button type="submit" class="btn green-btn mx-3">{{ __("Confirm") }}</button>
							<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Cancel") }}</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	{{-- Bookkeeping Action Logs Modal --}}
	<div class="modal fade custom-modal" id="bookkeepingActionLogsModal" tabindex="-1" aria-labelledby="bookkeepingActionLogsModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-xl modal-dialog-centered">
			<div class="modal-content mx-auto">
				<div class="modal-body p-0">
					<p class="modal-title mb-4">{{ __("User Log") }}</p>

					<table id="bookkeepingActionLogsListTable" class="">
						<thead>
							<tr>
								<td>{{ __("Date") }}</td>
								<td>{{ __("Time") }}</td>
								<td>{{ __("Event") }}</td>
								<td>{{ __("Description") }}</td>
								<td>{{ __("Status") }}</td>
								<td>{{ __("By") }}</td>
							</tr>
						</thead>
						<tbody></tbody>
					</table>
	
					<div class="d-flex align-items-center justify-content-center">
						<button type="button" class="btn red-btn mx-3" data-bs-dismiss="modal">{{ __("Back") }}</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

	@endsection

	@section('script')
	<script type="text/javascript" src="{{ asset('themes/' . $theme->folder . '/js/cms/bookkeepings/document-libraries/upload-document-modal.js') }}"></script>

	<script>

		function confirmPopUp() {
			Swal.fire({
				title: 'Require Datamolino?',
				confirmButtonText: 'Yes',
				showConfirmButton: true,
				showDenyButton: true,
				customClass: {
					confirmButton: 'pop-up-btn-confirm',
					denyButton: 'pop-up-btn-deny',
				},
			})
		}

		$(document).ready(function(){
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});
		
			var bookkeepingInQueueTable = $("#bookkeepingInQueueTable").DataTable({
				processing: true,
				serverSide: true,
				ajax: {
					url: '{{ route("cms.bookkeepings.table", ["isCompleted" => 0]) }}',
					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;
					},
                    complete: function (data) {
						if (data['responseJSON'].recordsTotal > 0) {
							$('#queueTotal').show();
							$('#queueTotal').html(data['responseJSON'].recordsTotal);
							$('#process_count').html(data['responseJSON'].processCount);
							$('#queue_count').html(data['responseJSON'].queueCount);
						}
						else {
							$('#queueTotal').hide();
						}
                    },
				},
				columns: [
					{data: 'file_name', name: 'bookkeeping_documents.file_name'},
					('{{ strtolower(app()->getLocale()) }}' == 'zh_hk' ? {data: 'name_chinese', name: 'companies.name_chinese'} : {data: 'name_english', name: 'companies.name_english'}),
					{data: 'category_name', name: 'bookkeeping_document_categories.name'},
					{data: 'user_name', name: 'users.first_name'},
					{data: 'batch_name', name: 'bookkeeping_documents.batch_name'},
					{data: 'remark', name: 'bookkeeping_documents.remark'},
					{data: 'created_at', name: 'bookkeeping_documents.created_at'},
					{data: 'status_select', name: 'bookkeeping_documents.status'},
					{data: 'xero_status', name: 'bookkeeping_documents.xero_status'},
					{data: 'xero_amount', name: 'bookkeeping_documents.xero_amount'},
					{data: 'actions', name: 'actions', searchable: false, sortable: false}
				],
				order: [[6, "desc"]],
				searchDelay: 500,
				rowCallback: function ( row, data ) {
					if (data.status == 'ocr_complete') {
						$(row).css('background-color', ' #FFEFBD');
					}
					else if (data.status == 'failed') {
						$(row).css('background-color', ' #F5AE97');
					}
				},
				"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
				}
			});
		
			var bookkeepingCompletedTable = $("#bookkeepingCompletedTable").DataTable({
				processing: true,
				serverSide: true,
				ajax: {
					url: '{{ route("cms.bookkeepings.table", ["isCompleted" => 1]) }}',
					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;
					},
                    complete: function (data) {
						if (data['responseJSON'].recordsTotal > 0) {
							$('#completedTotal').show();
							$('#completedTotal').html(data['responseJSON'].recordsTotal);
						}
						else {
							$('#completedTotal').hide();
						}
                    },
				},
				columns: [
					('{{ strtolower(app()->getLocale()) }}' == 'zh_hk' ? {data: 'name_chinese', name: 'companies.name_chinese'} : {data: 'name_english', name: 'companies.name_english'}),
					{data: 'file_name', name: 'bookkeeping_documents.file_name'},
					{data: 'category_name', name: 'bookkeeping_document_categories.name'},
					{data: 'user_name', name: 'users.name'},
					{data: 'batch_name', name: 'bookkeeping_documents.batch_name'},
					{data: 'remark', name: 'bookkeeping_documents.remark'},
					{data: 'created_at', name: 'bookkeeping_documents.created_at'},
					{data: 'status_select', name: 'bookkeeping_documents.status'},
					{data: 'xero_status', name: 'bookkeeping_documents.xero_status'},
					{data: 'xero_amount', name: 'bookkeeping_documents.xero_amount'},
				],
				order: [[6, "desc"]],
				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
				}
			});

			$(document).on('click', '.reload-main-table', function (e) {
				bookkeepingInQueueTable.ajax.reload();
				bookkeepingCompletedTable.ajax.reload();
			});

			$(document).on('change', '.change-status', function (e) {
				var _this = $(this);
				var id = _this.attr('data-id');
				var val = _this.val();

				if (id) {
					if (val == 'completed') {
						$('#updateXeroInformationModal').modal('show');
						$('#updateXeroInformationModal input[name="id"]').val(id);
					}
					else {
						$.ajax({
							url: '{{ route("cms.bookkeepings.update-status") }}',
							type: "post",
							data: {
								'id': id,
								'status': val,
							},
							dataType: 'json',
							success:function(data) {
								if (data.success) {
									popToast('success', data.message);

									bookkeepingInQueueTable.ajax.reload();
									bookkeepingCompletedTable.ajax.reload();
								}
								else {
									popToast('danger', data.message);
								}
							},
							error: function(data) {
								var errors = data.responseJSON.errors;
								$.each(errors, function(index, error) {
									popToast('danger', errors[0]);
									return false;
								});
							}
						});
					}
				}
			});

			$(document).on('submit', '#updateXeroInformationModalFrm', function (e) {
				e.preventDefault();

				var id = $(this).find('input[name="id"]').val();
				var xeroStatus = $(this).find('input[name="xero_status"]:checked').val();
				var xeroAmount = $(this).find('input[name="xero_amount"]').val();
				var val = $(this).val();
				var button = $(this).find('button[type="submit"]');
				var buttonHtml = button.html();

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

					$.ajax({
						url: '{{ route("cms.bookkeepings.update-status") }}',
						type: "post",
						data: {
							'id': id,
							'status': 'completed',
							'xero_status': xeroStatus,
							'xero_amount': xeroAmount,
						},
						dataType: 'json',
						success:function(data) {
							button.removeAttr('disabled');
							button.html(buttonHtml);

							if (data.success) {
								popToast('success', data.message);

								$('#updateXeroInformationModal').modal('hide');
								$('#updateXeroInformationModalFrm').reset();
								bookkeepingInQueueTable.ajax.reload();
								bookkeepingCompletedTable.ajax.reload();
							}
							else {
								popToast('danger', data.message);
							}
						},
						error: function(data) {
							var errors = data.responseJSON.errors;
							$.each(errors, function(index, error) {
								popToast('danger', errors[0]);
								return false;
							});

							button.removeAttr('disabled');
							button.html(buttonHtml);
						}
					});
				}
			});

			$("#updateXeroInformationModal").on('hide.bs.modal', function(){
				bookkeepingInQueueTable.ajax.reload();
				bookkeepingCompletedTable.ajax.reload();
			});

			$(document).on('click', '.view-bookkeeping-action-logs', function(e) {
				e.preventDefault();

				initializeBookkeepingActionLogsListTable();
				$('#bookkeepingActionLogsModal').modal('show');
			});

			$(document).on('click', '.reupload-button', function (e) {
				$(this).parent().find('.re-upload-file').click();
			});

			$(document).on('change', '.re-upload-file', function (e) {
				var id = $(this).attr('data-id');

				if (id) {
					var formData = new FormData();
					var file = $(this)[0].files[0];
					formData.append('uploaded_file', file);
					formData.append('id', id);

					$.ajax({
						url: '{{ route("cms.bookkeepings.re-upload-file") }}',
						type: "post",
						data: formData,
						dataType: 'json',
						processData: false,
						contentType: false,
						success:function(data) {
							if (data.success) {
								popToast('success', data.message);

								bookkeepingInQueueTable.ajax.reload();
								bookkeepingCompletedTable.ajax.reload();
							}
							else {
								popToast('danger', data.message);
							}
						},
						error: function(data) {
							var errors = data.responseJSON.errors;
							$.each(errors, function(index, error) {
								popToast('danger', errors[0]);
								return false;
							});
						}
					});
				}
			});

			$(".js-tab-navigate").click(function(e){
				e.preventDefault();
				var id = jQuery(this).data('id');
				jQuery(this).closest('.tabs-navigation').next().find('.tabs-content-item').hide();
				jQuery(id).show();
				jQuery(this).closest('.tabs-navigation').find('li').removeClass('active');
				jQuery(this).parent().addClass('active');
			});

			var bookkeepingActionLogsListTable = null;
			function initializeBookkeepingActionLogsListTable(url = '{{ route("cms.bookkeepings.action-logs-table") }}') {
				if (bookkeepingActionLogsListTable) {
					bookkeepingActionLogsListTable.destroy();
				}

				bookkeepingActionLogsListTable = $("#bookkeepingActionLogsListTable").DataTable({
					processing: true,
					serverSide: true,
					ajax: {
						url: url,
						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: 'date', name: 'document_action_logs.created_at'},
						{data: 'time', name: 'document_action_logs.created_at'},
						{data: 'event', name: 'document_action_logs.event'},
						{data: 'description', name: 'document_action_logs.description'},
						{data: 'status', name: 'document_action_logs.status'},
						{data: 'name', name: 'users.name'},
					],
					order: [[1, "desc"]],
					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
					}
				});
			}


		});
		
	</script>


@endsection