<?php echo $__env->make('header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<style>
    h1 {
 text-align: center;
}
h2 {
 margin: 0;
}
#multi-step-form-container {
 margin-top: 1rem;
}
.text-center {
 text-align: center;
}
.mx-auto {
 margin-left: auto;
 margin-right: auto;
}
.pl-0 {
 padding-left: 0;
}
.button {
 padding: 0.7rem 1.5rem;
 border: 1px solid #4361ee;
 background-color: #4361ee;
 color: #fff;
 border-radius: 5px;
 cursor: pointer;
}
.submit-btn {
 border: 1px solid #0e9594;
 background-color: #0e9594;
}
.mt-3 {
 margin-top: 1rem;
}
.d-none {
 display: none;
}
.form-step, .form-step2 {
 /*border: 1px solid rgba(0, 0, 0, 0.1);*/
 /*border-radius: 20px;*/
 padding: 1rem;
}
.font-normal {
 font-weight: normal;
}
ul.form-stepper {
 counter-reset: section;
 margin-bottom: 0.5rem;
}
ul.form-stepper .form-stepper-circle {
 position: relative;
}
ul.form-stepper .form-stepper-circle span {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
}
.form-stepper-horizontal {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
}
ul.form-stepper > li:not(:last-of-type) {
 margin-bottom: 0.625rem;
 -webkit-transition: margin-bottom 0.4s;
 -o-transition: margin-bottom 0.4s;
 transition: margin-bottom 0.4s;
}
.form-stepper-horizontal > li:not(:last-of-type) {
 margin-bottom: 0 !important;
}
.form-stepper-horizontal li {
 position: relative;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
 -webkit-box-align: start;
 -ms-flex-align: start;
 align-items: start;
 -webkit-transition: 0.5s;
 transition: 0.5s;
}
.form-stepper-horizontal li:not(:last-child):after {
 position: relative;
 -webkit-box-flex: 1;
 -ms-flex: 1;
 flex: 1;
 height: 1px;
 content: "";
 top: 32%;
}
.form-stepper-horizontal li:after {
 background-color: #dee2e6;
}
.form-stepper-horizontal li.form-stepper-completed:after {
 background-color: #4da3ff;
}
.form-stepper-horizontal li:last-child {
 flex: unset;
}
ul.form-stepper li a .form-stepper-circle {
 display: inline-block;
 width: 40px;
 height: 40px;
 margin-right: 0;
 line-height: 1.7rem;
 text-align: center;
 background: rgba(0, 0, 0, 0.38);
 border-radius: 50%;
}
.form-stepper .form-stepper-active .form-stepper-circle, .form-stepper .form-stepper-active2 .form-stepper-circle, {
 background-color: #4361ee !important;
 color: #fff;
}
.form-stepper .form-stepper-active .label, .form-stepper .form-stepper-active2 .label, {
 color: #4361ee !important;
}
.form-stepper .form-stepper-active .form-stepper-circle:hover, .form-stepper .form-stepper-active2 .form-stepper-circle:hover, {
 background-color: #4361ee !important;
 color: #fff !important;
}
.form-stepper .form-stepper-unfinished .form-stepper-circle , .form-stepper .form-stepper-unfinished2 .form-stepper-circle {
 background-color: #f8f7ff;
}
.form-stepper .form-stepper-completed .form-stepper-circle {
 background-color: #0e9594 !important;
 color: #fff;
}
.form-stepper .form-stepper-completed .label {
 color: #0e9594 !important;
}
.form-stepper .form-stepper-completed .form-stepper-circle:hover {
 background-color: #0e9594 !important;
 color: #fff !important;
}
.form-stepper .form-stepper-active span.text-muted, .form-stepper .form-stepper-active2 span.text-muted {
 color: #fff !important;
}
.form-stepper .form-stepper-completed span.text-muted {
 color: #fff !important;
}
.form-stepper .label {
 font-size: 1rem;
 /* margin-top: 0.2rem; */
}
.form-stepper a {
 cursor: default;
 text-decoration:none;
}
.form-group{
 margin-bottom:5px !important;
}
.form-group label{
 /* font-weight:bold; */
 color: #4361ee !important;
}
</style>

       <!--start content-->
       <main class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
          <div class="breadcrumb-title pe-3">Dashboard</div>
          <div class="ps-3">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Employee</li>
              </ol>
            </nav>
          </div>

          
        </div>
        <!--end breadcrumb-->

           <div class="card">
             <div class="card-body">
               <div class="d-flex align-items-center">
                  <h5 class="mb-0">Users</h5>
                   <form class="ms-auto position-relative">
                     <div class="position-absolute top-50 translate-middle-y search-icon px-3"><i class="bi bi-search"></i></div>
                     <input class="form-control ps-5" type="text" placeholder="search">
                   </form>
               </div>
               <!-- <div style="display:flex;"> -->
                  <form class="ms-auto" id="addForm" action="add_employee" method="post" enctype="multipart/form-data">
                    <?php echo csrf_field(); ?>
                    <div class="btn-group">
                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleVerticallycenteredModal">Add Employee</button>  
                      <a href="" class="btn btn-success">Export to CSV</a>

                      <div class="modal fade" id="exampleVerticallycenteredModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-md">
                          <div class="modal-content">
                            <div class="modal-header border border-0">
                              <h5 class="modal-title">Add Employee</h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">

                              <div class="it-student-regiform" id="multi-step-form-container">
                                <!-- Form Steps / Progress Bar -->
                                <ul class="form-stepper form-stepper-horizontal text-center mx-auto pl-0">
                                        <!-- Step 1 -->
                                        <li class="form-stepper-active text-center form-stepper-list" step="1">
                                            <a class="mx-2">
                                                <span class="form-stepper-circle">
                                                        <span>1</span>
                                                </span>
                                                <div class="label">Details</div>
                                            </a>
                                        </li>
                                        <!-- Step 2 -->
                                        <li class="form-stepper-unfinished text-center form-stepper-list" step="2">
                                            <a class="mx-2">
                                                <span class="form-stepper-circle text-muted">
                                                        <span>2</span>
                                                </span>
                                                <div class="label text-muted">Add Referee </div>
                                            </a>
                                        </li>

                                        <li class="form-stepper-unfinished text-center form-stepper-list" step="3">
                                          <a class="mx-2">
                                              <span class="form-stepper-circle text-muted">
                                                      <span>3</span>
                                              </span>
                                              <div class="label text-muted">Add Photo </div>
                                          </a>
                                        </li>
                                        
                                </ul>
                                <!-- Step Wise Form Content -->
                              </div>

                              <section id="step-1" class="form-step">  
                                <h6 class="font-weight-light text-primary">Enter Employee Details</h6> 

                                    <div class="col-md-12 mb-3">
                                      <label for="validationDefault01" class="form-label">Full name</label>
                                      <input type="text"  name="name" class="form-control"  value="" required>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                      <label for="validationDefault01" class="form-label">Address</label>
                                      <input type="text" id="address" name="address" class="form-control"  value="" required>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                      <label for="validationDefault01" class="form-label">Phone</label>
                                      <input type="text" id="phone" name="phone" class="form-control"  value="" required>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                      <label for="validationDefault01" class="form-label">Position</label>
                                      <input type="text" id="position" name="position" class="form-control"  value="" required>
                                    </div>
                                    
                                    <div class="col-md-12 mb-3">
                                      <label for="validationDefault01" class="form-label">Salary</label>
                                      <input type="text" id="salary" name="salary" class="form-control"  value="" required>
                                    </div>
                                    <div class="col-md-12 mb-3">
                                      <label for="validationDefault01" class="form-label">Status</label>
                                      <select name="status" id="status" class="form-control">
                                        <option>Active</option>
                                        <option>In Active</option>
                                      </select>
                                    </div>
                                    
                                    <div class="col-md-12 mb-3">
                                      <label for="validationDefault01" class="form-label">Date Employed</label>
                                      <input type="date" name="date_employed" class="form-control"  value="" required>
                                    </div>
                                    <div class="mt-3">
                                      <button class="button btn-navigate-form-step" type="button" step_number="2">Next</button>
                                  </div>
                              </section>

                              <section id="step-2" class="form-step d-none">
                                <h5 class="font-weight-light  text-primary">Referee info</h5>

                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Full name</label>
                                    <input type="text" id="rname" name="rname" class="form-control"  value="" required>
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Relationship</label>
                                    <input type="text" id="relationship" name="relationship" class="form-control"  value="" required>
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Company</label>
                                    <input type="text" id="company" name="company" class="form-control"  value="" required>
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">title</label>
                                    <input type="text" id="title" name="title" class="form-control"  value="" required>
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Email</label>
                                    <input type="text" id="remail" name="remail" class="form-control"  value="">
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Phone</label>
                                    <input type="text" id="rphone" name="rphone" class="form-control"  value="" required>
                                  </div>
                                  <hr>

                                  
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Full name</label>
                                    <input type="text" id="rname2" name="rname2" class="form-control"  value="" required>
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Relationship</label>
                                    <input type="text" id="relationship2" name="relationship2" class="form-control"  value="" required>
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Company</label>
                                    <input type="text" id="company2" name="company2" class="form-control"  value="" required>
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">title</label>
                                    <input type="text" id="title2"  name="title2" class="form-control"  value="" required>
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Email</label>
                                    <input type="text" id="remail2" name="remail2" class="form-control"  value="" required>
                                  </div>
                                  <div class="col-md-12 mb-3">
                                    <label for="validationDefault01" class="form-label">Phone</label>
                                    <input type="text" id="rphone2"  name="rphone2" class="form-control"  value="" required>
                                  </div>

                                  <div class="mt-3">
                                    <button class="button btn-navigate-form-step" type="button" step_number="1">Prev</button>
                                    <button class="button btn-navigate-form-step" type="button" step_number="3">Next</button>                                    
                                  </div>

                                
                              </section>
                              
                              <section id="step-3" class="form-step d-none">
                                <h6 class="font-weight-light text-primary">Add Passport</h6> 
                                <div class="col-md-12 mb-3">
                                  <label for="validationDefault01" class="form-label">Photo</label>
                                  <input type="file" id="photo" name="photo" class="form-control" required>
                                </div>
                                <div class="image-preview" id="imagePreview"></div>
                                <script>
                                  // JavaScript to handle image preview
                                  const imageInput = document.getElementById('photo');
                                  const imagePreview = document.getElementById('imagePreview');

                                  imageInput.addEventListener('change', function() {
                                      imagePreview.innerHTML = ''; // Clear existing previews

                                      const files = this.files;
                                      for (let i = 0; i < files.length; i++) {
                                          const file = files[i];

                                          if (file.type.startsWith('image/')) {
                                              const reader = new FileReader();

                                              reader.onload = function(e) {
                                                  const img = document.createElement('img');
                                                  img.src = e.target.result;
                                                  img.style.height = "200px"
                                                  imagePreview.appendChild(img);
                                              };

                                              reader.readAsDataURL(file);
                                          }
                                      }
                                  });
                                </script>
                                <div class="mt-3">
                                  <button class="button btn-navigate-form-step" type="button" step_number="2">Prev</button>    
                                  <button type="submit" data-bs-dismiss="modal" class="btn btn-primary">Save changes</button>                                
                                </div>
                              </section>


                            </div>
                            <div class="modal-footer border border-0">
                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                              <button type="submit" data-bs-dismiss="modal" class="btn btn-primary">Save changes</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div> 
                  </form>
               <!-- </div> -->
                             
               <div class="table-responsive mt-3">
                 <table class="table align-middle">
                   <thead class="table-secondary">
                     <tr>
                      <th>#</th>
                      <th>Name</th>
                      <th>Photo</th>
                      <th>Phone</th>
                      <th>Position</th>
                      <th>Date Employed</th>
                      <!-- <th>Actual Salary</th>
                      <th>Paid Salary</th>
                      <th>Deduction</th> -->
                      <th>Actions</th>
                     </tr>
                   </thead>
                   <tbody id="tableBody">
                     <?php $__currentLoopData = $employees; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $employee): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                          <tr>
                            <td>#</td>
                            <td><?php echo e($employee->name); ?></td>
                            <td> <img src="public/photo/<?php echo e($employee->photo); ?>" alt="" style="width:100px"> </td>
                            <td><?php echo e($employee->phone); ?></td>
                            <td><?php echo e($employee->position); ?></td>
                            <td><?php echo e($employee->date_employed); ?></td>
                            <!-- <td><?php echo e($employee->salary); ?></td>
                            <td><?php echo e($employee->paid_salary); ?></td>
                            <td><?php echo e($employee->deduction); ?></td> -->
                            <td>
                                <div class="table-actions d-flex align-items-center gap-3 fs-6">
                                    <input class="id" type="hidden" value="'+item.id+'">
                                      <a class="text-primary" data-bs-toggle="modal" data-bs-target="#updateModal<?php echo e($employee->id); ?>" title="Edit">
                                        <i class="bi bi-pencil-fill"></i>
                                      </a>
                                        <div class="modal fade" id="updateModal<?php echo e($employee->id); ?>" tabindex="-1" aria-hidden="true">
                                          <div class="modal-dialog modal-dialog-centered">
                                            <form action="update_employee" class="modal-content" method="post">
                                              <?php echo csrf_field(); ?>
                                              <div class="modal-header border border-0">
                                                <h5 class="modal-title">Update Employee</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                              </div>
                                              <div class="modal-body">
                                                <input type="hidden" name="id" value="<?php echo e($employee->id); ?>">
                                                <div class="it-student-regiform" id="multi-step-form-container">
                                                  <!-- Form Steps / Progress Bar -->
                                                  <ul class="form-stepper form-stepper-horizontal text-center mx-auto pl-0">
                                                          <!-- Step 1 -->
                                                          <li class="form-stepper-active2 text-center form-stepper-list2" step="1">
                                                              <a class="mx-2">
                                                                  <span class="form-stepper-circle">
                                                                          <span>1</span>
                                                                  </span>
                                                                  <div class="label">Details</div>
                                                              </a>
                                                          </li>
                                                          <!-- Step 2 -->
                                                          <li class="form-stepper-unfinished2 text-center form-stepper-list2" step="2">
                                                              <a class="mx-2">
                                                                  <span class="form-stepper-circle text-muted">
                                                                          <span>2</span>
                                                                  </span>
                                                                  <div class="label text-muted">Add Referee </div>
                                                              </a>
                                                          </li>

                                                          <li class="form-stepper-unfinished2 text-center form-stepper-list2" step="3">
                                                            <a class="mx-2">
                                                                <span class="form-stepper-circle text-muted">
                                                                        <span>3</span>
                                                                </span>
                                                                <div class="label text-muted">Add Photo </div>
                                                            </a>
                                                          </li>
                                                          
                                                  </ul>
                                                  <!-- Step Wise Form Content -->
                                                </div>

                                                <section id="step2-1" class="form-step2">  
                                                  <h6 class="font-weight-light text-primary">Enter Employee Details</h6> 

                                                      <div class="col-md-12 mb-3">
                                                        <label for="validationDefault01" class="form-label">Full name</label>
                                                        <input type="text"  name="name" class="form-control"  value="" required>
                                                      </div>
                                                      <div class="col-md-12 mb-3">
                                                        <label for="validationDefault01" class="form-label">Address</label>
                                                        <input type="text" id="address" name="address" class="form-control"  value="" required>
                                                      </div>
                                                      <div class="col-md-12 mb-3">
                                                        <label for="validationDefault01" class="form-label">Phone</label>
                                                        <input type="text" id="phone" name="phone" class="form-control"  value="" required>
                                                      </div>
                                                      <div class="col-md-12 mb-3">
                                                        <label for="validationDefault01" class="form-label">Position</label>
                                                        <input type="text" id="position" name="position" class="form-control"  value="" required>
                                                      </div>
                                                      
                                                      <div class="col-md-12 mb-3">
                                                        <label for="validationDefault01" class="form-label">Salary</label>
                                                        <input type="text" id="salary" name="salary" class="form-control"  value="" required>
                                                      </div>
                                                      <div class="col-md-12 mb-3">
                                                        <label for="validationDefault01" class="form-label">Status</label>
                                                        <select name="status" id="status" class="form-control">
                                                          <option>Active</option>
                                                          <option>In Active</option>
                                                        </select>
                                                      </div>
                                                      
                                                      <div class="col-md-12 mb-3">
                                                        <label for="validationDefault01" class="form-label">Date Employed</label>
                                                        <input type="date" id="new_employed" class="form-control"  value="" required>
                                                      </div>
                                                      <div class="mt-3">
                                                        <button class="button btn-navigate-form-step2" type="button" step_number="2">Next</button>
                                                    </div>
                                                </section>

                                                <section id="step2-2" class="form-step2 d-none">
                                                  <h5 class="font-weight-light text-primary" >Referee info</h5>

                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Full name</label>
                                                      <input type="text" id="new_rname" name="new_rname" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Relationship</label>
                                                      <input type="text" id="new_relationship" name="new_relationship" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Company</label>
                                                      <input type="text" id="new_company" name="new_company" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">title</label>
                                                      <input type="text" id="new_title" name="new_title" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Email</label>
                                                      <input type="text" id="new_remail" name="new_remail" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Phone</label>
                                                      <input type="text" id="new_rphone" name="new_rphone" class="form-control"  value="" required>
                                                    </div>
                                                    <hr>

                                                    
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Full name</label>
                                                      <input type="text" id="new_rname2" name="new_rname2" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Relationship</label>
                                                      <input type="text" id="new_relationship2" name="new_relationship2" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Company</label>
                                                      <input type="text" id="new_company2" name="new_company2" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">title</label>
                                                      <input type="text" id="new_title2"  name="new_title2" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Email</label>
                                                      <input type="text" id="new_remail2" name="new_remail2" class="form-control"  value="" required>
                                                    </div>
                                                    <div class="col-md-12 mb-3">
                                                      <label for="validationDefault01" class="form-label">Phone</label>
                                                      <input type="text" id="new_rphone2"  name="new_rphone2" class="form-control"  value="" required>
                                                    </div>

                                                    <div class="mt-3">
                                                      <button class="button btn-navigate-form-step2" type="button" step_number="1">Prev</button>
                                                      <button class="button btn-navigate-form-step2" type="button" step_number="3">Next</button>                                    
                                                    </div>

                                                  
                                                </section>
                                                
                                                <section id="step2-3" class="form-step2 d-none">
                                                  <h6 class="font-weight-light text-primary">Add Passport</h6> 
                                                  <div class="col-md-12 mb-3">
                                                    <label for="validationDefault01" class="form-label">Photo</label>
                                                    <input type="file" id="photo2" class="form-control" required>
                                                  </div>
                                                  <div class="image-preview" id="imagePreview2"></div>
                                                  <script>
                                                    // JavaScript to handle image preview
                                                    const imageInput2 = document.getElementById('photo2');
                                                    const imagePreview2 = document.getElementById('imagePreview2');

                                                    imageInput2.addEventListener('change', function() {
                                                        imagePreview2.innerHTML = ''; // Clear existing previews

                                                        const files = this.files;
                                                        for (let i = 0; i < files.length; i++) {
                                                            const file = files[i];

                                                            if (file.type.startsWith('image/')) {
                                                                const reader = new FileReader();

                                                                reader.onload = function(e) {
                                                                    const img = document.createElement('img');
                                                                    img.src = e.target.result;
                                                                    img.style.height = "200px"
                                                                    imagePreview2.appendChild(img);
                                                                };

                                                                reader.readAsDataURL(file);
                                                            }
                                                        }
                                                    });
                                                  </script>
                                                  <div class="mt-3">
                                                    <button class="button btn-navigate-form-step2" type="button" step_number="2">Prev</button>                                    
                                                  </div>
                                                </section>

                                              </div>
                                              
                                              <div class="modal-footer border border-0">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-primary">Save changes</button>
                                              </div>
                                            
                                            </form>
                                          
                                          </div>
                                        
                                        </div>
                                          
                                          <a href="delete_employee/<?php echo e($employee->id); ?>" class="text-danger" title="Delete">
                                            <i class="bi bi-trash-fill"></i>
                                          </a>
                                  </div>                                  
                            </td>
                          </tr>

                     <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                   </tbody>
                 </table>

               </div>
             </div>
           </div>

       </main>
       <!--end page main-->

       <!--start overlay-->
        <div class="overlay nav-toggle-icon"></div>
       <!--end overlay-->

       <!--start footer-->
       <footer class="footer">
        <div class="footer-text">
           Copyright © 2022. All right reserved.
        </div>
        </footer>
        <!--end footer-->

       <!--Start Back To Top Button-->
		     <a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a>
       <!--End Back To Top Button-->

       <!--start switcher-->
       <div class="switcher-body">
        <button class="btn btn-primary btn-switcher shadow-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling"><i class="bi bi-paint-bucket me-0"></i></button>
        <div class="offcanvas offcanvas-end shadow border-start-0 p-2" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling">
          <div class="offcanvas-header border-bottom">
            <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Theme Customizer</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
          </div>
          <div class="offcanvas-body">
            <h6 class="mb-0">Theme Variation</h6>
            <hr>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="LightTheme" value="option1">
              <label class="form-check-label" for="LightTheme">Light</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="DarkTheme" value="option2">
              <label class="form-check-label" for="DarkTheme">Dark</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="SemiDarkTheme" value="option3">
              <label class="form-check-label" for="SemiDarkTheme">Semi Dark</label>
            </div>
            <hr>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" name="inlineRadioOptions" id="MinimalTheme" value="option3" checked>
              <label class="form-check-label" for="MinimalTheme">Minimal Theme</label>
            </div>
            <hr/>
            <h6 class="mb-0">Header Colors</h6>
            <hr/>
            <div class="header-colors-indigators">
              <div class="row row-cols-auto g-3">
                <div class="col">
                  <div class="indigator headercolor1" id="headercolor1"></div>
                </div>
                <div class="col">
                  <div class="indigator headercolor2" id="headercolor2"></div>
                </div>
                <div class="col">
                  <div class="indigator headercolor3" id="headercolor3"></div>
                </div>
                <div class="col">
                  <div class="indigator headercolor4" id="headercolor4"></div>
                </div>
                <div class="col">
                  <div class="indigator headercolor5" id="headercolor5"></div>
                </div>
                <div class="col">
                  <div class="indigator headercolor6" id="headercolor6"></div>
                </div>
                <div class="col">
                  <div class="indigator headercolor7" id="headercolor7"></div>
                </div>
                <div class="col">
                  <div class="indigator headercolor8" id="headercolor8"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
       </div>
       <!--end switcher-->

  </div>
  <!--end wrapper-->


  <!-- Bootstrap bundle JS -->
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <!--plugins-->
    <script src="assets/js/jquery.min.js"></script>
  <script src="js/session_check.js"></script>
  <script src="assets/plugins/simplebar/js/simplebar.min.js"></script>
  <script src="assets/plugins/metismenu/js/metisMenu.min.js"></script>
  <script src="assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
  <script src="assets/plugins/vectormap/jquery-jvectormap-2.0.2.min.js"></script>
  <script src="assets/plugins/vectormap/jquery-jvectormap-world-mill-en.js"></script>
  <script src="assets/js/pace.min.js"></script>
  <script src="assets/plugins/chartjs/js/Chart.min.js"></script>
  <script src="assets/plugins/chartjs/js/Chart.extension.js"></script>
  <script src="assets/plugins/apexcharts-bundle/js/apexcharts.min.js"></script>
  <script src="assets/plugins/select2/js/select2.min.js"></script>
  <script src="assets/js/form-select2.js"></script>
  <!--app-->
  <script src="assets/js/app.js"></script>
  <script src="assets/js/index4.js"></script>
  <script>
    new PerfectScrollbar(".best-product")
 </script>
 <script src="js/employee.js"></script>
<script>
  function switch_val(x){
    if(x.value == 1){
      x.value = 0
    }else{
      x.value = 1
    }
  }
</script>

<script>
  $(document).ready(function() {
      
      // Send an AJAX request to execute the sessionmanager.php script
      $.ajax({
          url: 'php/session_check.php',
          method: 'GET',
          success: function(response) {
            const myObj = JSON.parse(response);
            console.log(myObj)
            document.getElementById('name').innerHTML = myObj.username;
              console.log(myObj.username);
          },
          error: function(xhr, status, error) {
              console.error("Error: " + error);
          }
      });
  });
</script>

</body>

</html>


<script>
  /**
* Define a function to navigate betweens form steps.
* It accepts one parameter. That is - step number.
*/
const navigateToFormStep = (stepNumber) => {
  /**
  * Hide all form steps.
  */
  document.querySelectorAll(".form-step").forEach((formStepElement) => {
     formStepElement.classList.add("d-none");
  });
  /**
  * Mark all form steps as unfinished.
  */
  document.querySelectorAll(".form-stepper-list").forEach((formStepHeader) => {
     formStepHeader.classList.add("form-stepper-unfinished");
     formStepHeader.classList.remove("form-stepper-active", "form-stepper-completed");
  });
  /**
  * Show the current form step (as passed to the function).
  */
  document.querySelector("#step-" + stepNumber).classList.remove("d-none");
  /**
  * Select the form step circle (progress bar).
  */
  const formStepCircle = document.querySelector('li[step="' + stepNumber + '"]');
  /**
  * Mark the current form step as active.
  */
  formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-completed");
  formStepCircle.classList.add("form-stepper-active");
  /**
  * Loop through each form step circles.
  * This loop will continue up to the current step number.
  * Example: If the current step is 3,
  * then the loop will perform operations for step 1 and 2.
  */
  for (let index = 0; index < stepNumber; index++) {
     /**
        * Select the form step circle (progress bar).
        */
     const formStepCircle = document.querySelector('li[step="' + index + '"]');
     /**
        * Check if the element exist. If yes, then proceed.
        */
     if (formStepCircle) {
           /**
           * Mark the form step as completed.
           */
           formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-active");
           formStepCircle.classList.add("form-stepper-completed");
     }
  }
};
/**
* Select all form navigation buttons, and loop through them.
*/
document.querySelectorAll(".btn-navigate-form-step").forEach((formNavigationBtn) => {
  /**
  * Add a click event listener to the button.
  */
  formNavigationBtn.addEventListener("click", () => {
     /**
        * Get the value of the step.
        */
     const stepNumber = parseInt(formNavigationBtn.getAttribute("step_number"));
     /**
        * Call the function to navigate to the target form step.
        */
     navigateToFormStep(stepNumber);
  });
});



const navigateToFormStep2 = (stepNumber) => {
  /**
  * Hide all form steps.
  */
  document.querySelectorAll(".form-step2").forEach((formStepElement) => {
     formStepElement.classList.add("d-none");
  });
  /**
  * Mark all form steps as unfinished.
  */
  document.querySelectorAll(".form-stepper-list2").forEach((formStepHeader) => {
     formStepHeader.classList.add("form-stepper-unfinished2");
     formStepHeader.classList.remove("form-stepper-active2", "form-stepper-completed2");
  });
  /**
  * Show the current form step (as passed to the function).
  */
  document.querySelector("#step2-" + stepNumber).classList.remove("d-none");
  /**
  * Select the form step circle (progress bar).
  */
  const formStepCircle = document.querySelector('li[step="' + stepNumber + '"]');
  /**
  * Mark the current form step as active.
  */
  formStepCircle.classList.remove("form-stepper-unfinished2", "form-stepper-completed2");
  formStepCircle.classList.add("form-stepper-active2");
  /**
  * Loop through each form step circles.
  * This loop will continue up to the current step number.
  * Example: If the current step is 3,
  * then the loop will perform operations for step 1 and 2.
  */
  for (let index = 0; index < stepNumber; index++) {
     /**
        * Select the form step circle (progress bar).
        */
     const formStepCircle = document.querySelector('li[step="' + index + '"]');
     /**
        * Check if the element exist. If yes, then proceed.
        */
     if (formStepCircle) {
           /**
           * Mark the form step as completed.
           */
           formStepCircle.classList.remove("form-stepper-unfinished2", "form-stepper-active2");
           formStepCircle.classList.add("form-stepper-completed2");
     }
  }
};
/**
* Select all form navigation buttons, and loop through them.
*/
document.querySelectorAll(".btn-navigate-form-step2").forEach((formNavigationBtn) => {
  /**
  * Add a click event listener to the button.
  */
  formNavigationBtn.addEventListener("click", () => {
     /**
        * Get the value of the step.
        */
     const stepNumber = parseInt(formNavigationBtn.getAttribute("step_number"));
     /**
        * Call the function to navigate to the target form step.
        */
     navigateToFormStep2(stepNumber);
  });
});
</script><?php /**PATH C:\xampp\htdocs\factory_v2\resources\views/employees.blade.php ENDPATH**/ ?>