<style>.card .table td, .card .table th {padding-right: 1rem;padding-left: 1rem;}</style>
	<style>
	.member-discount-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;padding:14px 16px;border:1px solid #dbe7f5;border-radius:10px;background:#f7fbff;}
	.member-discount-copy strong{display:block;color:#263b5e;font-size:15px;}.member-discount-copy small{color:#718096;}
	.member-switch{position:relative;width:50px;height:27px;margin:0;flex:0 0 auto}.member-switch input{opacity:0;width:0;height:0}.member-switch-slider{position:absolute;inset:0;cursor:pointer;background:#b8c2cf;border-radius:30px;transition:.2s}.member-switch-slider:before{content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}.member-switch input:checked + .member-switch-slider{background:var(--theme-color, #2563eb)}.member-switch input:checked + .member-switch-slider:before{transform:translateX(23px)}
	</style>
<div class="container-fluid" id="container-wrapper">
	<div class="d-sm-flex align-items-center justify-content-between mb-4">
		<h1 class="h3 mb-0 text-gray-800"><?=$judul;?></h1>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="./">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page"><?=$judul;?></li>
		</ol>
	</div>
	<div class="row">
		<div class="col-md-12">
			<form action="#" method="post">
				<div class="card">
					<div class="card-header  d-flex flex-row align-items-center justify-content-between">
						<h6 class="m-0 font-weight-bold text-warning">List Data</h6>
						<button type="button" name="tambah" class="btn btn-success edit_member" data-id="0">Tambah</button>
					</div>
					
					<?php echo $this->session->flashdata('message'); ?>
					<div class="card-body table-responsive">
						<div class="member-discount-setting">
							<div class="member-discount-copy"><strong>Diskon Berdasarkan Level Member</strong><small>Jika aktif, persentase level pelanggan diterapkan otomatis pada pembayaran pertama.</small></div>
							<label class="member-switch" title="Aktifkan diskon level member">
								<input type="checkbox" id="diskon_member_aktif" <?=$diskon_member_aktif ? 'checked' : '';?>>
								<span class="member-switch-slider"></span>
							</label>
						</div>
						<div class="card-block dataMember">
							
						</div><!-- /.card-body -->
					</div><!-- /.card-body -->
				</div><!-- /.card -->
			</form>
		</div>
	</div>
</div>

<div class="modal fade" id="ModalPrinter" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalScrollableTitle">Jenis member</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				
				<input type='hidden' name='member_id' id='member_id' value='0'>
				<input type='hidden' name='type' id="type">
				<div class="row">
					<div class="col-md-12">
						<div class="form-group">
							<label for="diskon">Persentase Diskon (%)</label>
							<input type="number" name="diskon" id="diskon" class="form-control" min="0" max="100" step="0.01" value="0" required>
							<small class="form-text text-muted">Masukkan nilai 0 sampai 100 persen.</small>
						</div>
						<div class="form-group">
							<label for="title">Title</label>
							<input type="text" name="title" id="title" class="form-control" required>
						</div>
						<div class="form-group">
							<label>Aktif </label>
							<select name="aktif" id="aktif" class="form-control custom-select" required>
								<option value="">Pilih</option>
								<option value="1">Ya</option>
								<option value="0">Tidak</option>
							</select>
						</div>
					</div>
				</div>
				
			</div>
			<div class="modal-footer">
				<button type="button" name="submit" class="btn btn-info save_member">Simpan</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
<script>
	$(document).ready(function() {
		member();
	});
	$(document).on('change','#diskon_member_aktif',function(){
		var el=this, aktif=el.checked ? 1 : 0;
		$.ajax({url:base_url+'konsumen/save_diskon_member_status',method:'POST',dataType:'json',data:{aktif:aktif},
			beforeSend:function(){$(el).prop('disabled',true);},
			success:function(data){if(data.status!=200){el.checked=!el.checked;} sweet(data.status==200?'Sukses!!!':'Peringatan!!!',data.msg,data.status==200?'success':'warning',data.status==200?'success':'warning');},
			error:function(){el.checked=!el.checked; sweet('Peringatan!!!','Pengaturan gagal disimpan','warning','warning');},
			complete:function(){$(el).prop('disabled',false);}
		});
	});
	function member(){
		$.ajax({
			url: base_url + "konsumen/data_member",
			dataType: 'html',
			beforeSend: function () {
				$('body').loading();
			},
			success: function(data) {
				$(".dataMember").html(data);
				$('body').loading('stop');
				} ,error: function(xhr, status, error) {
                showNotif('bottom-right','Load data',error,'error');
                $('body').loading('stop');
			}
		});
	}
	
	
	$("#title").keyup(function(){
		$("#title").removeClass("is-invalid").addClass("is-valid");
	});
	$("#diskon").keyup(function(){
		$("#diskon").removeClass("is-invalid").addClass("is-valid");
	});
	$("#aktif").change(function(){
		$("#aktif").removeClass("is-invalid").addClass("is-valid");
	});
	
	$(document).on('click','.edit_member',function(e){
		e.preventDefault();
		var id = $(this).attr('data-id');
		// alert(id);
		$('#ModalPrinter').modal({backdrop: 'static', keyboard: false});
		if(id==0){
            $("#type").val('add');
			$("#member_id").val(0);
			$("#title").val('');
			$("#diskon").val(0);
			$("#aktif").val('1');
			return;
			}else{
            $("#type").val('edit');
		}
		$.ajax({
			url: base_url + 'konsumen/edit_member',
			data: {id:id},
			method: 'POST',
			dataType:'json',
			beforeSend: function () {
				$('body').loading();
			},
			success: function(data) {
				$("#member_id").val(data.id);
				$("#title").val(data.title);
				$("#diskon").val(data.diskon);
				$("#aktif").val(data.aktif);
				$('body').loading('stop');
				} ,error: function(xhr, status, error) {
                showNotif('bottom-right','Load data',error,'error');
                $('body').loading('stop');
			}
		});
	});
	
	$(document).on('click','.save_member',function(e){
		e.preventDefault();
		var id = $("#member_id").val();
		var type = $("#type").val();
		var title = $("#title").val();
		var diskon = $("#diskon").val();
		var aktif = $("#aktif").val();
		if(title==''){
			$("#title").addClass('is-invalid');
			$("#title").focus();
			// sweet('Peringatan!!!','Nama bahan masih kosong','warning','warning');
			return;
		}
		if(diskon==''){
			$("#diskon").addClass('is-invalid');
			$("#diskon").focus();
			// sweet('Peringatan!!!','Harga bahan masih kosong','warning','warning');
			return;
		}
		if(parseFloat(diskon)<0 || parseFloat(diskon)>100){
			$("#diskon").addClass('is-invalid').focus();
			return;
		}
		if(aktif==''){
			$("#aktif").addClass('is-invalid');
			$("#aktif").focus();
			// sweet('Peringatan!!!','Status masih kosong','warning','warning');
			return;
		}
		$.ajax({
			url: base_url + 'konsumen/save_member',
			data: {id:id,type:type,title:title,diskon:diskon,aktif:aktif},
			method: 'POST',
			dataType:'json',
			beforeSend: function () {
				$('body').loading();
			},
			success: function(data) {
				if(data.status==200){
					member();
					sweet('Sukses!!!',data.msg,'success','success');
					$('#ModalPrinter').modal('hide');
					}else{
					sweet('Peringatan!!!','Data gagal disimpan','warning','warning');
				}
				$('body').loading('stop');
				} ,error: function(xhr, status, error) {
                showNotif('bottom-right','Simpan data',error,'error');
                $('body').loading('stop');
			}
		});
	});
	
	
</script>
