<div class="content-header">
	<div class="d-flex justify-content-between align-items-center">
		<h4 class="mb-0"><i class="fas fa-user-plus"></i> Tambah Pasien</h4>
		<a href="<?= site_url('pasien'); ?>" class="btn btn-outline-secondary btn-sm"><i class="fas fa-arrow-left"></i> Kembali</a>
	</div>
</div>

<?= validation_errors('<div class="alert alert-danger">', '</div>'); ?>

<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.3.2/dist/select2-bootstrap4.min.css" rel="stylesheet" />

<style>
	.form-card {
		border-radius: 8px;
		box-shadow: none;
	}

	.select2-container--bootstrap4 .select2-selection {
		height: calc(1.5em + .75rem + 2px);
		padding: .375rem .75rem;
	}

	.small-help {
		font-size: .85rem;
		color: #6c757d;
	}
</style>

<form method="post" class="form-horizontal">
	<div class="card card-primary form-card">
		<div class="card-body">
			<div class="row">

				<!-- ====================== KIRI ===================== -->
				<div class="col-md-6">

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">NIK *</label>
						<div class="col-sm-8">
							<input type="text" name="nik" class="form-control" maxlength="16" value="<?= set_value('nik'); ?>" placeholder="16 digit NIK">
							<?= form_error('nik', '<small class="text-danger">', '</small>'); ?>
							<div class="small-help">Pastikan NIK 16 digit, unik.</div>
						</div>
					</div>

					<!-- <div class="form-group row">
						<label class="col-sm-4 col-form-label">No. KK</label>
						<div class="col-sm-8">
							<input type="text" name="no_kk" class="form-control" value="<?= set_value('no_kk'); ?>">
						</div>
					</div> -->

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Nama Lengkap *</label>
						<div class="col-sm-8">
							<input type="text" name="nama_lengkap" class="form-control" value="<?= set_value('nama_lengkap'); ?>" placeholder="Nama sesuai KTP">
							<?= form_error('nama_lengkap', '<small class="text-danger">', '</small>'); ?>
						</div>
					</div>

					<!-- <div class="form-group row">
            <label class="col-sm-4 col-form-label">Gelar Depan</label>
            <div class="col-sm-8">
              <input type="text" name="gelar_depan" class="form-control" value="<?= set_value('gelar_depan'); ?>">
            </div>
          </div>

          <div class="form-group row">
            <label class="col-sm-4 col-form-label">Gelar Belakang</label>
            <div class="col-sm-8">
              <input type="text" name="gelar_belakang" class="form-control" value="<?= set_value('gelar_belakang'); ?>">
            </div>
          </div> -->

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Jenis Kelamin *</label>
						<div class="col-sm-8">
							<?= form_dropdown('jenis_kelamin', $opsi_jk, set_value('jenis_kelamin'), 'class="form-control select2"'); ?>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Tempat Lahir</label>
						<div class="col-sm-8">
							<input type="text" name="tempat_lahir" class="form-control" value="<?= set_value('tempat_lahir'); ?>">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Tanggal Lahir</label>
						<div class="col-sm-8">
							<input type="date" name="tanggal_lahir" class="form-control" value="<?= set_value('tanggal_lahir'); ?>">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Agama</label>
						<div class="col-sm-8">
							<?= form_dropdown('agama', $opsi_agama, set_value('agama'), 'class="form-control select2"'); ?>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Gol. Darah</label>
						<div class="col-sm-8">
							<?= form_dropdown('golongan_darah', ['' => '-', 'A' => 'A', 'B' => 'B', 'AB' => 'AB', 'O' => 'O'], set_value('golongan_darah'), 'class="form-control"'); ?>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Status Kawin</label>
						<div class="col-sm-8">
							<?= form_dropdown('status_perkawinan', $opsi_status_kawin, set_value('status_perkawinan'), 'class="form-control select2"'); ?>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Pendidikan</label>
						<div class="col-sm-8">
							<?= form_dropdown('pendidikan', $opsi_pendidikan, set_value('pendidikan'), 'class="form-control select2"'); ?>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Pekerjaan</label>
						<div class="col-sm-8">
							<input type="text" name="pekerjaan" class="form-control" value="<?= set_value('pekerjaan'); ?>">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Alamat</label>
						<div class="col-sm-8">
							<textarea name="alamat" class="form-control"><?= set_value('alamat'); ?></textarea>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">RT / RW</label>
						<div class="col-sm-4">
							<input type="text" name="rt" class="form-control" value="<?= set_value('rt'); ?>" placeholder="RT">
						</div>
						<div class="col-sm-4">
							<input type="text" name="rw" class="form-control" value="<?= set_value('rw'); ?>" placeholder="RW">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Kode Pos</label>
						<div class="col-sm-8">
							<input type="text" name="kodepos" class="form-control" value="<?= set_value('kodepos'); ?>">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Provinsi</label>
						<div class="col-sm-8">
							<select name="id_provinsi" id="provinsi" class="form-control select2">
								<option value=""></option>
								<?php foreach ($provinsi as $pr): ?>
									<option value="<?= $pr->provinsi_id ?>" <?= set_select('id_provinsi', $pr->provinsi_id); ?>><?= $pr->nama_provinsi ?></option>
								<?php endforeach; ?>
							</select>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Kab/Kota</label>
						<div class="col-sm-8">
							<select name="id_kota" id="kota" class="form-control select2">
								<option value=""></option>
							</select>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Kecamatan</label>
						<div class="col-sm-8">
							<select name="id_kecamatan" id="kecamatan" class="form-control select2">
								<option value=""></option>
							</select>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Desa</label>
						<div class="col-sm-8">
							<select name="id_desa" id="desa" class="form-control select2">
								<option value=""></option>
							</select>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">No. Telp</label>
						<div class="col-sm-8">
							<input type="text" name="no_telp" class="form-control" value="<?= set_value('no_telp'); ?>" placeholder="08xx...">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Email</label>
						<div class="col-sm-8">
							<input type="email" name="email" class="form-control" value="<?= set_value('email'); ?>">
						</div>
					</div>

					<hr>


				</div>

				<!-- ====================== KANAN ===================== -->
				<div class="col-md-6">


					<h6>Penanggung Jawab</h6>
					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Nama PJ</label>
						<div class="col-sm-8">
							<input type="text" name="penanggung_jawab" class="form-control" value="<?= set_value('penanggung_jawab'); ?>">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Hubungan PJ</label>
						<div class="col-sm-8">
							<input type="text" name="hubungan_pj" class="form-control" value="<?= set_value('hubungan_pj'); ?>" placeholder="Ayah/Ibu/Suami/Istri">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">No. Telp PJ</label>
						<div class="col-sm-8">
							<input type="text" name="no_telp_pj" class="form-control" value="<?= set_value('no_telp_pj'); ?>">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Alamat PJ</label>
						<div class="col-sm-8">
							<textarea name="alamat_pj" class="form-control"><?= set_value('alamat_pj'); ?></textarea>
						</div>
					</div>

					<hr>

					<h6>Asuransi</h6>
					<div class="form-group row">
						<label class="col-sm-4 col-form-label">Jenis Asuransi</label>
						<div class="col-sm-8">
							<?= form_dropdown('jenis_asuransi', $opsi_asuransi, set_value('jenis_asuransi'), 'class="form-control select2"'); ?>
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-4 col-form-label">No. Asuransi</label>
						<div class="col-sm-8">
							<input type="text" name="no_asuransi" class="form-control" value="<?= set_value('no_asuransi'); ?>">
						</div>
					</div>

				</div>
			</div> <!-- row -->
		</div> <!-- card-body -->

		<div class="card-footer text-right">
			<button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Simpan</button>
			<a href="<?= site_url('pasien'); ?>" class="btn btn-secondary">Batal</a>
		</div>
	</div>
</form>

<!-- Script -->
<script src="<?= base_url('assets/adminlte/plugins/jquery/jquery.min.js'); ?>"></script>
<script src="<?= base_url('assets/adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js'); ?>"></script>
<script src="<?= base_url('assets/adminlte/dist/js/adminlte.min.js'); ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
	$(function() {
		$('.select2').select2({
			theme: 'bootstrap4',
			placeholder: '-- pilih --',
			allowClear: true,
			width: '100%'
		});

		function loadKota(provinsiId, selected, cb) {
			$('#kota').prop('disabled', true).html('<option>Memuat...</option>').trigger('change');
			if (!provinsiId) {
				$('#kota').html('<option value=""></option>').prop('disabled', false).trigger('change');
				if (cb) cb();
				return;
			}
			$.getJSON('<?= site_url("wilayah/kota/") ?>' + provinsiId)
				.done(function(data) {
					var opts = '<option value=""></option>';
					$.each(data, function(i, v) {
						opts += '<option value="' + v.kota_id + '">' + v.kota_nama + '</option>';
					});
					$('#kota').html(opts).prop('disabled', false);
					if (selected) {
						$('#kota').val(selected).trigger('change');
					}
					if (cb) cb();
				});
		}

		function loadKecamatan(kotaId, selected, cb) {
			$('#kecamatan').prop('disabled', true).html('<option>Memuat...</option>').trigger('change');
			if (!kotaId) {
				$('#kecamatan').html('<option value=""></option>').prop('disabled', false).trigger('change');
				if (cb) cb();
				return;
			}
			$.getJSON('<?= site_url("wilayah/kecamatan/") ?>' + kotaId)
				.done(function(data) {
					var opts = '<option value=""></option>';
					$.each(data, function(i, v) {
						opts += '<option value="' + v.kecamatan_id + '">' + v.nama_kecamatan + '</option>';
					});
					$('#kecamatan').html(opts).prop('disabled', false);
					if (selected) {
						$('#kecamatan').val(selected).trigger('change');
					}
					if (cb) cb();
				});
		}

		function loadDesa(kecId, selected, cb) {
			$('#desa').prop('disabled', true).html('<option>Memuat...</option>').trigger('change');
			if (!kecId) {
				$('#desa').html('<option value=""></option>').prop('disabled', false).trigger('change');
				if (cb) cb();
				return;
			}
			$.getJSON('<?= site_url("wilayah/desa/") ?>' + kecId)
				.done(function(data) {
					var opts = '<option value=""></option>';
					$.each(data, function(i, v) {
						opts += '<option value="' + v.desa_id + '">' + v.nama_desa + '</option>';
					});
					$('#desa').html(opts).prop('disabled', false);
					if (selected) {
						$('#desa').val(selected).trigger('change');
					}
					if (cb) cb();
				});
		}

		$('#provinsi').on('change', function() {
			var id = $(this).val();
			loadKota(id, null, function() {
				$('#kecamatan').html('<option value=""></option>');
				$('#desa').html('<option value=""></option>');
			});
		});
		$('#kota').on('change', function() {
			var id = $(this).val();
			loadKecamatan(id, null, function() {
				$('#desa').html('<option value=""></option>');
			});
		});
		$('#kecamatan').on('change', function() {
			var id = $(this).val();
			loadDesa(id);
		});

		// repopulate jika set_value()
		var oldProv = '<?= set_value('id_provinsi'); ?>';
		var oldKota = '<?= set_value('id_kota'); ?>';
		var oldKec = '<?= set_value('id_kecamatan'); ?>';
		var oldDesa = '<?= set_value('id_desa'); ?>';
		if (oldProv) {
			$('#provinsi').val(oldProv).trigger('change');
			loadKota(oldProv, oldKota, function() {
				if (oldKota) {
					loadKecamatan(oldKota, oldKec, function() {
						if (oldKec) {
							loadDesa(oldKec, oldDesa);
						}
					});
				}
			});
		}
	});
</script>
