<div class="panel">
	<div class="panel-container show">
		<div class="panel-content">
			<div class="card m-auto border">
				<?= form_open('', 'id="users_form"', ['id' => $id]) ?>
				    <div class="card-header">
				        <b><?= $titel ?></b>
				    </div>
				    <div class="card-body">
				        <div class="row mb-3">
					        <label class="col-3 col-sm-3 col-form-label text-right">Judul <span class="text-danger">*</span> :</label>
					        <div class="col-9 col-sm-9">
					            <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" id="judul" name="judul" required value="<?= $judul ?>">
					            <div class="invalid-feedback" id="em_judul"></div>
					        </div>
					    </div>
						<div class="row mb-3">
					        <label class="col-3 col-sm-3 col-form-label text-right">Penulis <span class="text-danger">*</span> :</label>
					        <div class="col-9 col-sm-9">
					            <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" id="penulis" required name="penulis" value="<?= $penulis ?>">
					            <div class="invalid-feedback" id="em_penulis"></div>
					        </div>
					    </div>
						<div class="row mb-3">
					        <label class="col-3 col-sm-3 col-form-label text-right">Uraian <span class="text-danger">*</span> :</label>
					        <div class="col-9 col-sm-9">
					            <textarea class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent ginputx" id="uraian" required name="uraian" required rows="7"><?= esc($uraian, 'html') ?></textarea>
					            <div class="invalid-feedback" id="em_uraian"></div>
					        </div>
					    </div>
						<div class="row mb-3">
					        <label class="col-3 col-sm-3 col-form-label text-right">Cover <?= !empty($id) ? '':'<span class="text-danger">*</span>' ?> :</label>
					        <div class="col-9 col-sm-9">
					            <input type="file" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" id="cover" name="cover" <?= !empty($id) ? '':'required' ?> value="<?= $cover ?>" accept=".jpg,.jpeg,.png">
					            <?= !empty($id) ? '<small>kosongkan jika tidak memperbarui cover.</small>':'' ?>
					            <div class="invalid-feedback" id="em_cover"></div>
					            <input type="hidden" class="form-control" name="cover_ori" value="<?= $cover ?>">
					        </div>
					    </div>
					    <div class="row mb-3">
					        <label class="col-3 col-sm-3 col-form-label text-right">File <?= !empty($id) ? '':'<span class="text-danger">*</span>' ?> :</label>
					        <div class="col-9 col-sm-9">
					            <input type="file" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" id="berkas" name="berkas" <?= !empty($id) ? '':'required' ?> value="<?= $berkas ?>" accept=".pdf,application/pdf">
					            <?= !empty($id) ? '<small>kosongkan jika tidak memperbarui file.</small>':'' ?>
					            <div class="invalid-feedback" id="em_cover"></div>
					            <input type="hidden" class="form-control" name="berkas_ori" value="<?= $berkas ?>">
					        </div>
					    </div>
					    <div class="invalid-feedback text-center" id="em_message"></div>
				    </div>
				    <div class="card-footer py-2">
				        <div class="row">
				        	<div class="col-6 col-sm-6">
				        		<button type="button" class="btn btn-default waves-effect waves-themed btn-block" data-dismiss="modal">Close</button>
				        	</div>
				        	<div class="col-6 col-sm-6">
				        		<button type="submit" id="btn_rekam" class="btn btn-info waves-effect waves-themed btn-block">Save Changes</button>
				        	</div>
				        </div>
				    </div>
				</form>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$('.ginputx').inputmask({
     	regex: "^[a-zA-Z0-9\\s.,@-]*$"
 	});

 	$('.angkax').numeric();

	$('.select2').select2({
      	dropdownCssClass:'increasezindex'
   	});

	$("#users_form").submit(function(e){
	   e.preventDefault();
	   var url = '<?= $action ?>'
	   var formObj = $(this);
   		var formData = new FormData(this);
	   $.ajax({
	      url: url,
	      type: "post",
	      dataType: 'json',
	      data: formData,
	      mimeType:"multipart/form-data",
	      contentType: false,
	      cache : false,
	      processData: false,
	      beforeSend  : function() {
	         $(".form-group").removeClass("is-invalid");
	         $(".invalid-feedback").html('').hide();
	         BtnLoading($("#btn_rekam"));
	      },
	      error: function (xhr, status, message) {
	         var res = JSON.parse(xhr.responseText);
	         $(res.messages).each(function(i,val){
	            var inputname = Object.keys(val)[0];
	            $.each(val,function(k,v){
	               $("#"+inputname).focus();
	               $("#"+k).addClass("is-invalid");
	               $("#em_"+k).html(v).fadeIn();
	            });
	         });
	         BtnReset($("#btn_rekam"));
	      },
	      success: function(res) {
	         $('#modal-user').modal('hide');
	         toastr.success(res.message, 'Updated!!', {timeOut: 3000});
	         window.location.reload();
	      },
	      complete: function() {
	         BtnReset($("#btn_rekam"));
	      }
	   });
	});
</script>