<!DOCTYPE html>
<html lang="en">
<?php $this->load->view("partial/header.php"); ?>

<body style="background-color: #B0B0B0">
	<?php $this->load->view("partial/navbar.php"); ?>
	<div id="wrapper">
		<div id="content-wrapper">
			<div class="container-fluid">
				<div class="row" id="body-row ">
					<div class="col-md-8" style="color: white;padding: 10px">
						<div class="table-responsive">
							<table class="table table-striped table-dark" id="tbl_kendaraan">
								<thead>
									<tr>
										<th scope="col">Nama RAMP</th>
										<th scope="col">Nomor HP</th>
										<th scope="col">Potongan</th>
										<th scope="col">Harga TBS</th>
										<th scope="col">Kirim Whatsapp</th>
									</tr>
								</thead>
								<tbody>
									<?php foreach ($setting as $val) {
										if ($val["service_wa"] == "1") {
											$badge = "<span class='badge bg-success'>Aktif</span>";
										} else {
											$badge = "<span class='badge bg-warning'>Nonaktif</span>";
										}

									?>
										<tr>
											<td><?= $val["nama_ramp"] ?></td>
											<td><?= $val["nomor_hp"] ?></td>
											<td><?= $val["potongan_ramp"] ?>%</td>
											<td>Rp <?= $val["harga_buah"] ?></td>
											<td><?= $badge ?></td>
											<td><button class="btn btn-warning btn-sm" onclick="editSetting('<?= $val['id'] ?>','<?= $val['nama_ramp'] ?>','<?= $val['nomor_hp'] ?>','<?= $val['potongan_ramp'] ?>','<?= $val['harga_buah'] ?>','<?= $val['service_wa'] ?>')"><i class="fas fa-edit"></i></button></td>
										</tr>
									<?php } ?>
								</tbody>
							</table>
						</div>

					</div>
					<div class="col-md-4" style="color: white;padding: 10px">
						<div style="display: none;" id="editSetting">
							<div class="card" style="background-color: #343a40">
								<div class="card-header text-center">
									<div id="header_text"></div>
								</div>
								<div class="card-body">
									<form id="form_setting">
										<input type="text" class="form-control" name="id_tabel" id="id_tabel" style="display: none;" value="0">
										<div class="form-group row">
											<label for="inputEmail3" class="col-sm-4 col-form-label">Nama RAMP</label>
											<div class="col-sm-7">
												<input type="text" class="form-control" id="nama_ramp" name="nama_ramp">
											</div>
										</div>
										<div class="form-group row">
											<label for="inputEmail3" class="col-sm-4 col-form-label">Kontak</label>
											<div class="col-sm-7">
												<input type="text" class="form-control" id="nomor_hp" name="nomor_hp">
											</div>
										</div>
										<div class="form-group row">
											<label for="inputEmail3" class="col-sm-4 col-form-label">Potongan</label>
											<div class="col-sm-5">
												<div class="input-group">
													<input type="text" class="form-control" id="potongan_harga" name="potongan_harga">
													<div class="input-group-prepend">
														<div class="input-group-text">%</div>
													</div>
												</div>
											</div>
										</div>
										<div class="form-group row">
											<label for="inputEmail3" class="col-sm-4 col-form-label">Harga TBS</label>
											<div class="col-sm-5">
												<div class="input-group">
													<div class="input-group-prepend">
														<div class="input-group-text">RP</div>
													</div>
													<input type="text" class="form-control" id="harga_buah" name="harga_buah">
												</div>
											</div>
										</div>
										<div class="form-group row">
											<label for="inputEmail3" class="col-sm-4 col-form-label">Kirim Whatsapp</label>
											<div class="col-sm-7">
												<select class="form-control" name="whatsapp" id="whatsapp">
												</select>
											</div>
										</div>
									</form>
									<div class="form-group row">
										<div class="col-sm-11 text-right">
											<button class="btn btn-success" id="butsave"><i class="fas fa-check-circle"></i></button>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
			<?php $this->load->view("partial/footer.php") ?>
		</div>
	</div>
	<script>
		function editSetting(id, nama_ramp, nomor_hp, potongan, harga, wa) {
			$("#nama_ramp").val(nama_ramp)
			$("#nomor_hp").val(nomor_hp)
			$("#potongan_harga").val(potongan)
			$("#harga_buah").val(harga)
			$("#id_tabel").val(id)
			if (wa == "0") {
				$("#whatsapp").append(`<option value="${wa}" selected>Nonaktif</option><option value="1">Aktif</option>`)
			} else {
				$("#whatsapp").append(`<option value="${wa}" selected>Aktif</option><option value="0">Nonaktif</option>`)
			}
			$("#editSetting").show()
		}
		$("#butsave").on("click", function() {
			let data = $("#form_setting").serializeArray()
			let cekData = cekArrayFormKosong(data);
			if (cekData.length !== 0) {
				const prop = cekData.map((prop) => prop.name).join(",");
				alert(`form ${prop} masih kosong`);
			} else {
				let kirimData = data.reduce(
					(acc, cur) => ({
						...acc,
						[cur.name]: cur.value,
					}), {}
				);
				$.ajax({
					type: "POST",
					url: `<?php echo base_url() ?>setting/edit`,
					data: kirimData,
					success: function(response) {
						if (response == "1") {
							alert("data berhasil ditambah")
							location.reload()
						} else if (response == "2") {
							alert("data berhasil diupdate")
							location.reload()
						}
					},
					error: function(xhr, status, error) {
						console.log(xhr.responseText);
					},
				});
			}
		})

		function cekArrayFormKosong(data) {
			let dataKosong = data.reduce(function(empty, prop) {
				if (prop.value == "") empty.push(prop);
				return empty;
			}, []);
			return dataKosong
		}
	</script>
</body>

</html>