@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">DELIVERY -</span> Data</h3>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
			{{-- @if (\Auth::user()->id != 2099) --}}
				@if(\Auth::user()->role<=10 || in_array(\Auth::user()->role, [20,21,24,25,26]))
				<a href="{{ route('delivery.create') }}" class="btn btn-primary font-weight-bold font-size-lg">NEW DELIVERY <i class="icon-plus2 ml-2"></i></a>
				@endif
			{{-- @endif --}}
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">
		<div class="card">

			<div class="card-body">
				@if(in_array(\Auth::user()->role,[1,2,5,20,21]))
				<div class="form-group row">
					<label class="col-form-label col-lg-2">Status Kirim</label>
					<div class="col-lg-3">
						<select id="status_kirim" name="status_kirim"
								class="form-control form-control-select2"
								data-container-css-class="border-teal"
								data-dropdown-css-class="border-teal"
								required
						>
						<option value="">-- Pilih Status Kirim --</option>
							@foreach(config('custom.status_kirim') as $key => $value)
								<option value="{{$key}}">{{$value}}</option>
							@endforeach
						</select>
					</div>

					<label class="col-form-label col-md-1">Periode</label>
					<div class="col-md-3">
						<input type="text" id="periode_filter"
								name="periode_filter"
								class="daterange-picker form-control border-1 border-teal">
						<span class="text-muted">* Showing data within 1 months by default</span>
					</div>

					@if(in_array(\Auth::user()->role,[1,2,5]))
						<div class="col-lg-3 text-right">
							<a href="{{ url('downloaddelivery')}}" target="_blank"><button type="button" class="btn btn-success"><i class="icon-file-spreadsheet mr-2"></i> Download Xls</button></a>
						</div>
					@endif
				</div>
				
				<div class="form-group row">
					<label class="col-form-label col-lg-2">Jenis Pengiriman</label>
					<div class="col-lg-3">
						<select id="jenis_pengiriman" name="jenis_pengiriman"
								class="form-control form-control-select2"
								data-container-css-class="border-teal"
								data-dropdown-css-class="border-teal"
								required
						>
						<option value="">-- Pilih Jenis Pengiriman --</option>
							@foreach(config('custom.jenis_pengiriman') as $key => $value)
								@if (app('request')->input('j') || app('request')->input('j') == '0')
									<option value="{{$key}}" {{ app('request')->input('j') == $key ? 'selected' : null }}>{{$value}}</option>
								@else
									<option value="{{$key}}">{{$value}}</option>
								@endif
							@endforeach
						</select>
					</div>

				</div>

				<div class="row">
					<div class="col">
						{{-- <a id="btn-filter" class="btn btn-success" href="{{ route('delivery.index').'?s='.app('request')->input('s')}}" data-uri="{{ route('delivery.index') }}"><i class="icon-paperplane mr-1"></i> Filter</a> --}}
						<button id="btn-filter" class="btn btn-success"><i class="icon-paperplane mr-1"></i> Filter</button>
						<a class="btn btn-info" href="{{ route('delivery.index')}}"><i class="icon-spinner11 mr-1"></i> View All</a>
					</div>
				</div>
				<hr>
				
				@endif

				{{-- @if (app('request')->input('s') != null || app('request')->input('j') != null)
					<input type="hidden" id="requestfilterstatus" value="{{app('request')->input('s')}}">
					<input type="hidden" id="requestfilterjenis" value="{{app('request')->input('j')}}">
				@else
					<input type="hidden" id="requestfilterstatus" value="{{$s}}">
					<input type="hidden" id="requestfilterjenis" value="{{$j}}">
				@endif --}}
				<table class="table datatable-basic table-hover">
					<thead>
						<tr>
							<th>No</th>
							<th>No. Surat Jalan</th>
							<th>Info Invoice</th>
							<th>Info Customer</th>
							<th>Tanggal Dibuat</th>
							<th>Status Kirim</th>
							<th>Jenis Pengiriman</th>
							<th class="text-center">Action</th>
						</tr>
					</thead>
					<tbody>
						{{-- @if(!$deliveries->isEmpty())
						@php($i = 1)
							@foreach($deliveries as $delivery)
								<tr>
									<td>{{ $i }}</td>
									
									<td>{{ $delivery->no_surat_jalan }}</td>
									<td>
									@foreach ($delivery->delivery_detail as $detail)

										@if ($delivery->delivery_detail->count() > 1)
											{{ @$detail->invoice->no_invoice?@$detail->invoice->no_invoice:'Missing Invoice, cek DB' }}
											@if (!$loop->last),@endif

										@else
										{{ @$detail->invoice->no_invoice?@$detail->invoice->no_invoice:'Missing Invoice, cek DB' }}
										@endif

									@endforeach
									</td>

									<td>{{ ucwords(@$delivery->user->nama) }}</td>
									<td>{{ date('d/m/Y H:i', strtotime($delivery->created_at)) }}</td>
									<td>
										@if ($delivery->status_kirim == 1)
										<span class="font-size-sm badge badge-warning badge-pill">
										@elseif ($delivery->status_kirim == 2)
										<span class="font-size-sm badge badge-info badge-pill">
										@else
										<span class="font-size-sm badge badge-success badge-pill">
										@endif
											{{ config('custom.status_kirim.'.$delivery->status_kirim) }}
										</span>
									</td>
									<td>
										// <span class="font-size-sm badge {{$i%2 == 0 ? 'badge-success' : 'badge-warning'}} badge-pill">{{$i%2 == 0 ? 'Active' : 'Pending'}}</span>
										{{ config('custom.jenis_pengiriman.'.$delivery->jenis_pengiriman) }}
									</td>
									<td align="center">
										<a href="{{ url('cetakdelivery', $delivery->id) }}" target="_blank"><button type="button" class="btn btn-light btn-icon"><i class="icon-printer2" title="Print"></i></button></a>
										<a href="{{ route('delivery.show', $delivery->id) }}"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a>
										@if(\Auth::user()->role==1 || (\Auth::user()->role==10 && $delivery->status<4) || (\Auth::user()->role==5 && $delivery->status<4))
										// <a href="{{ route('delivery.edit', $delivery->id) }}"><button type="button" class="btn btn-light btn-icon"><i class="icon-pencil7" title="Edit"></i></button></a>
										<a class="delbutton" data-toggle="modal" data-target="#modal_theme_danger" data-uri="{{ route('delivery.destroy', $delivery->id)}}"><button type="button" class="btn btn-danger btn-icon"><i class="icon-x" title="Delete"></i></button></a>
										@endif
									</td>
								</tr>
								@php($i++)
							@endforeach
						@else
						<tr>
							<td align="center" colspan="8">Data Kosong</td>
						</tr>
						@endif --}}

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

	<!-- modal cetak -->
	<div id="modal_cetak" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header bg-primary" align="center">
                    <h6 class="modal-title"><i class="icon-user mr-2"></i>Cetak Delivery </h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="form_cetak">
				    @csrf
					<div class="modal-body">
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Display Alamat</label>
							<div class="col-lg-10" id="display_alamat">
							</div>
						</div>
					</div>

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

	<!-- 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" >Hapus</button>
					</div>
				</form>
			</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('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script>
		// Status Kirim
		let status_kirim = {!! json_encode(config('custom.status_kirim')) !!};
		//Jenis Pengiriman
		let jenis_pengiriman = {!!  json_encode(config('custom.jenis_pengiriman')) !!};
		
		// init var filter
		var requestfilterstatus = null;
		var requestfilterjenis = null;
		var periode = null;

		//modal cetak
		$(document).on("click", ".cetakbutton", function () {
		     var url = $(this).data('uri');
			 var id = $(this).data('id');

		     $("#form_cetak").attr("action", url);

			//  ambil alamat berdasar id invoice
			$.ajax({
				url: "getalamatdelivery/"+id,
				type: 'GET',
				success: function (response) {
					var alamat_utama = response.data['alamat_utama']
					var alamat = response.data['alamats']
					$('#display_alamat').empty();

					let html = ''
					if (alamat_utama != null && alamat_utama != '') {
						html += `<div class="row">`
							html += `<label class="col-form-label col-lg-1"><input type="checkbox" name="display_alamat[]" value="alamat_utama"></label>`				
							html += `<label class="col-form-label col text-left">${alamat_utama}</label>`
						html += `</div>`
					}

					if (alamat.length > 0) {
						for (let idx = 0; idx < alamat.length; idx++) {
							html += `<div class="row">`
								html += `<label class="col-form-label col-lg-1"><input type="checkbox" name="display_alamat[]" value="${alamat[idx].id}"></label>`				
								html += `<label class="col-form-label col text-left">${alamat[idx].alamat}</label>`
							html += `</div>`
						}
						
					}
					$('#display_alamat').append(html);

					// var $select = $('.form-control-select2').select2();
					// $("#form_cetak").find('.modal-body').html(response);
				}
			});
		});

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

		// $('#status_kirim').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 val2 = $('#jenis_pengiriman option:selected').val();
        //     // let href = `${uri}?c=${val1}&i=${val2}&n=${val3}`;
        //     let href = `${uri}?s=${val1}&j=${val2}`;
		// 	// console.log(uri);
        //     $('#btn-filter').attr('href', href);
        // })

		// $('#jenis_pengiriman').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 val2 = $('#status_kirim option:selected').val();
        //     // let href = `${uri}?c=${val1}&i=${val2}&n=${val3}`;
        //     let href = `${uri}?s=${val2}&j=${val1}`;
		// 	// console.log(uri);
        //     $('#btn-filter').attr('href', href);
        // })

		$(document).on('click', '#btn-filter', function() {
			requestfilterstatus = $('#status_kirim option:selected').val();
			requestfilterjenis = $('#jenis_pengiriman option:selected').val();
			periode = $('#periode_filter').val();

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

		// // kalau ada filter
		// if(requestfilterstatus != '' || requestfilterjenis != '') {
		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: 220,
					targets: [ 7 ]
				}],
				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,
				order: [[4, 'asc']],
				// ajax: "{{route('delivery-datatable')}}?s="+requestfilterstatus+"&j="+requestfilterjenis,
				ajax : {
					url : "{{route('delivery-datatable')}}",
						type: "GET",
                            data:{
                                _token: '{{csrf_token()}}',
                                s: requestfilterstatus,
                                j: requestfilterjenis,
                                periode: periode,
                            },
				},
				columns:[
					{data:'DT_RowIndex', name:'no'},
					{data:'no_surat_jalan', name:'no_surat_jalan'},
					{data:null, name:'no_invoice',render:function(data, type, row){
						// let html = `<span class="font-weight-semibold">${data.no_invoice?data.no_invoice:'-'}</span>`
						let html = ''
						for (let idx = 0; idx < data.invoice_detail.length; idx++) {
							if (idx > 0) {
								html += `<br>`
								html += `<br>`
							}
							html += `<span class='font-weight-semibold'>Invoice</span> : ${data.invoice_detail[idx].invoice.no_invoice}`
							html += `<br>No. Resi : ${data.invoice_detail[idx].no_resi}`
							// html += `<br>Kode Detail : ${data.invoice_detail[idx].barang_id}`
							for (let i = 0; i < data.invoice_detail[idx].receipt_detail.detail_barang.length; i++) {
								// html += `<br>Kode Detail : ${data.invoice_detail[idx].receipt_detail}`
								html += '<br>Kode Detail : ' + data.invoice_detail[idx].receipt_detail.detail_barang[i].id
							}
							// html += `<br>Kode Detail : ${data.invoice_detail[idx].barang_id}`
							
						}

						return html;
					}},
					{data:null, name:'custmarketing',render:function(data, type, row){
						let nama = data.namacustomer?ucwords(data.namacustomer):'-'
						nama += `<br>Marketing : ${data.namamarketing?ucwords(data.namamarketing):'-'}`
						// if(data.user.hasOwnProperty('nama')){
						// if(data.user){
						// 	if(data.user.nama){
						// 		return ucwords(data.user.nama);
						// 	}else{
						// 		return '-'
						// 	}
						// } else {
						// 	return '-'
						// }

						return nama
					}},
					{data:null, name:'created_at',render:function(data, type, row){
						return moment(data.created_at, 'YYYY-MM-DD HH:mm:ss').format('DD/MM/YYYY HH:mm');
					}},
					{data:null, name:'status_kirim',render:function(data, type, row){
						let html = "";

						if(data.status_kirim == 1){
							html += '<span class="font-size-sm badge badge-warning badge-pill">';
						}else if (data.status_kirim == 2){
							html += '<span class="font-size-sm badge badge-info badge-pill">';
						}else{
							html += '<span class="font-size-sm badge badge-success badge-pill">';
						}

						html += `${status_kirim[data.status_kirim]}</span>`;

						return html;
					}},
					{data:null, name:'jenis_pengiriman',render:function(data, type, row){
						return jenis_pengiriman[data.jenis_pengiriman];
					}},
					{data:null, render:function(data, type, row){
						let html = ''
							html += `<a href="{{url('cetakdelivery')}}/${data.id}" target="_blank"><button type="button" class="btn btn-light btn-icon"><i class="icon-printer2" title="Print"></i></button></a>`
							// html += `<a class="cetakbutton" data-toggle="modal"
							// 			data-target="#modal_cetak"
							// 			data-uri="{{ url('cetakdelivery')}}/${data.id}"
							// 			data-id="${data.id}"
							// 		>
							// 			<button type="button" class="btn btn-primary btn-icon">
							// 				<i class="icon-printer2" title="Print"></i>
							// 			</button>
							// 		</a>
							// 		`

							html += `<a href="{{url('delivery')}}/${data.id}"><button type="button" class="btn btn-light btn-icon"><i class="icon-eye" title="Show"></i></button></a>`;

						if ( {{\Auth::user()->role}} == 1 || {{\Auth::user()->role}} == 20) {
							html += `<a href="{{ url('delivery')}}/${data.id}/edit"><button type="button" class="btn btn-primary btn-icon" data-popup="tooltip" data-placement="bottom" data-original-title="Edit Delivery"><i class="icon-pencil7" title="Ubah"></i></button></a>`
						}

						if( {{\Auth::user()->id}} == 2099 || {{\Auth::user()->role}} == 20 || {{\Auth::user()->role}} == 1 || ( {{\Auth::user()->role}} == 10 && data.status < 4) || ( {{\Auth::user()->role}} == 5 && data.status < 4) ){
							html += `<a class="delbutton" data-toggle="modal"
										data-target="#modal_theme_danger"
										data-uri="{{ url('delivery')}}/${data.id}"
									>
										<button type="button" class="btn btn-danger btn-icon">
											<i class="icon-x" title="Delete"></i>
										</button>
									</a>`;
						}
						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() {

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

			startDate: '{{ $start_date }}',
			endDate: '{{ $end_date }}',
			

			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

		});
	</script>



@endsection