%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/opti/workflow/src/views/hr/job/
Upload File :
Create Path :
Current File : /home/opti/workflow/src/views/hr/job/index.ejs

   <% include ../../partials/header %>

   <!-- ////////////////////////////////////////////////////////////////////////////-->

   <% include ../../partials/sidebar %>
  <!-- <link rel="stylesheet" type="text/css" href="/app-assets/ekko-lightbox/dist/ekko-lightbox.css"> -->

<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/icheck.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/icheck/custom.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/checkboxes-radios.css">

<style>
.modal-header .close {
    padding: 1rem;
    margin: -1rem -1rem -1rem; }
    .modal-header {

  background-color:#2196F3;
    }
    /* .dataTables_filter, .dataTables_info { display: none; } */

</style>

   <div class="app-content content">
     <div class="content-wrapper">
       <div class="content-header row">
       </div>
       <div class="content-body">
         <!-- Breadcrumb starts-->
         <div class="content-header-left col-md-6 col-12 mb-2">
            <h3 class="content-header-title">Jobs</h3>
            <div class="row breadcrumbs-top">
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item"><a href="/hr">Human Resources</a>
                        </li>
                        <li class="breadcrumb-item active">Jobs
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- Breadcrumb ends-->

        <!-- <div class="text-center">
            <a class="quick-btn text-red" href="/accounts/payments/create" >
              <i class="la la-plus fa-2x"></i>
              <span>New Payment</span>
            </a>
        </div> -->
        <%- format_messages(messages) %>

        <section class="row">
            <div class=" col-lg-12 col-md-6 col-sm-12" >
                <div class="card " >
                    <div class="card-header" >
                    <h4 class="card-title">Job Categories</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                                <li><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addCategory"><i class="ft-plus white"></i> Add Job Category</button></li>
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        <!-- <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
                        <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                    </div>
                    <div class="card-content collapse show">
                    <div class="card-body card-dashboard " style="max-height:500px; overflow: scroll">
                            <div class="table-responsive">
                                <table class="table" >
                                    <thead>
                                        <!-- <th>S/N</th> -->
                                        <th>Job Category</th>
                                        <th>Category Description</th>
                                        <th></th>
                                    </thead>

                                    <tbody id="categories">
                                        <% categories.forEach((category, index) => { %>
                                            <tr id="category<%= category.id %>">
                                                <!-- <td><%= index+1 %></td> -->
                                                <td><%= category.title %></td>
                                                <td><%= category.description %> </td>
                                                <td><a class="btn dropdown-item" href="/hr/jobs/add-category" data-toggle="modal" onclick="editCategory('<%= JSON.stringify(category) %>')" value="" data-target="#addCategory"><i class="la la-pencil" ></i> </a></td>
                                            </tr>
                                        <% }) %>

                                    </tbody>
                                </table>
                            </div>

                        </div>

                    </div>


                </div>
            </div>
            <div class="col-lg-12 col-md-6 col-sm-12">
                <div class="card " >
                    <div class="card-header" >
                    <h4 class="card-title">Job Titles</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                                <li><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addTitle"><i class="ft-plus white"></i> Add Job Title</button></li>
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        <!-- <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
                        <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                    </div>
                    <div class="card-content collapse show">
                    <div class="card-body card-dashboard " style="max-height:500px; overflow: scroll">
                            <div class="table-responsive">
                                <table class="table" >
                                    <thead>
                                        <!-- <th style="width:5%">S/N</th> -->
                                        <th>Job Title</th>
                                        <th>Job Description</th>
                                        <th></th>
                                    </thead>

                                    <tbody id="titles">
                                        <% titles.forEach(title => { %>
                                            <tr id="title<%= title.id %>">
                                                <!-- <td></td> -->
                                                <td><%= title.title %></td>
                                                <td><%= title.description %> </td>
                                                <td>
                                                    <a class="btn dropdown-item" href="/hr/jobs/add-title" data-toggle="modal" onclick="editJob('<%= JSON.stringify(title) %>')"  data-target="#addTitle"><i class="la la-pencil" ></i> </a>
                                                </td>
                                            </tr>
                                        <% }) %>

                                    </tbody>
                                </table>
                            </div>


                        </div>

                    </div>


                </div>
            </div>

        </section>

        <section class="row">
            <div class="col-lg-12 col-md-6 col-sm-12">
                <div class="card " >
                    <div class="card-header" >
                    <h4 class="card-title">Salary Components</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                                <li><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addSalary"><i class="ft-plus white"></i> Add Salary Component</button></li>
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        <!-- <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
                        <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                    </div>
                    <div class="card-content collapse show">
                    <div class="card-body card-dashboard " style="max-height:500px; overflow: scroll">
                            <div class="table-responsive">
                                <table class="table" >
                                    <thead>
                                        <th>Component Title</th>
                                        <th>Component Type</th>
                                        <th>Part of Total Payable</th>
                                        <th>Value Type</th>
                                        <th></th>
                                    </thead>

                                    <tbody id="salaries">
                                        <% salaryComponents.forEach(salary => { %>
                                            <tr id="salary<%= salary.id %>">
                                                <td><%= salary.title %></td>
                                                <td><%= salary.type %> </td>
                                                <td><% if(salary.partOfTotal) { %> Yes <% }else{ %> No <% } %> </td>
                                                <td><%= salary.valueType %> </td>
                                                <td>
                                                    <a class="btn dropdown-item" href="/hr/jobs/add-salary-component" data-toggle="modal" onclick="editSalary('<%= JSON.stringify(salary) %>')"  data-target="#addSalary"><i class="la la-pencil" ></i> </a>
                                                </td>
                                            </tr>
                                        <% }) %>

                                    </tbody>
                                </table>
                            </div>


                        </div>

                    </div>


                </div>
            </div>

        </section>


        <section class="row">
            <div class="col-lg-12 col-md-6 col-sm-12">
                <div class="card " >
                    <div class="card-header" >
                    <h4 class="card-title">Employment Status</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                                <li><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addStatus"><i class="ft-plus white"></i> Add Employment Status</button></li>
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        <!-- <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
                        <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                    </div>
                    <div class="card-content collapse show">
                    <div class="card-body card-dashboard " style="max-height:500px; overflow: scroll">
                            <div class="table-responsive">
                                <table class="table" >
                                    <thead>
                                        <th>Status</th>
                                        <th>Description</th>
                                        <th></th>
                                    </thead>

                                    <tbody id="statuses">
                                        <% employmentStatuses.forEach(status => { %>
                                            <tr id="status<%= status.id %>">
                                                <td><%= status.title %></td>
                                                <td><%= status.description %> </td>
                                                <td>
                                                    <a class="btn dropdown-item" href="/hr/jobs/add-employment-status" data-toggle="modal" onclick="editStatus('<%= JSON.stringify(status) %>')"  data-target="#addStatus"><i class="la la-pencil" ></i> </a>
                                                </td>
                                            </tr>
                                        <% }) %>

                                    </tbody>
                                </table>
                            </div>


                        </div>

                    </div>


                </div>
            </div>

        </section>


        <section class="row">
            <div class="col-lg-12 col-md-6 col-sm-12">
                <div class="card " >
                    <div class="card-header" >
                    <h4 class="card-title">Work Shift</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                                <li><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addShift"><i class="ft-plus white"></i> Add Work Shift</button></li>
                                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        <!-- <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
                        <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                        <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                    </div>
                    <div class="card-content collapse show">
                    <div class="card-body card-dashboard " style="max-height:500px; overflow: scroll">
                            <div class="table-responsive">
                                <table class="table" >
                                    <thead>
                                        <th>Shift</th>
                                        <th>Description</th>
                                        <th>Start Time</th>
                                        <th>End Time</th>
                                        <th>Hours</th>
                                        <th></th>
                                    </thead>
                                    <tbody id="shifts">
                                        <% workShifts.forEach(shift => { %>
                                            <tr id="shift<%= shift.id %>">
                                                <td><%= shift.title %></td>
                                                <td><%= shift.description %> </td>
                                                <td><%= shift.from %> </td>
                                                <td><%= shift.to %> </td>
                                                <td><%= shift.from - shift.to %> </td>
                                                <td>
                                                    <a class="btn dropdown-item" href="/hr/jobs/add-employment-shift" data-toggle="modal" onclick="editShift('<%= JSON.stringify(shift) %>')"  data-target="#addShift"><i class="la la-pencil" ></i> </a>
                                                </td>
                                            </tr>
                                        <% }) %>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                    </div>


                </div>
            </div>

        </section>

        <section class="row">
                <div class="col-lg-12 col-md-6 col-sm-12">
                    <div class="card " >
                        <div class="card-header" >
                        <h4 class="card-title">Pay Grade</h4>
                        <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0">
                                    <li><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addPayGrade"><i class="ft-plus white"></i> Add Pay Grade</button></li>
                                    <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <!-- <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li> -->
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                            </ul>
                        </div>
                        </div>
                        <div class="card-content collapse show">
                        <div class="card-body card-dashboard " style="max-height:500px; overflow: scroll">
                                <div class="table-responsive">
                                    <table class="table" >
                                        <thead>
                                            <th>payGrade</th>
                                            <th>Description</th>
                                            <th>Currency</th>
                                            <th>Min Salary</th>
                                            <th>Max Salary</th>
                                            <th></th>
                                        </thead>
                                        <tbody id="payGrades">
                                            <% payGrades.forEach(payGrade => { %>
                                                <tr id="payGrade<%= payGrade.id %>">
                                                    <td><%= payGrade.title %></td>
                                                    <td><%= payGrade.description %> </td>
                                                    <td><%= /* payGrade.currency */"NGN - Nigeria" %> </td>
                                                    <td><%= payGrade.minSalary %> </td>
                                                    <td><%= payGrade.maxSalary %> </td>
                                                    <td>
                                                        <a class="btn dropdown-item" href="/hr/jobs/add-employment-payGrade" data-toggle="modal" onclick="editPayGrade('<%= JSON.stringify(payGrade) %>')"  data-target="#addPayGrade"><i class="la la-pencil" ></i> </a>
                                                    </td>
                                                </tr>
                                            <% }) %>
                                        </tbody>
                                    </table>
                                </div>

                            </div>

                        </div>


                    </div>
                </div>

            </section>

       </div>
     </div>
   </div>
   <!-- ////////////////////////////////////////////////////////////////////////////-->
   <input type="hidden" id="_csrf" name="_csrf" value="<%= _csrfToken %>">
    <!-- /////////// -->


 <div class="modal fade text-left" id="addTitle" tabindex="-1" role="dialog" aria-labelledby="addTitle"
   aria-hidden="true">
   <form action="/hr/jobs/add-title" method="POST" id="addTitleForm" enctype="multipart/form-data">
    <input type="hidden" id="job_id" name="id" >
    <input type="hidden" name="_csrf" value="<%= _csrfToken %>">

      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header bg-blue">
            <h3 class="modal-title" ><span id="_jobModalLabel">Add Job Title</span> </h3>
            <button type="button" class="close " data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
            <div class="modal-body">

                    <div class="form-group">
                        <label for="jobTitle" id="">Job Title :</label>
                        <input type="text" class="form-control" name="title" id="jobTitle"  required value="">

                    </div>
                    <div class="form-group">
                        <label for="jobDescription" >Job Description :</label>
                        <textarea type="text" class="form-control"  name="description" id="jobDescription"  ></textarea>

                    </div>

                    <div class="form-group">
                        <label for="jobCategory" id="">Job Category :</label>
                        <select name="categoryId" id="jobCategoryId">
                            <option  >Select Job Category</option>
                            <% categories.forEach( category => { %>
                                <option value="<%= category.id %>" ><%= category.title %></option>
                            <% }) %>
                        </select>

                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary d" data-dismiss="modal" id="close">Close</button>
                <button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Save </button>
            </div>
        </div>
      </div>

  </form>
 </div>

 <div class="modal fade text-left" id="addCategory" tabindex="-1" role="dialog" aria-labelledby="addCategory"
   aria-hidden="true">
   <form action="/hr/jobs/add-category" method="POST" id="addCategoryForm">
    <input type="hidden" id="category_id" name="id">
    <input type="hidden"  name="_csrf" value="<%= _csrfToken %>">

      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header bg-blue">
            <h3 class="modal-title" ><span id="_categoryModalLabel">Add Job Category</span> </h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="fromContact" id="">Category Title :</label>
                    <input type="text" class="form-control" id="categoryTitle" name="title"  required value="">

                </div>
                <div class="form-group">
                    <label for="fromContact" id="">Category Description :</label>
                    <textarea type="text" class="form-control" id="categoryDescription" name="description"   ></textarea>

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary d" data-dismiss="modal" >Close</button>
                <button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Save </button>
            </div>
        </div>
      </div>

  </form>
 </div>

 <div class="modal fade text-left" id="addSalary" tabindex="-1" role="dialog" aria-labelledby="addSa"
   aria-hidden="true">
   <form action="/hr/jobs/add-category" method="POST" id="addSalaryForm">
    <input type="hidden" id="salary_id" name="id">
    <input type="hidden"  name="_csrf" value="<%= _csrfToken %>">

      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header bg-blue">
            <h3 class="modal-title" ><span id="_salaryModalLabel">Add Salary Component</span> </h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="fromContact" id="">Component Title :</label>
                    <input type="text" class="form-control" id="salaryTitle" name="title"  required value="">

                </div>
                <div class="form-group">
                    <label for="fromContact" id="">Type :</label>
                    <fieldset class="skin skin-flat">
                        <input type="radio" name="type" required value="1" id="typeEarning">
                        <label for="input-radio-15">Earning</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="type" required value="2" id="typeDeduction">
                        <label for="input-radio-15">Deduction</label>


                    </fieldset>

                </div>

                <div class="form-group">
                    <label for="fromContact" id="">Part of Total Salary :</label>
                    <fieldset class="skin skin-flat">
                        <input type="radio" name="partOfTotal" required value="1" id="partOfTotalYes">
                        <label for="input-radio-15">Yes</label> &nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="partOfTotal" required value="2" id="partOfTotalNo">
                        <label for="input-radio-15">No</label>
                    </fieldset>
                    </div>
                    <div class="form-group">
                        <label for="fromContact" id="">Value Type :</label>
                        <fieldset class="skin skin-flat">
                            <input type="radio" name="valueType" required value="1" id="valueAmount">
                            <label for="input-radio-15">Amount</label> &nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="valueType" required value="2" id="valuePercentages">
                            <label for="input-radio-15">Percentage</label>
                        </fieldset>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary d" data-dismiss="modal" >Close</button>
                <button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Save </button>
            </div>
        </div>
      </div>

  </form>
 </div>

 <div class="modal fade text-left" id="addStatus" tabindex="-1" role="dialog" aria-labelledby="addStatus"
 aria-hidden="true">
    <form action="/hr/jobs/add-status" method="POST" id="addStatusForm">
    <input type="hidden" id="status_id" name="id">
    <input type="hidden"  name="_csrf" value="<%= _csrfToken %>">

        <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-blue">
            <h3 class="modal-title" ><span id="_statusModalLabel">Add Employment Status</span> </h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="fromContact" id="">Status :</label>
                    <input type="text" class="form-control" id="statusTitle" name="title"  required value="">

                </div>
                <div class="form-group">
                    <label for="fromContact" id="">Status Description :</label>
                    <textarea type="text" class="form-control" id="statusDescription" name="description"   ></textarea>

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary d" data-dismiss="modal" >Close</button>
                <button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Save </button>
            </div>
        </div>
        </div>

</form>
</div>

<div class="modal fade text-left" id="addShift" tabindex="-1" role="dialog" aria-labelledby="addShift"
 aria-hidden="true">
    <form action="/hr/jobs/add-shift" method="POST" id="addShiftForm">
    <input type="hidden" id="shift_id" name="id">
    <input type="hidden"  name="_csrf" value="<%= _csrfToken %>">

        <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-blue">
            <h3 class="modal-title" ><span id="_shiftModalLabel">Add Work Shift</span> </h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">


                <div class="form-group">
                    <label for="fromContact" id="">Shift  :</label>
                        <input type="text" class="form-control" id="shiftTitle" name="title"   >

                </div>
                <div class="form-group">
                        <label for="fromContact" id="">Description :</label>
                        <textarea type="text" class="form-control" id="shiftDescription" name="description"   ></textarea>

                    </div>
                <div class="form-group">
                    <label for="fromContact" id="">Start Time :</label>
                    <input type="time" class="form-control" id="from" name="from"  required value="">

                </div>
                <div class="form-group">
                    <label for="fromContact" id="">End Time :</label>
                    <input type="time" class="form-control" id="to" name="to"  required value="">

                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary d" data-dismiss="modal" >Close</button>
                <button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Save </button>
            </div>
        </div>
        </div>

</form>
</div>

<div class="modal fade text-left" id="addPayGrade" tabindex="-1" role="dialog" aria-labelledby="addPayGrade"
 aria-hidden="true">
    <form action="/hr/jobs/add-payGrade" method="POST" id="addPayGradeForm">
    <input type="hidden" id="payGrade_id" name="id">
    <input type="hidden"  name="_csrf" value="<%= _csrfToken %>">

        <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-blue">
            <h3 class="modal-title" ><span id="_payGradeModalLabel">Add Pay Grade</span> </h3>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">


                <div class="form-group">
                    <label for="fromContact" id="">Pay Grade  :</label>
                        <input type="text" class="form-control" id="payGradeTitle" name="title"   >

                </div>
                <div class="form-group">
                    <label for="fromContact" id="">Description :</label>
                    <textarea type="text" class="form-control" id="payGradeDescription" name="description"   ></textarea>

                </div>
                <div class="form-group">
                    <label for="fromContact" id="">Currency :</label>
                    <select name="currencyId" id="currencyId">
                        <option value="1">NGN - Nigeria</option>
                    </select>

                </div>


                <div class="form-group">
                    <label for="fromContact" id="">Minimum Salary :</label>
                    <input type="number" class="form-control" id="minSalary" name="minSalary"  required value="">

                </div>
                <div class="form-group">
                    <label for="fromContact" id="">Maximum Salary :</label>
                    <input type="number" class="form-control" id="maxSalary" name="maxSalary"  required value="">

                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary d" data-dismiss="modal" >Close</button>
                <button type="submit" class="btn btn-info " ><i class="la la-check" ></i> Save </button>
            </div>
        </div>
        </div>

</form>
</div>


  <% include ../../partials/footer %>
  <!-- <script src="/app-assets/ekko-lightbox/dist/ekko-lightbox.js"></script> -->
 <script>

//   // Ekko lightbox Initialization
// 	$(document).on('click', '[data-toggle="lightbox"]', function(event) {
// 		event.preventDefault();
// 		$(this).ekkoLightbox();
//   });

    // let category_count = parseInt("<%= categories.length %>");
    // let title_count = parseInt("<%= titles.length %>");

    $("#addTitleForm").on('submit',(event)=>{
        $('#spinnerContainer').addClass('show');
        event.preventDefault();

        var data = getFormData($('#addTitleForm'))

        $.ajax({
			type: "POST", // Post / Get method
			url: "/hr/jobs/add-title", //Where form data is sent on submission
			dataType: "text", // Data type, HTML, json etc.
			data: data, //Form variables
			success: function (response) {
				$('#spinnerContainer').removeClass('show');
				// data = JSON.parse(data);
				response = JSON.parse(response);
				// console.log(data)
				if(response.status == "success"){
                    job = response.job;
                    // console.log(category)
                    var tr = `

                            <td>${job.title}</td>
                            <td> ${job.description} </td>
                            <td><a class="btn dropdown-item" href="/hr/jobs/add-category" data-toggle="modal" onclick="editJob('${JSON.stringify(JSON.stringify(job))}')" value="" data-target="#addCategory"><i class="la la-pencil" ></i> </a></td>`;

                    if(data.id){
                        $(`#title${data.id}`).html(tr);
                    }
                    else{
    					$('#categories').append("<tr>"+tr+"</tr>");
                    }

                    toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                    $('#title_id').val('')
                    $('#jobTitle').val('')
                    $('#jobDescription').val('');
                    // $('#jobCategoryId').val('')
                    $( "#jobCategoryId option[value='']" ).attr( 'selected' , 'selected' )
                    $('#_jobModalLabel').html("Add Job Title")
                }

                else{
                    toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                }



                $(".d").trigger('click');
			},
			error:function (error){
				$('#spinnerContainer').removeClass('show');
				alert(error.message)

			}
		})
    })

    function editJob(job){
        job = JSON.parse(job);
        $('#_jobModalLabel').html("Edit Job Title")
        $('#job_id').val(job.id)
        $('#jobTitle').val(job.title)
        $(`#jobCategoryId option[value=${job.categoryId}]`).attr( 'selected' , 'selected' )
        $('#jobDescription').val(job.description)
    }

    $("#addCategoryForm").on('submit',(event)=>{
        $('#spinnerContainer').addClass('show');
        event.preventDefault();

        var data = getFormData($('#addCategoryForm'))

        $.ajax({
			type: "POST", // Post / Get method
			url: "/hr/jobs/add-category", //Where form data is sent on submission
			dataType: "text", // Data type, HTML, json etc.
			data: data, //Form variables
			success: function (response) {
				$('#spinnerContainer').removeClass('show');
				response = JSON.parse(response);
				// console.log(data)
				if(response.status == "success"){
                     category = response.category;
                    // console.log(category)

                    var tr =
                            `<td>${category.title}</td>
                            <td> ${category.description} </td>
                            <td><a class="btn dropdown-item" href="/hr/jobs/add-category" data-toggle="modal" onclick="editCategory('${JSON.stringify(JSON.stringify(category))}')" value="" data-target="#addCategory"><i class="la la-pencil" ></i> </a></td>`

                    if(data.id){
                        $(`#category${data.id}`).html(tr);

                    }
                    else{
                        $('#categories').append("<tr>"+tr+"</tr>");
                    }

                    toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                    $('#category_id').val('')
                    $('#categoryTitle').val('')
                    $('#categoryDescription').val('')
                    $('#_categoryModalLabel').html("Add Job Category")

                }


                else{
                    toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});
                }
                $(".d").trigger('click');

			},
			error:function (error){
				$('#spinnerContainer').removeClass('show');
				alert(error.message)

			}
		})
    })


    function editCategory(category){
        category = JSON.parse(category);
        $('#_categoryModalLabel').html("Edit Job Category")
        $('#category_id').val(category.id)
        $('#categoryTitle').val(category.title)
        $('#categoryDescription').val(category.description)
    }

    $("#addSalaryForm").on('submit',(event)=>{
        $('#spinnerContainer').addClass('show');
        event.preventDefault();

        var data = getFormData($('#addSalaryForm'))

        $.ajax({
			type: "POST", // Post / Get method
			url: "/hr/jobs/add-salary-component", //Where form data is sent on submission
			dataType: "text", // Data type, HTML, json etc.
			data: data, //Form variables
			success: function (response) {
				$('#spinnerContainer').removeClass('show');
				response = JSON.parse(response);
				// console.log(data)
				if(response.status == "success"){
                     salary = response.salary;
                    // console.log(salary)

                    var tr =
                            `<td>${salary.title}</td>
                            <td> ${salary.type} </td>
                            <td> ${salary.partOfTotal ? "Yes" : "No"} </td>
                            <td> ${salary.valueType} </td>
                            <td><a class="btn dropdown-item" href="/hr/jobs/add-salary" data-toggle="modal" onclick="editSalary('${JSON.stringify(JSON.stringify(salary))}')" value="" data-target="#addSalary"><i class="la la-pencil" ></i> </a></td>`

                    if(data.id){
                        $(`#salary${data.id}`).html(tr);

                    }
                    else{
                        $('#categories').append("<tr>"+tr+"</tr>");
                    }

                    toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                    $('#salary_id').val('')
                    $('#salaryTitle').val('')
                    $('#salaryDescription').val('')
                    $('#_salaryModalLabel').html("Add Salary Component")

                }

                else{
                    toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                }



                $(".d").trigger('click');
			},
			error:function (error){
				$('#spinnerContainer').removeClass('show');
				alert(error.message)

			}
		})
    })


    function editSalary(salary){
        salary = JSON.parse(salary);
        $('#_salaryModalLabel').html("Edit Salary Component")
        $('#salary_id').val(salary.id)
        
        $('#salaryTitle').val(salary.title)
    }

    $("#addStatusForm").on('submit',(event)=>{
        $('#spinnerContainer').addClass('show');
        event.preventDefault();

        var data = getFormData($('#addStatusForm'))

        $.ajax({
			type: "POST", // Post / Get method
			url: "/hr/jobs/add-employment-status", //Where form data is sent on submission
			dataType: "text", // Data type, HTML, json etc.
			data: data, //Form variables
			success: function (response) {
				$('#spinnerContainer').removeClass('show');
				response = JSON.parse(response);
				// console.log(response)
				if(response.status == "success"){
                    employmentStatus = response.employmentStatus;
                    // console.log(response.employmentStatus)

                    var tr =
                            `<td>${employmentStatus.title}</td>
                            <td> ${employmentStatus.description} </td>
                            <td><a class="btn dropdown-item" href="/hr/jobs/add-status" data-toggle="modal" onclick="editStatus('${JSON.stringify(JSON.stringify(employmentStatus))}')" value="" data-target="#addStatus"><i class="la la-pencil" ></i> </a></td>`

                    if(data.id){
                        $(`#status${data.id}`).html(tr);

                    }
                    else{
                        $('#statuses').append("<tr>"+tr+"</tr>");
                    }

                    toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                    $('#status_id').val('')
                    $('#statusTitle').val('')
                    $('#statusDescription').val('')
                    $('#_statusModalLabel').html("Add Employment Status")

                }

                else{
                    toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                }
                $(".d").trigger('click');
			},
			error:function (error){
				$('#spinnerContainer').removeClass('show');
				alert(error.message)

			}
		})
    })


    function editStatus(employmentStatus){
        employmentStatus = JSON.parse(employmentStatus);
        $('#_statusModalLabel').html("Edit Employment Status")
        $('#status_id').val(employmentStatus.id)
        $('#statusTitle').val(employmentStatus.title)
        $('#statusDescription').val(employmentStatus.description)
    }

    $("#addShiftForm").on('submit',(event)=>{
        $('#spinnerContainer').addClass('show');
        event.preventDefault();

        var data = getFormData($('#addShiftForm'))

        $.ajax({
			type: "POST", // Post / Get method
			url: "/hr/jobs/add-work-shift", //Where form data is sent on submission
			dataType: "text", // Data type, HTML, json etc.
			data: data, //Form variables
			success: function (response) {
				$('#spinnerContainer').removeClass('show');
				response = JSON.parse(response);
				// console.log(response)
				if(response.status == "success"){
                    workShift = response.workShift;
                    // console.log(response.workShift)

                    var tr =
                            `<td>${workShift.title}</td>
                            <td> ${workShift.description} </td>
                            <td> ${workShift.from} </td>
                            <td> ${workShift.to} </td>
                            <td> ${workShift.to} </td>
                            <td><a class="btn dropdown-item" href="/hr/jobs/add-shift" data-toggle="modal" onclick="editShift('${JSON.stringify(JSON.stringify(workShift))}')" value="" data-target="#addShift"><i class="la la-pencil" ></i> </a></td>`

                    if(data.id){
                        $(`#shift${data.id}`).html(tr);

                    }
                    else{
                        $('#shifts').append("<tr>"+tr+"</tr>");
                    }

                    toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                    $('#shift_id').val('')
                    $('#shiftTitle').val('')
                    $('#shiftDescription').val('')
                    $('#from').val('')
                    $('#to').val('')
                    $('#_shiftModalLabel').html("Add Work Shift")

                }

                else{
                    toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                }
                $(".d").trigger('click');
			},
			error:function (error){
				$('#spinnerContainer').removeClass('show');
				alert(error.message)

			}
		})
    })


    function editShift(workShift){
        workShift = JSON.parse(workShift);
        $('#_shiftModalLabel').html("Edit Work Shift")
        $('#shift_id').val(workShift.id)
        $('#shiftTitle').val(workShift.title)
        $('#shiftDescription').val(workShift.description)
        $('#shiftDescription').val(workShift.description)
        document.getElementById('from').valueAsDate = new Date(workShift.from);
        document.getElementById('to').valueAsDate = new Date(workShift.to);
    }


    $("#addPayGradeForm").on('submit',(event)=>{
        $('#spinnerContainer').addClass('show');
        event.preventDefault();

        var minSalary = parseFloat($("#minSalary").val());
        var maxSalary = parseFloat($("#maxSalary").val());
        if(minSalary > maxSalary){
        $('#spinnerContainer').removeClass('show');

            return toastr.info("Minimum Salary can not be greater than Maximum Salary", '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

        }
        var data = getFormData($('#addPayGradeForm'))


        $.ajax({
			type: "POST", // Post / Get method
			url: "/hr/jobs/add-pay-grade", //Where form data is sent on submission
			dataType: "text", // Data type, HTML, json etc.
			data: data, //Form variables
			success: function (response) {
				$('#spinnerContainer').removeClass('show');
				response = JSON.parse(response);
				// console.log(response)
				if(response.status == "success"){
                    payGrade = response.payGrade;
                    // console.log(response.payGrade)

                    var tr =
                            `<td>${payGrade.title}</td>
                            <td> ${payGrade.description} </td>
                            <td> NGN - Nigeria </td>
                            <td> ${payGrade.minSalary} </td>
                            <td> ${payGrade.maxSalary} </td>
                            <td><a class="btn dropdown-item" href="/hr/jobs/add-payGrade" data-toggle="modal" onclick="editPayGrade('${JSON.stringify(JSON.stringify(payGrade))}')" value="" data-target="#addPayGrade"><i class="la la-pencil" ></i> </a></td>`

                    if(data.id){
                        $(`#payGrade${data.id}`).html(tr);

                    }
                    else{
                        $('#payGrades').append("<tr>"+tr+"</tr>");
                    }

                    toastr.success(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                    $('#payGrade_id').val('')
                    $('#payGradeTitle').val('')
                    $('#payGradeDescription').val('')
                    // $('#from').val('')
                    $('#payGradeMinSalary').val('')
                    $('#payGradeMaxSalary').val('')
                    $('#_payGradeModalLabel').html("Add Pay Grade")

                }

                else{
                    toastr.error(response.msg, '', {"showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 3000});

                }
                $(".d").trigger('click');
			},
			error:function (error){
				$('#spinnerContainer').removeClass('show');
				alert(error.message)

			}
		})
    })


    function editPayGrade(payGrade){
        payGrade = JSON.parse(payGrade);
        $('#_payGradeModalLabel').html("Edit Pay Grade")
        $('#payGrade_id').val(payGrade.id)
        $('#payGradeTitle').val(payGrade.title)
        $('#payGradeDescription').val(payGrade.description)
        // $('#payGradeCurrency').val(payGrade.currency)
        $('#payGradeCurrency').val(payGrade.currency)
        $('#payGradeMinSalary').val(payGrade.minSalary)
        $('#payGradeMaxSalary').val(payGrade.maxSalary)
    }



    function getFormData(form) {
        var rawJson = form.serializeArray();
        var model = {};

        $.map(rawJson, function (n, i) {
            model[n['name']] = n['value'];
        });

        return model;
    }
</script>

Zerion Mini Shell 1.0