<form id="formAdd" class="user-editor-form">
	<input type="hidden" class="form-control" id="id" name="id">
	<input type="hidden" class="form-control" id="type" name="type" value="<?=$tipe;?>">

	<div class="user-form-layout">
		<section class="user-form-section" aria-labelledby="identitySectionTitle">
			<div class="user-section-heading">
				<span class="user-section-icon"><i class="fa fa-id-card-o"></i></span>
				<div><h5 id="identitySectionTitle">Informasi pengguna</h5><p>Data utama untuk identitas dan akun pengguna.</p></div>
			</div>
			<div class="profile-photo-field">
				<div class="profile-photo-preview" id="profilePhotoPreview"><span><i class="fa fa-user"></i></span><img src="" alt="Preview foto profil" hidden></div>
				<div class="profile-photo-copy"><strong>Foto profil <span class="optional-label">Opsional</span></strong><p>Gunakan foto persegi agar hasil terbaik. JPG, PNG, atau WebP maksimal 2 MB.</p><div class="profile-photo-actions"><label for="profile_photo" class="profile-photo-button"><i class="fa fa-camera"></i> Pilih foto</label><button type="button" class="profile-photo-remove" hidden><i class="fa fa-times"></i> Batalkan</button></div><input type="file" name="profile_photo" id="profile_photo" accept="image/jpeg,image/png,image/webp" hidden></div>
			</div>
			<div class="user-fields-grid">
				<div class="form-group"><label for="mail">Email <span class="required-mark">*</span></label><input type="email" name="mail" class="form-control" id="mail" placeholder="contoh@email.com" required></div>
				<div class="form-group"><label for="password">Password <span class="required-mark">*</span></label><div class="user-password-wrap"><input type="password" name="password" class="form-control" id="password" placeholder="Masukkan password" required><button type="button" class="password-toggle" aria-label="Tampilkan password"><i class="fa fa-eye"></i></button></div></div>
				<div class="form-group"><label for="title">Nama lengkap <span class="required-mark">*</span></label><input type="text" name="title" class="form-control" id="title" placeholder="Nama lengkap pengguna" required></div>
				<div class="form-group"><label for="jabatan">Jabatan <span class="required-mark">*</span></label><input type="text" name="jabatan" class="form-control" id="jabatan" placeholder="Contoh: Kasir" required></div>
				<div class="form-group"><label for="daftar">Tanggal daftar</label><input type="date" name="daftar" class="form-control dpd1" id="daftar"></div>
				<div class="form-group"><label for="phone">No. handphone</label><input type="text" name="phone" class="form-control" id="phone" placeholder="08xxxxxxxxxx"></div>
				<div class="form-group user-field-full"><label for="alamat">Alamat</label><input type="text" name="alamat" value="Bandung" class="form-control" id="alamat" placeholder="Alamat pengguna"></div>
			</div>

			<div class="user-subsection-title"><i class="fa fa-percent"></i><div><strong>Pengaturan komisi</strong><span>Aktifkan komisi sesuai peran pengguna.</span></div></div>
			<div class="commission-grid">
				<div class="form-group"><label for="komisi_desain_aktif">Komisi desain</label><select name="komisi_desain_aktif" id="komisi_desain_aktif" class="form-control custom-select"><option value="0" selected>Tidak aktif</option><option value="1">Aktif</option></select></div>
				<div class="form-group"><label for="komisi_desain_persen">Persentase desain</label><div class="percentage-field"><input type="number" name="komisi_desain_persen" value="0" min="0" max="100" step="0.01" class="form-control" id="komisi_desain_persen" placeholder="0"><span>%</span></div></div>
				<div class="form-group"><label for="komisi_penjualan_aktif">Komisi penjualan</label><select name="komisi_penjualan_aktif" id="komisi_penjualan_aktif" class="form-control custom-select"><option value="0">Tidak aktif</option><option value="1">Aktif</option></select></div>
			</div>
		</section>

		<section class="user-form-section" aria-labelledby="accessSectionTitle">
			<div class="user-section-heading">
				<span class="user-section-icon"><i class="fa fa-shield"></i></span>
				<div><h5 id="accessSectionTitle">Akses & status</h5><p>Tentukan menu, kewenangan, dan status akun.</p></div>
			</div>
			<div class="access-menu-card">
				<div class="access-menu-header"><div><strong>Menu akses</strong><span>Pilih menu yang dapat dibuka pengguna.</span></div><label class="select-all-control" for="select_all"><input id="select_all" type="checkbox"><span>Pilih semua</span></label></div>
				<div class="over-user access-menu-list">
					<?php
						$lv = $this->session->id_lv;
						$resultz = $this->db->query("SELECT * FROM menuadmin where FIND_IN_SET('$lv', CONCAT(id_level, ',')) AND aktif='Y' order by urutan");
						foreach ($resultz->result_array() as $rowz){ $dataT[$rowz['idparent']][] = $rowz; }
						if (!empty($dataT)) { echo checkbox($dataT,0,0,0); }
					?>
				</div>
			</div>
			<div class="user-fields-grid access-fields">
				<div class="form-group"><label for="id_level">Level akses</label><select id="id_level" name="id_level" class="form-control custom-select"><?php $tampil=$this->db->query("SELECT * FROM hak_akses"); foreach($tampil->result_array() AS $we){ echo "<option value=$we[id_level]>$we[nama]</option>"; } ?></select></div>
				<div class="form-group"><label for="cat">Tipe akses</label><?php foreach($kategori as $rowz){ $options[$rowz->id] = $rowz->title; } $data = array('id'=>'cat','name'=>'cat[]','class'=>'form-control select2'); echo form_multiselect($data, isset($options) ? $options : array(), array(), ''); ?></div>
			</div>
			<div class="account-status-card"><div><strong>Status akun</strong><span>Akun aktif dapat masuk dan menggunakan aplikasi.</span></div><div class="user-status-options"><label><input type="radio" name="aktif" id="optionsRadios1" value="N" checked><span><i class="fa fa-ban"></i> Tidak aktif</span></label><label><input type="radio" name="aktif" id="optionsRadios2" value="Y"><span><i class="fa fa-check-circle"></i> Aktif</span></label></div></div>
		</section>
	</div>
</form>
<script>
	$(function(){
		$('.select2').select2({placeholder:'Pilih tipe akses',allowClear:true});
		$('#select_all').on('change',function(){ $('.checkbox').prop('checked',this.checked); });
		$('.checkbox').on('change',function(){ $('#select_all').prop('checked',$('.checkbox:checked').length === $('.checkbox').length); });
		$('.password-toggle').on('click',function(){ var input=$('#password'); var show=input.attr('type')==='password'; input.attr('type',show?'text':'password'); $(this).find('i').toggleClass('fa-eye',!show).toggleClass('fa-eye-slash',show); $(this).attr('aria-label',show?'Sembunyikan password':'Tampilkan password'); });
		$('#profile_photo').on('change',function(){ var file=this.files&&this.files[0]; if(!file){return;} if(['image/jpeg','image/png','image/webp'].indexOf(file.type)===-1||file.size>2097152){ this.value=''; showNotif('top-center','Foto profil',file.size>2097152?'Ukuran foto maksimal 2 MB':'Format foto harus JPG, PNG, atau WebP','warning'); return; } var url=URL.createObjectURL(file); $('#profilePhotoPreview img').attr('src',url).prop('hidden',false); $('#profilePhotoPreview span').prop('hidden',true); $('.profile-photo-remove').prop('hidden',false); });
		$('.profile-photo-remove').on('click',function(){ $('#profile_photo').val(''); $('#profilePhotoPreview img').attr('src','').prop('hidden',true); $('#profilePhotoPreview span').prop('hidden',false); $(this).prop('hidden',true); });
	});
</script>
