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

<?php 
$con = mysqli_connect('localhost', 'root', ''); 
$db = mysqli_select_db($con, 'WSAS');

$con = mysqli_connect("localhost","root","","WSAS");

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

      $del_sql = "UPDATE admincourse 
                  SET is_active = 0 
                  WHERE course_id = '$course_id'";

      $data = mysqli_query($con,$del_sql);

      if($data){
          header("location:admincourse.php");
          exit;
      }
  }
    $sql = "SELECT * from admincourse";
    $result = mysqli_query($con,$sql);

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

    $del_sql = "UPDATE admincourse 
                SET is_active = 0 
                WHERE course_id = '$course_id'";

    $data = mysqli_query($con,$del_sql);

    if($data){
        header("location:admincourse.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>Courses - 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-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: 13px;
  margin-bottom: 8px;
}

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

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

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

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

.mainbar-context {
  flex: 1;
  padding: 20px 25px;
  overflow-y: auto;
}

.container, .container1 {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

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

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 {
  border-bottom: 1px solid #e0e0e0;
  color: #333;
}
table th, table td {
  padding: 8px 10px; 
  font-size: 13px;  
}

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

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

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

.upd_btn, .del_btn {
  text-decoration: none;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  transition: 0.3s;
}

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

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

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

.del_btn:hover {
  background: #c36100;
}

.search-container {
  margin-bottom: 15px;
  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 {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(0,0,0,0.5);
  overflow-y: auto;
  padding: 20px;
  transition: opacity 0.3s ease;
}

.modal-content {
  background: #fff;
  max-width: 480px;
  width: 100%;
  margin: 80px auto;
  padding: 30px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  animation: pop 0.3s ease;
  position: relative;
  box-sizing: border-box;
}

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

.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 26px;
  font-weight: bold;
  cursor: pointer;
  color: #444;
  transition: color 0.3s;
}
.close-btn:hover {
  color: #4a9c3f;
}

.fee-title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #333;
}

.fee-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

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

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

.form-input {
  padding: 12px 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-btn {
  padding: 14px 0;
  background-color: #4a9c3f;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

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

@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;
  }
}
.crs_view {
  display: inline-block;
  padding: 4px 8px;
  color: #f1f7ed;
  text-decoration: none;
  border-radius: 6px;
  font-size: 12px;
  transition: 0.3s ease;
}

.subject-btn {
   background: #1261A0;
  color: #fff;;
}

.subject-btn:hover {
  background: #0f4d80;
}

.student-btn {
  background: #EE7A02;
  color: #fff;
}

.student-btn:hover {
  background: #c36100;
}

.crs_view:active {
  transform: scale(0.95);
}
</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 COURSE</button>
        </div>
        <div class="container">
          <div class="courses">
            <div class="search-container">
                <input type="text" id="subjectSearch" placeholder="Search Courses..." class="search-input">
            </div>
            <?php
              $select_products = mysqli_query($con, "SELECT * FROM `admincourse` WHERE is_active = 1");
              ?>

              <table id="payment-table">
                  <tr>
                      <th>Course Code</th>
                      <th>Course Name</th>
                      <th>Major</th>
                      <th colspan=3>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['course_code']; ?>
                              <input type="hidden" name="course_code" value="<?php echo $fetch_product['course_code']; ?>">
                          </td>

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

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

                          <td>
                              <a class="crs_view subject-btn" href="../view/course_view.php?course_id=<?php echo $fetch_product['course_id']; ?>">
                              View Subjects
                            </a>
                          </td>

                          <td>
                            <a class="crs_view student-btn" href="../view/course_student.php?course_id=<?php echo $fetch_product['course_id']; ?>">
                              View Students
                            </a>
                          </td>
                          <td>
                            <button class="archiveBtn" data-id="<?php echo $fetch_product['course_id']; ?>">
                              Archive
                          </button>
                          </td>
                      </tr>
                      <?php
                          }
                      }
                      ?>
                  </table>


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


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


<h2>Add Course</h2>


<form id="courseForm" action="../database/course_connect.php" method="POST">
<p>
<label for="course_code">Course Code:<span style="color:red">*</span></label>
<input type="text" name="course_code" id="course_code" required>
</p>


<p>
<label for="course_name">Course Name:<span style="color:red">*</span></label>
<input type="text" name="course_name" id="course_name" required>
</p>

<p>
<label for="major">Course Major:</label>
<input type="text" name="major" id="major">
</p>


<br>
<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>
</div>

<div id="archiveModal" class="modal">
  <div class="modal-content">
    <h3>Are you sure you want to archive this course?</h3>
    <br>
    <div class="btn-group">
      <button id="confirmArchiveBtn">Yes</button>
      <button id="cancelArchiveBtn">Cancel</button>
    </div>
  </div>
</div>

<style>
#courseForm {
  margin-top: 10px;
  font-family: Arial, sans-serif;
}

h2 {
  color: #333232;
  margin-bottom: 15px;
}

#courseForm p {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

#courseForm label {
  width: 130px;
  color: #333232;
  font-size: 14px;
}

#courseForm input {
  flex: 1;
  padding: 7px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
}

#courseForm input:focus {
  border-color: #61988e;
}

#confirmAddBtn {
  background-color: green;
  color: #f1f7ed;
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

#confirmAddBtn:hover {
  background-color: black;
}


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

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

#confirmModal h3 {
  color: #333232;
  font-size: 16px;
}

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

#confirmModal button {
  margin: 8px 5px;
  padding: 8px 15px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

#yesBtn {
  background-color:#4a9c3f;
  color: white;
}

#noBtn {
  background-color:#4a9c3f;
  color: white;
}

#confirmModal .modal-content button {
  display: inline-block;
}
  </style>
    
     <script src="../Jscript/script.js"></script>
     <script src="../Jscript/form.js"></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("courseForm");

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

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

      yesBtn.addEventListener("click", () => {
          if (form.checkValidity()) {
              form.submit();
          } else {
              form.reportValidity(); // shows validation errors
          }
      });

      window.addEventListener("click", (e) => {
        if (e.target === confirmModal) {
          confirmModal.style.display = "none";
        }
      });
    </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>
let selectedCourseId = null;

const archiveModal = document.getElementById("archiveModal");
const confirmArchiveBtn = document.getElementById("confirmArchiveBtn");
const cancelArchiveBtn = document.getElementById("cancelArchiveBtn");

// open modal
document.querySelectorAll(".archiveBtn").forEach(btn => {
    btn.addEventListener("click", () => {
        selectedCourseId = btn.getAttribute("data-id");
        archiveModal.style.display = "block";
    });
});

// cancel
cancelArchiveBtn.addEventListener("click", () => {
    archiveModal.style.display = "none";
});

// confirm archive
confirmArchiveBtn.addEventListener("click", () => {
    if(selectedCourseId){
        window.location.href = "?archive_id=" + selectedCourseId;
    }
});

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