<?php defined('BASEPATH') or exit('Direct access is not allowed'); ?>
<!DOCTYPE html>
<html>
<head>
  <style>  .table thead th {
    vertical-align: center !important;
}</style>
<?php include 'app/views/common/css.php';?>
<script src="app/views/assets/js/jQuery3.6.3.js"></script> 
<script src="app/views/client/operations_js/add_details_js.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css">
<script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script>
<style>
  .card-counter{
    box-shadow: 2px 2px 10px #DADADA;
    margin: 5px;
    padding: 20px 10px;
    background-color: #fff;
    height: 100px;
    border-radius: 5px;
    transition: .3s linear all;
  }

  .card-counter:hover{
    box-shadow: 4px 4px 20px #DADADA;
    transition: .3s linear all;
  }

  .card-counter.primary{
    background-color: #007bff;
    color: #FFF;
  }

  .card-counter.danger{
    background-color: #ef5350;
    color: #FFF;
  }  

  .card-counter.success{
    background-color: #66bb6a;
    color: #FFF;
  }  

  .card-counter.info{
    background-color: #26c6da;
    color: #FFF;
  }  

  .card-counter i{
    font-size: 5em;
    opacity: 0.2;
  }

  .card-counter .count-numbers{
    position: absolute;
    right: 35px;
    top: 20px;
    font-size: 32px;
    display: block;
  }

  .card-counter .count-name{
    position: absolute;
    right: 35px;
    top: 65px;
    font-style: italic;
    text-transform: capitalize;
    opacity: 0.5;
    display: block;
    font-size: 18px;
  }

</style>

</head>
<body>
<!-- **************** MAIN CONTENT START **************** -->

  <!-- =======================
  Header START -->
  <header class="navbar-light fixed-top header-static bg-mode">
    <!-- Logo Nav START -->
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <!-- Logo START -->
        <a class="navbar-brand" href="index-2.html">
          <img class="light-mode-item navbar-brand-item" src="app/views/assets/images/logo.png" alt="logo">
				  <img class="dark-mode-item navbar-brand-item" src="app/views/assets/images/logo.png" alt="logo">		
        </a>
        <!-- Logo END -->

        <button class="icon-md btn btn-light p-0 d-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarVerticaloffcanvas" aria-controls="navbarVerticaloffcanvas">
          <i class="bi bi-justify-left fs-4"></i>
        </button>

        <!-- Responsive navbar toggler -->
        <button class="navbar-toggler ms-auto icon-md btn btn-light p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-animation">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </button>

        <!-- Main navbar START -->
        <div class="collapse navbar-collapse" id="navbarCollapse">

          <!-- Nav Search START -->
          <div class="nav mt-3 mt-lg-0 flex-nowrap align-items-center px-4 px-lg-0">
            <div class="nav-item w-100">
              <form class="rounded position-relative">
                <input class="form-control ps-5 bg-light" type="search" placeholder="Search..." aria-label="Search">
                <button class="btn bg-transparent px-2 py-0 position-absolute top-50 start-0 translate-middle-y" type="submit"><i class="bi bi-search fs-5"> </i></button>
              </form>
            </div>
          </div>
          <!-- Nav Search END -->

          <ul class="navbar-nav navbar-nav-scroll mx-auto">
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link active" href="#">Overview</a>
            </li>
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link" href="#">Subscriptions</a>
            </li>
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link" href="#">Streams</a>
            </li>
            <!-- Nav item 1 Demos -->
            <li class="nav-item">
              <a class="nav-link" href="#">Results</a>
            </li>
            <!-- Nav item 2 Pages -->
          </ul>
        </div>
        <!-- Main navbar END -->

        <!-- Nav right START -->
        <ul class="nav flex-nowrap align-items-center ms-lg-3 list-unstyled">
          <!-- Notification dropdown END -->

          <li class="nav-item ms-3 dropdown">
            <a class="nav-link p-0" href="#" id="profileDropdown" role="button" data-bs-auto-close="outside" data-bs-display="static" data-bs-toggle="dropdown" aria-expanded="false">
              <div class="d-flex align-items-center position-relative">
                <!-- Avatar -->
                <div class="avatar avatar-sm me-xl-3">
                  <img class="avatar-img rounded-circle" src="<?= $profile_image_path ?>" alt="avatar">
                </div>

                <div class="d-none d-xl-block">
                  <span class="h6 stretched-link"><?= $user_name ?></span>
                  <p class="small m-0"><?= $designation ?></p>
                </div>
              </div>
            </a>
            <ul class="dropdown-menu dropdown-animation dropdown-menu-end pt-3 small me-md-n3" aria-labelledby="profileDropdown">
              <!-- Links -->
              <li><a class="dropdown-item" href="/trainingportal/Settings"><i class="bi bi-gear fa-fw me-2"></i>Settings & Privacy</a></li>
              <li> 
                <a class="dropdown-item" href="" target="_blank">
                  <i class="fa-fw bi bi-life-preserver me-2"></i>Support
                </a> 
              </li>
              <li> 
                <a class="dropdown-item" href="" target="_blank">
                  <i class="fa-fw bi bi-card-text me-2"></i>Documentation
                </a> 
              </li>
              <li class="dropdown-divider"></li>
              <li><a class="dropdown-item bg-danger-soft-hover" href="/trainingportal/Main/Logout"><i class="bi bi-power fa-fw me-2"></i>Sign Out</a></li>
              <li> <hr class="dropdown-divider"></li>
              <!-- Dark mode switch START -->
              <li>
                <div class="modeswitch-wrap" id="darkModeSwitch">
                  <div class="modeswitch-item">
                    <div class="modeswitch-icon"></div>
                  </div>
                  <span>Dark mode</span>
                </div>
              </li> 
              <!-- Dark mode switch END -->
            </ul>
          </li>
          <!-- Profile START -->
          
        </ul>
        <!-- Nav right END -->
      </div>
    </nav>
    <!-- Logo Nav END -->
  </header>
  <!-- =======================
  Header END -->
  
  <main> 

  <!-- Container START -->
  <div class="container-fluid">

    <!-- Sidenav START -->
    <div class="navbar navbar-vertical navbar-light">
      <div class="offcanvas offcanvas-start custom-scrollbar rounded pt-3" tabindex="-1" id="navbarVerticaloffcanvas">
        <div class="offcanvas-body pt-5 pt-lg-0">
          <!-- Card START -->
          
            <!-- Avatar -->
            <div class="avatar avatar-lg mb-3">
              <a href="#!"><img class="avatar-img rounded-circle border border-white border-3" src="<?= $profile_image_path ?>" alt=""></a>
            </div>
            <!-- Info -->
            <h5 class="mb-0"> <a href="#!"><?= $user_name ?>   </a> </h5>
          <small><?= $designation ?></small>
          <!-- User stat START  -->
          <div class="hstack gap-2 gap-xl-3 mt-3">
            <!-- User stat item -->
            <div>
              <h6 class="mb-0"><?= $enroll_courses ?> </h6>
              <small>Enrolled Courses</small>
            </div>
            <!-- Divider -->
            <div class="vr"></div>
            <!-- User stat item -->
            <div>
              <h6 class="mb-0"><?= $rating ?></h6>
              <small>Skill Map</small>
            </div>
            <!-- Divider -->
            <div class="vr"></div>
            <!-- User stat item -->
          </div>
            <!-- User stat END -->

            <!-- Divider -->
            <hr>

            <!-- Side Nav START -->
            <ul class="nav nav-link-secondary flex-column fw-bold gap-2">
              <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Pne" > <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/home-outline-filled.svg" alt=""><span>Training Programs</span></a>
              </li>
              <!-- <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/medal-outline-filled.svg" alt=""><span>Online Training Programs</span></a>
              </li> -->
              <? if ($role_id==1): ?>
                <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Applicationstatus"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/star-outline-filled.svg" alt=""><span>Application Status</span></a>
              </li>
              <? endif;?>
              <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Trainingschedule"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/clock-outline-filled.svg" alt=""><span>Training Schedules </span></a>
              </li>            
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/task-done-outline-filled.svg" alt=""><span>Training Monitoring </span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/star-outline-filled.svg" alt=""><span>Reports </span></a>
              </li>
          
              <? if ($role_id==1): ?>
                <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Adddetails"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/star-outline-filled.svg" alt=""><span>Add Details</span></a>
              </li>
              <? endif;?>
              <li class="nav-item">
                <a class="nav-link" href="/trainingportal/Main/Logout"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/arrow-boxed-outline-filled.svg" alt=""><span>Logout </span></a>
              </li>
            
            </ul>
            <!-- Side Nav END -->
          </div>
        </div>
      </div>
      <!-- Sidenav END -->

     
      <div class="page-content"> <!-- Main content START -->
   
     
<div class="container">
    <div class="row">
    <div class="col-md-3">
      <div class="card-counter primary">
        <i class="fas fa-hand-point-up"></i>
        <span class="count-numbers">0</span>
        <span class="count-name">Applied</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card-counter info">
        <i class="fas fa-hand-paper"></i>
        <span class="count-numbers">0</span>
        <span class="count-name">Pending</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card-counter success">
        <i class="fas fa-thumbs-up"></i>
        <span class="count-numbers">0</span>
        <span class="count-name">Approved</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="card-counter danger">
        <i class="fas fa-thumbs-down"></i>
        <span class="count-numbers">0</span>
        <span class="count-name">Rejected</span>
      </div>
    </div>

  </div>
</div>   

     <div class="col-lg-12"> <!-- Add Training Details Start -->
        <div class="card">
          <div class="card-body">
          <div class="row">
              <div class="col-md-10">
              <h5 class="card-title">Add New Training Details</h5>
              </div>
              <div class="col-md-2">
              <button type="button" class="btn btn-primary mb-0" onclick="showModalAddTrainingDetails();">Add<i class="fas fa-plus-circle"></i> </button>
              </div>
           </div>
            <!-- Training Request Status. -->
            <table id="add_details" class="data_tables table table-striped table-bordered dt-responsive nowrap text-center" cellspacing="0">
              <thead>
                <tr>
                  <th scope="col" style="margin-top:-1%">Sr No</th>
                  <th scope="col">Name</th>
                  <th scope="col">Days</th>
                  <th scope="col">Marks</th>
                  <th scope="col">Segment Name</th>
                  <th scope="col">Total Modules</th>
                  <th scope="col">Created Date</th>
                  <th scope="col">Edit</th>
                  <th scope="col">Delete</th>

                </tr>
              </thead>
              <tbody>
              <?php $ct2=1; foreach ($training_data as $training_data_obj) {?>
              <tr>
                  <th scope="row"><?php echo $ct2 ?></th>
                  <td><?php echo $training_data_obj['name']; ?></td>
                  <td><?php echo $training_data_obj['days']; ?></td>
                  <td><?php echo $training_data_obj['marks']; ?></td>
                  <td><?php echo $training_data_obj['segment_name']; ?></td>
                  <td><?php echo $training_data_obj['total_modules']; ?></td>
                  <td><?php echo $training_data_obj['created_date']; ?></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick="showModalAddTrainingDetails(<?php echo $training_data_obj['id']; ?>);"><i class="fas fa-edit"></i> </button></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick=""> <i class="fas fa-trash-alt"></i> </button></td>
                </tr>
              <?php $ct2++; }?>

              </tbody>
            </table>
            <!-- End Training Request Status. -->
          </div>
        </div>
      </div>  <!-- Add Training Details End --> 
      <br>
      <div class="col-lg-12"> <!-- Add Targets: Start -->
       <div class="card">
          <div class="card-body">
          <div class="row">
              <div class="col-md-10">
              <h5 class="card-title">Add New Module</h5>
              </div>
              <div class="col-md-2">
              <button type="button" class="btn btn-primary mb-0" onclick="showModalAddModule(0);">Add<i class="fas fa-plus-circle"></i> </button>
              </div>
           </div>
            <!-- Training Request Status. -->
            <table class="data_tables table table-striped table-bordered dt-responsive nowrap text-center">
              <thead>
                <tr>
                  <th scope="col" style="margin-top:-1%">Sr No</th>
                  <th scope="col">Module Name</th>
                  <th scope="col">Training Name</th>
                  <th scope="col">Segment Name</th>
                  <th scope="col">Created Date</th>
                  <th scope="col">Edit</th>
                  <th scope="col">Delete</th>

                </tr>
              </thead>
              <tbody>
              <?php $ct1=1; foreach ($module_data as $module_data_obj) {?>
              <tr>
                  <th scope="row"><?php echo $ct1 ?></th>
                  <td><?php echo $module_data_obj['module_name']; ?></td>
                  <td><?php echo $module_data_obj['training_name']; ?></td>
                  <td><?php echo $module_data_obj['segment_name']; ?></td>
                  <td><?php echo $module_data_obj['created_date']; ?></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick="showModalAddModule(<?php echo $module_data_obj['id']; ?>);"><i class="fas fa-edit"></i> </button></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick=""> <i class="fas fa-trash-alt"></i> </button></td>
                </tr>
              <?php $ct1++; }?>
              </tbody>
            </table>
            <!-- End Training Request Status. -->
          </div>
        </div>
      
      </div>  <!-- Add Add Targets End --> 
      <br>
      <div class="col-lg-12"> <!-- Add Targets: Start -->
       <div class="card">
          <div class="card-body">
          <div class="row">
              <div class="col-md-10">
              <h5 class="card-title">Add New Target</h5>
              </div>
              <div class="col-md-2">
              <button type="button" class="btn btn-primary mb-0" onclick="showModalAddTargetsDetails();">Add<i class="fas fa-plus-circle"></i> </button>
              </div>
           </div>
            <!-- Training Request Status. -->
            <table class="data_tables table table-striped table-bordered dt-responsive nowrap text-center" cellspacing="0">
              <thead>
                <tr>
                  <th scope="col" style="margin-top:-1%">Sr No</th>
                  <th scope="col">Target Name</th>
                  <th scope="col">Training Name</th>
                  <th scope="col">Module Name</th>
                  <th scope="col">Segment Name</th>
                  <th scope="col">Created Date</th>
                  <th scope="col">Edit</th>
                  <th scope="col">Delete</th>

                </tr>
              </thead>
              <tbody>
              <?php $ct3=1; foreach ($targets_data as $targets_data_obj) {?>
              <tr>
                  <th scope="row"><?php echo $ct3; ?></th>
                  <td><?php echo $targets_data_obj['name']; ?></td>
                  <td><?php echo $targets_data_obj['training_name']; ?></td>
                  <td><?php echo $targets_data_obj['module_name']; ?></td>
                  <td><?php echo $targets_data_obj['segment_name']; ?></td>
                  <td><?php echo $targets_data_obj['created_date']; ?></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick="showModalAddTargetsDetails(<?php echo $targets_data_obj['id']; ?>);"><i class="fas fa-edit"></i> </button></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick=""> <i class="fas fa-trash-alt"></i> </button></td>
                </tr>
              <?php $ct3++; }?>
              </tbody>
            </table>
            <!-- End Training Request Status. -->
          </div>
        </div>
      
      </div>  <!-- Add Add Targets End --> 
      <br>
      <div class="col-lg-12"> <!-- Add Trainees Start -->

        <div class="card">
          <div class="card-body">
          <div class="row">
              <div class="col-md-10">
              <h5 class="card-title">Add New Trainees</h5>
              </div>
              <div class="col-md-2">
              <button type="button" class="btn btn-primary mb-0" onclick="showModalAddTraineesDetails();">Add<i class="fas fa-plus-circle"></i> </button>
              </div>
           </div>
            <!-- Training Request Status. -->
            <table class="data_tables table table-striped table-bordered dt-responsive nowrap text-center">
              <thead>
                <tr>
                  <th scope="col" style="margin-top:-1%">Sr No</th>
                  <th scope="col">Trainees</th>
                  <th scope="col">Segment Name</th>
                  <th scope="col">Created Date</th>
                  <th scope="col">Sort Index</th>
                  <th scope="col">Edit</th>
                  <th scope="col">Delete</th>

                </tr>
              </thead>
              <tbody>
              <?php $ct4=1; foreach ($trainees_data as $trainees_data_obj) {?>
              <tr>
                  <th scope="row"><?php echo $ct4; ?></th>
                  <td><?php echo $trainees_data_obj['name']; ?></td>
                  <td><?php echo $trainees_data_obj['segment_name']; ?></td>
                  <td><?php echo $trainees_data_obj['created_date']; ?></td>
                  <td><?php echo $trainees_data_obj['sort_index']; ?></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick="showModalAddTraineesDetails(<?php echo $trainees_data_obj['id']; ?>);"><i class="fas fa-edit"></i> </button></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick=""> <i class="fas fa-trash-alt"></i> </button></td>
                </tr>
              <?php $ct4++; }?>              
              </tbody>
            </table>
            <!-- End Training Request Status. -->
          </div>
        </div>
      </div>  <!-- Add Add Targets End --> 
      <br>
      <div class="col-lg-12"> <!-- Add Training Contains Start -->
      <div class="card">
          <div class="card-body">
          <div class="row">
              <div class="col-md-10">
              <h5 class="card-title">Training Contents</h5>
              </div>
              <div class="col-md-2">
              <button type="button" class="btn btn-primary mb-0" onclick="showModalAddTrainingContent();">Add<i class="fas fa-plus-circle"></i> </button>
              </div>
           </div>
            <!-- Training Request Status. -->
            <table class="data_tables table table-striped table-bordered dt-responsive nowrap text-center">
              <thead>
                <tr>
                  <th scope="col" style="margin-top:-1%">Sr No</th>
                  <th scope="col">Name</th>
                  <th scope="col">Training Name</th>
                  <th scope="col">Module Name</th>
                  <th scope="col">Segment Name</th>
                  <th scope="col">Created Date</th>
                  <th scope="col">Edit</th>
                  <th scope="col">Delete</th>

                </tr>
              </thead>
              <tbody>
              <?php $ct5=1; foreach ($training_content as $training_content_obj) {?>
              <tr>
                  <th scope="row"><?php echo $ct5 ?></th>
                  <td><?php echo $training_content_obj['name']; ?></td>
                  <td><?php echo $training_content_obj['training_name']; ?></td>
                  <td><?php echo $training_content_obj['module_name']; ?></td>
                  <td><?php echo $training_content_obj['segment_name']; ?></td>
                  <td><?php echo $training_content_obj['created_date']; ?></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick="showModalAddTrainingContent(<?php echo $training_content_obj['id']; ?>);"><i class="fas fa-edit"></i> </button></td>
                  <td> <button type="button" class="btn btn-primary mb-0" onclick=""> <i class="fas fa-trash-alt"></i> </button></td>
                </tr>
              <?php $ct5++;}?>                
              </tbody>
            </table>
            <!-- End Training Request Status. -->
          </div>
        </div>

      </div>  <!-- Add Add Targets End --> 

      </div><!-- Main content END -->


                <!-- Container END -->
                <!-- <div class="row g-3 mb-4">
              
                              <footer class="card card-body">
                              <div class="row g-4">
                                  <div class="col-md-12">
                                  <?php include 'app/views/common/footer.php';?>
                                  </div>
                              </footer>
                  </div> -->
       </div>
                  <!-- The Modal -->    
                    <div class="modal" id="AddTrainingDetails">
                      <div class="modal-dialog modal-xl">
                        <div class="modal-content">            
                          <!-- Modal Header -->
                          <div class="modal-header">
                            <h4 class="modal-title" id="PopupTitle"> Add New Training Details</h4>
                            <button type="button" class="close" onclick="closeModalAddTrainingDetails()" data-dismiss="modal">&times;</button>
                          </div>
                          <!-- Modal body -->
                          <div class="card">
                        <div class="card-body">
                          <div class="row g-3">
                            <!-- Page information -->
                            <div class="col-12">
                              <label class="form-label">Training name</label>
                              <input type="text" id="training_name" class="form-control" placeholder="Training name (Required)">
                              <small>Name that describes what the Training is about.</small>
                            </div>
                            <div class="col-sm-6 col-lg-4"> 
                              <label class="form-label">Select Segment</label>
                              <select class="form-select " id="segment_list" >
                              <?= $segment_list; foreach ($segment_list as $segment_list_obj) {?>
                                <option nameid="<?php echo $segment_list_obj['id']; ?>" value="<?php echo $segment_list_obj['segment_name']; ?>"><?php echo $segment_list_obj['segment_name']; ?></option>
                                 <?php }?>
                              </select>
                            </div>
                            <!-- Display name -->
                            <div class="col-sm-6 col-lg-4">
                              <label class="form-label">Total Days</label>
                              <input type="text" id="total_days" class="form-control" placeholder="Total Days (Required)">
                            </div>
                            <!-- Email -->
                            <div class="col-sm-6 col-lg-4">
                              <label class="form-label">Total Modules</label>
                              <input type="text" id="total_modules" class="form-control" placeholder="Total Modules (Required)">
                            </div>
                            <!-- Category -->
                        
                            <!-- Website URL -->
                            <div class="col-sm-6">
                              <label class="form-label">Add Image</label>
                              <input type="file" class="form-control" id="add_image" />
                            </div>
                            <!-- Phone number -->
                            <div class="col-lg-6">
                              <label class="form-label">Total Marks</label>
                              <input type="text" class="form-control" id="total_marks" placeholder="Total Marks (Required)">
                            </div>
                            <!-- Page information -->
                            <div class="col-12">
                              <label class="form-label">About Training</label>
                              <textarea class="form-control" rows="3" id="about_training" placeholder="About Training (Required)"></textarea>
                              <small>Character limit: 300</small>
                            </div>
                            <div class="col-6 text-center">
                            <div class="alert alert-success" role="alert" id="success_alert" style="display:none">
                            Data save successfully
                            </div>
                            <div class="alert alert-danger" role="alert" id="error_alert" style="display:none">
                            Data not save successfully
                            </div>
                            </div>
                            <div class="col-6 text-end">
                              <button type="button" class="btn btn-primary mb-0" onclick="training_details_save_data();">Save Data</button>
                            </div>
                            <!-- Divider -->
                            <hr>
                            <!-- Button  -->
                            </div>
                        </div>
                       </div>
                      
                          <!-- Modal footer -->
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="closeModalAddTrainingDetails()" data-dismiss="modal">Close</button>
                          </div>
                          
                        </div>
                      </div>
                    </div>
                    <!-- The Modal end -->
       <!-- The Modal AddTargetsDetails start-->    
                     <div class="modal" id="AddModule">
                                <div class="modal-dialog modal-xl">
                                <div class="modal-content">            
                                  <!-- Modal Header -->
                                  <div class="modal-header">
                                    <h4 class="modal-title" id="PopupTitle">Add New Module </h4>
                                    <button type="button" class="close" onclick="closeModalAddModule()" data-dismiss="modal">&times;</button>
                                  </div>
                                  <!-- Modal body start-->
                                <div class="card">
                                <div class="card-body">
                        
                                <div class="row g-3 ">
                                  <div class="col-12">
                                    <label class="form-label">Module name</label>
                                    <input type="text" id="module_name" class="form-control" placeholder="Module name (Required)">
                                    <small>Name that describes what the Module is about.</small>
                                  </div>
                                  <div class="col-sm-6 col-lg-3">
                                  <label class="form-label">Select Segment</label>
                                  <!-- <input type="text" placeholder="Search.." id="myInput_segment" onkeyup="filterFunction_segment()"> -->
                                  <select class="form-select" id="module_segment_list"  placeholder="Search..">
                                  <!-- <option nameid="00" value="00">Select Option</option> -->
                                     <?= $segment_list; foreach ($segment_list as $segment_list_obj) {?>
                                       <option id="<?php echo $segment_list_obj['id']; ?>" nameid="<?php echo $segment_list_obj['id']; ?>" value="<?php echo $segment_list_obj['segment_name'];?>"><?php echo $segment_list_obj['segment_name']; ?></option>
                                        <?php }?>
                                     </select>
                                  </div> 
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Module Target</label>
                                    <!-- <input type="text" placeholder="Search.." id="myInput_target" onkeyup="filterFunction_target()"> -->
                                    <select class="form-select" id="module_target" placeholder="Search.."  class="multiselect-ui form-control" multiple="multiple">
                                    <?= $targets_data; foreach ($targets_data as $targets_data_obj) {?>
                                       <option nameid="<?php echo $targets_data_obj['id']; ?>" value="<?php echo $targets_data_obj['name']; ?>"><?php echo $targets_data_obj['name']; ?></option>
                                        <?php }?>
                                     </select>
                                    </select>
                                  </div> 
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Select Training</label>
                                    <!-- <input type="text" placeholder="Search.." id="myInput_training" onkeyup="filterFunction_training()"> -->
                                    <select class="form-select" id="training_list" placeholder="Search..">
                                    <?= $training_list; foreach ($training_list as $training_list_obj) {?>
                                       <option nameid="<?php echo $training_list_obj['id']; ?>" value="<?php echo $training_list_obj['name']; ?>"><?php echo $training_list_obj['name']; ?></option>
                                        <?php }?>
                                     </select>
                                    </select>
                                  </div>                               
                               
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Select Trainer</label>
                                    <!-- <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()"> -->
                                    <select class="form-select " id="module_user_list" placeholder="Search.." class="multiselect-ui form-control" multiple="multiple">
                                     <?php foreach ($user_list as $user_list_obj) {?>
                                       <option nameid="<?php echo $user_list_obj['id']; ?>" value="<?php echo $user_list_obj['id']; ?>"><?php echo $user_list_obj['user_name']; ?></option>
                                        <?php }?>
                                     </select>
                                  </div>
                                  <div class="col-4">
                                    <label class="form-label">Select Image</label>
                                    <input type="file" id="module_image_path" name="module_image">
                                  </div>
                                  <div class="col-4">
                                    <label class="form-label">Sort Index</label>
                                    <input type="text" class="form-control" id="module_sort_index" placeholder="Sort Index (Required)">
                                  </div>
                                  <div class="col-4">
                                  <label class="form-label">Select Trainee Category</label>
                                    <!-- <input type="text" placeholder="Search.." id="myInputTrainee" onkeyup="filterFunctionTraineeCat()"> -->
                                    <select class="form-select " id="module_trainees_list" placeholder="Search.." class="multiselect-ui form-control" multiple="multiple">
                                     <?php foreach ($trainees_list as $trainees_list_obj) {?>
                                       <option nameid="<?php echo $trainees_list_obj['id']; ?>" value="<?php echo $trainees_list_obj['id']; ?>"><?php echo $trainees_list_obj['name']; ?></option>
                                        <?php }?>
                                     </select>
                                  </div>
                                
                                  <div class="col-12">
                              <label class="form-label">About Module</label>
                              <textarea class="form-control" rows="3" id="about_module" placeholder="About Module (Required)"></textarea>
                              <small>Character limit: 300</small>
                            </div> 
                            <div class="col-12 text-center">
                            <div class="alert alert-success" role="alert" id="module_success_alert" style="display:none">
                            Data save successfully
                            </div>
                            <div class="alert alert-danger" role="alert" id="module_error_alert" style="display:none">
                            Data not save successfully
                            </div>
                            </div>           
                                  <div class="col-12 text-end">
                                    <button type="button" class="btn btn-primary mb-0" onclick="module_save_data();">Create Module </button>
                                  </div>
                                  <hr>
                                  </div>
                              </div>
                            </div>
                          
                          <!-- Modal body end-->
                          <!-- Modal footer Start -->
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="closeModalAddModule()" data-dismiss="modal">Close</button>
                          </div>
                            <!-- Modal footer Start -->
                        </div>
                      </div>
                    </div>
                    <!-- The Modal AddTargetsDetails end -->

                       <!-- The Modal AddTargetsDetails start-->    
                     <div class="modal" id="AddTargetsDetails">
                                <div class="modal-dialog modal-xl">
                                <div class="modal-content">            
                                  <!-- Modal Header -->
                                  <div class="modal-header">
                                    <h4 class="modal-title" id="PopupTitle">Add New Targets </h4>
                                    <button type="button" class="close" onclick="closeModalAddTargetsDetails()" data-dismiss="modal">&times;</button>
                                  </div>
                                  <!-- Modal body start-->
                                <div class="card">
                                <div class="card-body">
                            

                                <div class="row g-3">
                                  <div class="col-12">
                                    <label class="form-label">Target name</label>
                                    <input type="text" id="target_name" class="form-control" placeholder="Target name (Required)">
                                    <small>Name that describes what the Target is about.</small>
                                  </div>
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Select Segment</label>
                                    <select class="form-select" id="target_segment_list">
                                       <?= $segment_list; foreach ($segment_list as $segment_list_obj) {?>
                                       <option nameid="<?php echo $segment_list_obj['id']; ?>" value="<?php echo $segment_list_obj['segment_name']; ?>"><?php echo $segment_list_obj['segment_name']; ?></option>
                                        <?php }?>
                                     </select>
                                    </select>
                                  </div>  
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label" >Select Training</label>
                                    <select class="form-select" id="target_training_list">
                                    <?= $training_list; foreach ($training_list as $training_list_obj) {?>
                                       <option nameid="<?php echo $training_list_obj['id']; ?>" value="<?php echo $training_list_obj['name']; ?>"><?php echo $training_list_obj['name']; ?></option>
                                        <?php }?>
                                     </select>
                                    </select>
                                  </div>
                                  <!-- <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Select Model</label>
                                    <select class="form-select" id="target_model_list">
                                    <?= $module_list; foreach ($module_list as $module_list_obj) {?>
                                       <option nameid="<?php echo $module_list_obj['id']; ?>" value="<?php echo $module_list_obj['module_name']; ?>"><?php echo $module_list_obj['module_name']; ?></option>
                                        <?php }?>
                                    </select>
                                  </div> -->
                                
                               
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Sort Index</label>
                                    <input type="text" class="form-control" id="target_sort_index" placeholder="Sort Index (Required)">
                                  </div>   
                                  
                                  <div class="col-6 text-center">
                                      <div class="alert alert-success" role="alert" id="target_success_alert" style="display:none">
                                      Data save successfully
                                      </div>
                                      <div class="alert alert-danger" role="alert" id="target_error_alert" style="display:none">
                                      Data not save successfully
                                      </div>
                                  </div>
                                  <div class="col-6 text-end">
                                    <button type="submit" class="btn btn-primary mb-0" onclick="create_target_save_data()">Create a Target </button>
                                  </div>
                                  <hr>
                                  </div>
                              </div>
                            </div>
                          
                          <!-- Modal body end-->
                          <!-- Modal footer Start -->
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="closeModalAddTargetsDetails()" data-dismiss="modal">Close</button>
                          </div>
                            <!-- Modal footer Start -->
                        </div>
                      </div>
                    </div>
                    <!-- The Modal AddTargetsDetails end -->

                    <div class="modal" id="AddTraineesDetails"><!-- The Modal AddTraineesDetails start-->   
                      <div class="modal-dialog modal-xl">
                        <div class="modal-content">            
                          <!-- Modal Header -->
                          <div class="modal-header">
                            <h4 class="modal-title" id="PopupTitle"> Add Trainee</h4>
                            <button type="button" class="close" onclick="closeModalAddTraineesDetails()" data-dismiss="modal">&times;</button>
                          </div>
                          <!-- Modal body start-->
                          <div class="card">
                              <div class="card-body">
                                <div class="row g-3">
                                  <div class="col-12">
                                    <label class="form-label">Trainee Category</label>
                                    <input type="text" id="trainees_name" class="form-control" placeholder="Trainee category (Required)">
                                    <small>Name that describes what the Trainees is about.</small>
                                  </div>
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Select Segment</label>
                                    <select class="form-select" id="trainees_segment_list">
                                    <?= $segment_list; foreach ($segment_list as $segment_list_obj) {?>
                                       <option nameid="<?php echo $segment_list_obj['id']; ?>" value="<?php echo $segment_list_obj['segment_name']; ?>"><?php echo $segment_list_obj['segment_name']; ?></option>
                                        <?php }?>
                                    </select>
                                  </div>
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Sort Index</label>
                                    <input type="text" class="form-control" id="trainees_sort_index" placeholder="Sort Index (Required)">
                                  </div>
                                  <div class="col-12 text-center">
                                    <div class="alert alert-success" role="alert" id="trainees_success_alert" style="display:none">
                                    Data save successfully
                                    </div>
                                    <div class="alert alert-danger" role="alert" id="trainees_error_alert" style="display:none">
                                    Data not save successfully
                                    </div>
                                  </div>
                                  <div class="col-12 text-end">
                                    <button type="submit" class="btn btn-primary mb-0" onclick="trainees_save_data();">Create a Trainees </button>
                                  </div>
                                  <hr>
                                  </div>
                              </div>
                            </div>
                          
                          <!-- Modal body end-->
                          <!-- Modal footer Start -->
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="closeModalAddTraineesDetails()" data-dismiss="modal">Close</button>
                          </div>
                            <!-- Modal footer Start -->
                        </div>
                      </div>
                    </div>  <!-- The Modal AddTraineesDetails end -->

                    <div class="modal" id="AddTrainingContent"><!-- The Modal AddTargetsDetails start-->   
                      <div class="modal-dialog modal-xl">
                        <div class="modal-content">            
                          <!-- Modal Header -->
                          <div class="modal-header">
                            <h4 class="modal-title" id="PopupTitle"> Add New Training Content </h4>
                            <button type="button" class="close" onclick="closeModalAddTrainingContent()" data-dismiss="modal">&times;</button>
                          </div>
                          <!-- Modal body start-->
                          <div class="card">
                              <div class="card-body">
                                <div class="row g-3">
                                  <div class="col-12">
                                    <label class="form-label">Topic name</label>
                                    <input type="text" class="form-control" id="content_name" placeholder="Topic name (Required)">
                                    <small>Name that describes what the Topic is about.</small>
                                  </div>
                                    
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Select Segment</label>
                                    <select class="form-select js-choice" id="content_segment_list">
                                    <?= $segment_list; foreach ($segment_list as $segment_list_obj) {?>
                                       <option nameid="<?php echo $segment_list_obj['id']; ?>" value="<?php echo $segment_list_obj['id']; ?>"><?php echo $segment_list_obj['segment_name']; ?></option>
                                        <?php }?>
                                    </select>
                                  </div>
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Select Training</label>
                                    <select class="form-select js-choice" id="content_training_list">
                                    <?= $training_list; foreach ($training_list as $training_list_obj) {?>
                                       <option nameid="<?php echo $training_list_obj['id']; ?>" id="<?php echo $training_list_obj['id']; ?>" value="<?php echo $training_list_obj['id']; ?>"><?php echo $training_list_obj['name']; ?></option>
                                        <?php }?>
                                    </select>
                                  </div>
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Select Model</label>
                                    <select class="form-select js-choice" id="content_model_list">
                                    <?= $module_list; foreach ($module_list as $module_list_obj) {?>
                                       <option nameid="<?php echo $module_list_obj['id']; ?>"  value="<?php echo $module_list_obj['id']; ?>"><?php echo $module_list_obj['module_name']; ?></option>
                                        <?php }?>
                                    </select>
                                  </div>
                              
                                  <div class="col-sm-6 col-lg-3">
                                    <label class="form-label">Sort Index</label>
                                    <input type="text" class="form-control" id="content_sort_index" placeholder="Sort Index (Required)">
                                  </div>
                                  <!-- <div class="col-lg-6">
                                    <label class="form-label">Marks (For selected Topic )</label>
                                    <input type="text" class="form-control" id="content_marks" placeholder="Marks (Required)">
                                  </div> -->
                                  <div class="col-12">
                                    <label class="form-label">Content Discription</label>
                                    <textarea class="form-control" rows="3" id="content_discription" placeholder="Description (Required)"></textarea>
                                    <small>Character limit: 300</small>
                                  </div>
                                  <div class="col-6 text-center">
                                      <div class="alert alert-success" role="alert" id="content_success_alert" style="display:none">
                                      Data save successfully
                                      </div>
                                      <div class="alert alert-danger" role="alert" id="content_error_alert" style="display:none">
                                      Data not save successfully
                                      </div>
                                      </div>
                                  <div class="col-6 text-end">
                                    <button type="button" class="btn btn-primary mb-0" onclick="save_training_content();">Create Training Content </button>
                                  </div>
                                  <hr>
                                  </div>
                              </div>
                            </div>
                          
                          <!-- Modal body end-->
                          <!-- Modal footer Start -->
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="closeModalAddTrainingContent()" data-dismiss="modal">Close</button>
                          </div>
                            <!-- Modal footer Start -->
                        </div>
                      </div>
                    </div>  <!-- The Modal AddTargetsDetails end -->


</main>
<!-- **************** MAIN CONTENT END **************** -->
<script>
  $(document).ready(function () {
        $('.data_tables').DataTable({
            // "processing": true,
            // "info": true,
            // "stateSave": true,
            dom: 'Bfrtip',
            buttons: [ 'csv', 'excel', 'pdf', 'print' ]
        });


      var moduletarget = new Choices('#module_target', {
        removeItemButton: true,
      });
      var module_user_list = new Choices('#module_user_list', {
        removeItemButton: true,
      });
      var moduletarget = new Choices('#module_trainees_list', {
        removeItemButton: true,
      });
      // var moduletarget = new Choices('#module_segment_list', {
      //   removeItemButton: true,
      // });
      // var moduletarget = new Choices('#training_list', {
      //   removeItemButton: true,
      // });
      
    });
    
function showModal() {
  $('#myModal').modal('show');
}


function showModalAddModule(id) {
  $('#AddModule').modal('show');
}


function closeModalAddModule() {
  $('#AddModule').modal('hide');
}

function showModalAddTrainingDetails() {
  $('#AddTrainingDetails').modal('show');
  document.getElementById("content_error_alert").style.display = "none";
  document.getElementById("content_success_alert").style.display ="none";
}


function closeModalAddTrainingDetails() {
  $('#AddTrainingDetails').modal('hide');
  document.getElementById("success_alert").style.display = "none";
  document.getElementById("error_alert").style.display = "none";
  document.getElementById("target_error_alert").style.display = "none";
  document.getElementById("target_success_alert").style.display = "none";
  document.getElementById("trainees_error_alert").style.display = "none";
  document.getElementById("trainees_success_alert").style.display = "none";
  document.getElementById("module_success_alert").style.display = "none";
  document.getElementById("module_error_alert").style.display = "none";
  document.getElementById("content_error_alert").style.display = "none";
  document.getElementById("content_success_alert").style.display ="none";
}

function showModalAddTargetsDetails() {
  $('#AddTargetsDetails').modal('show');
}


function closeModalAddTargetsDetails() {
  $('#AddTargetsDetails').modal('hide');
}

function showModalAddTraineesDetails() {
  $('#AddTraineesDetails').modal('show');
}


function closeModalAddTraineesDetails() {
  $('#AddTraineesDetails').modal('hide');
}


function showModalAddTrainingContent() {
  $('#AddTrainingContent').modal('show');
}


function closeModalAddTrainingContent() {
  $('#AddTrainingContent').modal('hide');
}



</script>

<!-- ======================= 
JS libraries, plugins and custom scripts -->
<?php include 'app/views/common/js.php';?>
</body>
</html>