$(document).ready(function () {
    $('#statuscheckbox').click(function () {
        $('.pilihwaktu-x').prop('disabled', function(i, v) { return !v; });
    });
});

$(".schoolname").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listsekolahan"});
$(".schoolmajor").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listjurusan"});
$(".typecompany").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listjenisperusahaan"});
$(".skillname").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listkeahlian"});
$(".language").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listbahasa"});

$('.input-group.date').datepicker({
    format: "yyyy-mm-dd",
    language: "id",
    autoclose: true
});

$('.pilihwaktu').datepicker({
    format: "MM yyyy",
    language: "id",
    autoclose: true,
    viewMode: "months",
    minViewMode: "months"
});

$(document).ready(function(){  
  var i=0;  
  $('#addschool').click(function(){  
	   i++;  
	   $('#dynamic_field').append('<div class="separatorline" id="row'+i+'">'
		+'<div class="form-row">'
		+'<div class="form-group col-md-3">'
		  +'<label for="inputCity">Strata Pendidikan</label>'
		  +'<select class="form-control" id="" name="tingkat_pendidikan_id[]">'
                +'<option disabled selected></option>'
				+'<option value="1">SD</option>'
				+'<option value="2">SMP</option>'
				+'<option value="3">SMA Sederajat</option>'
				+'<option value="4">Diploma (D3)</option>'
				+'<option value="5">Sarjana (S1)</option>'
				+'<option value="6">Master (S2)</option>'
				+'<option value="9">Doktor (S3)</option>'
				+'</select>'
		+'</div>'
		+'<div class="form-group col-md-4">'
		  +'<label for="inputCity">Nama Sekolah / Universitas</label>'
		  +'<input type="text" name="nama_sekolah_universitas[]" placeholder="" data-min-length="3" list="listuniv" class="form-control name_list schoolname'+i+'" />'
		  +'<script>$(".schoolname'+i+'").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listsekolahan"})</script>'
		+'</div>'
		+'<div class="form-group col-md-3">'
		  +'<label for="inputState">Jurusan</label>'
		  +'<input type="text" name="jurusan[]" placeholder="" data-min-length="3" list="listjurusan" class="form-control name_list schoolmajor'+i+'" />'
		  +'<script>$(".schoolmajor'+i+'").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listjurusan"})</script>'
		+'</div>'
		+'<div class="form-group col-md-2">'
		  +'<label for="inputState">IPK / Nilai Akhir</label>'
		  +'<input name="nilai_akhir[]" type="number" step="0.01" min="0" max="4" class="form-control" id="" pattern="^\d*(\.\d{0,2})?$" value="0.00">'
		+'</div>'
	+'</div>'
	  
	+'<div class="form-row">'		
		+'<div class="form-group col-md-3">'
		  +'<label for="">Dimulai</label>'
		  +'<input type="text" name="mulai[]" class="form-control pilihwaktu'+i+'" autocomplete="off"  data-provide="datepicker">'
		+'</div>'
		+'<div class="form-group col-md-3">'
		  +'<label for="">Berakhir</label>'
		  +'<input type="text" name="akhir[]" class="form-control pilihwaktu'+i+' pilihwaktu-x'+i+'" autocomplete="off"  data-provide="datepicker">'
		+'</div>'
		+'<div class="form-group col-md-4">'
		  +'<label for="">&nbsp;</label>'
			+'<div class="form-check mt-2">'
			  +'<input type="checkbox" name="studi[]" value="1" id="statuscheckbox'+i+'" /> Masih dalam studi'
			+'</div>'
		+'</div>'
		+'<script>'
		+'$(".pilihwaktu'+i+'").datepicker({'
			+'format: "MM yyyy",'
			+'language: "id",'
			+'autoclose: true,'
			+'viewMode: "months",'
			+'minViewMode: "months"'
		+'});'
		+'$(document).ready(function(){'
			+'$("#statuscheckbox'+i+'").click(function(){'
				+'$(".pilihwaktu-x'+i+'").prop("disabled", function(i, v) { return !v; });'
			+'});'
		+'});'
		+'</script>'
	+'</div>'
	+'<button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-sm btn_remove"><i class="fa fa-times"></i> Hapus Data</button>'
+'</div>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
	   var button_id = $(this).attr("id");   
	   $('#row'+button_id+'').remove();  
  });
});


$(document).ready(function(){  
  var i=0;  
  $('#addwork').click(function(){  
	   i++;  
	   $('#dynamic_field').append('<div class="separatorline" id="row'+i+'">'
		+'<div class="form-row">'
            +'<div class="form-group col-md-4">'
              +'<label for="inputCity">Nama Perusahaan</label>'
              +'<input type="text" name="nama_perusahaan[]" class="form-control">'
            +'</div>'
            +'<div class="form-group col-md-4">'
              +'<label for="inputCity">Posisi Terakhir</label>'
              +'<input type="text" name="posisi[]" class="form-control">'
            +'</div>'
            +'<div class="form-group col-md-4">'
              +'<label for="inputState">Jenis Perusahaan</label>'
			  +'<input type="text" name="jenis_perusahaan[]" placeholder="" data-min-length="3" list="listtypecomp" class="form-control name_list typecompany'+i+'" />'
			  +'<script>$(".typecompany'+i+'").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listjenisperusahaan"})</script>'
            +'</div>'
        +'</div>'
          
        +'<div class="form-row">'
            +'<div class="form-group col-md-3">'
              +'<label for="">Dimulai</label>'
              +'<input type="text" name="mulai[]" class="form-control pilihwaktu'+i+'" autocomplete="off"  data-provide="datepicker">'
            +'</div>'
            +'<div class="form-group col-md-3">'
              +'<label for="">Berakhir</label>'
              +'<input type="text" name="akhir[]" class="form-control pilihwaktu'+i+' pilihwaktu-x'+i+'" autocomplete="off"  data-provide="datepicker">'
            +'</div>'
            +'<div class="form-group col-md-4">'
              +'<label for="">&nbsp;</label>'
                +'<div class="form-check mt-2">'
                  +'<input type="checkbox" name="bekerja[]" value="1" id="statuscheckbox'+i+'" /> Masih bekerja'
                +'</div>'
            +'</div>'
			+'<script>'
			+'$(".pilihwaktu'+i+'").datepicker({'
				+'format: "MM yyyy",'
				+'language: "id",'
				+'autoclose: true,'
				+'viewMode: "months",'
				+'minViewMode: "months"'
			+'});'
			+'$(document).ready(function(){'
				+'$("#statuscheckbox'+i+'").click(function(){'
					+'$(".pilihwaktu-x'+i+'").prop("disabled", function(i, v) { return !v; });'
				+'});'
			+'});'
			+'</script>'
        +'</div>'
        
		+'<div class="form-row">'
            +'<div class="form-group col-md-12">'
            +'<label for="inputState">Deskripsi Pekerjaan</label>'
            +'<textarea class="form-control" name="deskripsi[]" id="" rows="3"></textarea>'
            +'</div>'
        +'</div>'
	+'<button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-sm btn_remove"><i class="fa fa-times"></i> Hapus Data</button>'
+'</div>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
	   var button_id = $(this).attr("id");   
	   $('#row'+button_id+'').remove();  
  });
});

$(document).ready(function(){  
  var i=1;  
  $('#addskill').click(function(){  
	   i++;  
	   $('#dynamic_field').append('<div class="separatorline" id="row'+i+'">'
		+'<div class="form-row">'
			+'<div class="form-group col-md-3">'
			  +'<label for="inputCity">Jenis Keahlian</label>'
			  +'<input type="text" name="keahlian[]" placeholder="" data-min-length="3" list="listskill" class="form-control name_list skillname'+i+'" />'
			  +'<script>$(".skillname'+i+'").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listkeahlian"})</script>'
			+'</div>'
			+'<div class="form-group col-md-3">'
			  +'<label for="inputCity">Tingkat Keahlian</label>'
              +'<select class="form-control" id="" name="tingkatan[]">'
                +'<option disabled selected></option>'
                +'<option value="Beginner">Beginner</option>'
                +'<option value="Intermediate">Intermediate</option>'
                +'<option value="Expert">Expert</option>'
              +'</select>'
			+'</div>'
		+'</div>'
		+'<div class="form-row">'
			+'<div class="form-group col-md-12">'
			+'<label for="inputState">Deskripsi Singkat Keahlian</label>'
			+'<textarea class="form-control" name="keahlian_text[]" id="" rows="3"></textarea>'
			+'</div>'
		+'</div>'
	+'<button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-sm btn_remove"><i class="fa fa-times"></i> Hapus Data</button>'
+'</div>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
	   var button_id = $(this).attr("id");   
	   $('#row'+button_id+'').remove();  
  });
});

$(document).ready(function(){  
  var i=1;  
  $('#addlang').click(function(){  
	   i++;  
	   $('#dynamic_field').append('<div class="separatorline" id="row'+i+'">'
		+'<div class="form-row">'
			+'<div class="form-group col-md-3">'
			  +'<label for="inputCity">Bahasa</label>'
			  +'<input type="text" name="bahasa[]" placeholder="" data-min-length="3" list="listbahasa" class="form-control name_list language'+i+'" />'
			  +'<script>$(".language'+i+'").flexdatalist({searchContain: true,searchIn: "name",data: "include/list-json.php?o=listbahasa"})</script>'
			+'</div>'
			+'<div class="form-group col-md-3">'
			  +'<label for="inputCity">Tingkat Kemampuan Bahasa</label>'
              +'<select class="form-control" id="" name="tingkatan[]">'
                +'<option disabled selected></option>'
                +'<option value="Beginner">Beginner</option>'
                +'<option value="Intermediate">Intermediate</option>'
                +'<option value="Proficient">Proficient</option>'
                +'<option value="Fluent">Fluent</option>'
                +'<option value="Native">Native</option>'
              +'</select>'
			+'</div>'
		+'</div>'
	+'<button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-sm btn_remove"><i class="fa fa-times"></i> Hapus Data</button>'
+'</div>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
	   var button_id = $(this).attr("id");   
	   $('#row'+button_id+'').remove();  
  });
});

$(document).ready(function(){  
  var i=1;  
  $('#adddocument').click(function(){  
	   i++;  
	   $('#dynamic_field').append('<div class="separatorline" id="row'+i+'">'
	   +'<label>Pilih File '+i+'</label>'
		+'<div class="row">'
		+'<div class="col-6 form-group">'
			+'<div class="custom-file">'
			  +'<input type="file" class="custom-file-input" id="" name ="sertifikat[]" required>'
			  +'<label class="custom-file-label" for="customFileLang"></label>'
			+'</div>'
		+'</div>'
		+'<div class="col-12 form-group">'
			+'<label for="exampleFormControlFile1">Keterangan Dokumen</label>'
			+'<input type="text" name="sertifikat_text[]" class="form-control" required/>'
		+'</div>'
		+'</div>'
	+'<button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-sm btn_remove"><i class="fa fa-times"></i> Hapus Data</button>'
+'</div>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
	   var button_id = $(this).attr("id");   
	   $('#row'+button_id+'').remove();  
  });
});

// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});