<?php defined('BASEPATH') or exit('Direct access is not allowed'); ?>
<!DOCTYPE html>
<html>
<head>
<?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/pne_js.js"></script>
</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">
            <li><a class="dropdown-item" href="/trainingportal/Settings"><i class="bi bi-gear fa-fw me-2"></i>Settings & Privacy</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">6</h6>
              <small>Enrolled Courses</small>
            </div>
            <!-- Divider -->
            <div class="vr"></div>
            <!-- User stat item -->
            <div>
              <h6 class="mb-0">8.5</h6>
              <small>Rating</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 -->

      <!-- Main content START -->
      <div class="page-content">
        <!-- Official Course Program START -->
       <?php foreach ($course_details_data as $course_details_data_obj) {?>
        <div class="row g-3 mb-4">
          <div class="col-10 mt-4">
          <h5><?php echo $course_details_data_obj['name']; ?></h5>
          </div>
          <div class="col-2 mt-2">
          </div>
          <!-- Story START -->
        <div class="tiny-slider arrow-hover overflow-hidden">
          <div class="tiny-slider-inner d-flex" data-arrow="true" data-dots="true" data-loop="true" data-autoplay="false" data-items-xxl="6" data-items-xl="5" data-items-lg="4" data-items-md="4" data-items-sm="3" data-items-xs="1" data-gutter="12" data-edge="0">   
       
          <?php $module_data_arr=$course_details_data_obj['model_data']; foreach ($module_data_arr as $module_data_arr_obj) { ?>
          <div>
                     <!-- Couese START   -->
                    <div class="card h-100" >
                        <div class="position-relative">
                          <img class="img-fluid rounded-top" src="<?php echo $module_data_arr_obj['image_path']; ?>" alt="">
                          <div class="badge bg-danger text-white mt-2 me-2 position-absolute top-0 end-0">
                          Offline Course
                          </div>
                        </div>
                        <!-- Card body START -->
                        <div class="card-body position-relative pt-0">
                          <!-- Tag -->
                          <a class="btn btn-xs btn-primary mt-n3" href=""><?php echo $course_details_data_obj['name']; ?></a>
                          <h5 class="mt-3"><?php echo $module_data_arr_obj['module_name']; ?>   </h5>
                          <h6 class="mt-3"><?php echo $module_data_arr_obj['module_details']; ?> </h6>
                          
                        </div>
                        <!-- Card body END -->
                           <!-- Button -->
                           <div class="d-flex mt-3 justify-content-between" style="bottom:0;" >
                            <div class="w-100">
                              <input type="button" class="btn-check d-block" >
                              <label class="btn btn-sm btn-outline-success d-block" for="Interested2" onclick="get_training_module_data(<?php echo $course_details_data_obj['id']; ?>,<?php echo $module_data_arr_obj['id']; ?>);"><i class="fa-solid fa-diamond me-1"></i> Enroll course</label>
                            </div>
                          </div>
                    </div>
                      <!-- Course END -->
                </div>
              <?php }?> 
              <div>
            </div>
           </div>
         </div>
       <?php }?> 
        <!-- Official Course Program END -->

        <!-- The Modal -->    
        <div class="modal" id="training_module_model">
                      <div class="modal-dialog modal-xl">
                        <div class="modal-content">            
                          <!-- Modal Header -->
                          <div class="modal-header">
                            <h4 class="modal-title" id="PopupTitle" value=""> </h4>
                            <button type="button" class="close" onclick="closeModal_training_module()" data-dismiss="modal">&times;</button>
                            <input type="hidden" id="training_name" value="">
                            <input type="hidden" id="training_id" value="">
                            <input type="hidden" id="trainer_id" value="">
                            <input type="hidden" id="module_id" value="">
                            <input type="hidden" id="module_name" value="">
                            <input type="hidden" id="segment_id" value="">
                            <input type="hidden" id="segment_name" value="">
                            <input type="hidden" id="team_lead_id" value="">
                            <input type="hidden" id="bu_id" value="">
                            <input type="hidden" id="co_seg_head_id" value="">
                            <input type="hidden" id="seg_head_id" value="">
                            <input type="hidden" id="seg_leader_id" value="">
                            <input type="hidden" id="seg_president_id" value="">
                          </div>
                          <!-- Modal body -->
                          <div class="row row-cols-2">
                                                   <!-- Feature item START -->
                                          <div class="col-md-3">
                                            <div class="card card-body bg-mode shadow-none border-0 ">
                                              <!-- Image -->
                                              <div>
                                                <img class="h-50px" src="assets/images/elements/03.svg" alt="">
                                              </div>
                                              <!-- Info -->
                                              <h4 class="mt-4">Target:</h4>
                                              <p class="mb-0" id="targate"> </p>
                                            </div>
                                          </div>
                                          <!-- Feature item START -->

                                          <div class="col-md-3">
                                            <div class="card card-body bg-mode shadow-none border-0 ">
                                              <!-- Image -->
                                              <div>
                                                <img class="h-50px" src="assets/images/elements/09.svg" alt="">
                                              </div>
                                              <!-- Info -->
                                              <h4 class="mt-4">Trainees:</h4>
                                              <p class="mb-0" id="trainees"> </p>
                                            </div>
                                          </div>
                                          <div class="col-md-3">
                                            <div class="card card-body bg-mode shadow-none border-0">
                                              <!-- Image -->
                                              <div>
                                                <img class="h-50px" src="assets/images/elements/06.svg" alt="">
                                              </div>
                                              <!-- Info -->
                                              <h4 class="mt-4">Trainer:</h4>
                                              <p class="mb-0" id="trainer"></p>
                                            </div>
                                          </div>
                                          <div class="col-md-3">
                                            <div class="card card-body bg-mode shadow-none border-0 ">
                                              <!-- Image -->
                                              <div>
                                                <img class="h-50px" src="assets/images/elements/06.svg" alt="">
                                              </div>
                                              <!-- Info -->
                                              <h4 class="mt-4">Training Contains:</h4>
                                              <div id="trainingContent">
                                              <p class="mb-0">1. Basic Structure</p>
                                              </div>
                                            </div>
                                          </div>

                          </div>       
                          <div class="d-flex mt-3 justify-content-between">
                                              <div class="w-100">
                                                <input type="button" class="btn-check d-block" >
                                                <label class="btn btn-sm btn-outline-success d-block" onclick="applyCourse();"><i class="fa-solid fa-diamond me-1"></i> Apply For Course</label>
                                              </div>
                              </div>
                          
                          <!-- Modal footer -->
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" onclick="closeModal_training_module()" data-dismiss="modal">Close</button>
                          </div>
                          
                        </div>
                      </div>
                    </div>
                    <!-- The Modal end -->
       
     
        <!-- footer START -->
        <footer class="card card-body">
          <div class="row g-4">
            <div class="col-md-12">
            <?php include 'app/views/common/footer.php';?>
            </div>
        </footer>
        <!-- footer END -->
      </div>
      <!-- Main content END -->

  </div>
  <!-- Container END -->

</main>
<!-- **************** MAIN CONTENT END **************** -->

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