<!DOCTYPE html>
<html lang="en">
<?php $this->load->view("partial/header.php"); ?>
<!-- <style type="text/css">
	body {
		font-family: Helvetica, sans-serif;
	}

	h2,
	h3 {
		margin-top: 0;
	}

	form {
		margin-top: 15px;
	}

	form>input {
		margin-right: 15px;
	}

	#my_camera {
		background: #ccc;
	}

	#results {
		float: right;
		margin: 20px;
		padding: 10px;
		border: 1px solid;
		background: #ccc;
	}
</style> -->

<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-4" style="color: white;padding: 10px">
						<div class="card" style="background-color: #343a40">
							<div class="card-header text-center">
								<div id="header_text">TAMBAH DATA</div>
							</div>
							<div class="card-body">
								<form id="form_kendaraan">
									<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">Nomor Kendaraan</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" id="no_kendaraan" name="no_kendaraan">
										</div>
									</div>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-4 col-form-label">Nama Supir</label>
										<div class="col-sm-7">
											<input type="text" class="form-control" id="nama_supir" name="nama_supir">
										</div>
									</div>
									<div class="form-group row">
										<label for="inputEmail3" class="col-sm-4 col-form-label">Alamat</label>
										<div class="col-sm-7">
											<textarea class="form-control formku" id="alamat" name="alamat" cols="3" rows="3"></textarea>
										</div>
									</div>
								</form>
								<div class="form-group row">
									<div class="col-sm-6 text-right">
										<button class="btn btn-success" id="butsave"><i class="fas fa-check-circle"></i></button>
									</div>
									<div class="col-sm-1 text-right" id="showbtn" style="display: none;">
										<button class="btn btn-info" id="newdata"><i class="fas fa-plus"></i></button>
									</div>
								</div>
							</div>
						</div>
					</div>
					<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">#</th>
										<th scope="col">No. Kendaraan</th>
										<th scope="col">Nama Supir</th>
										<th scope="col">Alamat</th>
										<th scope="col"></th>
									</tr>
								</thead>
								<tbody>
									<?php
									$no = 1;
									foreach ($kendaraan as $val) { ?>
										<tr>
											<th scope="row"><?= $no++ ?></th>
											<td><?= $val["no_kendaraan"] ?></td>
											<td><?= $val["nama_supir"] ?></td>
											<td><?= $val["alamat"] ?></td>
											<td><button class="btn btn-warning btn-sm" onclick="editKendaraan('<?= $val['id'] ?>','<?= $val['no_kendaraan'] ?>','<?= $val['nama_supir'] ?>','<?= $val['alamat'] ?>')"><i class="fas fa-edit"></i></button> <button class="btn btn-danger btn-sm" onclick="hapusKendaraan(<?= $val['id'] ?>)"><i class="fas fa-trash"></i></button></td>
										</tr>
									<?php } ?>
								</tbody>
							</table>
						</div>

					</div>
				</div>
			</div>
			<?php $this->load->view("partial/footer.php") ?>
		</div>
	</div>
	<script src="<?= base_url() ?>assets/js/jquery.dataTables.min.js"></script>
	<script src="<?= base_url() ?>assets/js/dataTables.bootstrap4.min.js"></script>
	<script>
		function hapusKendaraan(id) {
			if (confirm("data akan dihapus?")) {
				$.ajax({
					type: "POST",
					url: `<?php echo base_url() ?>kendaraan/hapus`,
					data: {
						id: id
					},
					success: function(response) {
						if (response == "3") {
							alert("data berhasil dihapus")
							location.reload()
						}
					},
					error: function(xhr, status, error) {
						console.log(xhr.responseText);
					},
				});
			}
		}

		function editKendaraan(id, no_kendaraan, nama_supir, alamat) {
			$("#no_kendaraan").val(no_kendaraan)
			$("#nama_supir").val(nama_supir)
			$("#alamat").val(alamat)
			$("#id_tabel").val(id)
			$("#header_text").text("EDIT DATA")
			$("#showbtn").show()
		}
		$("#newdata").on("click", function() {
			$("#showbtn").hide()
			$("#header_text").text("TAMBAH DATA")
			$("#no_kendaraan").val("")
			$("#nama_supir").val("")
			$("#alamat").val("")
			$("#id_tabel").val("0")
		})
		$("#tbl_kendaraan").DataTable({
			pageLength: 5
		})
		$("#butsave").on("click", function() {
			let data = $("#form_kendaraan").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() ?>kendaraan/tambah`,
					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>