@extends('layout')

@section('content')
<!-- Page header -->
<div class="page-header page-header-light">
	<div class="page-header-content header-elements-md-inline">
		<div class="page-title d-flex">
			<h3 class="font-weight-bold"><span class="font-weight-light">Administrasi Data -</span> Adm. Receipt</h3>
			<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
		</div>
	</div>
</div>
<!-- /page header -->

<!-- Content area -->
<div class="content">
	<div class="card">
		<div class="card-body">
			<div class="form-group row align-items-center mb-3">
				<label class="col-form-label col-lg-1">Tanggal</label>
				<div class="col-lg-3">
					<input type="text" id="date_filter" class="daterange-picker form-control" value="{{ date('Y/m/d', strtotime('-2 months')) }} - {{ date('Y/m/d') }}">
				</div>
				<div class="col-lg-2">
					<button type="button" id="btn-filter" class="btn btn-primary">
						<i class="icon-search4 mr-1"></i> Filter
					</button>
				</div>
				<div class="col-lg-6 d-flex justify-content-end">
					<div class="form-check mb-0">
					<label class="form-check-label">
						<input type="checkbox" id="show_deleted" class="form-check-input-styled">
						Show Deleted Receipt
					</label>
					</div>
				</div>
			</div>

			<table class="table datatable-admin-receipt table-hover">
				<thead>
					<tr>
						<th>No</th>
						<th>No. Resi</th>
						<th>Nama Customer</th>
						<th>Nama Sales</th>
						<th>Coload</th>
						<th>Status Karton</th>
						<th class="text-center">Action</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
</div>
<!-- /content area -->

<div id="modal_edit_status_karton" class="modal fade" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Change Status Karton</h5>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<form action="{{ route('admreceipt.status-karton') }}" method="post">
				@csrf
				<input type="hidden" name="receipt_id" id="status_receipt_id">
				<div class="modal-body">
					<div class="mb-3">
						<div class="font-weight-semibold" id="status_receipt_label">-</div>
					</div>
					<div class="form-group">
						<label>Status Karton</label>
						<select name="status_karton" id="status_karton" class="form-control form-control-select2" required>
							@foreach(config('custom.status_carton') as $key => $value)
								<option value="{{ $key }}">{{ $value }}</option>
							@endforeach
						</select>
					</div>
					<div class="text-muted">Perubahan akan mengubah status receipt, receipt detail, dan semua carton aktif yang terkait.</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn bg-primary">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>

<div id="modal_restore_receipt" class="modal fade" tabindex="-1">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header bg-warning">
				<h5 class="modal-title">Restore Receipt</h5>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<form action="" method="post" id="restore_receipt_form">
				@csrf
				<div class="modal-body">
					<div class="mb-3">
						<div class="font-weight-semibold" id="restore_receipt_label">-</div>
					</div>
					<div id="restore_receipt_loading" class="text-center py-3" style="display:none;">Loading receipt details...</div>
					<div id="restore_receipt_details"></div>
					<div class="text-muted mt-3">Jika restore cartons dipilih pada satu receipt detail, receipt detail tersebut akan ikut direstore otomatis.</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
					<button type="submit" class="btn bg-warning">Restore</button>
				</div>
			</form>
		</div>
	</div>
</div>
@endsection

@section('js')
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>

<script type="text/javascript">
	$(document).ready(function() {
		var statusCarton = @json(config('custom.status_carton'));
		var restoreUrlTemplate = @json(url('admreceipt/__ID__/restore'));
		var restorePreviewUrlTemplate = @json(url('admreceipt/__ID__/restore-preview'));

		$('.daterange-picker').daterangepicker({
			applyClass: 'btn-primary',
			cancelClass: 'btn-light',
			startDate: '{{ date('Y/m/d', strtotime('-2 months')) }}',
			endDate: '{{ date('Y/m/d') }}',
			locale: {
				format: 'YYYY/MM/DD'
			}
		});

		function getDetailStatusHtml(detail) {
			if (detail.detail_deleted) {
				return '<span class="badge badge-warning">Deleted</span>';
			}

			return '<span class="badge badge-success">Still Active</span>';
		}

		function getCartonStatusHtml(detail) {
			if (detail.jumlah_karton === 0) {
				return '<span class="badge badge-secondary">No Cartons</span>';
			}

			if (detail.carton_deleted_count === 0) {
				return '<span class="badge badge-success">All Cartons Active</span>';
			}

			if (detail.carton_deleted_count >= detail.jumlah_karton) {
				return '<span class="badge badge-warning">All Cartons Deleted</span>';
			}

			return '<span class="badge badge-info">Partial Deleted</span>';
		}

		$('.form-control-select2').select2();

		var table = $('.datatable-admin-receipt').DataTable({
			autoWidth: false,
			processing: true,
			serverSide: true,
			ordering: false,
			dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
			language: {
				search: '<span>Filter:</span> _INPUT_',
				searchPlaceholder: 'Type to filter...',
				lengthMenu: '<span>Show:</span> _MENU_',
				paginate: {
					'first': 'First',
					'last': 'Last',
					'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
					'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
				}
			},
			ajax: {
				url: "{{ route('admreceipt-datatable') }}",
				data: function(d) {
					d.show_deleted = $('#show_deleted').is(':checked');
					d.date_filter = $('#date_filter').val();
				}
			},
			columns: [
				{
					data: null,
					searchable: false,
					orderable: false,
					render: function(data, type, row, meta) {
						return meta.row + meta.settings._iDisplayStart + 1;
					}
				},
				{data: 'no_resi', name: 'no_resi'},
				{
					data: 'customer_nama',
					name: 'customer_nama',
					render: function(data) {
						return data ? data : '-';
					}
				},
				{
					data: 'sales_nama',
					name: 'sales_nama',
					render: function(data) {
						return data ? data : '-';
					}
				},
				{
					data: 'namacoload',
					name: 'namacoload',
					render: function(data) {
						return data ? data : '-';
					}
				},
				{
					data: 'status_karton',
					name: 'status_karton',
					render: function(data) {
						return statusCarton.hasOwnProperty(data) ? statusCarton[data] : '-';
					}
				},
				{
					data: null,
					className: 'text-center',
					searchable: false,
					orderable: false,
					render: function(data) {
						var html = '<div style="white-space: nowrap;">';

						if (data.deleted_at) {
							html += '<button type="button" class="btn btn-warning btn-icon restore-button" data-id="' + data.id_resi + '" data-no-resi="' + data.no_resi + '"><i class="icon-history" title="Restore"></i></button>';
						} else {
							html += '<a href="{{ url('receipt') }}/' + data.id_resi + '"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a> ';
							html += '<button type="button" class="btn btn-info btn-icon status-button" data-id="' + data.id_resi + '" data-no-resi="' + data.no_resi + '" data-status="' + data.status_karton + '"><i class="icon-pencil7" title="Change Status Karton"></i></button>';
						}

						html += '</div>';
						return html;
					}
				}
			]
		});

		$('#btn-filter').on('click', function() {
			table.ajax.reload();
		});

		$(document).on('click', '.status-button', function() {
			$('#status_receipt_id').val($(this).data('id'));
			$('#status_receipt_label').text($(this).data('no-resi'));
			$('#status_karton').val(String($(this).data('status'))).trigger('change');
			$('#modal_edit_status_karton').modal('show');
		});

		$(document).on('click', '.restore-button', function() {
			var id = $(this).data('id');
			var noResi = $(this).data('no-resi');

			$('#restore_receipt_label').text(noResi);
			$('#restore_receipt_form').attr('action', restoreUrlTemplate.replace('__ID__', id));
			$('#restore_receipt_details').html('');
			$('#restore_receipt_loading').show();
			$('#modal_restore_receipt').modal('show');

			$.ajax({
				type: 'GET',
				url: restorePreviewUrlTemplate.replace('__ID__', id),
				success: function(response) {
					var html = '';

					if (response.details.length === 0) {
						html = '<div class="text-muted">No receipt detail found.</div>';
					} else {
						response.details.forEach(function(detail, index) {
							var detailChecked = detail.detail_deleted ? '' : 'checked disabled';
							var cartonDisabled = detail.carton_deleted_count === 0 ? 'disabled' : '';
							var detailHelperText = detail.detail_deleted ? 'Receipt detail is deleted and can be restored.' : 'Receipt detail is still active, so it cannot be restored again.';
							var cartonHelperText = detail.carton_deleted_count === 0
								? 'All cartons under this receipt detail are still active.'
								: detail.carton_deleted_count >= detail.jumlah_karton
									? 'All cartons under this receipt detail are deleted and can be restored.'
									: detail.carton_deleted_count + ' carton(s) are deleted and can be restored.';

							html += '<div class="border rounded p-3 mb-3">';
							html += '<div class="font-weight-semibold mb-2">Receipt Detail ' + (index + 1) + '</div>';
							html += '<div class="mb-1"><span class="font-weight-semibold">Tipe Barang:</span> ' + detail.tipe_barang + '</div>';
							html += '<div class="mb-1"><span class="font-weight-semibold">Jumlah Karton:</span> ' + detail.jumlah_karton + '</div>';
							html += '<div class="mb-1"><span class="font-weight-semibold">Receipt Detail Status:</span> ' + getDetailStatusHtml(detail) + '</div>';
							html += '<div class="mb-3"><span class="font-weight-semibold">Carton Status:</span> ' + getCartonStatusHtml(detail) + '</div>';
							html += '<div class="form-check mb-2">';
							html += '<label class="form-check-label">';
							html += '<input type="checkbox" name="restore_receipt_detail_ids[]" value="' + detail.id + '" class="form-check-input-styled restore-detail-checkbox" data-detail-id="' + detail.id + '" ' + detailChecked + '>';
							html += ' Restore receipt_detail';
							html += '</label>';
							html += '</div>';
							html += '<div class="text-muted mb-2 ml-4">' + detailHelperText + '</div>';
							html += '<div class="form-check ml-4">';
							html += '<label class="form-check-label">';
							html += '<input type="checkbox" name="restore_carton_detail_ids[]" value="' + detail.id + '" class="form-check-input-styled restore-carton-checkbox" data-detail-id="' + detail.id + '" ' + cartonDisabled + '>';
							html += ' Restore cartons';
							html += '</label>';
							html += '</div>';
							html += '<div class="text-muted ml-4">' + cartonHelperText + '</div>';
							html += '</div>';
						});
					}

					$('#restore_receipt_details').html(html);
					if ($().uniform) {
						$('#restore_receipt_details .form-check-input-styled').uniform();
					}
					$('#restore_receipt_loading').hide();
				},
				error: function() {
					$('#restore_receipt_details').html('<div class="text-danger">Failed to load receipt details.</div>');
					$('#restore_receipt_loading').hide();
				}
			});
		});

		$(document).on('change', '.restore-carton-checkbox', function() {
			var detailId = $(this).data('detail-id');
			var detailCheckbox = $('.restore-detail-checkbox[data-detail-id="' + detailId + '"]');

			if ($(this).is(':checked')) {
				detailCheckbox.prop('checked', true);
			}
		});

		$(document).on('change', '.restore-detail-checkbox', function() {
			var detailId = $(this).data('detail-id');
			var cartonCheckbox = $('.restore-carton-checkbox[data-detail-id="' + detailId + '"]');

			if (!$(this).is(':checked')) {
				cartonCheckbox.prop('checked', false);
			}
		});

		@if(session('error'))
			new PNotify({
				title: 'Error',
				text: '{{ session('error') }}.',
				icon: 'icon-blocked',
				type: 'error'
			});
		@endif
		@if(session('warning'))
			new PNotify({
				title: 'Warning',
				text: '{{ session('warning') }}.',
				icon: 'icon-warning',
				type: 'warning'
			});
		@endif
		@if(session('success'))
			new PNotify({
				title: 'Success',
				text: '{{ session('success') }}.',
				icon: 'icon-checkmark3',
				type: 'success'
			});
		@endif
	});
</script>
@endsection