<?php
/**
 * Template Name: Projects
 */

get_header(); ?>
 <main class="main">
  <!-- our project begin -->
   <!-- our project begin -->
   <div style="background:#fff;margin-bottom:60px;">
    <h2 style="font-size:32px;font-weight:700;margin:40px 0 20px;text-transform:uppercase;text-align:center;  padding-top: 30px;">
      Some of Our Best Work
    </h2>

    <div class="carousel-container">
      <button class="nav-btn nav-btn-left" onclick="prevSlide()"><i class="bi bi-arrow-left"></i></button>

      <div id="carouselSlide" class="carousel-slide">
        <div class="project-card" onclick="showProjectDetails('eAakalan Portal','./assets/img/eaklan.png')">
          <img src="<?= bloginfo("template_url") ?>/assets/img/eaklan.png" alt="Project 1"><div class="overlay">eAakalan Portal</div>
        </div>
        <div class="project-card" onclick="showProjectDetails('Panchayati Raj Institute of Training','./assets/img/panch.png')">
          <img src="<?= bloginfo("template_url") ?>/assets/img/panch.png" alt="Project 2"><div class="overlay">Panchayati Raj Institute of Training</div>
        </div>
        <div class="project-card" onclick="showProjectDetails('Goseva Ayog UP Portal','./assets/img/goseva.png')">
          <img src="<?= bloginfo("template_url") ?>/assets/img/goseva.png" alt="Project 3"><div class="overlay">Goseva Ayog UP Portal</div>
        </div>
        <div class="project-card" onclick="showProjectDetails('Jagriti Foundation Trust','./assets/img/jagriti.png')">
          <img src="<?= bloginfo("template_url") ?>/assets/img/jagriti.png" alt="Project 4"><div class="overlay">Jagriti Foundation Trust</div>
        </div>
        <div class="project-card" onclick="showProjectDetails('Citizen Service Center Amethi','./assets/img/amethi.png')">
          <img src="<?= bloginfo("template_url") ?>/assets/img/amethi.png" alt="Project 5"><div class="overlay">CSC Amethi Dashboard</div>
        </div>
        <div class="project-card" onclick="showProjectDetails('eAakalan Mobile App','./assets/img/eakalanmm.jpg')">
          <img src="<?= bloginfo("template_url") ?>/assets/img/eakalanmm.jpg" alt="Project 6"><div class="overlay">eAakalan Mobile App</div>
        </div>
        <div class="project-card" onclick="showProjectDetails('Examination Webcasting','./assets/img/wecasting.jpeg')">
          <img src="<?= bloginfo("template_url") ?>/assets/img/wecasting.jpeg" alt="Project 7"><div class="overlay">Examination Webcasting</div>
        </div>
      </div>

      <button class="nav-btn nav-btn-right" onclick="nextSlide()"><i class="bi bi-arrow-right"></i></button>
    </div>
  </div>   <!-- Modal for Project Details -->
  <!-- Modal for Project Details -->
  <div class="modal fade" id="projectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content text-center">
        <div class="modal-header">
          <h5 class="modal-title" id="projectTitle"></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <img id="projectImage" class="img-fluid" alt="Project">
        </div>
      </div>
    </div>
  </div>
  <!-- our project end -->

  </main>
<?php get_footer(); ?>
