@extends('layout')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}
</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">
				<h4>Data User</h4>
				<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">

		<!-- Hover rows -->
		<div class="card">



				<div class="card-body">
					<div class="row">
						@if (!in_array(\Auth::user()->role,[8,9,15, 41, 42, 43]))
							<div class="col-lg-2">
								<a href="{{ route('users.create')}}"><button type="button" class="btn btn-primary rounded-round"><i class="icon-help mr-2"></i> Tambah</button></a>
							</div>
							@if (\Auth::user()->role == 1)
							<div class="col text-right">
								<a data-toggle="modal" data-target="#modal_user_download">
									<button type="button" class="btn btn-success rounded-round" data-popup="tooltip" data-placement="bottom" data-original-title="Download User">
										<i class="icon-file-excel mr-1" title="Download User"></i> Download User
									</button>
								</a>
							</div>
							@endif
						@endif
					</div>
					

					<hr>
					<div class="row">
						<div class="col">
							<div class="form-check form-check-inline">
								<label class="form-check-label">
									<input id="filteruserresi" type="checkbox" class="form-check-input-styled" {{$filterresi == 1?'checked':''}}>
									Filter User yang sudah punya Resi
								</label>
							</div>
						</div>
					</div>

				</div>


			<input type="hidden" id="hidden_baseurl" value="{{url('')}}">
			<input type="hidden" id="authuser" value="{{\Auth::user()->role}}">
			<table class="table datatable-basic table-hover">
				<thead>
					<tr>
						<th style="display: none">Id</th>
						<th>No</th>
						<th>Foto</th>
						<th>Nama</th>
						<th>Nickname</th>
						<th>Coload</th>
						<th>Nama Marketing</th>
						<th>Shipping Mark</th>
						<th>Wilayah Marketing</th>
						@if(!in_array(\Auth::user()->role,[2,8,9,15, 41, 42, 43]))
							<th class="text-center">Actions</th>
						@endif
					</tr>
				</thead>
				<tbody>
				
				</tbody>
			</table>
		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->

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

				<div class="modal-body">

					<h6>Download Member Baru</h6>
					<form action="{{url('downloaduser')}}" method="POST">
					@csrf
						<div class="row">
							<div class="col-lg-2">
								<select name="sales" class="form-control form-control-select2">
									<option value="semua" selected>Semua</option>
									@foreach($sales as $sale)
										<option value="{{$sale->id}}" {{ app('request')->input('s') == $sale->id ? 'selected' : null }}>{{ $sale->nama }}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-2">
								<select name="month" class="form-control form-control-select2">
									<option value="semua">Semua</option>
									@foreach(config('custom.bulan') as $key => $value)
										<option value="{{$key}}" {{date('m')==$key? 'selected':''}}>{{$value}}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-2">
								<select name="year" class="form-control form-control-select2">
									<option value="semua">Semua</option>
									@foreach(range(date('Y')-5, date('Y')+5) as $y)
										<option value="{{$y}}" {{date('Y')==$y?'selected':''}}>{{$y}}</option>
									@endforeach
								</select>
							</div>
							<div class="col-lg-2">
								<select name="self_register" class="form-control form-control-select2">
									<option value="semua">Semua</option>
									<option value="selfregister">Self Register</option>
									
								</select>
							</div>
							<div class="col-lg-4 text-right">
								<button type="submit" class="btn btn-success" data-popup="tooltip" data-original-title="Download Xls"> <i class="icon-download"></i></button>
							</div>
						</div>
					</form>
					<hr>
					
					<h6>Download User Jasa Titip Beliin</h6>
					<form action="{{url('downloaduserjastip')}}" method="GET">
						@csrf
						<div class="row">
							<label class="col-form-label col-lg-1">Periode</label>
							<div class="col">
								<input type="text" id="periode_filter" name="periode_filter" class="daterange-picker form-control">
							</div>
							<label class="col-form-label col-lg-1">Coload</label>
							<div class="col">
								<select name="coload_id" id="coload_id" class="form-control">
									<option value="" selected disabled>-- Pilih Coload --</option>
									@foreach ($coloads as $coload)
										<option value="{{$coload->id}}">{{$coload->nama}}</option>
									@endforeach
								</select>
							</div>
							<div class="col text-right">
								 <button type="submit" class="btn btn-success" data-popup="tooltip" data-original-title="Download Xls"> <i class="icon-download"></i></button>
							</div>
						</div>
					</form>

					<hr>
					
					<h6>Download User Jasa Transfer</h6>
					<form action="{{url('downloaduserjasatransfer')}}" method="GET">
						@csrf
						<div class="row">
							<label class="col-form-label col-lg-1">Periode</label>
							<div class="col">
								<input type="text" id="periode_filter" name="periode_filter" class="daterange-picker form-control">
							</div>
							<label class="col-form-label col-lg-1">Coload</label>
							<div class="col">
								<select name="coload_id" id="coload_id" class="form-control">
									<option value="" selected disabled>-- Pilih Coload --</option>
									@foreach ($coloads as $coload)
										<option value="{{$coload->id}}">{{$coload->nama}}</option>
									@endforeach
								</select>
							</div>
							<div class="col text-right">
								 <button type="submit" class="btn btn-success" data-popup="tooltip" data-original-title="Download Xls"> <i class="icon-download"></i></button>
							</div>
						</div>
					</form>

				</div>
			</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 -->

	<!-- Price per user modal -->
	<div id="modal_price_per_user" class="modal fade" tabindex="-1">
		<div class="modal-dialog modal-xl">
			<div class="modal-content">
				<div class="modal-header bg-success" align="center">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>

				<form action="" method="post" id="priceuserform">
				    @csrf
				    @method('post')
					<div class="modal-body" align="center">

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Master Price</label>
							<div class="col-lg-10">
								<select name="master_price" id="master_price" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
									<option value="">-- Pilih Harga --</option>
								</select>
							</div>
						</div>

						<div class="form-group row">
							<label class="col-form-label col-lg-2">Custom Price</label>
							<div class="col-lg-10">
								<input class="form-control" id="custom_price" name="custom_price" type="text">
							</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-success btnsubmit">Simpan</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- /default modal -->

	<div id="modal_theme_agreement" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header bg-success" 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> Detail Agreement </h2>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Ip Address</label>
							<div class="col-lg-10" id="det-ip">

							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">User Agent</label>
							<div class="col-lg-10" id="det-ua">

							</div>
						</div>
						<div class="form-group row">
							<label class="col-form-label col-lg-2">Time</label>
							<div class="col-lg-10" id="det-time">

							</div>
						</div>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
					</div>
				</form>
			</div>
		</div>
	</div>

@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/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/switchery.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/switch.min.js')}}"></script>

	<script src="{{asset('assets/js/app.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/gallery_library.js')}}"></script>
	<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
	<script>
		let usersTable = null

		$(document).on('change','#filteruserresi', function() {
			var filterresi = $('#filteruserresi').is(':checked')?1:0
			// console.log(filterresi)
			window.location = "{{url('users?filterresi=')}}"+filterresi;
		})

		let role = {!! json_encode(config('custom.role')) !!};
		let status_notifikasi = {!! json_encode(config('custom.status_notifikasi')) !!};
		let status_notifikasi_color = {!! json_encode(config('custom.status_notifikasi_color')) !!};

		// $(".kelaslightbox").fancybox();
		//modal delete
		$(document).on("click", ".btnprice", function () {
		     var url = $(this).data('uri');
			 var id = $(this).data('id');
		     $("#priceuserform").attr("action", url);

			//  get harga berdasar coload user
			$.ajax({
				url: "{{ url('getpriceuser') }}",
				type: "GET",
				data: {
					id: id
				},
				success: function (response) {
					if (response.status = 'success') {
						data = response.data
						$('#custom_price').val('');
						
						if (data.length > 0) {
							$('#master_price').empty();
							$('#master_price').append('<option value="">-- Pilih Harga --</option>');
							for (var i = 0; i < data.length; i++) {
								if (data[i].ekspedisidetail.length > 0) {
									for (var j = 0; j < 1; j++) {
										if (data[i].ekspedisidetail[j]) {
											let text_harga = data[i].tipe_ekspedisi+' - '+data[i].tipe_barang+' - '+data[i].ekspedisidetail[j].start_cbm+' - '+data[i].ekspedisidetail[j].end_cbm+' - '+data[i].ekspedisidetail[j].harga.toLocaleString('id-ID');
											$('#master_price').append('<option value="'+data[i].ekspedisidetail[j].id+'">'+text_harga+'</option>');
										}
									}
								}
							}

							$('#master_price').select2({
								dropdownParent: $('#modal_price_per_user') // Use the ID of your modal
							});
						}
					} else {
						$('#master_price').append('<option value="">-- Pilih Harga --</option>');
						$('#custom_price').val('');

					}
				}
			});
		});

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

		$(document).on("click", ".detbutton", function () {
		     var ip = $(this).data('ip');
		     var ua = $(this).data('ua');
		     var time = $(this).data('time');
		     $("#det-ip").html(ip);
		     $("#det-ua").html(ua);
		     $("#det-time").html(time);
		});

		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: 200,
		                // targets: [ 1,9,10 ]
		            }],
		            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
		        usersTable = $('.datatable-basic').DataTable({
                    processing: true,
					serverSide: true,
					responsive: true,
					scrollX: true,
					order: [[0, 'desc']],
					aoColumnDefs: [
						{
						"bSearchable": false,
						"bVisible": false,
						"aTargets": [0]
						}
					],
                    // ajax: "{{route('user-datatable')}}",
                    ajax: {
						"url":"{{route('user-datatable')}}",
						"data": {
							"filterresi" : $('#filteruserresi').is(':checked')?1:0
						}
					},
                    columns:[
						{data:'id', name:'id'},
						{data:'DT_RowIndex', name:'no'},
                        {data: null, name:'gambar', render: function( data, type, row ){
							let html = ''
							let alamatbase = $('#hidden_baseurl').val()
							if(data.gambar){
								html += '<a href="'+data.gambar+'" id="datalightbox" class="kelaslightbox" data-popup="lightbox">'
								html += '<img src="'+data.gambar+'" class="img-preview rounded-round mr-2" width="100" height="100" style="object-fit: cover">'
								html += '</a>'

								return html;
							} else {
								html += '<a href="'+alamatbase+'/global_assets/images/user-default.png" class="kelaslightbox" data-popup="lightbox">'
								html += '<img src="'+alamatbase+'/global_assets/images/user-default.png" class="img-preview rounded-round mr-2" width="100" height="100" style="object-fit: cover">'
								html += '</a>'
								return html;
							}
						}},
						{data:'nama', name:'nama'},
						{data:null, name:'nickname', render: function (data, type, row ){
							if (data.nickname) {
								return data.nickname
							} else {
								return '-'
							}
						}},
						{data:null, name:'coload.nama', render: function (data, type, row ){
							if (data.coload) {
								return data.coload.nama
							} else {
								return '-'
							}
						}},
						{data:null, name:'sales.nama', render: function (data, type, row ){
							if (data.sales) {
								return data.sales.nama
							} else {
								return '-'
							}
						}},
						{data:'shipping_mark', name:'shipping_mark'},
						{data:null, render: function (data, type, row ){
							var html = ''
							if (data.role == 20 || data.role == 21) {
								if (data.wilayah_marketing_id == 1) {
									html = 'Jakarta';
								} else {
									html = 'Semarang'
								}
							} else {
								if (data.sales) {
									if (data.sales.wilayah_marketing_id == 1) {
										html = 'Jakarta';
									} else {
										html = 'Semarang'
									}
								}
							}

							return html
						}},
						{data: null, render: function ( data, type, row ) {
							var html = ''
				            var roleauthuser = $('#authuser').val()
							let id_user = data.id
														
							html +=	`<a class="btnprice" href="{{ url('userprice')}}/${id_user}">
										<button type="button" class="btn btn-primary btn-icon" data-popup="tooltip" data-placement="bottom" data-original-title="Price per User">
										<i class="icon-price-tag"></i>
										</button>
									</a>`
							
							return html;
						}}
					],

					"fnDrawCallback": function () {
						$(".kelaslightbox").fancybox();
					}
                });

		        // 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">

		function lockuser(id) {
			
			$.ajax({
				url: "{{ url('lockuser')}}/"+id,
				method: 'GET',
				success: function(data) {
					if (data == 'locked') {
						new PNotify({
							title: 'Success',
							text: 'User berhasil di lock.',
							icon: 'icon-checkmark3',
							type: 'success'
						});
					} else {
						new PNotify({
							title: 'Success',
							text: 'User berhasil di unlock.',
							icon: 'icon-checkmark3',
							type: 'success'
						});
					}
					// location.reload();
					if (usersTable) {
						// usersTable.clear().destroy();
						usersTable.ajax.reload(null, false); // keep current page
					}		
				}
			})
		}

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

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

		$( document ).ready(function() {
			
	        // 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

		});

		function copyclip(e) {
				var copied = $(e).data('copytext')

				var textArea = document.createElement( "textarea" );
				textArea.value = copied;
				document.body.appendChild( textArea );
				textArea.select();

				try {
					var successful = document.execCommand( 'copy' );
					var msg = successful ? 'successful' : 'unsuccessful';
				} catch (err) {
					console.log('Oops, unable to copy',err);
				}
				document.body.removeChild( textArea );

				new PNotify({
					title: msg,
					text: 'Copying text command was ' + msg,
					icon: 'icon-checkmark3',
					type: 'success'
				});
		}
	</script>
@endsection