@extends('layout')

@section('css')
<style>
	h4{
		margin:0;
		font-size: 1.2em;
	}
</style>
@endsection

@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">Receipt - No Marking</h3>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
			{{-- @if(in_array(\Auth::user()->role,[1,2,5,8,9]))
			<div class="d-flex">
				<button data-toggle="modal"
						data-target="#modal_download_xls"
						class="btn btn-success font-weight-bold font-size-lg"
						style="margin-right:10px"
				>
					Download Xls <i class="icon-file-spreadsheet ml-2"></i>
				</button>
			</div>
			@endif --}}
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
		<div class="card">
			<div class="card-body">
				<div class="d-flex py-3 justify-content-around align-items-center">
					<h4 class="font-weight-light"> Total Receipt: 
						<span id="count_total_resi" class="font-weight-bold">{{ ribuan($totreceipts) }}</span> </h4>
					<h4 class="font-weight-light"> Total Carton: 
						<span id="count_total_carton" class="font-weight-bold">{{ ribuan($totcarton) }}</span> ctn</h4>
					<h4 class="font-weight-light"> Total Volume: 
						<span id="count_total_volume" class="font-weight-bold">{{ yuan($totvolume) }}</span> m3</h4>
					<h4 class="font-weight-light"> Total Weight: 
						<span id="count_total_weight" class="font-weight-bold">{{ yuan($totweight) }}</span> kg</h4>
				</div>
				<hr>

				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th>No</th>
							<th>No. Receipt</th>
							<th>No. Resi Coload</th>
							<th>Nama Member</th>
							<th>No. China Local Express</th>
							<th>Ekspedisi</th>
							<th>Shipping Marks</th>
							<th>Destination</th>
							{{-- <th>Total Carton</th> --}}
							<th>Total</th>
							{{-- <th>Total Weight (kg)</th> --}}
							<th>Status Resi</th>
							<th>Status Notifikasi</th>
							<th>Date & Time</th>
							{{-- <th class="text-center">Status</th> --}}
							<th class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>
	</div>

	<!-- Danger modal -->
	<div id="modal_theme_danger" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-danger" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="delform">
					@csrf
					@method('DELETE')
					<div class="modal-body" align="center">
						<h2> Hapus Data? </h2>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
						<button type="submit" class="btn bg-danger" disabled>Hapus</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

	<!-- Add Images modal -->
	<div id="modal_add_images" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<h2 class="modal-title font-weight-semibold">Add Images</h2>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form id="form_image" action="#" method="post" class="form-horizontal">
					@csrf
					<div class="modal-body">
						<div class="row mb-3">
							<div class="col-md-5">
								<input name="gambar[]" type="file" class="form-control" required multiple>
							</div>
							<div class="col-md-4">
								<button type="submit" class="btn btn-primary text-uppercase">Submit</button>
							</div>
						</div>
						<div class="row">
							@for($i = 0; $i < 6; $i++)
							<div class="card-img-actions m-1">
								<img class="card-img img-fluid" src="{{ asset('global_assets/images/image.png') }}" alt="" style="height:150px;width:150px;object-fit: cover;">
								<div class="card-img-actions-overlay card-img">
									<a href="{{ asset('global_assets/images/image.png') }}" class="btn btn-outline bg-white text-white border-white border-2 btn-icon rounded-round" data-popup="lightbox" rel="group">
										<i class="icon-zoomin3"></i>
									</a>
								</div>
							</div>
							{{-- <div class="col-md-3">
							</div> --}}
							@endfor
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /horizontal form modal -->

	<!-- Download modal -->
	<div id="modal_download_xls" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<h2> Download Xls </h2>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<div class="modal-body">
					<legend class="font-weight-semibold">Tanpa Filter</legend>
					{{-- <div class="form-group">
						<form action="{{ url('downloadallexcel-china') }}" method="post" >
							@csrf
							<input name="warehouse_name" type="hidden" value="{{$warehouse_name}}">
							<div class="row">

								<div class="col-lg-3">
									<button type="submit" id="submitdownload" class="btn bg-success" >Download</button>
								</div>
							</div>
						</form>
					</div> --}}

					{{-- <legend class="font-weight-semibold">Berdasar Tanggal</legend>
					<div class="form-group">
						<form action="{{ url('downloadexcel-china') }}" method="post" >
							@csrf
							<input name="warehouse_name" type="hidden" value="{{$warehouse_name}}">
							<div class="row">

								<label class="col-form-label col-lg-3">Tanggal</label>
								<div class="col-lg-5">
									<input name="tanggal" type="text" class="form-control daterange-buttons" value="{{date('Y/m/d')}} - {{date('Y/m/d')}}">
								</div>
								@if(isset($_GET['d']) )
								<input type="hidden" name="destination" value="{{$_GET['d']}}">
								@endif
								<div class="col-lg-3">
									<button type="submit" id="submitdownload" class="btn bg-success" >Download</button>
								</div>
							</div>
						</form>
					</div> --}}



				</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
					</div>
			</div>
		</div>
	</div>
	<!-- /default modal -->

@endsection

@section('js')

	<!-- Theme JS files -->
	<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/notifications/bootbox.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/buttons/spin.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/buttons/ladda.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/components_modals.js')}}"></script>
	<script>

		let status = {!! json_encode(config('custom.status_resi')) !!};
		let status_notifikasi_color = {!! json_encode(config('custom.status_notifikasi_color')) !!};
		let status_notifikasi = {!! json_encode(config('custom.status_notifikasi')) !!}
		let status_notifikasi_icon = {!! json_encode(config('custom.status_notifikasi_icon')) !!}
		let status_carton = {!! json_encode(config('custom.status_carton')) !!}
		var role_id = "{{Auth::user()->role}}";

		// function resendNotif(element){
		// 	$(element).parent().parent().submit();
		// }

		function resendNotif(receipt, template){
				console.log(receipt)
			$.ajax({
				type: 'POST',
				url: "{{ url('resendnotifkartoncina') }}",
				data: {
					_token : '{{csrf_token()}}',
					receipt : receipt,
					template : template
				},
				beforeSend: function(){
					new PNotify({
						title: 'Process',
						text: 'Sending notification..',
						icon: 'icon-hour-glass',
						type: 'info'
					});
				},
				success: function (data) {
					// console.log(data)
					new PNotify({
						title: 'Success',
						text: 'Notification Sent',
						icon: 'icon-checkmark3',
						type: 'success'
					});

					$('#divnotifikasiwa'+receipt).empty()
					$('#divnotifikasipaksi'+receipt).empty()

					var html = ''
					var html2 = ''

					console.log(data.status_notifikasi)
					html += `<b class="${status_notifikasi_color[data.status_notifikasi]}">Notif barang masuk ${status_notifikasi_icon[data.status_notifikasi]}</b>
								<br>
								<button type='button' class='btn btn-sm btn-icon btn-link'
									onclick="resendNotif(${receipt},'barang_china_new_revisi_2')">
									<i class="fas fa-redo-alt"></i>
								</button>`;
					$('#divnotifikasiwa'+receipt).append(html)

					// html2 += '<br />'
					// html2 += '<br />'
					// html2 += '<b class="'+status_notifikasi_color[data.status_notifikasi_paksi?data.status_notifikasi_paksi:0]+'">Notif Paksi '+status_notifikasi_icon[data.status_notifikasi_paksi?data.status_notifikasi_paksi:0]+'</b>';
					// html2 += '<br />'
					// html2 += `<button class='btn btn-sm btn-icon btn-link' href="#"
					// 				onclick="resendNotif(${data.id},'barang_china')"
					// 			>
					// 				<i class="fas fa-redo-alt"></i>
					// 			</button>`;
					// $('#divnotifikasipaksi'+receipt).append(html2)

				}
			});
		}

		$('#select_destination').change(function(){
            var uri = $('#btn-filter').data('uri');
            // var val1 = $('#select_destination').find(":selected").val();
            // let val2 = $('#select_customer').find(":selected").val();
            let val1 = $(this).val();
            // let href = `${uri}?c=${val1}&i=${val2}&n=${val3}`;
            let href = `${uri}?d=${val1}`;
			// console.log(uri);
            $('#btn-filter').attr('href', href);
        })

		//modal delete
		$(document).on("click", ".delbutton", function () {
			var url = $(this).data('uri');
			$("#delform").attr("action", url);
		});

        var selectfmember = null
		var selectfmark = null
		var selectfdestination = null
		var warehouse_name = $('#warehouse_name').val()
		var periode = $('.daterange-picker').val()
		
        $(document).on('click', '#btnfilter', function() {
			selectfmember = $('#select_f_member').val()
			selectfmark = $('#select_f_mark').val()
			selectfdestination = $('#select_f_destination').val()
            warehouse_name=$('#warehouse_name').val()
			periode = $('#periode_filter').val()

            $('.datatable-basic').DataTable().clear().destroy()
			DatatableBasic.init()

			$.ajax({
				type: 'GET',
				url: "{{ url('countrecnomark') }}",
				data: {
					_token : '{{csrf_token()}}',
					selectfmember: selectfmember,
					selectfmark: selectfmark,
					selectfdestination: selectfdestination,
					warehouse_name: warehouse_name,
					periode: periode,
				},
				// beforeSend: function(){
				// },
				success: function (data) {
					$('#count_total_resi').text(data.totreceipts)
					$('#count_total_carton').text(data.totcarton)
					$('#count_total_volume').text(data.totvolume)
					$('#count_total_weight').text(data.totweight)
				}
			});
		})

		var DatatableBasic = function() {

			// Basic Datatable examples
			var _componentDatatableBasic = function() {
				if (!$().DataTable) {
					console.warn('Warning - datatables.min.js is not loaded.');
					return;
				}

				// Setting datatable defaults
				$.extend( $.fn.dataTable.defaults, {
					autoWidth: false,
					columnDefs: [{
						orderable: false,
						width: 150,
						targets: [ 12 ]
					}],
					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;' }
					}
				});

				// Basic datatable
				$('.datatable-basic').DataTable({
                    processing: true,
					serverSide: true,
					scrollX: true,
					ajax: {
						url : "{{route('recnomark-datatable')}}",
						type: "GET",
                            data:{
                                _token: '{{csrf_token()}}',
                                selectfmember: selectfmember,
                                selectfmark: selectfmark,
                                selectfdestination: selectfdestination,
                                warehouse_name: warehouse_name,
                                periode: periode,
                            },
                            beforeSend: function () {
                                $('.datatable-basic > tbody').html(
                                    '<tr class="odd">' +
                                    '<td valign="top" colspan="100%" class="dataTables_empty"><div class="spinner-border text-success" role="status"><span class="sr-only">Loading...</span></div></td>' +
                                    '</tr>'
                                );
                            },
					},
                    columns:[
                        {data:'DT_RowIndex', name:'no'},
						{data:'no_resi', name:'no_resi'},
						{data:'no_resi_coload', name:'no_resi_coload'},
						{data:'shipping_mark_with_name', name:'shipping_mark_with_name'},
						{data:'no_local_cina', name:'no_local_cina'},
                        {data: 'tipe_barang', name: 'tipe_barang'},
                        {data:'shipping_mark', name:'shipping_mark'},
                        {data:'shipping_to', name:'shipping_to'},
                        {data: null, render: function (data, type, row ) {
                            let html = `
                                <td>
                                    Karton: <span class="font-weight-semibold">${data.total_ctn}</span><br>
                                    Vol.: <span class="font-weight-semibold">${data.totalvol}</span><br>
                                    Weight: <span class="font-weight-semibold">${data.totalber}</span>
                                </td>
                            `;
                            return html;
                        }},
                        {data: null, render: function (data, type, row ) {
                            let html = `<td>`;

                            if (data.status === 11) {
                                html += `<span class="font-size-sm badge badge-danger badge-pill">${data.status_text}</span>`;
                            } else if (data.status === 12) {
                                html += `<span class="font-size-sm badge badge-success badge-pill">${data.status_text}</span>`;
                            } else {
                                html += `${data.status_text}`;
                            }

                            html += `</td>`;
                            return html;
                        }},
                        {data: null, render: function (data, type, row) {
                            let icon = ''
                            if (data.status_notifikasi != null){
                                icon = status_notifikasi_icon[data.status_notifikasi]
                            }
                            console.log(data.status_notifikasi)
                            let html = `
                                <div style="width: 100%; text-align:center; white-space:nowrap">
                                    <div id="divnotifikasiwa${data.id}">
                                        <b class="${data.status_notifikasi_color}">
                                            Notif barang masuk ${icon}
                                        </b>
                                        <br>
                                        <button type="button" class="btn btn-sm btn-icon btn-link" href="#"
                                            onclick="resendNotif(${data.id}, 'barang_china_new_revisi_2')">
                                            <i class="fas fa-redo-alt"></i>
                                        </button>
                                    </div>
                                </div>
                            `;
                            return html;
                        }},
                        {data:'created_at', name:'created_at'},
                        {data: null, render: function (data, type, row ) {
                            let html = '<div style="text-align:center;">';

                            let showUrl = "{{ route('china.show', ':id') }}".replace(':id', data.id);
                            let editUrl = "{{ route('receipt.edit', ':id') }}".replace(':id', data.id);
                            html += `<a href="${showUrl}"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a>`;

							// console.log(role_id)
							// yg bisa edit hanya super admin / cs global
                            if (role_id == 1 || role_id == 8) {
								html += `<a href="${editUrl}"><button type="button" class="btn btn-secondary btn-icon"><i class="icon-pencil7" title="Edit"></i></button></a>`;
							}

                            html += '</div>';

                            return html;
                        }}
					]
                });

				// Alternative pagination
				$('.datatable-pagination').DataTable({
					pagingType: "simple",
					language: {
						paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
					}
				});

				// Datatable with saving state
				$('.datatable-save-state').DataTable({
					stateSave: true
				});

				// Scrollable datatable
				var table = $('.datatable-scroll-y').DataTable({
					autoWidth: true,
					scrollY: 300
				});

				// Resize scrollable table when sidebar width changes
				$('.sidebar-control').on('click', function() {
					table.columns.adjust().draw();
				});
			};

			// Select2 for length menu styling
			var _componentSelect2 = function() {
				if (!$().select2) {
					console.warn('Warning - select2.min.js is not loaded.');
					return;
				}

				// Initialize
				$('.dataTables_length select').select2({
					minimumResultsForSearch: Infinity,
					dropdownAutoWidth: true,
					width: 'auto'
				});
			};


			//
			// Return objects assigned to module
			//

			return {
				init: function() {
					_componentDatatableBasic();
					_componentSelect2();
				}
			}
		}();


		// Initialize module
		// ------------------------------

		document.addEventListener('DOMContentLoaded', function() {
			DatatableBasic.init();
		});
	</script>
	<script type="text/javascript">
			var $select = $('.form-control-select2').select2();

		$( document ).ready(function() {
			var $select = $('.form-control-select2').select2();

			// Button class options
			$('.daterange-buttons').daterangepicker({
				applyClass: 'btn-success',
				cancelClass: 'btn-danger',
				locale: {
					format: 'YYYY/MM/DD'
				}
			});
			// Default style
			@if(session('error'))
			new PNotify({
				title: 'Error',
				text: '{{ session('error') }}.',
				icon: 'icon-blocked',
				type: 'error'
			});
			@endif
			@if ( session('success'))
			new PNotify({
				title: 'Success',
				text: '{{ session('success') }}.',
				icon: 'icon-checkmark3',
				type: 'success'
			});
			@endif

		});

		$('.daterange-picker').daterangepicker({
			applyClass: 'btn-primary',
			cancelClass: 'btn-light',

			@if(isset($_GET['periode_filter']))
			@php
				$tanggal = explode(' - ', $_GET['periode_filter']);
			@endphp
				startDate: '{{ $tanggal[0] }}',
				endDate: '{{ $tanggal[1] }}',
			@else
				// startDate: moment().startOf('month').format('YYYY/MM/DD'),
				startDate: '{{ $start_date }}',
				endDate: '{{ $end_date }}',
			@endif

			locale: {
			format: 'YYYY/MM/DD'
			}
		});
	</script>

@endsection