<!-- Main Content -->
<div class="content">
  <div class="formcard">
    <form class="document_form" id="document_form" method="post" action="<?php echo base_url();?>document/saveDocument">
      
     <div class="form-group mb-3">
	  <label for="document_name" class="form-label">Document Name</label>
	  <div class="input-group">
		<span class="input-group-text"><i class="fas fa-user-shield"></i></span>
		<input type="text" id="document_name" name="document_name" class="form-control" placeholder="Document Name" required>
	  </div>
	</div>

      <div class="col-md-12">
        <button class="btn btn-primary">Create</button>
        <a class="btn btn-danger" href="<?= site_url('document/allDocuments/'.$this->session->userdata('company_id')) ?>">Cancel</a>
      </div>      
    </form>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/js/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<script>
$(document).ready(function () {
  $('#document_form').validate({
    errorClass: 'is-invalid',
    validClass: 'is-valid',
    errorElement: 'div',
    errorPlacement: function(error, element) {
      error.addClass('invalid-feedback');
      error.insertAfter(element.closest('.input-group').length ? element.closest('.input-group') : element);
    },
    highlight: function(element) {
      $(element).addClass('is-invalid').removeClass('is-valid');
    },
    unhighlight: function(element) {
      $(element).removeClass('is-invalid').addClass('is-valid');
    },
    rules: {
      document_name: { required: true },
    },
    messages: {
      document_name: { required: "Please enter Document Name" },
    },
    submitHandler: function (form) {
      form.submit();
    },
  });
});
</script>
