<%- include('../../common/header') %> 
<%- include('../../common/side-bar') %>

<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <%- include('../../common/navbar') %>
    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-xl-3 col-sm-3 mb-xl-0 mb-4">
        </div>
        <div class="col-xl-6 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                  <h6 class="text-white text-capitalize ps-3">Add New Employee</h6>
                </div>
              </div>
            <div class="card-body px-3 pb-2">


                <form role="form" action="/employee/store" method="post">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                    <div class="form-group">
                        <label for="name">Employee Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Enter Employee Name" name="name">
                    </div>
                    <div class="form-group">
                        <label for="designation">Designation</label>
                        <input type="text" class="form-control" id="designation" placeholder="Enter designation" name="designation">
                    </div>
                    <!-- <div class="form-group">
                        <label for="emp_id">Emp ID</label>
                        <input type="text" class="form-control" id="emp_id" placeholder="Enter emp ID" name="emp_id">
                    </div> -->

                    <div class="form-group">
                        <label for="doj">Date of Joining</label>
                        <input type="date" class="form-control" id="doj" name="doj">
                    </div>
                    <div class="form-group">
                        <label for="pf_acc_no">PF Account No</label>
                        <input type="text" class="form-control" id="pf_acc_no" placeholder="Enter PF Account No" name="pf_acc_no">
                    </div>
                    <div class="form-group">
                        <label for="bank_acc_no">Bank Account No</label>
                        <input type="text" class="form-control" id="bank_acc_no" placeholder="Enter Bank Account No" name="bank_acc_no">
                    </div>
                    <div class="form-group">
                        <label for="uan">UAN No</label>
                        <input type="text" class="form-control" id="uan" placeholder="Enter UAN No" name="uan">
                    </div>
                    <div class="form-group">
                        <label for="esi">ESI No</label>
                        <input type="text" class="form-control" id="esi" placeholder="Enter ESI No" name="esi">
                    </div>
                    <div class="form-group">
                        <label for="official_email">Official Email</label>
                        <input type="email" class="form-control" id="official_email" placeholder="Enter Official Email" name="official_email">
                    </div>
                    <div class="form-group">
                        <label for="alter_email">Alternate Email</label>
                        <input type="email" class="form-control" id="alter_email" placeholder="Enter Alternate Email" name="alter_email">
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone</label>
                        <input type="text" class="form-control" id="phone" placeholder="Enter Phone" name="phone">
                    </div>
                    <div class="form-group">
                        <label for="alter_phone">Alternate Phone</label>
                        <input type="text" class="form-control" id="alter_phone" placeholder="Enter Alternate Phone" name="alter_phone">
                    </div>
                    <div class="form-group">
                        <label for="bank_name">Bank Name</label>
                        <input type="text" class="form-control" id="bank_name" placeholder="Enter Bank Name" name="bank_name">
                    </div>
                    <div class="form-group">
                        <label for="ifsc">Bank IFSC</label>
                        <input type="text" class="form-control" id="ifsc" placeholder="Enter Bank IFSC" name="ifsc">
                    </div>
                    <div class="form-group">
                        <label for="permanent_address">Permanent Address</label>
                        <input type="text" class="form-control" id="permanent_address" placeholder="Enter Permanent Address" name="permanent_address">
                    </div>
                    <div class="form-group">
                        <label for="current_address">Current Address</label>
                        <input type="text" class="form-control" id="current_address" placeholder="Enter Current Address" name="current_address">
                    </div>
                    <div class="form-group">
                        <label for="year_of_exp">Year Of Experience</label>
                        <input type="text" class="form-control" id="year_of_exp" placeholder="Enter Year Of Experience" name="year_of_exp">
                    </div>
                    <div class="form-group">
                        <label for="pancard">Pancard</label>
                        <input type="text" class="form-control" id="pancard" placeholder="Enter Pancard" name="pancard">
                    </div>
                    <div class="form-group">
                        <label for="assets">Assets</label>
                        <input type="text" class="form-control" id="assets" placeholder="Enter Assets Ex. Laptop, Charger etc" name="assets">
                    </div>

                    <div class="form-group">
                        <label for="assets_given_date">Assets Given Date</label>
                        <input type="date" class="form-control" id="assets_given_date" name="assets_given_date">
                    </div>
                    <div class="form-group">
                        <label for="assets_return_date">Assets Return Date</label>
                        <input type="date" class="form-control" id="assets_return_date" name="assets_return_date">
                    </div>
                    <div class="form-group">
                        <label for="dob">Date of Birth</label>
                        <input type="date" class="form-control" id="dob" name="dob">
                    </div>
                    <!-- <div class="form-group">
                        <label for="exampleFormControlSelect1">Example select</label>
                        <select class="form-control" id="exampleFormControlSelect1">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlSelect2">Example multiple select</label>
                        <select multiple class="form-control" id="exampleFormControlSelect2">
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlTextarea1">Example textarea</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                    </div> -->
                    <div class="form-group">
                        <input type="submit" value="Save" class="btn btn-success">
                    </div>
                </form>



         </div>
        </div>
        </div>
        </div>
    </div>
</main>
<style>



.ui.dropdown {
  max-width: 800px;
}

@media only screen and (max-width: 767px) {
  .ui.selection.dropdown .menu {
    /*      max-height: 8.01428571rem; /* + 1.335714285 to 9.349999995rem */
    /*      max-height: 9.349999995rem; /* Adds a half */
    max-height: 16.02857142rem; /* Double size */
  }
}
@media only screen and (min-width: 768px) {
  .ui.selection.dropdown .menu {
    /*         max-height: 10.68571429rem; /* + 1.3357142863 to 12.0214285763rem */
    max-height: 12.0214285763rem;
  }
}
@media only screen and (min-width: 992px) {
  .ui.selection.dropdown .menu {
    max-height: 16.02857143rem; /* + 1.3357142858 to 17.3642857158rem */
  }
}
@media only screen and (min-width: 1920px) {
  .ui.selection.dropdown .menu {
    max-height: 21.37142857rem; /* + 1.3357142856 to 22.7071428556rem */
  }
}

</style>

<%- include('../../common/footer') %> 
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.13/dist/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.2.13/dist/semantic.min.css">
<script>

$('.label.ui.dropdown')
  .dropdown();

$('.no.label.ui.dropdown')
  .dropdown({
  useLabels: false
});

$('.ui.button').on('click', function () {
  $('.ui.dropdown')
    .dropdown('restore defaults')
})


</script>