<?php defined('BASEPATH') or exit('Direct access is not allowed'); ?>
<!DOCTYPE html>
<html>
<head>
<?php include 'app/views/common/css.php';?>

</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">
          <li class="nav-item ms-2">
            <a class="nav-link icon-md btn p-0" href="settings.html">
              <i class="bi bi-gear-fill fs-6"> </i>
            </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link icon-md btn p-0" href="#" id="notifDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
              <i class="bi bi-bell-fill fs-6"> </i>
            </a>
            <div class="dropdown-menu dropdown-animation dropdown-menu-end dropdown-menu-size-md p-0 shadow-lg border-0" aria-labelledby="notifDropdown">
              <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <h6 class="m-0">Notifications <span class="badge bg-danger bg-opacity-10 text-danger ms-2">4 new</span></h6>
                  <a class="small" href="#">Clear all</a>
                </div>
                <div class="card-body p-0">
                  <ul class="list-group list-group-flush list-unstyled p-2">
                    <!-- Notif item -->
                    <li>
                      <div class="list-group-item list-group-item-action rounded badge-unread d-flex border-0 mb-1 p-3">
                        <div class="avatar text-center d-none d-sm-inline-block">
                          <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/01.jpg" alt="">
                        </div>
                        <div class="ms-sm-3">
                          <div class=" d-flex">
                          <p class="small mb-2"><b>Judy Nguyen</b> sent you a friend request.</p>
                          <p class="small ms-3 text-nowrap">Just now</p>
                        </div>
                        <div class="d-flex">
                          <button class="btn btn-sm py-1 btn-primary me-2">Accept </button>
                          <button class="btn btn-sm py-1 btn-danger-soft">Delete </button>
                        </div>
                      </div>
                    </div>
                    </li>
                    <!-- Notif item -->
                    <li>
                      <div class="list-group-item list-group-item-action rounded badge-unread d-flex border-0 mb-1 p-3 position-relative">
                        <div class="avatar text-center d-none d-sm-inline-block">
                          <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/02.jpg" alt="">
                        </div>
                        <div class="ms-sm-3 d-flex">
                          <div>
                            <p class="small mb-2">Wish <b>Amanda Reed</b> a happy birthday (Nov 12)</p>
                            <button class="btn btn-sm btn-outline-light py-1 me-2">Say happy birthday 🎂</button>
                          </div>
                          <p class="small ms-3">2min</p>
                        </div>
                      </div>
                    </li>
                    <!-- Notif item -->
                    <li>
                      <a href="#" class="list-group-item list-group-item-action rounded d-flex border-0 mb-1 p-3">
                        <div class="avatar text-center d-none d-sm-inline-block">
                          <div class="avatar-img rounded-circle bg-success"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">WB</span></div>
                        </div>
                        <div class="ms-sm-3">
                          <div class="d-flex">
                            <p class="small mb-2">Webestica has 15 like and 1 new activity</p>
                            <p class="small ms-3">1hr</p>
                          </div>
                        </div>
                      </a>
                    </li>
                    <!-- Notif item -->
                    <li>
                      <a href="#" class="list-group-item list-group-item-action rounded d-flex border-0 p-3 mb-1">
                        <div class="avatar text-center d-none d-sm-inline-block">
                          <img class="avatar-img rounded-circle" src="app/views/assets/images/logo/12.svg" alt="">
                        </div>
                        <div class="ms-sm-3 d-flex">
                          <p class="small mb-2"><b>Bootstrap in the news:</b> The search giant’s parent company, Alphabet, just joined an exclusive club of tech stocks.</p>
                          <p class="small ms-3">4hr</p>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
                <div class="card-footer text-center">
                  <a href="#" class="btn btn-sm btn-primary-soft">See all incoming activity</a>
                </div>
              </div>
            </div>
          </li>
          <!-- 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="app/views/assets/images/avatar/07.jpg" alt="avatar">
                </div>
                <div class="d-none d-xl-block">
                  <span class="h6 stretched-link">Lori Ferguson</span>
                  <p class="small m-0">Web Developer</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="https://support.webestica.com/" target="_blank">
                  <i class="fa-fw bi bi-life-preserver me-2"></i>Support
                </a> 
              </li>
              <li> 
                <a class="dropdown-item" href="docs/index.html" 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="app/views/assets/images/avatar/07.jpg" alt=""></a>
            </div>
            <!-- Info -->
            <h5 class="mb-0"> <a href="#!">First  Last </a> </h5>
          <small>Software Eng</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="#!"> <img class="me-2 h-20px fa-fw" src="app/views/assets/images/icon/home-outline-filled.svg" alt=""><span>Feed </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>Popular </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/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/like-outline-filled.svg" alt=""><span>Subscriptions </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>My favorites </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>Wishlist </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/notification-outlined-filled.svg" alt=""><span>Notifications </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/cog-outline-filled.svg" alt=""><span>Settings </span></a>
              </li>
              <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 trailer START -->
   
        <!-- Official trailer END -->
        <div class="row g-3 mb-4">
          <div class="col-10 mt-4">
            <h5>Course 1 </h5>
          </div>
          <div class="col-2 mt-2">
          <h5> Medical </h5>
            <!-- <h5><?= $email ?> </h5> -->
          </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">
              <div>
                     <!-- Couese START -->
                    <div class="card h-100">
                        <div class="position-relative">
                          <img class="img-fluid rounded-top" src="app/views/assets/images/post/16by9/large/10.jpg" 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="">Vehicle Emission Measurement Lab</a>
                          <h5 class="mt-3">Module 1 : Basic (Classroom Training - 5 Day) </h5>
                          <!-- Button -->
                          <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" for="Interested2" onclick="showModal();"><i class="fa-solid fa-diamond me-1"></i> Enroll course</label>
                            </div>
                          </div>
                          
                        </div>
                        <!-- Card body END -->
                    </div>
                      <!-- Course END -->
              </div>
              <div>
                 <!-- Couese START -->
                 <div class="card h-100">
                        <div class="position-relative">
                          <img class="img-fluid rounded-top" src="app/views/assets/images/post/16by9/large/10.jpg" 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="">Vehicle Emission Measurement Lab</a>
                          <h5 class="mt-3"> Module 2 : Chassis Dyno Module (3 Months Training) </h5>
                          <!-- Button -->
                          <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" for="Interested2" onclick="showModal();"><i class="fa-solid fa-diamond me-1"></i> Enroll course</label>
                            </div>
                          </div>
                        </div>
                        <!-- Card body END -->
                    </div>
                      <!-- Course END -->
              </div>
              <div>
             <!-- Couese START -->
             <div class="card h-100">
                        <div class="position-relative">
                          <img class="img-fluid rounded-top" src="app/views/assets/images/post/16by9/large/10.jpg" 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="">Vehicle Emission Measurement Lab</a>
                          <h5 class="mt-3"> Module 3 : Emission Measurement Systems (1 Month) </h5>
                          <!-- Button -->
                          <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" for="Interested2" onclick="showModal();"><i class="fa-solid fa-diamond me-1"></i> Enroll course</label>
                            </div>
                          </div>
                        </div>
                        <!-- Card body END -->
                    </div>
                      <!-- Course END -->
              </div>
              <div>
                <!-- Couese START -->
                <div class="card h-100">
                        <div class="position-relative">
                          <img class="img-fluid rounded-top" src="app/views/assets/images/post/16by9/large/10.jpg" 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="">Vehicle Emission Measurement Lab</a>
                          <h5 class="mt-3"> Module 4 : Vehicle Test Automation System (12 Days) </h5>
                          <!-- Button -->
                          <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" for="Interested2" onclick="showModal();"><i class="fa-solid fa-diamond me-1"></i> Enroll course</label>
                            </div>
                          </div>
                        </div>
                        <!-- Card body END -->
                    </div>
                      <!-- Course END -->
              </div>
              <div>

                <!-- Couese START -->
                <div class="card h-100">
                        <div class="position-relative">
                          <img class="img-fluid rounded-top" src="app/views/assets/images/post/16by9/large/10.jpg" 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="">Vehicle Emission Measurement Lab</a>
                          <h5 class="mt-3">Module 5 : Vehicle Testing (1 Month) </h5>
                          <!-- Button -->
                          <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" for="Interested2" onclick="showModal();"><i class="fa-solid fa-diamond me-1"></i> Enroll course</label>
                            </div>
                          </div>
                        </div>
                        <!-- Card body END -->
                    </div>
                      <!-- Course END -->
              </div>
              <div>

            </div>
          </div>
        </div>
        
        <div class="row row-cols-5">
        <div class="col">
        <div class="card h-100">
            <div class="position-relative">
              <img class="img-fluid rounded-top" src="app/views/assets/images/segments/automotive.png" alt="">
              <div class="badge bg-danger text-white mt-2 me-2 position-absolute top-0 end-0">
                Automotive
              </div>
            </div>
            <!-- Card body START -->
            <div class="card-body position-relative pt-0">
              <!-- Tag -->
              <a class="btn btn-xs btn-primary mt-n3" href="/trainingportal/Automotive">training </a>
              <h5 class="mt-3"> <a href="/trainingportal/Automotive"> Automotive </a> </h5>
              <!-- Button -->
              <div class="d-flex mt-3 justify-content-between">
                <!-- Interested button -->
                <div class="w-100">
                  <input type="checkbox" class="btn-check d-block" onclick="getAutomotive();" id="Interested1">
                  <label class="btn btn-sm btn-outline-success d-block" for="Interested1"><i class="fa-solid fa-thumbs-up me-1"></i> Go to</label>
                </div>
                <div class="dropdown ms-3">
                  <a href="#" class="btn btn-sm btn-primary-soft" id="eventActionShare" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-arrow-up-right-square"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-end" style="width: 18rem;" aria-labelledby="eventActionShare">
                      <div class="card-body">
                        <h5 class="card-title">Automotive</h5>
                        <p class="card-text">HORIBA Automotive provides innovative applications and insights, advanced automotive validation and verification technologies and equipment, and ongoing guidance and consultation to client partners across the globe. With 75 years of unmatched comprehensive scientific measurement and data management proficiencies, HORIBA Automotive’s ever-expanding engineering expertise and ongoing innovations provide customers with complete solutions that solve industry challenges.</p>
                        <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                      </div>
                   </div>

                </div>
              </div>
            </div>
            <!-- Card body END -->
        </div>
        </div>
        <div class="col">
        <div class="card h-100">
            <div class="position-relative">
              <img class="img-fluid rounded-top" src="app/views/assets/images/segments/medical.png" alt="">
              <div class="badge bg-danger text-white mt-2 me-2 position-absolute top-0 end-0">
              Medical
              </div>
            </div>
            <!-- Card body START -->
            <div class="card-body position-relative pt-0">
              <!-- Tag -->
              <a class="btn btn-xs btn-primary mt-n3" href="/trainingportal/medical">training</a>
              <h5 class="mt-3"> <a href="/trainingportal/medical"> Medical </a> </h5>
              <!-- Button -->
              <div class="d-flex mt-3 justify-content-between">
                <!-- Interested button -->
                <div class="w-100">
                  <input type="checkbox" class="btn-check d-block" onclick="getMedical();" id="Interested2">
                  <label class="btn btn-sm btn-outline-success d-block" for="Interested2"><i class="fa-solid fa-thumbs-up me-1"></i> Go to</label>
                </div>
                <div class="dropdown ms-3">
                  <a href="#" class="btn btn-sm btn-primary-soft" id="eventActionShare2" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-arrow-up-right-square"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-end" style="width: 18rem;" aria-labelledby="eventActionShare2">
                      <div class="card-body">
                        <h5 class="card-title">Medical</h5>
                        <p class="card-text">HORIBA Medical designs, develops and distributes worldwide, in vitro diagnostic systems mainly destined for biological analysis in medical laboratories. These automated analyzers meet the needs of various users including patients, doctors, private laboratories, clinics and university hospitals. HORIBA expertise in in vitro diagnostics is one of the most respected in hematology worldwide and contribute today to the health of tomorrow.</p>
                        <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                      </div>
                   </div>
                </div>
              </div>
            </div>
            <!-- Card body END -->
        </div>
        </div>
        <div class="col">
        <div class="card h-100">
            <div class="position-relative">
              <img class="img-fluid rounded-top" src="app/views/assets/images/segments/pne.png" alt="">
              <div class="badge bg-danger text-white mt-2 me-2 position-absolute top-0 end-0">
              Process & Environmental
              </div>
            </div>
            <!-- Card body START -->
            <div class="card-body position-relative pt-0">
              <!-- Tag -->
              <a class="btn btn-xs btn-primary mt-n3" href="/trainingportal/Pne">training</a>
              <h5 class="mt-3"> <a href="/trainingportal/Pne"> P & E </a> </h5>
              <!-- Button -->
              <div class="d-flex mt-3 justify-content-between">
                <!-- Interested button -->
                <div class="w-100">
                  <input type="checkbox" class="btn-check d-block" onclick="getPnE();" id="Interested3">
                  <label class="btn btn-sm btn-outline-success d-block" for="Interested3"><i class="fa-solid fa-thumbs-up me-1"></i> Go to</label>
                </div>
                <div class="dropdown ms-3">
                  <a href="#" class="btn btn-sm btn-primary-soft" id="eventActionShare3" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-arrow-up-right-square"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-end" style="width: 18rem;" aria-labelledby="eventActionShare3">
                      <div class="card-body">
                        <h5 class="card-title">Process & Environmental</h5>
                        <p class="card-text">HORIBA provides a wide range of technologies to measure air, water and soil quality. Thanks to its measurement technologies that comply with environmental regulations around the world and contributes to the development of environmental conservation. </p>
                        <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                      </div>
                   </div>
                </div>
              </div>
            </div>
            <!-- Card body END -->
        </div>
        </div>
        <div class="col">
        <div class="card h-100">
            <div class="position-relative">
              <img class="img-fluid rounded-top" src="app/views/assets/images/segments/scientific.png" alt="">
              <div class="badge bg-danger text-white mt-2 me-2 position-absolute top-0 end-0">
              Scientific
              </div>
            </div>
            <!-- Card body START -->
            <div class="card-body position-relative pt-0">
              <!-- Tag -->
              <a class="btn btn-xs btn-primary mt-n3" href="/trainingportal/scientific">training</a>
              <h5 class="mt-3"> <a href="/trainingportal/scientific"> Scientific </a> </h5>
              <!-- Button -->
              <div class="d-flex mt-3 justify-content-between">
                <!-- Interested button -->
                <div class="w-100">
                  <input type="checkbox" class="btn-check d-block" onclick="getScientific();" id="Interested4">
                  <label class="btn btn-sm btn-outline-success d-block" for="Interested4"><i class="fa-solid fa-thumbs-up me-1"></i> Go to</label>
                </div>
                <div class="dropdown ms-3">
                  <a href="#" class="btn btn-sm btn-primary-soft" id="eventActionShare4" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-arrow-up-right-square"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-end" style="width: 18rem;" aria-labelledby="eventActionShare4">
                      <div class="card-body">
                        <h5 class="card-title">Scientific</h5>
                        <p class="card-text"> HORIBA Scientific offers 200 years of experience in developing high-performance scientific instruments and analytical solutions. </p>
                        <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                      </div>
                   </div>
                </div>
              </div>
            </div>
            <!-- Card body END -->
          </div>
        </div>
        <div class="col">
        <div class="card h-100">
            <div class="position-relative">
              <img class="img-fluid rounded-top" src="app/views/assets/images/segments/semiconductor.png" alt="">
              <div class="badge bg-danger text-white mt-2 me-2 position-absolute top-0 end-0">
              Semiconductor
              </div>
            </div>
            <!-- Card body START -->
            <div class="card-body position-relative pt-0">
              <!-- Tag -->
              <a class="btn btn-xs btn-primary mt-n3" href="/trainingportal/semiconductor">training</a>
              <h5 class="mt-3"> <a href="/trainingportal/semiconductor"> Semiconductor </a> </h5>
              <!-- Button -->
              <div class="d-flex mt-3 justify-content-between">
                <!-- Interested button -->
                <div class="w-100">
                  <input type="checkbox" class="btn-check d-block" onclick="getSemiconductor();" id="Interested5">
                  <label class="btn btn-sm btn-outline-success d-block" for="Interested5"><i class="fa-solid fa-thumbs-up me-1"></i> Go to</label>
                </div>
                <div class="dropdown ms-3">
                  <a href="#" class="btn btn-sm btn-primary-soft" id="eventActionShare5" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-arrow-up-right-square"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-end" style="width: 18rem;" aria-labelledby="eventActionShare5">
                      <div class="card-body">
                        <h5 class="card-title">Semiconductor</h5>
                        <p class="card-text"> In today’s society, the rate of change in product development is driven by consumer demand from many industries looking for differentiation in a crowed marketplace. At the heart of new product development are the advances and utilisation of new technologies underpinned by the use of advanced materials and semiconductors.</p>
                         <p class="card-text"> HORIBA competencies in Fluid Control, Measurement and Analysis are enabling researchers, developers, original equipment manufacturers and end users to deliver novels solutions to global demands.   </p>
                        <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
                      </div>
                   </div>
                  
                </div>
              </div>
            </div>
            <!-- Card body END -->
          </div>
        </div>
    </div>
      <!-- Main content END -->
   <!-- The Modal -->
           
   <div class="modal" id="myModal">
    <div class="modal-dialog modal-xl">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Vehicle Emission Measurement Lab</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <style>table, th, td {  border:1px solid black;}</style>
        <!-- Modal body -->
        <div class="row row-cols-2">
        <div class="col">
        <div class="modal-body center">
                 <table>
                    <tr>
                      <td>
                      Target :
                      </td>
                      <td><p> 1. Skill Level Improvement of Engineers.</p>
                      <p>2. Engineer must be able of do Operational, Calibration & Daily Maintenance activities.</p>
                      <p>3. Engineer must be able to perform Vehicle Emission Test without any support </p></td>
                    </tr>
                    <tr>
                      <td>Trainees:</td>
                      <td>Any Level Engineers</td>
                    </tr>
                    <tr>
                      <td>Trainer:</td>
                      <td>
                        <p>Chassis Dyno Manufacturing: Swapnil Deshpande</p>
                        <p>Emission Measurement System: Mayur Devrukhkar@HITC,OJT by Service Leaders</p>
                        <p>Automation System: Harshit Agarwal, Sanket Nalawade</p>
                        <p>Vehicle Testing: VTC Lab (Vithuraj Sawant)</p>
                      </td>
                    </tr>
                  </table>
        </div>   
      </div>
      <div class="col">
      <div class="modal-body center">
                 <table>
                    <tr>
                      <td>
                      Course Contains
                      </td>
                      <td>

                      <p> 1. -	What is Vehicle Emission?</p>

                      <p> 2. -	Effect of Air pollution on Human Health </p>

                      <p> 3. -	Chassis Dynamometer</p>

                      <p> 4. -	Emission Measurement Systems</p>

                      <p> 5. -	Vehicle Test Automation System</p>

                      <p> 6. -	VTC Lab</p></td>

                    </tr>
                  </table>
        </div>
          </div>
        </div>
    
        
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
        
      </div>
    </div>
  </div>
      <!-- The Modal end -->
  </div>
  <!-- Container END -->
    
</main>
<!-- **************** MAIN CONTENT END **************** -->
<script>
  function showModal() {
  $('#myModal').modal('show');
}
</script>
<!-- =======================
JS libraries, plugins and custom scripts -->
<?php include 'app/views/common/js.php';?>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>