<?php



use Dotenv\Dotenv;



// Load Composer dependencies

require 'vendor/autoload.php';

// Load environment variables

$dotenv = Dotenv::createImmutable(__DIR__);

$dotenv->load();



$school_name = $_ENV['SCHOOL_NAME'];

?>

<style>

  /* ── Footer ── */

  .main-footer {

    padding: 12px 24px;

    background: linear-gradient(135deg, var(--dark), var(--primary));

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

  }



  .footer-copy {

    font-size: 0.78rem;

    color: rgba(255, 255, 255, 0.45);

    font-weight: 400;

  }



  .footer-copy a {

    color: rgba(255, 255, 255, 0.65);

    text-decoration: none;

    transition: color 0.2s;

  }



  .footer-copy a:hover {

    color: #38bdf8;

  }



  .feedback-trigger {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 7px 16px;

    background: rgba(56, 189, 248, 0.22);

    color: #7dd3fc;

    border: 1px solid rgba(56, 189, 248, 0.55);

    border-radius: 20px;

    font-size: 0.78rem;

    font-weight: 700;

    cursor: pointer;

    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;

    letter-spacing: 0.03em;

    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);

  }



  .feedback-trigger:hover {

    background: rgba(56, 189, 248, 0.35);

    border-color: rgba(56, 189, 248, 0.8);

    color: #e0f2fe;

    box-shadow: 0 0 14px rgba(56, 189, 248, 0.35);

  }



  /* ── Feedback Modal Overlay ── */

  .modal-custom {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(6px);

    display: none;

    justify-content: center;

    align-items: center;

    z-index: 1055;

    padding: 1rem;

  }



  .modal-dialog-custom {

    width: 100%;

    max-width: 680px;

    animation: modalSlideIn 0.25s ease;

  }



  @keyframes modalSlideIn {

    from { opacity: 0; transform: translateY(-16px) scale(0.98); }

    to   { opacity: 1; transform: translateY(0) scale(1); }

  }



  .modal-content-custom {

    background: #1e293b;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 16px;

    padding: 2rem;

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);

    color: #e2e8f0;

  }



  .modal-header-custom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1.5rem;

    padding-bottom: 1rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  }



  .modal-title-custom {

    font-size: 1rem;

    font-weight: 700;

    color: #f1f5f9;

    display: flex;

    align-items: center;

    gap: 8px;

  }



  .modal-title-custom i {

    color: #38bdf8;

  }



  .modal-close-btn {

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #94a3b8;

    width: 30px;

    height: 30px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: background 0.2s, color 0.2s;

    font-size: 0.85rem;

  }



  .modal-close-btn:hover {

    background: rgba(239, 68, 68, 0.15);

    border-color: rgba(239, 68, 68, 0.3);

    color: #f87171;

  }



  /* ── Form Fields ── */

  .form-label-custom {

    display: block;

    font-size: 0.75rem;

    font-weight: 600;

    color: #94a3b8;

    margin-bottom: 5px;

    text-transform: uppercase;

    letter-spacing: 0.05em;

  }



  .form-control-custom {

    width: 100%;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    padding: 8px 12px;

    color: #e2e8f0;

    font-size: 0.85rem;

    transition: border-color 0.2s, background 0.2s;

    outline: none;

    box-sizing: border-box;

  }



  .form-control-custom::placeholder {

    color: rgba(148, 163, 184, 0.5);

  }



  .form-control-custom:focus {

    border-color: rgba(56, 189, 248, 0.5);

    background: rgba(56, 189, 248, 0.05);

  }



  textarea.form-control-custom {

    resize: vertical;

    min-height: 90px;

  }



  .form-group-custom {

    margin-bottom: 1rem;

  }



  .form-row-custom {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

  }



  @media (max-width: 540px) {

    .form-row-custom { grid-template-columns: 1fr; }

  }



  /* File input */

  .file-input-wrapper {

    position: relative;

  }



  .file-input-wrapper input[type="file"] {

    width: 100%;

    background: rgba(255, 255, 255, 0.05);

    border: 1px dashed rgba(255, 255, 255, 0.15);

    border-radius: 8px;

    padding: 8px 12px;

    color: #94a3b8;

    font-size: 0.8rem;

    cursor: pointer;

    box-sizing: border-box;

  }



  /* ── Modal Action Buttons ── */

  .modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 1.5rem;

    padding-top: 1rem;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

  }



  .btn-modal-cancel {

    padding: 7px 18px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    color: #94a3b8;

    font-size: 0.82rem;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s;

  }



  .btn-modal-cancel:hover {

    background: rgba(255, 255, 255, 0.1);

    color: #e2e8f0;

  }



  .btn-modal-submit {

    padding: 7px 20px;

    background: #0ea5e9;

    border: none;

    border-radius: 8px;

    color: #fff;

    font-size: 0.82rem;

    font-weight: 700;

    cursor: pointer;

    transition: background 0.2s;

    display: inline-flex;

    align-items: center;

    gap: 6px;

  }



  .btn-modal-submit:hover {

    background: #0284c7;

  }



  /* ── Success State ── */

  .feedback-success {

    display: none;

    text-align: center;

    padding: 2rem 1rem;

  }



  .feedback-success .success-icon {

    width: 56px;

    height: 56px;

    background: rgba(34, 197, 94, 0.12);

    border: 1px solid rgba(34, 197, 94, 0.3);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1rem;

    font-size: 1.4rem;

    color: #4ade80;

  }



  .feedback-success h5 {

    color: #f1f5f9;

    font-weight: 700;

    margin-bottom: 0.4rem;

  }



  .feedback-success p {

    color: #64748b;

    font-size: 0.85rem;

  }

</style>



<!-- Footer -->

<footer class="main-footer">

  <span class="footer-copy">

    &copy; <span id="currentYear"></span>

    <a href="#" rel="noopener">Popkot Digital Solutions Limited</a> &mdash;

    Developed for <a href="#"><?php echo htmlspecialchars($school_name, ENT_QUOTES, 'UTF-8'); ?></a>.

    All rights reserved.

  </span>



  <button id="feedbackBtn" class="feedback-trigger feedbackModal" aria-label="Give Feedback">

    <i class="fas fa-comment-dots"></i> Give Feedback

  </button>

</footer>



<script>

  document.getElementById('currentYear').textContent = new Date().getFullYear();

</script>



<!-- Feedback Modal -->

<div id="feedbackModal" class="modal-custom" role="dialog" aria-modal="true" aria-labelledby="feedbackModalLabel">

  <div class="modal-dialog-custom">

    <div class="modal-content-custom">



      <div class="modal-header-custom">

        <div class="modal-title-custom" id="feedbackModalLabel">

          <i class="fas fa-comment-dots"></i> Share Your Feedback

        </div>

        <button id="closeModal" class="modal-close-btn approve" aria-label="Close">

          <i class="fas fa-times"></i>

        </button>

      </div>



      <!-- Form -->

      <form id="feedbackForm" action="includes/submit_feedback.php" method="post" enctype="multipart/form-data">



        <div class="form-row-custom">

          <div class="form-group-custom">

            <label class="form-label-custom" for="name">Your Name</label>

            <input type="text" class="form-control-custom" id="name" name="name" placeholder="e.g. John Doe" required>

          </div>

          <div class="form-group-custom">

            <label class="form-label-custom" for="email">Email Address</label>

            <input type="email" class="form-control-custom" id="email" name="email" placeholder="e.g. john@email.com" required>

          </div>

          <div class="form-group-custom">

            <label class="form-label-custom" for="stdname">Student's Name</label>

            <input type="text" class="form-control-custom" id="stdname" name="stdname" placeholder="Student's full name" required>

          </div>

          <div class="form-group-custom">

            <label class="form-label-custom" for="adno">Student's Class</label>

            <input type="text" class="form-control-custom" id="adno" name="adno" placeholder="e.g. JSS 2A" required>

          </div>

        </div>



        <div class="form-group-custom">

          <label class="form-label-custom" for="message">Message</label>

          <textarea class="form-control-custom" id="message" name="message" placeholder="Write your feedback here..." required></textarea>

          <!-- Honeypot -->

          <input type="text" name="honeypot" id="honeypot" style="display:none;" autocomplete="off">

        </div>



        <div class="form-group-custom">

          <label class="form-label-custom" for="file">Attach File <span style="color:#475569;font-weight:400;text-transform:none;">(optional &mdash; jpg, png, pdf, doc)</span></label>

          <div class="file-input-wrapper">

            <input type="file" id="file" name="file" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">

          </div>

        </div>



        <div class="modal-actions">

          <button type="button" id="cancelFeedback" class="btn-modal-cancel approve">Cancel</button>

          <button type="submit" class="btn-modal-submit">

            <i class="fas fa-paper-plane"></i> Submit Feedback

          </button>

        </div>



      </form>



      <!-- Success State -->

      <div class="feedback-success" id="feedbackSuccess">

        <div class="success-icon"><i class="fas fa-check"></i></div>

        <h5>Thank you!</h5>

        <p>Your feedback has been submitted successfully.</p>

      </div>



    </div>

  </div>

</div>



<script>

  (function () {

    const modal       = document.getElementById('feedbackModal');

    const openBtn     = document.getElementById('feedbackBtn');

    const closeBtn    = document.getElementById('closeModal');

    const cancelBtn   = document.getElementById('cancelFeedback');

    const form        = document.getElementById('feedbackForm');

    const successBox  = document.getElementById('feedbackSuccess');



    function openModal()  { modal.style.display = 'flex'; }

    function closeModal() { modal.style.display = 'none'; }



    openBtn.addEventListener('click', openModal);

    closeBtn.addEventListener('click', closeModal);

    cancelBtn.addEventListener('click', closeModal);



    window.addEventListener('click', e => { if (e.target === modal) closeModal(); });

    document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });



    form.addEventListener('submit', function (e) {

      e.preventDefault();

      const formData = new FormData(this);

      const xhr = new XMLHttpRequest();

      xhr.open('POST', 'includes/submit_feedback.php', true);



      xhr.onload = function () {

        if (xhr.status === 200) {

          form.style.display = 'none';

          successBox.style.display = 'block';

          setTimeout(closeModal, 4000);

        } else {

          alert('An error occurred. Please try again.');

        }

      };



      xhr.send(formData);

    });

  })();

</script>

