// java script untuk pemilihan alamat use
    // memilih data provinsi
    $('.provinsi').on('change', function () {
        var url = $('.url').data('url');
        var id = $(this).val();
        $('.loading').css('top', '0');
        $('.gambar-loading').css('opacity', '1');
        $('.kota').html('');
        $.ajax({
            url: url + 'Home/dataKota',
            data: {
                id: id
            },
            dataType: 'json',
            method: 'post',
            success: function (respon) {
                $('.kota').append(`	<option value="">Pilih Kota / Kabupaten</option>`)
                $.each(respon, function (i, v) {
                    $('.kota').append(`
                    <option value="` + v.id + `">` + v.name + `</option>
                    `)
                })
                $('.loading').css('top', '100%');
                $('.gambar-loading').css('opacity', '0');
            }
        })
    
    })
    // end memilih data provinsi

    // memilih data kota dan mengambila data kecamatan
    $('.kota').on('change', function () {
        $('.loading').css('top', '0');
        $('.gambar-loading').css('opacity', '1');
        var url = $('.url').data('url');
        var id = $(this).val();
        $('.kecamatan').html('');
        $.ajax({
            url: url + 'Home/dataKecamatan',
            data: {
                id: id
            },
            dataType: 'json',
            method: 'post',
            success: function (respon) {
                $('.kecamatan').append(`<option value="">Pilih Kecamatan</option>`)
    
                $.each(respon, function (i, v) {
                    $('.kecamatan').append(`
                    <option value="` + v.id + `">` + v.name + `</option>
                    `)
                    $('.loading').css('top', '100%');
                    $('.gambar-loading').css('opacity', '0');
                })
            }
        })
    
    })
    // end memilih data kota dan mengambil data kecamatan

    // memilih data kecamatan untuk mengambil data desa
    $('.kecamatan').on('change', function () {
        var url = $('.url').data('url');
        var id = $(this).val();
        $('.loading').css('top', '0');
        $('.gambar-loading').css('opacity', '1');
        $('.desa').html('');
        $.ajax({
            url: url + 'Home/dataDesa',
            data: {
                id: id
            },
            dataType: 'json',
            method: 'post',
            success: function (respon) {
                $('.desa').append(`	<option value="">Pilih Desa</option>`)
                $.each(respon, function (i, v) {
                    $('.desa').append(`
                    <option value="` + v.id + `">` + v.name + `</option>
                    `)
                })
                $('.loading').css('top', '100%');
                $('.gambar-loading').css('opacity', '0');
            }
        })
    
    })
    // end memilih data kecamatan untuk mengambil data desa
// end pemilihan alamat user

// function load Data User
	  //  load data kelas
	  function loadBiodata(){
		var url = $('.url').data('url');
		$('.tempatLahir').val('')
     	$('.tglLahir').val(''); 
      	$('.kk').val(''); 
      	$('.jk').val('');
      	$('.noHp').val(''); 
      	$('.tinggiBadan').val(''); 
      	$('.beratBadan') .val('');
      	$('.sekolahAsal').val('');
     	$('.npsn').val('');
      	// $('.provinsi').html(''); 
      	$('.kota').html('');
      	$('.kecamatan').html(''); 
      	$('.desa').html('');
      	$('.rt').val('');
      	$('.rw').val('');
      	$('.longitude').val(''); 
      	$('.kodePos').val('');
      	$('.alamat').val(''); 
      	$('.jarak').val('');
      	$('.statusDaftar').val('');
		$.ajax({
		  url:url + 'Akun/GetBiodata',
		  method:'post',
		  dataType:'json',
		  success:function(data){
			$('.tempatLahir').val(data.user.tempatLahir)
			$('.tglLahir').val(data.user.tglLahir); 
			$('.kk').val(data.user.kk); 
			$('.jk').val(data.user.jk);
			$('.noHp').val(data.user.noHp); 
			$('.tinggiBadan').val(data.user.tinggiBadan); 
			$('.beratBadan') .val(data.user.beratBadan);
			$('.sekolahAsal').val(data.user.sekolahAsal);
			$('.npsn').val(data.user.npsn);
			$('.provinsi').append(`<option value="`+data.provinsi.id+`">`+data.provinsi.name+`</option>`); 
			$('.kota').append(`<option value="`+data.kota.id+`">`+data.kota.name+`</option>`);
			$('.kecamatan').append(`<option value="`+data.kecamatan.id+`">`+data.kecamatan.name+`</option>`); 
			$('.desa').append(`<option value="`+data.desa.id+`">`+data.desa.name+`</option>`);
			$('.rt').val(data.user.rt);
			$('.rw').val(data.user.rw);
			$('.longitude').val(data.user.longitude); 
			$('.kodePos').val(data.user.kodePos);
			$('.alamat').val(data.user.alamat); 
		  }
		})
	  }
	//  end load data kelas
// function load data user


// validasi formulir biodata
$(".akun-container #formBiodata").validate({
	focusInvalid: true,
	invalidHandler: function (form, validator) {
		Swal.fire({
			icon: 'error',
			title: 'Belum lengkap !!!',
			text: 'Cek kembali sebelum ke isian selanjutnya ',
			timer: 2000,
		})
		if (!validator.numberOfInvalids())
			return;


		$('html, body').animate({
			scrollTop: $(validator.errorList[0].element).offset().top - 190
		}, 3000);


	},
	rules:rolesFormBiodata(),
    messages:messageErrorBiodata(),
	submitHandler:function(form){
		Swal.fire({
			title: 'Pesan',
			text: "Simpan Biodata ?",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Ya'
		}).then((result) => {
			if (result.value) {
				$.ajax({
					url:baseUrl()+'Akun/Biodata',
					type:'post',
					dataType:'json',
					data:$(form).serialize(),
					success:function(response){
						// console.log(response)
						if(response.pesan=='ok'){

							window.location.href = baseUrl()+'Akun/Wali';
						}else{
							window.location.href = baseUrl()+'Akun/Wali';

						}
					}
				})
				
			}
		})
	},
   
})
// akhir validasi formulir biodata

// validasi formulir Wali
$(".akun-container #formWali").validate({
	focusInvalid: true,
	invalidHandler: function (form, validator) {
		Swal.fire({
			icon: 'error',
			title: 'Belum lengkap !!!',
			text: 'Cek kembali sebelum ke isian selanjutnya  ',
			timer: 2000,
		})
		if (!validator.numberOfInvalids())
			return;


		$('html, body').animate({
			scrollTop: $(validator.errorList[0].element).offset().top - 190
		}, 3000);


	},
    rules:rolesFormWali(),
    messages:messageErrorWali(),
	submitHandler:function(form){
		Swal.fire({
			title: 'Pesan',
			text: "Simpan Data Orang Tua ?",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Ya'
		}).then((result) => {
			if (result.value) {
				$.ajax({
					url:form.action,
					type:form.method,
					dataType:'json',
					data:$(form).serialize(),
					success:function(response){
						if(response.pesan=='ok'){
								
						window.location.href = baseUrl()+'Akun/Nilai';
						}else if(response.pesan=='gagal'){
							
							window.location.href = baseUrl()+'Akun/Nilai';

						}
					}
				})
				
			}
		})
	},
})
// akhir validasi formulir Wali

// validasi formulir Nilai
$(".akun-container #formNilai").validate({
	focusInvalid: true,
	invalidHandler: function (form, validator) {
		Swal.fire({
			icon: 'error',
			title: 'Belum lengkap !!!',
			text: 'Cek kembali sebelum ke isian selanjutnya  ',
			timer: 2000,
		})
		if (!validator.numberOfInvalids())
			return;


		$('html, body').animate({
			scrollTop: $(validator.errorList[0].element).offset().top - 190
		}, 3000);


	},
    rules:rolesFormNilai(),
    messages:messageErrorNilai(),
	submitHandler:function(form){
		Swal.fire({
			title: 'Pesan',
			text: "Simpan Data Nilai ?",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Ya'
		}).then((result) => {
			if (result.value) {
				$.ajax({
					url:form.action,
					type:form.method,
					dataType:'json',
					data:$(form).serialize(),
					success:function(response){
						if(response.pesan=='ok'){
								Swal.fire(
									'Tersimpan!',
									'Data Nilai tersimapan',
									'success'
								)
						window.location.href = baseUrl()+'Akun/Berkas';
						}else if(response.pesan=='gagal'){
							Swal.fire(
								'Tersimpan!',
								'Nilai di simpan, namun tidak ada prubahan data',
								'warning'
							);
							window.location.href = baseUrl()+'Akun/Berkas';

						}
					}
				})
				
			}
		})
	},
})
// akhir validasi formulir Wali


// validasi formulir Berkas
$(".akun-container #formBerkas").validate({
	focusInvalid: true,
	invalidHandler: function (form, validator) {
		Swal.fire({
			icon: 'error',
			title: 'Belum lengkap !!!',
			text: 'Cek kembali sebelum ke isian selanjutnya  ',
			timer: 2000,
		})
		if (!validator.numberOfInvalids())
			return;


		$('html, body').animate({
			scrollTop: $(validator.errorList[0].element).offset().top - 190
		}, 3000);


	},
    rules:rolesFormBerkas(),
    messages:messageErrorBerkas(),
	submitHandler:function(form){
		Swal.fire({
			title: 'Kirim Data Pendaftaran?',
			text: "Data pendaftaran kan dikirim , dan tidak bisa di perbaiki lagi, anda yakin kirim pendaftaran?",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Ya Kirim Saja '
		}).then((result) => {
			if (result.value) {
				$.ajax({
					url:form.action,
					data:$(form).serialize(),
					type:form.method,
					dataType:'json',
					success:function(response){
						if(response.pesan=='ok'){
								Swal.fire(
									'Tersimpan!',
									'Data Nilai tersimapan',
									'success'
								)
						window.location.href = baseUrl()+'Akun';
						}else if(response.pesan=='gagal'){
							Swal.fire(
								'Tersimpan!',
								'Nilai di simpan, namun tidak ada prubahan data',
								'warning'
							);
							window.location.href = baseUrl()+'Akun/Berkas';
						}
					}
				})
				
			}
		})
	},
})
// akhir validasi formulir Wali


// ================================================================block form steop==============================
	// $('.navigasi-form').on('click',function(){
	// 	$('.loading').css('top', '0');
    //     $('.gambar-loading').css('opacity', '1');
	// 	$('.form-container').html('');						

	// 	var link=$(this).attr('id');
	// 	if(link == link){
	// 		$('.form-container').load(baseUrl()+'Akun/'+link);						
	// 	}
	// 	$('.loading').css('top', '100%');
    //     $('.gambar-loading').css('opacity', '0');
	// })
// ================================================================end block form step===========================

// pilih jalur ppdb=======================================
	$('.jalurPpdb').on('change', function () {
		$('.loading').css('top', '0');
		$('.gambar-loading').css('opacity', '1');
		$('.konten-syarat').html('')
		$('.konten-syarat2').html('')
		$('.konten-syarat3').html('')
		$('.konten-syarat4').html('')
		var id = $(this).val();
		if(id == '4'){
			prestasi();
		}else if(id=='2'){
			afirmasi();
		}

		$('.loading').css('top', '100%');
		$('.gambar-loading').css('opacity', '0');

	})

	// memilih penyelengara dan menampilkan kategori kejuaraan
	$('.konten-syarat').on('change','.penyelengara', function () {
		$('.konten-syarat2').html('');
		$('.konten-syarat3').html('');
		var id = $(this).val();
		loadKategoriKejuaraan(id)
		$('.loading').css('top', '0');
		$('.gambar-loading').css('opacity', '1');
		$('.konten-syarat2').append(`
				<div class="row my-3 .kategori-row">
					<div class="col my3">
						<label for="kategori">Pilih kategori</label>
						<select name="kategori" id="kategori" class="kategori form-control form-control-sm">
							
						</select>
					</div>
				</div>
		`)
		$('.loading').css('top', '100%');
		$('.gambar-loading').css('opacity', '0');

	})

	// memilih tingkat prestasi berdasarkan kategori
	$('.konten-syarat2').on('change','.kategori', function () {
		$('.konten-syarat3').html('');
		var id = $(this).val();
		loadTingkatPrestasi(id)
		$('.loading').css('top', '0');
		$('.gambar-loading').css('opacity', '1');
		$('.konten-syarat3').append(`
				<div class="row my-3">
					<div class="col my3">
						<label for="tingkatPrestasi">Pilih Tingkat Prestasi</label>
						<select name="tingkatPrestasi" id="tingkatPrestasi" class="tingkatPrestasi form-control form-control-sm">
							
						</select>
					</div>
				</div>
		`)
		$('.loading').css('top', '100%');
		$('.gambar-loading').css('opacity', '0');
	})

	// menampilkan nama kejuaraan berdsarkan tingkat prestasi
	$('.konten-syarat3').on('change','.tingkatPrestasi', function () {
		$('.konten-syarat4').html('');
		// dragGambar();
		// loadTingkatPrestasi(id)
		$('.loading').css('top', '0');
		$('.gambar-loading').css('opacity', '1');
		$('.konten-syarat4').append(`
				<div class="row my-3">
					<div class="col my3">
					<label for="notelepon">Nama Kejuaran</label>
						<input type="text" class="form-control form-control-custum" name="namaKejuaraan" id="namaKejuaraan">
					</div>
				</div>
			`)
		$('.loading').css('top', '100%');
		$('.gambar-loading').css('opacity', '0');

	})

	// ====================afirmasi======
		// memilih jenis Afirmasi
		$('.konten-syarat').on('change','.namaAfrimasi', function () {
			$('.konten-syarat2').html('');
			var id = $(this).val();
			$('.loading').css('top', '0');
			$('.gambar-loading').css('opacity', '1');
			$.ajax({
				url: baseUrl() + 'Akun/getAfirmasiById',
				dataType: 'json',
				method: 'post',
				data:{
					id:id
				},
				success: function (respon) {
					if(respon==null){

						$('.konten-syarat2').append(`
						<div class="row my-3">
							<div class="col-6 col-lg-6">
								<p class="text-warning">Silahkan pilih jenis afirmasi</p>
							</div>
						</div>
							
						`)
						
					}else if(respon.id==5){
						$('.konten-syarat2').append('');
					}
					else
					{
						$('.konten-syarat2').append(`
						<div class="row my-3">
							<div class="col-6 col-lg-6">
								<label for="namaPemilik">Nama Sesuai di Kartu `+respon.nama_jenis_afirmasi+`</label>
								<input type="text" class="form-control" name="namaPemilik" id="namaPemilik">
							</div>
							<div class="col-6 col-lg-6">
								<label for="noKartu">No Kartu `+respon.nama_jenis_afirmasi+`</label>
								<input type="text" class="form-control" name="noKartu" id="noKartu">
							</div>
						</div>
						<div class="row my-3">
							<div class="col-6 col-lg-6">
								<label for="dtks">No ID DTKS DINSOS</label>
								<input type="text" class="form-control" name="dtks" id="dtks">
							</div>
						</div>
							
						`)
					}

					$('.loading').css('top', '100%');
					$('.gambar-loading').css('opacity', '0');
				}
		
			})
			
	
		})
	
	// function jalur raport
	function jalurRaport(){
		$('.card-input').modal('show');
		$.ajax({
			url:baseUrl()+'Akun',
			method:'post',
			data:{
				data:data
			},
			dataType:'json',
			success:function(response){
				if(response.message){
					$('.moda-form-nila').addClass('active');
					$('.container').addClass('hide');
				}
			}
		})
	}

	// function jalur zonasi
	function prestasi(){
		dataPenyelengara();
		$('.konten-syarat').append(`
		<div class="row my-3">
			<div class="col my3">
				<label for="penyelengara">Pilih Penyelengara</label>
				<select name="penyelengara" id="penyelengara" class="penyelengara form-control form-control-sm">
					
				</select>
			</div>
		</div>
		`);
	}

	
	// function jalur afirmasi
	function afirmasi(){
		dataAfirmasi();
		$('.konten-syarat').append(`
		<div class="row my-3">
			<div class="col my3">
				<label for="namaAfrimasi">Pilih Nama Afirmasi</label>
				<select name="namaAfrimasi" id="namaAfrimasi" class="namaAfrimasi form-control form-control-sm">
				</select>
			</div>
		</div>
		`);
	}

// end pilih jalur ppdb






// date piker siswa
$('#tglLahir').datepicker({
	altField: "#actualDate",
	defaultDate: '01-06-2006',
	dateFormat: "dd-mm-yy",
	dayNames: ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"],
	dayNamesMin: ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
	duration: "slow",
	minDate: new Date(2006,05,06),
	changeYear: true,
	yearRange: "2006:2010",
	changeMonth: true
})

// datepiker ayah
$('#tanggalLahirAyah').datepicker({
	altField: "#actualDate",
	defaultDate: '01-06-1945',
	dateFormat: "dd-mm-yy",
	dayNames: ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"],
	dayNamesMin: ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
	duration: "slow",
	changeYear: true,
	yearRange: "1945:2020",

})


$(function () {
        $("#tglLahir").datepicker();
        $('.ui-datepicker').addClass('notranslate');
    });

// datepiker Ibu
$('#tanggalLahirIbu').datepicker({
	altField: "#actualDate",
	defaultDate: '01-06-1945',
	dateFormat: "dd-mm-yy",
	dayNames: ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"],
	dayNamesMin: ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
	duration: "slow",
	changeYear: true,
	yearRange: "1945:2020",

})



//   function loada data pyelengara
function dataPenyelengara(){
	$.ajax({
		url: baseUrl() + 'Akun/penyelengara',
		dataType: 'json',
		method: 'post',
		success: function (respon) {
			$('.konten-syarat .penyelengara').append(`<option value="">Peyelengara---</option>`)
			$.each(respon, function (i, v) {
				$('.konten-syarat .penyelengara').append(`
				<option value="` + v.id_penyelengara + `">` + v.peyelengara + `</option>
				`)
			})
			$('.loading').css('top', '100%');
			$('.gambar-loading').css('opacity', '0');
		}

	})
}

// ambil data kategori kejuaraan berdasarkan peyelengara
function loadKategoriKejuaraan(id) {
	$.ajax({
		url: baseUrl() + 'Akun/KategoriKejuaraan',
		dataType: 'json',
		method: 'post',
		data:{
			id:id
		},
		success: function (respon) {
			$('.konten-syarat2 .kategori').append(`<option value="">Kategori---</option>`)
			$.each(respon, function (i, v) {
				$('.konten-syarat2 .kategori').append(`
					<option value="` + v.id_satuan + `">` + v.satuan + `</option>
				`)
			})
			$('.loading').css('top', '100%');
			$('.gambar-loading').css('opacity', '0');
		}

	})
}

// load data tingkat prestasi
function loadTingkatPrestasi(id) {
	$.ajax({
		url: baseUrl() + 'Akun/tingkatPrestasi',
		dataType: 'json',
		method: 'post',
		data:{
			id:id
		},
		success: function (respon) {
			$('.konten-syarat3 .tingkatPrestasi').append(`<option value="">tingkatPrestasi---</option>`)
			$.each(respon, function (i, v) {
				$('.konten-syarat3 .tingkatPrestasi').append(`
					<option value="` + v.id + `">` + v.kejuaraan + `</option>
				`)
			})
			$('.loading').css('top', '100%');
			$('.gambar-loading').css('opacity', '0');
		}

	})
}

// load jenis afirmasi]
function dataAfirmasi() {
	$.ajax({
		url: baseUrl() + 'Akun/jenisAfirmasi',
		dataType: 'json',
		method: 'post',
		success: function (respon) {
			$('.konten-syarat .namaAfrimasi').append(`<option value="">Nama Afrimasi---</option>`)
			$.each(respon, function (i, v) {
				$('.konten-syarat .namaAfrimasi').append(`
					<option value="` + v.id + `">` + v.nama_jenis_afirmasi + `</option>
				`)
			})
			$('.loading').css('top', '100%');
			$('.gambar-loading').css('opacity', '0');
		}

	})
}




// funtion roles biodata
function rolesFormBiodata(){
    let roles= {
         koreg: {
             required: true
         },
         noDaftar:{
             required:true
         },
		 agama:{
			required:true
		},
		anak_ke:{
			required:true
		},
         nama:{
             required:true
         },
         nik:{
            required:true,
            number: true,
			rangelength: [16, 16]
         },
         nisn:{
             required:true
         },
         email:{
             required:true
         },
         tempatLahir:{
             required:true
         },
         tglLahir:{
             required:true
         },
         jk:{
            required:true
        },
        noHp:{
            required:true,
            number: true,
			rangelength: [11, 13],
        },
        tinggiBadan:{
            required:true
        },
        beratBadan:{
            required:true
        },
        sekolahAsal:{
            required:true
        },
        npsn:{
            required:true
        },
        provinsi:{
            required:true
        },
        kota:{
            required:true
        },
        kk:{
            required:true,
            number: true,
			rangelength: [16, 16]
        },
        kecamatan:{
            required:true
        },
        desa:{
            required:true
        },
        rt:{
            required:true,
            rangelength: [1, 3],
        },
        rw:{
            required:true,
            rangelength: [1, 3],
        },
        kodePos:{
            required:true,
            rangelength:[1,7]
        },
        alamat:{
            required:true
        },
        longitude:{
            required:true,
            strongCoord: true
        }

    }
 
     return roles;
 }
 
//  function error form biodata
 function messageErrorBiodata(){
     let msg=  {
        koreg: {
            required: 'Kode Registrasi Kosong'
        },
        noDaftar:{
            required:'No Daftar Kosong'
        },
        nama:{
            required:'Nama Pendaftar Harus Diisi'
        },
        nik:{
           required:'NIK Wajib diisi',
           number: 'Hanya Angka Yg Di inpu',
           rangelength: 'NIK harus 16 digit/angka'
        },
        nisn:{
            required:'NISN harus di isi'
        },
        email:{
            required:'Email harus di isi'
        },
        tempatLahir:{
            required:'tempat lahir harus disi'
        },
        tglLahir:{
            required:'Tanggal belum dipilih'
        },
        jk:{
           required:'Jenis kelamin belum di pilih'
       },
       noHp:{
           required:'No handphone harus diisi',
           number: 'Input hanya angka',
           rangelength:'Min : 11  & max:13 digit',
       },
       tinggiBadan:{
           required:'tinggi badan harus disi'
       },
       beratBadan:{
           required:'Berat badan harus di isi'
       },
       sekolahAsal:{
           required:'Asal Sekolah Dasar Harus Diisi'
       },
       npsn:{
           required:'NPSN Sekolah Dasar Tidak Boleh Kosong'
       },
       kk:{
           required:'kaka Harus di isi',
           required:'KK Wajib diisi',
           number: 'Hanya Angka Yg Di inpu',
           rangelength: 'KK harus 16 digit/angka'
       },
       provinsi:{
           required:'Provinsi belum dipilih'
       },
       kota:{
           required:'Kota Belum Dipilih'
       },
		agama:{
			required:'Kolom isian agama belum di pilih'
		},
		anak_ke:{
			required:'Status anak ke- belum di pilih'
		},
       kecamatan:{
           required:'Kecamatan belum dipilih'
       },
       desa:{
           required:'desa belum dipilih'
       },
       rt:{
           required:'Rt Harus Diisi',
           rangelength:'Max 3 Digit'
       },
       rw:{
           required:'rw harus diisi',
           rangelength:'Max 3 Digit'
       },
       kodePos:{
           required:'Kode Pos harus disi',
           rangelength:'Max 7 Digit'
       },
       alamat:{
           required:'Alamat masih kosong'
       },
       longitude:{
           required:'Longitude Wajib Di isi'
       }
     }
     return msg;
 }


 // funtion roles Wali
function rolesFormWali(){
    let roles= {
         ayah: {
             required: true
         },
         nikAyah:{
            required:true,
            number: true,
			rangelength: [16, 16]
         },
         tanggalLahirAyah:{
             required:true
         },
         pendidikanAyah:{
             required:true
         },
         pekerjaanAyah:{
             required:true
         },
         penghasilanAyah:{
             required:true
         },
        //  ibu
        ibu:{
            required:true
        },
        nikIbu:{
           required:true,
           number: true,
           rangelength: [16, 16]
        },
        tanggalLahirIbu:{
            required:true
        },
        pendidikanIbu:{
            required:true
        },
        pekerjaanIbu:{
            required:true
        },
        penghasilanIbu:{
            required:true
        },
        notelepon:{
            required:true,
            number: true,
			rangelength: [11, 13]
         },
        
    }
 
     return roles;
 }
 
//  function error form Wali
 function messageErrorWali(){
     let msg=  {
        ayah: {
            required: 'Nama Ayah wajib diisi (meninggal: ketik Alm.sebelum nama)'
        },
        nikAyah:{
           required:'Nik ayah harus di isi',
           number: 'nik harus number',
           rangelength: 'NIK tidak kurang/lebih 16 digit'
        },
        tanggalLahirAyah:{
            required:'silahkan pilih tanggal lahir'
        },
        pendidikanAyah:{
            required:'pendidikan belum dipilih'
        },
        pekerjaanAyah:{
            required:'pekerjaan belum dipilih'
        },
        penghasilanAyah:{
            required:'penghasilan belum dipilih'
        },
       //  ibu
       ibu:{
           required:'Nama Ibu wajib diisi (meninggal: ketik Almh.sebelum nama)'
       },
       nikIbu:{
          required:'nik masih kosong',
          number: 'nik harus number',
          rangelength:'nik tidak kurang/lebih 16 digit'
       },
       tanggalLahirIbu:{
           required:'tanggal lahir belum dipilih'
       },
       pendidikanIbu:{
           required:'pendidikan ibu belum dipilih'
       },
       pekerjaanIbu:{
           required:'pekerjaan belum dipilih'
       },
       penghasilanIbu:{
           required:'penghasilan belum dipilih'
       },
       notelepon:{
        required:'No telepon masih kosong',
        number: 'No telepon harus number',
        rangelength:'Telapon tidak kurang 11 & lebih 13 digit'
       }

   
     }
     return msg;
 }

 // funtion roles Nilai
function rolesFormNilai(){
    let roles= {
        // PAI
		paiK4S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		paiK4S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		paiK5S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		paiK5S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		paiK6S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		paiK6S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		// pkn
		pknK4S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		pknK4S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		pknK5S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		pknK5S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		pknK6S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		pknK6S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		// indonesia
		indoK4S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		indoK4S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		indoK5S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		indoK5S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		indoK6S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		indoK6S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		// mtk

		mtkK4S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		mtkK4S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		mtkK5S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		mtkK5S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		mtkK6S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		mtkK6S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		// ipa
		ipaK4S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		ipaK4S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		ipaK5S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		ipaK5S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		ipaK6S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		ipaK6S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		// ips
		ipsK4S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		ipsK4S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		ipsK5S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		ipsK5S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		ipsK6S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		ipsK6S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		// sbdp
		sbdpK4S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		sbdpK4S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		sbdpK5S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		sbdpK5S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		sbdpK6S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		sbdpK6S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		// pjok
		pjokK4S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		pjokK4S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		pjokK5S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		pjokK5S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},
		pjokK6S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		pjokK6S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		// sunda

		sundaK4S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100

		},

		sundaK4S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		sundaK5S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		sundaK5S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
		sundaK6S1: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},

		sundaK6S2: {
			required: true,
			rangelength: [2, 3],
			number: true,
			max: 100
		},
        
    }
 
     return roles;
 }
 
//  function error form Nilai
 function messageErrorNilai(){
     let msg=  {
        paiK4S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		paiK4S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		paiK5S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		paiK5S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		paiK6S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},

		paiK6S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		// pkn
		pknK4S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		pknK4S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		pknK5S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		pknK5S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		pknK6S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},

		pknK6S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},

		// indo
		indoK4S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},

		indoK4S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		indoK5S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		indoK5S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		indoK6S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		indoK6S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		// mtk
		mtkK4S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		mtkK4S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		mtkK5S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		mtkK5S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		mtkK6S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		mtkK6S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		// ipa
		ipaK4S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		ipaK4S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		ipaK5S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		ipaK5S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		ipaK6S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		ipaK6S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		// ips
		ipsK4S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		ipsK4S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'


		},
		ipsK5S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		ipsK5S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		ipsK6S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},

		ipsK6S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		// sbdp
		sbdpK4S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},

		sbdpK4S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		sbdpK5S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		sbdpK5S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'

		},
		sbdpK6S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},

		sbdpK6S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		// pjok
		pjokK4S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		pjokK4S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		pjokK5S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		pjokK5S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		pjokK6S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		pjokK6S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		// sunda
		sundaK4S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		sundaK4S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		sundaK5S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		sundaK5S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		sundaK6S1: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},
		sundaK6S2: {
			required: 'Wajib diisi',
			rangelength: 'min 2 max 3 digit',
			number: 'Hanya Number',
			max: 'max Nilai 100'
		},

   
     }
     return msg;
 }


  // funtion roles Berkas
function rolesFormBerkas(){
    let roles= {
		kk: {
             required: true,
			 extension: "jpg|png|jpeg",
			 maxgambar:200000
         },
         akte:{
            required:true,
			extension: "jpg|png|jpeg",
			maxgambar:200000

            
         },
         raport:{
             required:true,
			 extension: "pdf",
			 maxfile:500000
         },
		 jalurPpdb:{
			 required:true,

		 },
		 penyelengara:{
			 required:true,
		 },
		 kategori:{
			 required:true,
		 },
		 tingkatPrestasi:{
			 required:true
		 },
		 namaKejuaraan:{
			required:true
		 },
		 namaAfrimasi:{
			 required:true
		 },
		
		noKartu:{
			required:true

		}
        
    }
 
     return roles;
 }
 
//  function error form Berkas
 function messageErrorBerkas(){
     let msg=  {
        kk: {
            required: 'Berkas KK Belum di isi/ ulangi pilih berkas',
			extension:'Gunakan File jpg,png,jpeg',
			maxgambar:'Ukuran Gambar tidak lebih dari 200kb'
        },
        akte:{
           required:'Berkas akte Belum di isi / ulangi pilih berkas',
			extension:'Gunakan File jpg,png,jpeg',
			maxgambar:'Ukuran Gambar tidak lebih dari 200kb'


        },
        raport:{
            required:'Berkas Raport Belum di isi / ulangi pilih berkas',
			extension:'anda bukan upload file pdf',
			maxfile:'Ukuran File PDF tidak lebih dari 500kb'
        },
		noKartu:{
			required:'No Kartu Harus Diisi'

		}
        

   
     }
     return msg;
 }

//  tombol logout
$('.tombol-logout').on('click',function(e){
	e.preventDefault()
	let link = $(this).attr('href')
	Swal.fire({
		title: 'Pesan',
		text: "Keluar dari aplikasi ?",
		icon: 'warning',
		showCancelButton: true,
		confirmButtonColor: '#3085d6',
		cancelButtonColor: '#d33',
		confirmButtonText: 'Ya'
	}).then((result) => {
		if (result.value) {
			window.location.href = link;
			
		}
	})
})





//  function uRL
function baseUrl(){
	var url = $('.url').data('url');
	return url	
}


 

//  tmbahan method untuk validasi longitude

$.validator.addMethod('strongCoord', function (value, element) {
	return this.optional(element) ||
		(value.length >= 4 &&
			/^(-?\d+(\.\d+)?),\s*(-?\d+(\.\d+)?)$/.test(value));
}, 'Longitude tidak valid\'.')

// validasi tambahan untuk size image
$.validator.addMethod("maxgambar", function(value, element, param) {
    var isOptional = this.optional(element),
        file;
    
    if(isOptional) {
        return isOptional;
    }
    
    if ($(element).attr("type") === "file") {
        
        if (element.files && element.files.length) {
            
            file = element.files[0];            
            return ( file.size && file.size <= param ); 
        }
    }
    return false;
}, "File size is too large.");

// maxsimal file upload
// validasi tambahan untuk size image
$.validator.addMethod("maxfile", function(value, element, param) {
    var isOptional = this.optional(element),
        file;
    
    if(isOptional) {
        return isOptional;
    }
    
    if ($(element).attr("type") === "file") {
        
        if (element.files && element.files.length) {
            
            file = element.files[0];            
            return ( file.size && file.size <= param ); 
        }
    }
    return false;
}, "File size is too large.");
// loading
// loading

// function data berkas dan jalur pendaftran
// function loadDataPendaftaran(){

// }


// drag and drop
document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
	const dropZoneElement = inputElement.closest(".drop-zone");
  
	dropZoneElement.addEventListener("click", (e) => {
	  inputElement.click();
	});
  
	inputElement.addEventListener("change", (e) => {
	  if (inputElement.files.length) {
		updateThumbnail(dropZoneElement, inputElement.files[0]);
	  }
	});
  
	dropZoneElement.addEventListener("dragover", (e) => {
	  e.preventDefault();
	  dropZoneElement.classList.add("drop-zone--over");
	});
  
	["dragleave", "dragend"].forEach((type) => {
	  dropZoneElement.addEventListener(type, (e) => {
		dropZoneElement.classList.remove("drop-zone--over");
	  });
	});
  
	dropZoneElement.addEventListener("drop", (e) => {
	  e.preventDefault();
  
	  if (e.dataTransfer.files.length) {
		inputElement.files = e.dataTransfer.files;
		updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
	  }
  
	  dropZoneElement.classList.remove("drop-zone--over");
	});
  });
  
  /**
   * Updates the thumbnail on a drop zone element.
   *
   * @param {HTMLElement} dropZoneElement
   * @param {File} file
   */
  function updateThumbnail(dropZoneElement, file) {
	let thumbnailElement = dropZoneElement.querySelector(".drop-zone__thumb");
  
	// First time - remove the prompt
	if (dropZoneElement.querySelector(".drop-zone__prompt")) {
	  dropZoneElement.querySelector(".drop-zone__prompt").remove();
	}
  
	// First time - there is no thumbnail element, so lets create it
	if (!thumbnailElement) {
	  thumbnailElement = document.createElement("div");
	  thumbnailElement.classList.add("drop-zone__thumb");
	  dropZoneElement.appendChild(thumbnailElement);
	}
  
	thumbnailElement.dataset.label = file.name;
  
	// Show thumbnail for image files
	if (file.type.startsWith("image/")) {
	  const reader = new FileReader();
  
	  reader.readAsDataURL(file);
	  reader.onload = () => {
		thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
	  };
	} else {
	  thumbnailElement.style.backgroundImage = null;
	}
  }

//   drag function
function dragGambar(){
	document.querySelectorAll(".drop-zone__input").forEach((inputElement) => {
		const dropZoneElement = inputElement.closest(".drop-zone");
	  
		dropZoneElement.addEventListener("click", (e) => {
		  inputElement.click();
		});
	  
		inputElement.addEventListener("change", (e) => {
		  if (inputElement.files.length) {
			updateThumbnail(dropZoneElement, inputElement.files[0]);
		  }
		});
	  
		dropZoneElement.addEventListener("dragover", (e) => {
		  e.preventDefault();
		  dropZoneElement.classList.add("drop-zone--over");
		});
	  
		["dragleave", "dragend"].forEach((type) => {
		  dropZoneElement.addEventListener(type, (e) => {
			dropZoneElement.classList.remove("drop-zone--over");
		  });
		});
	  
		dropZoneElement.addEventListener("drop", (e) => {
		  e.preventDefault();
	  
		  if (e.dataTransfer.files.length) {
			inputElement.files = e.dataTransfer.files;
			updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
		  }
	  
		  dropZoneElement.classList.remove("drop-zone--over");
		});
	});
	 /**
   * Updates the thumbnail on a drop zone element.
   *
   * @param {HTMLElement} dropZoneElement
   * @param {File} file
   */
	  function updateThumbnail(dropZoneElement, file) {
		let thumbnailElement = dropZoneElement.querySelector(".drop-zone__thumb");
	  
		// First time - remove the prompt
		if (dropZoneElement.querySelector(".drop-zone__prompt")) {
		  dropZoneElement.querySelector(".drop-zone__prompt").remove();
		}
	  
		// First time - there is no thumbnail element, so lets create it
		if (!thumbnailElement) {
		  thumbnailElement = document.createElement("div");
		  thumbnailElement.classList.add("drop-zone__thumb");
		  dropZoneElement.appendChild(thumbnailElement);
		}
	  
		thumbnailElement.dataset.label = file.name;
	  
		// Show thumbnail for image files
		if (file.type.startsWith("image/")) {
		  const reader = new FileReader();
	  
		  reader.readAsDataURL(file);
		  reader.onload = () => {
			thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
		  };
		} else {
		  thumbnailElement.style.backgroundImage = null;
		}
	  }
}
  



$('.loading').css('top', '100%');
$('.gambar-loading').css('opacity', '0');

