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

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

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

    mysqli_query($con, "UPDATE adminfee SET is_active = 0 WHERE fee_id = $fee_id");

    header("Location: adminfees.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>Fees - 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;
}
.open-btn {
  background-color: #4a9c3f;
  color: #fff;
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
  font-size: 12px;
}

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

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

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

.fees {
  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 {
  padding: 12px 15px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 12px;
  color: #333;
}

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 {
  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: 220px;
  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);
}

/* 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: 20px;
  transition: opacity 0.3s ease;
}

/* Modal Content */
.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;
}

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

/* Close Button */
.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;
}

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

/* Form Styles */
.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: 15px;
  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: 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;
}

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

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

  .submit-btn {
    font-size: 11px;
  }
}

/* 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 FEE</button>
        </div>
        <div class="container">
          <div class="fees">
            <div class="search-container">
                <input type="text" id="subjectSearch" placeholder="Search Feess..." class="search-input">
            </div>
            <?php
              $select_products = mysqli_query($con, "SELECT * FROM adminfee WHERE is_active = 1");
              ?>

              <table>
                  <tr>
                      <th>Fee Name</th>
                      <th>Amount</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['fee_name']; ?>
                              <input type="hidden" name="Fee_name" value="<?php echo $fetch_product['fee_name']; ?>">
                          </td>

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

                          <td><a class="upd_btn" href="../edit/fee_edit.php?fee_id=<?php echo $fetch_product['fee_id']; ?>">Edit</a> </td>
                          <td>
                          <button type="button" class="archiveBtn" data-id="<?php echo $fetch_product['fee_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 fee?</h3>
    <br>
    <button id="confirmArchiveBtn" class="open-btn">Yes</button>
    <button id="cancelArchiveBtn" class="close-btn">Cancel</button>
  </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="fee-title">Add Fee</h2>

<form id="feeForm" class="fee-form" action="../database/fee_connect.php" method="POST">

  <div class="form-group">
    <label for="fee_name" class="form-label">Fee Name:<span style="color:red">*</span></label>
    <input type="text" name="fee_name" id="fee_name" class="form-input" required>
  </div>

  <div class="form-group">
    <label for="fee_amount" class="form-label">Amount:<span style="color:red">*</span></label>
    <input type="number" name="fee_amount" id="fee_amount" class="form-input" required>
  </div>

  <div class="form-group">
        <label class="form-label">Is it a Subject Fee?<span style="color:red">*</span></label>
        <div style="display:flex; gap:20px; flex-wrap:wrap;">
          <label>
            <input type="radio" name="subject_fee" value="Yes" required> Yes
          </label>
          <label>
            <input type="radio" name="subject_fee" value="No"> No
          </label>
          <label>
            <input type="radio" name="subject_fee" value="Special"> Special
          </label>
        </div>
      </div>

  <button type="button" id="openConfirmAdd" class="submit-btn">Submit</button>

</form>

    </div>
  </div>

  <div id="confirmModal" class="modal">
  <div class="modal-content">
    <h3>Are you sure you want to add this Fee?</h3>
    <br>
    <button id="yesBtn" class="open-btn">Yes</button>
    <button id="noBtn" class="close-btn">Cancel</button>
  </div>
</div>
    
     <script src="../Jscript/script.js"></script>
     <script src="../Jscript/form.js"></script>
     <script>
  const openConfirmAdd = document.getElementById("openConfirmAdd");
  const confirmModal = document.getElementById("confirmModal");
  const yesBtn = document.getElementById("yesBtn");
  const noBtn = document.getElementById("noBtn");
  const feeForm = document.getElementById("feeForm");

  // Open modal
  openConfirmAdd.addEventListener("click", () => {
    confirmModal.style.display = "block"; 
  });

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

  // Confirm submit
  yesBtn.addEventListener("click", () => {
    feeForm.submit();
  });

  // Close when clicking outside
  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 feeName = row.cells[0].textContent.toLowerCase();
              if(feeName.includes(filter)){
                  row.style.display = '';
              } else {
                  row.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 selectedFeeId = null;

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

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

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

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