<?php 
session_start();
include("connect.php");

// Sanitize POST inputs
$form_file  = basename($_POST['uploaded_form_file'] ?? '');
$photo_file = basename($_POST['uploaded_photo_file'] ?? '');
$video_file = basename($_POST['uploaded_video_file'] ?? '');
$doctorname = htmlspecialchars($_POST['doctorname'] ?? '', ENT_QUOTES, 'UTF-8'); 
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Healthy Heart Camp</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Magnific Popup CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.css">

  <!-- Custom CSS -->
  <link href="css/styles.css" rel="stylesheet">

  <!-- jQuery and Popup JS -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js"></script>
</head>

<body>
<div class="container bg2">

  <!-- Header -->
  <header class="py-3">
    <div class="row align-items-center">
      <div class="col-6 text-start">
        <a href="admin.php">
          <img src="images/lpt-left-logo.png" class="img-fluid" alt="Left logo">
        </a>
      </div>
      <div class="col-6 text-end">
        <img src="images/topmenu-logo.png" class="img-fluid" alt="Top menu logo">
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="my-4">
    <form id="mainForm" method="post" action="form-submit.php" enctype= "multipart/form-data">

      <!-- Hidden Inputs -->

<input type="hidden" name="doctorname" value="<?php echo $doctorname; ?>">      
<input type="hidden" name="uploaded_form_file" value="uploads/forms/<?php echo $form_file; ?>">
      <input type="hidden" name="uploaded_photo_file" value="uploads/photos/<?php echo $photo_file; ?>">
      <input type="hidden" name="uploaded_video_file" value="uploads/videos/<?php echo $video_file; ?>">

      <!-- Title -->
      <div class="text-center mb-4">
        <div class="box fs-4 fw-bold">Healthy Heart Camp</div>
      </div>

      <!-- Doctor Name -->
      <div class="mb-3">
        <label for="doctorname" class="form-label">Doctor Name</label>
     <input type="text" class="form-control" id="doctorname" name="doctorname_display" value="<?php echo $doctorname; ?>" readonly>
 </div>

      <!-- Preview Buttons -->
      <div class="row g-3 justify-content-center">

        <!-- Form Preview -->
        <div class="col-10 col-md-4 text-center">
          <a href="uploads/forms/<?php echo $form_file; ?>" class="popup-link popup-image btn btn-primary w-100 mb-2">Preview Form</a>
        </div>

        <!-- Photo Preview -->
        <div class="col-10 col-md-4 text-center">
          <a href="uploads/photos/<?php echo $photo_file; ?>" class="popup-link popup-image btn btn-primary w-100 mb-2">Preview Photo</a>
        </div>

        <!-- Video Preview -->
        <div class="col-10 col-md-4 text-center">
          <a href="#video-inline-popup" class="popup-video btn btn-primary w-100 mb-2" data-video="uploads/videos/<?php echo $video_file; ?>">Preview Video</a>
        </div>

      </div>

      <!-- Action Buttons -->
      <div class="row my-4 justify-content-center">
        <div class="col-6 col-md-2 text-center mb-2">
          <button type="button" onclick="window.location.href='form-dashboard.php'" class="btn  w-100">
            <img src="images/back-btn.png" alt="Back" class="img-fluid">
          </button>
        </div>
        <div class="col-6 col-md-2 text-center mb-2">
          <button type="submit" class="btn w-100">
            <img src="images/submit_btn.png" alt="Submit" class="img-fluid">
          </button>
        </div>
      </div>

    </form>
  </main>

  <!-- Footer -->
  <footer class="row">
    <div class="col-6 text-center bg-light">
      <img src="images/disclaimer.png" class="img-fluid" alt="Disclaimer">
    </div>
    <div class="col-6 text-center" style="background:#54308E">
      <img src="images/contact-us.png" class="img-fluid" alt="Contact Us">
    </div>
  </footer>

</div>

<!-- Hidden Inline Video -->
<div id="video-inline-popup" class="mfp-hide text-center">
  <video id="inlineVideo" controls style="width:100%; max-height:75vh;"></video>
</div>

<!-- Magnific Popup Init -->
<script>
$(document).ready(function() {
  // Image or PDF popup
  $('.popup-image').magnificPopup({
    type: 'image',
    closeBtnInside: true,
    image: { verticalFit: true },
    callbacks: {
      elementParse: function(item) {
        if (item.src.match(/\.pdf$/i)) {
          item.type = 'iframe';
        }
      }
    }
  });

  // Inline video popup
  $('.popup-video').magnificPopup({
    type: 'inline',
    midClick: true,
    callbacks: {
      open: function() {
        var src = this.st.el.attr('data-video');
        this.content.find('#inlineVideo').attr('src', src);
      },
      close: function() {
        this.content.find('#inlineVideo').attr('src', '');
      }
    }
  });
});
</script>
</body>
</html>
