<?php
include('includes/session.php');
error_reporting(0);
include('includes/dbconnection.php');


$id = $_SESSION['student_id'];
$cls = $_SESSION['class'];
$str = $_SESSION['stream'];


// Query to get both admission/payment status and special case status
$sql = "SELECT email, studentName, status, demote_status, studentImage , password, studentno
        FROM students 
        WHERE id = '$id'";
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($result);

// Assign variables
$status = (int) $row['status']; // admission/payment status
$demote = (int) $row['demote_status']; // special case
$studentImage = !empty($row['studentImage'])
  ? "studentimages/" . htmlspecialchars($row['studentImage'])
  : "default.png";



// NEW QUERY: Joins student data with their specific wallet data
$sql = "SELECT s.*, w.balance 
        FROM students s 
        LEFT JOIN wallets w ON s.id = w.student_id 
        WHERE s.id = '$id'";

$result = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($result);

// Set wallet balance (default to 0.00 if no wallet exists yet)
$wallet_balance = $row['balance'] !== null ? number_format($row['balance'], 2) : "0.00";
?>
<!DOCTYPE html>
<html lang="en">
<?php @include("includes/head.php"); ?>




<body class="hold-transition sidebar-mini layout-fixed">
  <div class="wrapper">
    <!-- Navbar -->
    <?php @include("includes/headerstd.php"); ?>
    <!-- Main Sidebar Container -->
    <?php @include("includes/sidebaroldstd.php"); ?>

    <!-- Content Wrapper -->
    <div class="content-wrapper">
      <!-- Page Header -->
      <!-- Page Header -->
      <div id="pageHeader" class="content-header py-4 rounded shadow-sm mb-4 sticky-top"
        style="background: linear-gradient(135deg, var(--dark), var(--primary)); color: #fff; z-index: 1020; transition: all 0.3s ease;">
        <div class="container-fluid">
          <div class="d-flex justify-content-between align-items-center flex-wrap">

            <!-- Left: Profile & Welcome -->
            <div class="d-flex align-items-center mb-2 mb-md-0">
              <div
                style="width:60px; height:60px; border-radius:50%; overflow:hidden; background:#fff; display:flex; align-items:center; justify-content:center; margin-right:15px; transition: all 0.3s ease;">
                <?php if (!empty($row['studentImage']) && file_exists("studentimages/" . $row['studentImage'])): ?>
                  <img src="studentimages/<?php echo htmlspecialchars($row['studentImage']); ?>" alt="pics"
                    style="width:100%; height:100%; object-fit:cover;" class="img-circle img-fluid">
                <?php else: ?>
                  <i class="fas fa-user-circle" style="font-size:60px; color:var(--primary);"></i>
                <?php endif; ?>
              </div>
              <div>
                <h4 class="mb-1 fw-bold" style="transition: all 0.3s ease;">
                  <?php echo htmlspecialchars($row['studentName']); ?>,
                </h4>
                <h6 class="mb-0">Welcome to your dashboard</h6>
                <small style="opacity:0.9;">Manage your payment, result, attendance and other activities here.</small>
              </div>
            </div>

            <!-- Right: Student Status -->
            <!-- Right: Student Status -->
            <div>
              <h6 class="fw-bold mb-2 student-status-heading">
                Studentship Status
              </h6>

              <?php
              // Admission Status
              $admissionStatusOptions = [
                4 => ['text' => 'Not Admitted', 'class' => 'bg-danger'],
                2 => ['text' => 'Partially Admitted', 'class' => 'bg-warning'],
                1 => ['text' => 'Fully Admitted', 'class' => 'bg-success'],
              ];
              $admissionStatus = $admissionStatusOptions[$status] ?? ['text' => 'Unknown', 'class' => 'bg-secondary'];

              // Demotion Status
              $demotionStatusOptions = [
                0 => ['text' => 'Class Retained', 'class' => 'bg-success'],
                1 => ['text' => 'Placed in Lower Class', 'class' => 'bg-danger'],
              ];
              $demotionStatus = $demotionStatusOptions[$demote] ?? ['text' => 'Unknown', 'class' => 'bg-secondary'];
              ?>

              <div style="display: flex; flex-direction: column; <?= $demote == 1 ? 'gap:.5rem;' : '' ?>">
                <!-- Always show admission status -->
                <span class="badge <?= $admissionStatus['class']; ?> p-2" style="font-size:1rem;">
                  <?= htmlspecialchars($admissionStatus['text']); ?>
                </span>

                <!-- Show demotion badge only if demote = 1 -->
                <?php if ($demote == 1): ?>
                  <span class="badge <?= $demotionStatus['class']; ?> p-2" style="font-size:1rem;">
                    <?= htmlspecialchars($demotionStatus['text']); ?>
                  </span>
                <?php endif; ?>
              </div>
            </div>

            <style>
              .student-status-heading {
                position: relative;
                display: inline-block;
                color: #fff;
                padding-bottom: 4px;
              }

              .student-status-heading::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                height: 2px;
                width: 0;
                background-color: rgba(255, 255, 255, 0.3);
                transition: width 0.6s ease-in-out;
              }

              body.loaded .student-status-heading::after {
                width: 100%;
              }

              /* ── 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>

            <script>
              window.addEventListener("load", function () {
                document.body.classList.add("loaded");
              });
            </script>





          </div>
        </div>
      </div>

      <script>
        // Shrink header when scrolling
        window.addEventListener('scroll', function () {
          let header = document.getElementById('pageHeader');
          if (window.scrollY > 50) {
            header.style.padding = "0.5rem 0";
            header.querySelector("div[style*='width:60px']").style.width = "40px";
            header.querySelector("div[style*='width:60px']").style.height = "40px";
            header.querySelector("h4").style.fontSize = "1rem";
          } else {
            header.style.padding = "1rem 0";
            header.querySelector("div[style*='width:40px']").style.width = "60px";
            header.querySelector("div[style*='width:40px']").style.height = "60px";
            header.querySelector("h4").style.fontSize = "1.25rem";
          }
        });
      </script>

      <!-- Main Content -->
      <section class="content px-6">
        <div class="container-fluid">

          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-10">
            <?php
            $dashboard_items = [
              ["label" => "MY WALLET", "desc" => "Balance: ₦$wallet_balance", "icon" => "fas fa-wallet", "bg" => "bg-warning", "link" => "wallet_details.php", "id" => "walletBtn", "class" => "text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              ["label" => "SCHOOL & LESSON FEES", "desc" => "Pay School and Lesson Fees", "icon" => "fas fa-money-bill-wave", "bg" => "bg-success", "link" => "payschoolfees.php", "id" => "schoolFeesBtn", "class" => "text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              ["label" => "OTHER FEES", "desc" => "Pay Other Fees", "icon" => "fas fa-coins", "bg" => "bg-primary", "link" => "oldstddaypayother.php", "id" => "otherFeesBtn", "class" => "text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              //["label" => "ADESINA SKILL-UP INITIATIVE", "desc" => "Secure Your Spot – Pay for Skill-Up", "icon" => "fa fa-lightbulb", "bg" => "bg-success", "link" => "oldstddaypayasi.php", "id" => "asiBtn", "class" => "text-[9px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              ["label" => "PAYMENT RECEIPT", "desc" => "View & Download Receipt", "icon" => "fa fa-money-bill", "bg" => "bg-success", "link" => "recentoldday.php", "id" => "asiBtn", "class" => "text-[9px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              ["label" => "EXAMINATION", "desc" => "View Examination Result", "icon" => "fa fa-book", "bg" => "bg-success", "link" => "verify_email_otp.php", "id" => "examResultBtn", "class" => "text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              ["label" => "MID TERM TEST", "desc" => "View Mid Term Test Result", "icon" => "fa fa-book", "bg" => "bg-info", "link" => "test_result.php", "id" => "testResultBtn", "class" => "text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              ["label" => "ATTENDANCE", "desc" => "View Attendance Report Here", "icon" => "fa fa-calendar", "bg" => "bg-secondary", "link" => "view_attendance.php", "id" => "attendanceBtn", "class" => "text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              ["label" => "DOWNLOADS", "desc" => "Download Documents Here", "icon" => "fa fa-download", "bg" => "bg-danger", "link" => "downloaddocumentoldday.php", "id" => "downloadsBtn", "class" => "text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              ["label" => "PROFILE", "desc" => "View and Update Your Profile", "icon" => "fas fa-user", "bg" => "bg-warning", "link" => "stdprofileoldday.php", "id" => "profileBtn", "class" => "text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter"],
              ["label" => "FEEDBACK", "desc" => "Provide Your Feedback", "icon" => "fas fa-comments", "bg" => "bg-danger", "link" => "#", "id" => "feedbackBtn", "class" => "text-[12px] font-black text-slate-400 group-hover:text-slate-900 transition-colors tracking-tighter feedbackModal"],
            ];
            $styleMap = [
              "bg-primary" => ["bg" => "bg-blue-50", "text" => "text-blue-600"],
              "bg-success" => ["bg" => "bg-emerald-50", "text" => "text-emerald-600"],
              "bg-warning" => ["bg" => "bg-orange-50", "text" => "text-orange-600"],
              "bg-info" => ["bg" => "bg-cyan-50", "text" => "text-cyan-600"],
              "bg-danger" => ["bg" => "bg-rose-50", "text" => "text-rose-600"],
              "bg-secondary" => ["bg" => "bg-slate-50", "text" => "text-slate-600"]
            ];
            foreach ($dashboard_items as $item) {
              $st = $styleMap[$item['bg']] ?? $styleMap["bg-secondary"];

              ?>
              <div class="bento-card group">
                <div class="flex justify-between items-start mb-3">
                  <div
                    class="w-10 h-10 <?php echo $st['bg']; ?> <?php echo $st['text']; ?> rounded-xl flex items-center justify-center text-base transition-transform group-hover:scale-110">
                    <i class="<?php echo $item['icon']; ?>"></i>
                  </div>
                  <a href="<?php echo $item['link']; ?>" class="<?php echo $item['class']; ?>"
                    id="<?php echo $item['id']; ?>"><i class="fas fa-arrow-right"></i> CLICK HERE</a>
                </div>
                <h5 class="text-[15px] font-bold text-slate-500 tracking-tight"><?php echo $item['label']; ?></h5>
                <p class="text-[10px] font-bold text-slate-500 uppercase tracking-tight truncate">
                  <?php echo $item['desc']; ?>
                </p>

                <div class="mt-4 w-full h-1 bg-slate-200/50 rounded-full overflow-hidden">
                  <div
                    class="h-full <?php echo str_replace('text-', 'bg-', $st['text']); ?> opacity-40 w-full transform -translate-x-1/2 group-hover:translate-x-0 transition-transform duration-1000">
                  </div>
                </div>
              </div>
            <?php } ?>
          </div>

          <div class="mt-12">
            <hr>
            <h5 class="text-lg font-black text-slate-600 mb-6 flex items-center">
              <span
                class="w-8 h-8 bg-white shadow-sm rounded-lg flex items-center justify-center mr-3 text-sm">📅</span>
              School Calendar
            </h5>
            <hr>
            <div id="calendar" class="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm mb-8"></div>


            <script>
              function closeAlert() {
                document.querySelector('.alert-overlay').style.display = 'none';
              }
            </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>

          </div>
      </section>
    </div>

    <!-- Footer -->
    <?php @include("includes/footer.php"); ?>
  </div>

  <?php @include("includes/foot.php"); ?>
</body>

</html>