<!doctype html>
<html lang="en">

<head>
  <!-- ========== Meta Tags ========== -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Healdi - Medical & Health Template" />

  <!-- ========== Page Title ========== -->
  <title>Tycon - Product</title>

  <!-- ========== Favicon Icon ========== -->
  <link rel="shortcut icon" href="/tycon/assets/img/favicon.png" type="image/x-icon" />

  <!-- ========== Start Stylesheet ========== -->
  <link rel="stylesheet" href="/tycon/assets/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/tycon/assets/css/animate.css" />
  <link rel="stylesheet" href="/tycon/assets/css/magnific-popup.css" />
  <link rel="stylesheet" href="/tycon/assets/css/owl.carousel.min.css" />
  <link rel="stylesheet" href="/tycon/assets/css/owl.theme.default.min.css" />
  <link rel="stylesheet" href="/tycon/assets/css/font-awesome.min.css" />
  <link rel="stylesheet" href="/tycon/assets/css/themify-icons.css" />
  <link rel="stylesheet" href="/tycon/assets/css/bootsnav.css" />
  <link rel="stylesheet" href="/tycon/assets/css/flaticon-set.css" />
  <link rel="stylesheet" href="/tycon/style.css" />
  <link rel="stylesheet" href="/tycon/assets/css/responsive.css" />
  <link rel="stylesheet" href="/tycon/assets/css/fancybox.css" />
  <!-- ========== End Stylesheet ========== -->
</head>

<body>
  <!-- Preloader Start -->
  <div class="preloader">
    <img class="preloader__image" width="200" src="/tycon/assets/img/logo.png" alt="" />
  </div>
  <!-- Preloader Ends -->

  <?php
  include("includes/header.php");

  if (isset($_GET['prj_id'])) {

    $prj_id = $_GET['prj_id'];

    // PROJECT IMAGE
    $prst = $conn->prepare("SELECT * FROM project_images WHERE project_id = :id");
    $prst->execute([':id' => $prj_id]);
    $pr = $prst->fetch(PDO::FETCH_ASSOC);

    // CURRENT ARTICLE ID
    $article_id = isset($_GET['article_id']) ? $_GET['article_id'] : null;

    // ALL ARTICLES
    $atsst = $conn->prepare("SELECT * FROM products WHERE project_id = :id");
    $atsst->execute([':id' => $prj_id]);
    $ats = $atsst->fetchAll(PDO::FETCH_ASSOC);

    // FIRST ARTICLE DEFAULT
    if ($article_id == null && !empty($ats)) {
      $article_id = $ats[0]['id'];
    }

    // SINGLE ARTICLE 
    $atst = $conn->prepare("
        SELECT 
            p.id,
            p.*,
            pt.title_name
        FROM products p
        INNER JOIN product_titles pt 
            ON p.id = pt.product_id
        WHERE p.id = :article_id
    ");

    $atst->execute([':article_id' => $article_id]);
    $at = $atst->fetch(PDO::FETCH_ASSOC);

    // SINGLE ARTICLE IMAGES
    $aist = $conn->prepare("SELECT * FROM product_images WHERE product_id = :article_id");

    $aist->execute([':article_id' => $article_id]);
    $ai = $aist->fetchAll(PDO::FETCH_ASSOC);

  } else {
    die("Articles Not Found");
  }
  ?>


  <!-- Start Breadcrumb 
    ============================================= -->
  <div class="breadcrumb-area bg-gradient text-center">
    <!-- Fixed BG -->
    <div class="fixed-bg" style="background-image: url(/tycon/cms/uploads/<?php echo $pr['image_path']; ?>)"></div>
    <!-- Fixed BG -->
    <div class="container">
      <div class="row">
        <div class="col-lg-8 offset-lg-2">
          <h1><?php echo $at['name']; ?></h1>
          <ul class="breadcrumb">
            <li>
              <a href="<?= $base ?>"><i class="fas fa-home"></i> Home</a>
            </li>
            <li><a>Articles</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- End Breadcrumb -->

  <!-- products cards -->
  <div class="container department-area bg-gray solid-thumb carousel-shadow default-padding bottom-less">
    <div class="top-cum">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="<?= $base ?>articles/2">Articles</a></li>
          <li class="breadcrumb-item active" aria-current="page"><?php echo $at['name']; ?></li>
        </ol>
      </nav>
    </div>
    <div class="row">
      <div class="col-lg-3 order-2 order-lg-1">
        <div class="pro-title">
          <h4>Articles</h4>
        </div>
        <nav class="nav sideb-pro flex-column">

          <?php foreach ($ats as $a): ?>

            <a class="nav-link <?php echo ($article_id == $a['id']) ? 'active' : ''; ?>"
              href="<?= $base ?>articles/<?php echo $prj_id; ?>/<?php echo $a['id']; ?>">

              <?php echo $a['name']; ?>

            </a>

          <?php endforeach; ?>

        </nav>
      </div>
      <div class="col-lg-9 order-1 order-lg-2">
        <div class="department-items pro-item">
          <div class="">
            <h4>
              <a href="#"><?php echo $at['title_name']; ?> </a>
            </h4>
            <p>
              <?php echo $at['description']; ?>
            </p>
          </div>
          <div class="row">
            <!-- Single Item -->
            <?php foreach ($ai as $img): ?>
              <div class="single-item col-lg-4 col-md-6">
                <div class="item">
                  <div class="thumb">
                    <a href="/tycon/cms/uploads/<?php echo $img['image_path']; ?>" data-fancybox="gallery"><img
                        src="/tycon/cms/uploads/<?php echo $img['image_path']; ?>" alt="Thumb" /></a>
                  </div>
                </div>
              </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end products cards -->

  <!-- Start Contact Area  
    ============================================= -->
  <div id="contact" class="contact-us-area default-padding">
    <div class="container">
      <div class="contact-items">
        <div class="row">
          <div class="col-lg-7 wow address-box fadeInUp bg-cover"
            style="background-image: url(/tycon/assets/img/contact/1.jpg)">
            <div class="address-info">
              <ul>
                <li>
                  <h5><i class="flaticon-call"></i> Phone</h5>
                  <span>+44-20-7328-4499</span>
                </li>
                <li>
                  <h5><i class="flaticon-email"></i> Email</h5>
                  <span>info@healdi.com</span>
                </li>
              </ul>
            </div>
          </div>

          <div class="col-lg-5 wow fadeInLeft contact-form-box">
            <h2>Need help? <strong>Let's ask your questions</strong></h2>
            <form action="/tycon/assets/mail/contact.php" method="POST" class="contact-form">
              <div class="row">
                <div class="col-lg-12">
                  <div class="form-group">
                    <input class="form-control" id="name" name="name" placeholder="Name" type="text" />
                    <span class="alert-error"></span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <input class="form-control" id="email" name="email" placeholder="Email*" type="email" />
                    <span class="alert-error"></span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <input class="form-control" id="phone" name="phone" placeholder="Phone" type="text" />
                    <span class="alert-error"></span>
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="form-group comments">
                    <textarea class="form-control" id="comments" name="comments"
                      placeholder="Tell Us About Project *"></textarea>
                  </div>
                </div>
                <div class="col-lg-12">
                  <button type="submit" name="submit" id="submit">
                    Send Message
                  </button>
                </div>
                <!-- Alert Message -->
                <div class="col-lg-12 alert-notification">
                  <div id="message" class="alert-msg"></div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Contact -->
  <div class="maps-area">
    <div class="google-maps">
      <iframe src="https://www.google.com/maps?q=6.9271,79.8612&z=15&output=embed" width="100%" height="450"
        style="border: 0" allowfullscreen="" loading="lazy">
      </iframe>
    </div>
  </div>

  <!-- Start Footer 
    ============================================= -->
  <footer class="bg-dark text-light">
    <div class="container">
      <div class="f-items default-padding">
        <div class="row">
          <div class="col-lg-4 col-md-6 item">
            <div class="f-item about">
              <img src="/tycon/assets/img/logo-light.png" alt="Logo" />
              <p>
                Required honoured trifling eat pleasure man relation.
                Assurance yet bed was improving furniture man.
              </p>
              <div class="address">
                <ul>
                  <li>
                    <div class="icon">
                      <i class="flaticon-email"></i>
                    </div>
                    <div class="info">
                      <h5>Email:</h5>
                      <span>support@validtemplates.com</span>
                    </div>
                  </li>
                  <li>
                    <div class="icon">
                      <i class="flaticon-call"></i>
                    </div>
                    <div class="info">
                      <h5>Phone:</h5>
                      <span>+44-20-7328-4499</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="single-item col-lg-2 col-md-6 item">
            <div class="f-item link">
              <h4 class="widget-title">Department</h4>
              <ul>
                <li>
                  <a href="#">Medecine & Health</a>
                </li>
                <li>
                  <a href="#">Dental Care</a>
                </li>
                <li>
                  <a href="#">Eye Treatment</a>
                </li>
                <li>
                  <a href="#">Children Chare</a>
                </li>
                <li>
                  <a href="#">Traumatology</a>
                </li>
                <li>
                  <a href="#">X-ray</a>
                </li>
              </ul>
            </div>
          </div>

          <div class="single-item col-lg-2 col-md-6 item">
            <div class="f-item link">
              <h4 class="widget-title">Usefull Links</h4>
              <ul>
                <li>
                  <a href="#">Ambulance</a>
                </li>
                <li>
                  <a href="#">Emergency</a>
                </li>
                <li>
                  <a href="#">Blog</a>
                </li>
                <li>
                  <a href="#">Project</a>
                </li>
                <li>
                  <a href="#">About Us</a>
                </li>
                <li>
                  <a href="#">Contact</a>
                </li>
              </ul>
            </div>
          </div>

          <div class="single-item col-lg-4 col-md-6 item">
            <div class="f-item branches">
              <div class="branches">
                <ul>
                  <li>
                    <strong>USA Branches:</strong>
                    <span>4992 Bryan Avenue, Prior Lake, Minnesota <br />
                      Phone: 651-379-4698</span>
                  </li>
                  <li>
                    <strong>Central Branches:</strong>
                    <span>2001 Kia Magentis, Prior Lake, Minnesota <br />
                      Phone: 651-379-4698</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Footer Bottom -->
    <div class="footer-bottom">
      <div class="container">
        <div class="row align-center">
          <div class="col-lg-6">
            <p>
              Copyright &copy; 2025. Designed by
              <a href="#">validtemplatess</a>
            </p>
          </div>
          <div class="col-lg-6 text-end social">
            <ul>
              <li>
                <a href="#"><i class="fab fa-facebook-f"></i> Facebook</a>
              </li>
              <li>
                <a href="#"><i class="fab fa-twitter"></i> Twitter</a>
              </li>
              <li>
                <a href="#"><i class="fab fa-youtube"></i> Youtube</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- End Footer Bottom -->
    <a href="#" class="back2top" title="Back to Top">Back to Top</a>
  </footer>
  <!-- End Footer -->

  <!-- jQuery Frameworks
    ============================================= -->
  <script src="/tycon/assets/js/jquery-3.7.1.min.js"></script>
  <script src="/tycon/assets/js/bootstrap.min.js"></script>
  <script src="/tycon/assets/js/bootsnav.js"></script>
  <script src="/tycon/assets/js/circle-progress.js"></script>
  <script src="/tycon/assets/js/count-to.js"></script>
  <script src="/tycon/assets/js/imagesloaded.pkgd.min.js"></script>
  <script src="/tycon/assets/js/isotope.pkgd.min.js"></script>
  <script src="/tycon/assets/js/jquery.appear.js"></script>
  <script src="/tycon/assets/js/jquery.backgroundMove.js"></script>
  <script src="/tycon/assets/js/jquery.easing.min.js"></script>
  <script src="/tycon/assets/js/jquery.magnific-popup.min.js"></script>
  <script src="/tycon/assets/js/jquery.nice-select.min.js"></script>
  <script src="/tycon/assets/js/loopcounter.js"></script>
  <script src="/tycon/assets/js/owl.carousel.min.js"></script>
  <script src="/tycon/assets/js/popper.min.js"></script>
  <script src="/tycon/assets/js/progress-bar.min.js"></script>
  <script src="/tycon/assets/js/progresscircle.js"></script>
  <script src="/tycon/assets/js/wow.min.js"></script>
  <script src="/tycon/assets/js/wow.min.js"></script>
  <script src="/tycon/assets/js/fancybox.js"></script>
  <script src="/tycon/assets/js/main.js"></script>

  <script>
    $(document).ready(function () {
      $(function () {

        // get path: /tycon/articles/2
        var path = window.location.pathname;

        // remove /tycon/ (your base folder)
        path = path.replace("/tycon/", "");

        // get first segment (articles)
        var section = path.split("/")[0];

        // activate matching menu item
        $('.nav a').each(function () {

          var href = $(this).attr('href');

          if (!href) return;

          // check if link contains section keyword
          if (href.indexOf(section) !== -1) {
            $(this).addClass('act');
          }

        });

      });
    });
  </script>
</body>

</html>