<?php include("../database/auth_check.php"); ?>

<?php
$con = mysqli_connect("localhost", "root", "", "WSAS");
if (!$con) {
    die("Database connection failed");
}

    if (isset($_GET['archive_id'])) {
    $subject_id = intval($_GET['archive_id']);

    mysqli_query($con, "UPDATE adminsubject SET is_active = 0 WHERE subject_id = $subject_id");

    header("Location: adminsubject.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subjects - Admin</title>
    <link rel="shortcut icon" type="x-icon" href="../images/logo.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
    <link rel="stylesheet" href="../Style/navstyle.css">

<style>
/* Dashboard Layout */
.dashboard-container {
  display: flex;
  height: 100vh;
  font-family: "Segoe UI", sans-serif;
  background-color: #f4f6f8;
}
.mainbar {
    margin-left: 260px;
    width: calc(100% - 260px);
    flex: 1;
    display: flex;
    flex-direction: column;
}

h2 {
  font-size: 16px;
  margin-bottom: 8px;
}

h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

h4 {
  font-size: 16px;
  margin-bottom: 8px;
}


.open-btn {
  background-color: #4a9c3f;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 300;
  transition: background-color 0.3s;
}

.open-btn:hover {
  background-color: #3e8c36;
}

/* Main content */
.mainbar-context {
  flex: 1;
  padding: 10px 16px;
  overflow-y: auto;
}

/* Inner containers */
.container, .container1 {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.subject {
  background-color: #4a9c3f;
  color: #fff;
  padding: 10px;
  flex: 1 1 300px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Table Styling */
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  text-align: center;
  background: #fff;
}

table th, table td {
  padding: 4px 8px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 13px;
  color: #333;
}

table th {
  background-color: #4a9c3f;
  color: #fff;
  font-weight: 300;
}

table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tr:hover {
  background-color: rgba(74,156,63,0.1);
  transition: background-color 0.3s;
}

.del_btn {
  display: inline-block;
  padding: 4px 8px;
  background: #EE7A02;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}

td form {
  margin: 0;
}

.upd_btn {
 display: inline-block;
  padding: 4px 8px;
  color: #f1f7ed;
  text-decoration: none;
  border-radius: 6px;
  font-size: 12px;
  transition: 0.3s ease;
}

.upd_btn {
  background: #1261A0;
  color: #fff;
}

.upd_btn:hover {
  background: #0f4d80;
}

.del_btn {
  background: #EE7A02;
  color: #fff;
}

.del_btn:hover {
  background: #c36100;
}

/* Search Box */
.search-container {
  margin-bottom: 10px;
  text-align: right;
}

.search-input {
    padding: 4px 10px;
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 11px;
}

.search-input:focus {
    outline: none;
    border-color: #4a9c3f;
    box-shadow: 0 0 3px rgba(74,156,63,0.5);
}

</style>
<style>
/* Modal Overlay */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0; /* top:0; left:0; right:0; bottom:0 */
  background: rgba(0,0,0,0.5);
  overflow-y: auto;
  padding: 10px;
  transition: opacity 0.3s ease;
}

/* Modal Content */
/* MODAL CONTAINER */
.modal-content {
  background: #ffffff;
  width: 420px;
  max-width: 90%;
  margin: 8% auto;
  padding: 12px 15px;
  border-radius: 12px;
  animation: pop 0.3s ease;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* TITLE */
.subject-title {
  text-align: center;
  margin-bottom: 10px;
  color: #2b5820;
}

/* FORM GROUP */
.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

/* LABEL */
.form-label {
  font-size: 13px;
  margin-bottom: 5px;
  color: #333;
  font-weight: 300;
}

/* INPUT FIELDS */
.form-input {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 13px;
  transition: 0.2s;
}

.form-input:focus {
  border-color: #4a9c3f;
  outline: none;
  box-shadow: 0 0 0 2px rgba(74,156,63,0.2);
}

/* READONLY INPUT */
.readonly-input {
  background: #f5f5f5;
  cursor: not-allowed;
}

/* RADIO GROUP */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 5px;
}

.radio-label {
  font-size: 13px;
  color: #444;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* SUBMIT BUTTON */
#confirmAddBtn {
  width: 100%;
  padding: 10px;
  background: #4a9c3f;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.3s;
}

#confirmAddBtn:hover {
  background: #3d8234;
}

/* CLOSE BUTTON */
.close-btn {
  float: right;
  font-size: 13px;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: #000;
}

/* Pop Animation */
@keyframes pop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }

}

/* Modal Title */
.subject-title {
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  margin-bottom: 15px;
  color: #333;
}

/* Form Styles */
.subject-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-weight: 300;
  margin-bottom: 6px;
  color: #555;
  font-size: 13px;
}

.form-input {
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid #ccc;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus {
  border-color: #4a9c3f;
  box-shadow: 0 0 0 2px rgba(74,156,63,0.2);
}

/* Submit Button */
.submit-btn {
  padding: 10px 0;
  background-color: #4a9c3f;
  color: #fff;
  font-weight: 300;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #3e8c36;
}

/* Responsive for Mobile */
@media (max-width: 500px) {
  .modal-content {
    margin: 60px 15px;
    padding: 25px 20px;
  }

  .form-input {
    font-size: 14px;
    padding: 10px 12px;
  }

  .submit-btn {
    font-size: 14px;
  }
}
/* LINK AS BUTTON */
a.assign-btn {
  display: inline-block;
  background-color: #4a9c3f;
  color: #f1f7ed;
  padding:8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 300;
  transition: 0.3s ease;
}

/* HOVER EFFECT */
a.assign-btn:hover {
  background-color: #4e7c73;
  transform: translateY(-2px);
}

/* CLICK EFFECT */
a.assign-btn:active {
  transform: scale(0.95);
}

#confirmModal {
  display: none; /* show using JS */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
}

/* MODAL BOX */
#confirmModal .modal-content {
  background-color: #f1f7ed;
  width: 350px;
  margin: 15% auto;
  padding: 15px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* MODAL TEXT */
#confirmModal h3 {
  color: #333232;
  font-size: 16px;
}

/* BUTTON CONTAINER */
#confirmModal .modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* BUTTON GROUP (SIDE BY SIDE) */
#confirmModal button {
  margin: 8px 5px;
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* YES BUTTON */
#yesBtn {
  background-color:#4a9c3f;
  color: white;
}

/* CANCEL BUTTON */
#noBtn {
  background-color:#4a9c3f;
  color: white;
}

/* ALIGN BUTTONS SIDE BY SIDE */
#confirmModal .modal-content button {
  display: inline-block;
}

/* ARCHIVE MODAL SPECIFIC */
#archiveModal .modal-content {
  background: #ffffff;
  width: 350px;
  max-width: 90%;
  margin: 15% auto;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  animation: pop 0.25s ease;
}

/* TEXT */
#archiveModal h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

/* BUTTON CONTAINER */
#archiveModal .btn-group {
  display: flex;
  justify-content: center;
  gap: 15px;
}

/* YES BUTTON */
#confirmArchiveBtn {
  background-color: #4a9c3f;
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: 0.3s;
}

#confirmArchiveBtn:hover {
  background-color: #3e8c36;
}

/* CANCEL BUTTON */
#cancelArchiveBtn {
  background-color: #ccc;
  color: #333;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: 0.3s;
}

#cancelArchiveBtn:hover {
  background-color: #aaa;
}
</style>

<body> 
   <div class="dashboard-container">
    
    <?php include('adminnav.php'); ?>

    
    <aside class="mainbar">

      <div class="mainbar-context">
        <div class="container1">
            <button id="openModal" class="open-btn">ADD SUBJECT</button>
            <a href="assignsub.php"  class="assign-btn">ASSIGN TO COURSE</a>
        </div>
        <div class="container">
          <div class="subject">
            <div class="search-container">
                <input type="text" id="subjectSearch" placeholder="Search Subjects..." class="search-input">
            </div>
            <?php
              $select_products = mysqli_query($con, "SELECT * FROM `adminsubject` WHERE is_active = 1");
              ?>

              <table>
                  <tr>
                      <th>Subject Code</th>
                      <th>Subject Name</th>
                      <th colspan='2'>Action</th>
                  </tr>

                  <?php
                  if(mysqli_num_rows($select_products) > 0){
                      while($fetch_product = mysqli_fetch_assoc($select_products)){
                  ?>
                      <tr>
                          <td>
                              <?php echo $fetch_product['subject_code']; ?>
                              <input type="hidden" name="subject_code" value="<?php echo $fetch_product['subject_code']; ?>">
                          </td>

                          <td>
                              <?php echo $fetch_product['subject_name']; ?>
                              <input type="hidden" name="subject_name" value="<?php echo $fetch_product['subject_name']; ?>">
                          </td>

                          <td><a class="upd_btn" href="../view/subject_view.php?subject_id=<?php echo $fetch_product['subject_id']; ?>">View</a></td>
                          <td>
                          <button type="button" class="archiveBtn" data-id="<?php echo $fetch_product['subject_id']; ?>">
                          ARCHIVE
                        </button>
                        </td>
                      </tr>
                      <?php
                          }
                      }
                      ?>
                  </table>
<!-- Archive Confirmation Modal -->
<div id="archiveModal" class="modal">
  <div class="modal-content">
    <h3>Are you sure you want to archive this subject?</h3>

    <div class="btn-group">
      <button id="confirmArchiveBtn">Yes</button>
      <button id="cancelArchiveBtn">Cancel</button>
    </div>
  </div>
</div>

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

<div id="courseModal" class="modal">
    <div class="modal-content">
      <span id="closeModal" class="close-btn">&times;</span>

    <h2 class="subject-title">Add Subject</h2>

<form id="subjectForm" class="subject-form" action="../database/subject_connect.php" method="POST">

  <div class="form-group">
    <label for="subject_code" class="form-label">Subject Code:</label>
    <input type="text" name="subject_code" id="subject_code" class="form-input">
  </div>

  <div class="form-group">
    <label for="subject_name" class="form-label">Subject Name:</label>
    <input type="text" name="subject_name" id="subject_name" class="form-input">
  </div>

  <div class="form-group">
    <label class="form-label">Is this a Major Subject?</label>
    <div class="radio-group">
        <label class="radio-label">
            <input type="radio" name="is_major" value="1"> Yes
        </label>
        <label class="radio-label">
            <input type="radio" name="is_major" value="0"> No
        </label>
    </div>
 </div>

  <div class="form-group">
    <label for="lecture_unit" class="form-label">Lecture Unit:</label>
    <input type="number" name="lecture_unit" id="lecture_unit" class="form-input">
  </div>

  <div class="form-group">
    <label for="lab_unit" class="form-label">Lab Unit:</label>
    <input type="number" name="lab_unit" id="lab_unit" class="form-input">
  </div>

  <div class="form-group">
    <label for="total_unit" class="form-label">Total Unit:</label>
    <input type="number" name="total_unit" id="total_unit" class="form-input readonly-input" readonly>
  </div>

  <div class="form-group">
    <label class="form-label">Additional Fee?</label>
    <div class="radio-group">
      <?php
        $fee_query = mysqli_query($con, "SELECT * FROM adminfee WHERE subject_fee='yes' OR subject_fee='special'");
        while($fee = mysqli_fetch_assoc($fee_query)){
            echo '<label class="radio-label">
                    <input type="radio" name="additional_fee" value="'.$fee['fee_id'].'">
                    '.$fee['fee_name'].' - ₱'.$fee['fee_amount'].'
                  </label>';
        }
        echo '<label class="radio-label">
                <input type="radio" name="additional_fee" value="">
                No Additional Fee
              </label>';
      ?>
    </div>
  </div>

  <button type="button" id="confirmAddBtn">Submit</button>

</form>

<div id="confirmModal" class="modal">
  <div class="modal-content">
    <h3>Are you sure you want to add this course?</h3>
    <br>
    <div class="btn-group">
  <button id="yesBtn">Yes</button>
  <button id="noBtn">Cancel</button>
</div>
  </div>
        
  </div>
</div>

    
     <script src="../Jscript/script.js"></script>
     <script src="../Jscript/form.js"></script>

     <script>
      const lectureInput = document.getElementById('lecture_unit');
      const labInput = document.getElementById('lab_unit');
      const totalInput = document.getElementById('total_unit');

      function updateTotal() {
        const lecture = parseFloat(lectureInput.value) || 0;
        const lab = parseFloat(labInput.value) || 0;
        totalInput.value = lecture + lab;
      }

      lectureInput.addEventListener('input', updateTotal);
      labInput.addEventListener('input', updateTotal);
    </script>

      <script>
      openBtn.addEventListener("click", () => {
        modal.style.display = "block";
        document.body.classList.add("modal-open");
      });

      closeBtn.addEventListener("click", () => {
        modal.style.display = "none";
        document.body.classList.remove("modal-open");
      });

      window.addEventListener("click", (e) => {
        if (e.target === modal) {
          modal.style.display = "none";
          document.body.classList.remove("modal-open");
        }
      });
    </script>
    
    <script>
      const searchInput = document.getElementById('subjectSearch');
      const table = document.querySelector('.container table');

      searchInput.addEventListener('input', function() {
          const filter = searchInput.value.toLowerCase();
          const rows = table.querySelectorAll('tbody tr, tr'); 

          rows.forEach((row, index) => {
              if(index === 0) return; 
              const subjectCode = row.cells[0].textContent.toLowerCase();
              const subjectName = row.cells[1].textContent.toLowerCase();

              if(subjectCode.includes(filter) || subjectName.includes(filter)){
                  row.style.display = '';
              } else {
                  row.style.display = 'none';
              }
          });
      });
      </script>

      <script>
      const confirmBtn = document.getElementById("confirmAddBtn");
      const confirmModal = document.getElementById("confirmModal");
      const yesBtn = document.getElementById("yesBtn");
      const noBtn = document.getElementById("noBtn");
      const form = document.getElementById("subjectForm");

      confirmBtn.addEventListener("click", () => {
        confirmModal.style.display = "block";
      });

      noBtn.addEventListener("click", () => {
        confirmModal.style.display = "none";
      });

      yesBtn.addEventListener("click", () => {
        form.submit();
      });

      window.addEventListener("click", (e) => {
        if (e.target === confirmModal) {
          confirmModal.style.display = "none";
        }
      });
    </script>

<script>
  const archiveButtons = document.querySelectorAll(".archiveBtn");
  const archiveModal = document.getElementById("archiveModal");
  const confirmArchiveBtn = document.getElementById("confirmArchiveBtn");
  const cancelArchiveBtn = document.getElementById("cancelArchiveBtn");

  let selectSubjectId = null;

  // Open modal when clicking ARCHIVE
  archiveButtons.forEach(btn => {
    btn.addEventListener("click", () => {
      selectSubjectId = btn.getAttribute("data-id");
      archiveModal.style.display = "block";
    });
  });

  // Cancel button
  cancelArchiveBtn.addEventListener("click", () => {
    archiveModal.style.display = "none";
    selectSubjectId = null;
  });

  // Confirm archive
  confirmArchiveBtn.addEventListener("click", () => {
    if (selectSubjectId) {
      window.location.href = "adminsubject.php?archive_id=" + selectSubjectId;
    }
  });

  // Close if clicked outside
  window.addEventListener("click", (e) => {
    if (e.target === archiveModal) {
      archiveModal.style.display = "none";
    }
  });
</script> 
    
</body>
</html>