<style>
	.card .table td, .card .table th {
    padding-right: 1rem;
    padding-left: 1rem;
	}

	/* Toolbar filter khusus halaman Data Pelanggan. */
	@media (min-width: 1200px) {
		.konsumen-page .card-header {
			padding: 1rem !important;
			background-color: #fff;
			border-bottom: 1px solid #e3e6f0;
		}

		.konsumen-page .konsumen-filter-toolbar {
			display: flex !important;
			flex-wrap: nowrap;
			align-items: center;
			width: 100%;
		}

		.konsumen-page .konsumen-filter-toolbar > .input-group-prepend {
			flex: 0 0 auto;
			margin: 0;
		}

		.konsumen-page .konsumen-filter-toolbar > .input-group-prepend:not(:first-child) {
			margin-left: .5rem;
		}

		.konsumen-page .konsumen-filter-toolbar .input-group-text {
			height: 38px;
			padding: 0 .75rem;
			border: 1px solid var(--app-theme-color, #3f51b5);
			border-radius: .25rem 0 0 .25rem;
			background-color: var(--app-theme-color, #3f51b5);
			color: var(--app-theme-text-color, #fff);
			font-size: .8rem;
			font-weight: 600;
			line-height: 38px;
			box-shadow: 0 2px 5px rgba(63, 81, 181, .18);
		}

		.konsumen-page .konsumen-filter-toolbar > .custom-select {
			flex: 0 1 280px !important;
			width: 280px !important;
			min-width: 110px;
			height: 38px;
			border-color: #d1d3e2;
			border-left: 0;
			border-radius: 0 .25rem .25rem 0;
			background-color: #fff;
			font-size: .85rem;
		}

		.konsumen-page .konsumen-filter-toolbar > #keywords {
			flex: 1 1 260px;
			width: auto !important;
			min-width: 180px;
			height: 38px;
			margin-left: .5rem;
			border: 1px solid #d1d3e2;
			border-radius: .25rem;
			font-size: .85rem;
		}

		.konsumen-page .konsumen-filter-toolbar > .custom-select:focus,
		.konsumen-page .konsumen-filter-toolbar > #keywords:focus {
			position: relative;
			z-index: 2;
			border-color: #7f8bd4;
			box-shadow: 0 0 0 .15rem rgba(63, 81, 181, .12);
		}

		.konsumen-page .konsumen-filter-actions {
			display: flex;
			flex: 0 0 auto;
			gap: .5rem;
			margin-left: .5rem;
		}

		.konsumen-page .konsumen-filter-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: .3rem;
			height: 38px;
			padding: 0 .85rem;
			border-radius: .25rem !important;
			font-size: .8rem;
			font-weight: 600;
			white-space: nowrap;
			box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
		}

		.konsumen-page .cari-pelanggan {
			border-color: #3f51b5;
			background-color: #3f51b5;
			color: #fff;
		}

		.konsumen-page .tambah2 {
			border-color: #2eb6e6;
			background-color: #2eb6e6;
			color: #fff;
		}

		.konsumen-page .cari-pelanggan:hover,
		.konsumen-page .cari-pelanggan:focus {
			border-color: #34449c;
			background-color: #34449c;
		}

		.konsumen-page .tambah2:hover,
		.konsumen-page .tambah2:focus {
			border-color: #169fd0;
			background-color: #169fd0;
		}
	}

	@media (min-width: 768px) and (max-width: 1199.98px) {
		.konsumen-page .card-header {
			padding: 1rem !important;
			background-color: #fff;
			border-bottom: 1px solid #e3e6f0;
		}

		.konsumen-page .konsumen-filter-toolbar {
			display: grid !important;
			grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
			gap: .65rem 0;
			width: 100%;
		}

		.konsumen-page .konsumen-filter-toolbar > .input-group-prepend {
			margin: 0;
		}

		.konsumen-page .konsumen-filter-toolbar > .input-group-prepend:first-child {
			grid-column: 1;
			grid-row: 1;
		}

		.konsumen-page .konsumen-filter-toolbar > #sortBy {
			grid-column: 2;
			grid-row: 1;
		}

		.konsumen-page .konsumen-filter-toolbar > .input-group-prepend:nth-of-type(2) {
			grid-column: 3;
			grid-row: 1;
			margin-left: .65rem;
		}

		.konsumen-page .konsumen-filter-toolbar > #limits {
			grid-column: 4;
			grid-row: 1;
		}

		.konsumen-page .konsumen-filter-toolbar > #keywords {
			grid-column: 1 / 5;
			grid-row: 2;
			width: 100%;
		}

		.konsumen-page .konsumen-filter-toolbar > .konsumen-filter-actions {
			grid-column: 1 / 5;
			grid-row: 3;
		}

		.konsumen-page .konsumen-filter-toolbar .input-group-text {
			height: 38px;
			padding: 0 .75rem;
			border: 1px solid var(--app-theme-color, #3f51b5);
			border-radius: .25rem 0 0 .25rem;
			background-color: var(--app-theme-color, #3f51b5);
			color: var(--app-theme-text-color, #fff);
			font-size: .8rem;
			font-weight: 600;
			line-height: 38px;
		}

		.konsumen-page .konsumen-filter-toolbar > .custom-select,
		.konsumen-page .konsumen-filter-toolbar > #keywords {
			height: 38px;
			border-color: #d1d3e2;
			background-color: #fff;
			font-size: .85rem;
		}

		.konsumen-page .konsumen-filter-toolbar > .custom-select {
			border-left: 0;
			border-radius: 0 .25rem .25rem 0;
		}

		.konsumen-page .konsumen-filter-toolbar > #keywords {
			border-radius: .25rem;
		}

		.konsumen-page .konsumen-filter-actions {
			display: flex;
			justify-content: flex-end;
			gap: .5rem;
			margin: 0;
		}

		.konsumen-page .konsumen-filter-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: .3rem;
			height: 38px;
			padding: 0 .85rem;
			border-radius: .25rem !important;
			font-size: .8rem;
			font-weight: 600;
			white-space: nowrap;
			box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
		}

		.konsumen-page .cari-pelanggan {
			border-color: #3f51b5;
			background-color: #3f51b5;
			color: #fff;
		}

		.konsumen-page .tambah2 {
			border-color: #2eb6e6;
			background-color: #2eb6e6;
			color: #fff;
		}
	}
</style>
<div class="container-fluid konsumen-page" id="container-wrapper">
	<div class="d-sm-flex align-items-center justify-content-between mb-4">
		<h1 class="h3 mb-0 text-gray-800">Data Pelanggan</h1>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="./">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page">Data Pelanggan</li>
		</ol>
	</div>
	<div class="card">
		<div class="row">
			<div class="col-md-12">
				<div class="card-header pb-0">
					<div class="input-group input-group-sm konsumen-filter-toolbar">
						<div class="input-group-prepend">
							<span class="input-group-text">SORT</span>
						</div>
						<select id="sortBy" class="form-control custom-select w-5" onchange="searchFilterKonsumen()">
							<option value="ASC" selected>Nama A-Z</option>
							<option value="DESC">Nama Z-A</option>
							<option value="min_order">Order Kecil - Besar</option>
							<option value="max_order">Order Besar - Kecil</option>
							<option value="last_order">Terakhir Order</option>
							<option value="last_register">Terakhir Daftar</option>
						</select>
						<div class="input-group-prepend">
							<span class="input-group-text">LIMIT</span>
						</div>
						<select id="limits" name="limits" class="form-control custom-select" onchange="searchFilterKonsumen()">
							<option value="10">10</option>
							<option value="20">20</option>
							<option value="50">50</option>
							<option value="100">100</option>
							<option value="500">500</option>
							<option value="1000">1000</option>
						</select>
						
						<input type="text" id="keywords" class="form-control" placeholder="Cari data" onkeyup="searchFilterKonsumen();"/>
						<div class="input-group-append konsumen-filter-actions">
							<button type="button" class="btn btn-primary btn-sm cari-pelanggan konsumen-filter-btn" onclick="searchFilterKonsumen();"><i class="fa fa-search fa-1x"></i> Cari</button>
							<button type="button" data-toggle="tooltip" title="" data-id="0" class="btn btn-info btn-sm tambah2 konsumen-filter-btn" id="tambah2" data-original-title="Tambah pelanggan (F3)"><i class="fa fa-user-plus fa-1x"></i> Tambah</button>
							<!--button class="btn btn-primary url_doc" data-url="pelanggan" type="button" data-toggle="tooltip" data-original-title="Dok pelanggan" data-placement="left"><i class="fa fa-info-circle"></i></button-->
						</div>
						
					</div>
				</div>
				<div class="post-list pt-0" id="dataListKonsumen">
					<div class="card-body table-responsive">
						<div class="card-block">
							<table class="table table-bordered table-striped table-mailcard" id="jsonuser">
								<thead>
									<tr>
										<th style="width:1% !important;">No.</th>
										<th>Nama</th>
										<th>No. HP</th>
										<th class="text-right">Tgl.Daftar</th>
										<th class="text-right">Total Order</th>
										<th class="text-right">Diskon</th>
										<th class="text-right">Total Bayar</th>
										<th class="text-right">Piutang</th>
										<th class="text-right" style="width:10%;">Aksi</th>
									</tr>
								</thead>
								<tbody>
									<?php if(!empty($posts)){
										$no=1;
										$piutang=0;
										$total_bayar=0;
										foreach($posts as $row){ 
											$idkonsumen = $row['id'];
											$total =  $row['total_order'];
											$diskon =  $row['potongan'];
											$total_bayar = total_bayar($row['id'],$row['id_invoice']);
											$piutang = $total - $total_bayar - $diskon;
											$edit = '<a href="#"  class="edit_konsumen" data-member="'.$row["jenis_member"].'" data-jenis="'.$row["jenis"].'" data-id="'.encrypt_url($row["id"]).'">'.$row["nama"].'</a>';
											if($total_bayar > 0){
												$aksi = '<button class="btn btn-secondary btn-sm flat" disabled>Hapus</button>';
												}else{
												$aksi = '<button class="btn btn-danger btn-sm flat" data-toggle="modal" data-target="#confirm-delete" data-id="'.encrypt_url($row["id"]).'">Hapus</button>';
											}
											 
											$edit = '<a href="#"  class="edit_konsumen" data-member="'.$row["jenis_member"].'" data-jenis="'.$row["jenis"].'" data-id="'.encrypt_url($row["id"]).'">'.$row["nama"].'</a>';
										?>
										<tr>
											<td><?php echo $no; ?></td>
											<td><?php echo $edit; ?></td>
											<td><?=$row["no_hp"];?></td>
											<td class="text-right"><?=dtime($row["tgl_daftar"]);?></td>
											<td class="text-right"><?=rp($total);?></td>
											<td class="text-right"><?=rp($diskon);?></td>
											<td class="text-right"><?=rp($total_bayar);?></td>
											<td class="text-right"><?=rp($piutang);?></td>
											<td class="text-right">
												<div class="btn-group btn-group-sm flat" role="group" aria-label="Basic example">
													<a class="btn btn-info flat" href="<?=base_url();?>konsumen/detail/<?php echo encrypt_url($row["id"]); ?>">Detail</a>
													<?=$aksi;?>
												</div>
												
											</td>
										</tr>
									<?php $no++;} }else{ ?>
									<tr>
										<td colspan="10">Data belum ada</td>
									</tr>
									<?php } ?>
								</tbody>
							</table>
							<nav aria-label="Page navigation" class="mt-2">
								<?php 
									echo $this->ajax_pagination->create_links(); 
								?>
							</nav>
						</div><!-- /.card-body -->
					</div><!-- /.card-body -->
					<!-- Display posts list -->
				</div>
			</div>
		</div>
	</div>
</div>
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete" role="dialog" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
				<button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
			</div>
			<div class="modal-body">
				<p>Anda akan menghapus data, prosedur ini tidak dapat diubah.</p>
				<p>Apakah Anda ingin melanjutkan?</p>
				<p class="debug-url"></p>
				<input type="hidden" id="data-hapus">
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal" type="button">Batal</button> 
				<button class="btn btn-danger hapus_konsumen" type="button">YA</button> 
			</div>
		</div>
	</div>
</div>

<script>
	$(document).on('click','.hapus_konsumen',function(e){
		var id = $("#data-hapus").val();
		$.ajax({
			url: base_url + 'konsumen/delete_konsumen',
			data: {id:id},
			method: 'POST',
			dataType:'json',
			beforeSend: function () {
                $('body').loading();
			},
			success: function(data) {
				if(data.status==true){
					showNotif('bottom-right',data.title,data.msg,'success');
					}else{
					sweet('Peringatan!!!',data.msg,'warning','warning');
				}
				searchFilterKonsumen();
				$('#confirm-delete').modal('hide');
				$('body').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('body').loading('stop');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	});
	
	$('#confirm-delete').on('show.bs.modal', function(e) {
		$('#data-hapus').val($(e.relatedTarget).data('id'));
	});
	shortcut.add("F3", function() {
		$(".tambah2").click();
		console.log(1)
	});
	
</script>
