@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. Invoice</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">
					<span class="text-muted">Showing deleted invoices only.</span>
				</div>
			</div>

			<table class="table datatable-admin-invoice table-hover">
				<thead>
					<tr>
						<th>No</th>
						<th>No. Invoice</th>
						<th>Customer</th>
                        <th>No. Resi</th>
						<th>No. Container</th>
						<th>Tanggal Dibuat</th>
						<th>Tanggal Dihapus</th>
						<th>Total Tagihan</th>
						<th>Status</th>
						<th class="text-center">Action</th>
					</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
</div>
<!-- /content area -->

<div id="modal_restore_invoice" 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 Invoice</h5>
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>

			<form action="" method="post" id="restore_invoice_form">
				@csrf
				<div class="modal-body">
					<div class="mb-3">
						<div class="font-weight-semibold" id="restore_invoice_label">-</div>
					</div>
					<div id="restore_invoice_loading" class="text-center py-3" style="display:none;">Loading invoice details...</div>
					<div id="restore_invoice_details"></div>
					<div class="text-muted mt-3">Restore ini akan mengaktifkan kembali invoice beserta semua invoice_detail 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-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/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 statusInvoice = @json(config('custom.status_invoice'));
		var restoreUrlTemplate = @json(url('admininvoice/__ID__/restore'));
		var restorePreviewUrlTemplate = @json(url('admininvoice/__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 formatRupiah(value) {
			var amount = Number(value || 0);

			if (isNaN(amount)) {
				amount = 0;
			}

			return 'Rp. ' + amount.toLocaleString('id-ID');
		}

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

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

		var table = $('.datatable-admin-invoice').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('admininvoice-datatable') }}",
				data: function(d) {
					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_invoice', name: 'no_invoice'},
				{
					data: null,
					name: 'customer_nama',
					render: function(data) {
						if (!data.customer_nama) {
							return '-';
						}

						return data.customer_shipping_mark
							? data.customer_nama + ' - ' + data.customer_shipping_mark
							: data.customer_nama;
					}
				},
                {
					data: 'no_resi',
					name: 'no_resi',
					render: function(data) {
						return data ? data : '-';
					}
				},
				{
					data: 'detail_no_container',
					name: 'detail_no_container',
					render: function(data) {
						return data ? data : '-';
					}
				},
				{
					data: 'created_at',
					name: 'created_at',
					render: function(data) {
						return data ? moment(data, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY HH:mm') : '-';
					}
				},
				{
					data: 'deleted_at',
					name: 'deleted_at',
					render: function(data) {
						return data ? moment(data, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY HH:mm') : '-';
					}
				},
				{
					data: 'total_tagihan',
					name: 'total_tagihan',
					render: function(data) {
						return formatRupiah(data);
					}
				},
				{
					data: 'statusinvoice',
					name: 'statusinvoice',
					render: function(data) {
						return statusInvoice.hasOwnProperty(data) ? statusInvoice[data] : '-';
					}
				},
				{
					data: null,
					className: 'text-center',
					searchable: false,
					orderable: false,
					render: function(data) {
						var html = '<div style="white-space: nowrap;">';
						html += '<button type="button" class="btn btn-warning btn-icon restore-button" data-id="' + data.idinvoice + '" data-no-invoice="' + data.no_invoice + '"><i class="icon-history" title="Restore"></i></button>';
						html += '</div>';
						return html;
					}
				}
			]
		});

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

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

			$('#restore_invoice_label').text(noInvoice);
			$('#restore_invoice_form').attr('action', restoreUrlTemplate.replace('__ID__', id));
			$('#restore_invoice_details').html('');
			$('#restore_invoice_loading').show();
			$('#modal_restore_invoice').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 invoice detail found.</div>';
					} else {
						response.details.forEach(function(detail, index) {
							html += '<div class="border rounded p-3 mb-3">';
							html += '<div class="font-weight-semibold mb-2">Invoice Detail ' + (index + 1) + '</div>';
							html += '<div class="mb-1"><span class="font-weight-semibold">No. Resi:</span> ' + detail.no_resi + '</div>';
							html += '<div class="mb-1"><span class="font-weight-semibold">No. Container:</span> ' + detail.no_container + '</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.jml_ctn + '</div>';
							html += '<div class="mb-1"><span class="font-weight-semibold">Total:</span> ' + formatRupiah(detail.total) + '</div>';
							html += '<div class="mb-3"><span class="font-weight-semibold">Invoice Detail Status:</span> ' + getDetailStatusHtml(detail) + '</div>';
							html += '</div>';
						});
					}

					$('#restore_invoice_details').html(html);
					$('#restore_invoice_loading').hide();
				},
				error: function() {
					$('#restore_invoice_details').html('<div class="text-danger">Failed to load invoice details.</div>');
					$('#restore_invoice_loading').hide();
				}
			});
		});

		@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