<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>School Facilities</title>
  <link rel="shortcut icon" href="images/favicon.ico"/>
  <link href="css/bootstrap-4.4.1.css" rel="stylesheet">

  <style>
    .facilities-form-container {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #ffffff;
      padding: 30px;
      max-width: 1200px;
      margin: 40px auto;
      border: 1px solid #ddd;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }

    .facilities-form-container h2 {
      text-align: center;
      font-weight: 600;
      color: #2c3e50;
      margin-bottom: 20px;
    }

    .facilities-form-container table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    .facilities-form-container td {
      padding: 10px;
      border: 1px solid #ccc;
      vertical-align: middle;
    }

    .facilities-form-container label {
      font-weight: 500;
      margin-right: 10px;
    }

    .facilities-form-container input[type="number"],
    .facilities-form-container input[type="text"],
    .facilities-form-container select {
      width: 100%;
      padding: 6px;
      border-radius: 5px;
      border: 1px solid #aaa;
    }

    .facilities-form-container .section-heading {
      background-color: #f1f1f1;
      text-align: center;
      padding: 10px;
      font-size: 18px;
      font-weight: 600;
      color: #34495e;
    }

    .facilities-form-container input[type="submit"] {
      margin-top: 30px;
      background-color: #3498db;
      color: #fff;
      padding: 12px 30px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 15px;
    }

    .facilities-form-container input[type="submit"]:hover {
      background-color: #2980b9;
    }

    .facilities-form-container .lab-block {
      border: 1px dashed #ccc;
      border-radius: 5px;
      padding: 15px;
      margin-top: 15px;
      background-color: #f9f9f9;
    }

    .facilities-form-container .lab-block h4 {
      margin: 0 0 10px;
      color: #2c3e50;
    }

    .facilities-form-container .remove-btn {
      background-color: #e74c3c;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: right;
      font-size: 14px;
    }

    .facilities-form-container .remove-btn:hover {
      background-color: #c0392b;
    }

    .facilities-form-container .add-lab-container {
      margin-top: 20px;
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .facilities-form-container .add-lab-container select {
      flex: 1;
    }

    .facilities-form-container .add-btn {
      background-color: #2ecc71;
      color: white;
      padding: 8px 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
    }

    .facilities-form-container .add-btn:hover {
      background-color: #27ae60;
    }
  </style>

  <script>
    function addLab() {
      const dropdown = document.getElementById('labDropdown');
      const selectedValue = dropdown.value;
      const selectedText = dropdown.options[dropdown.selectedIndex].text;

      if (!selectedValue || document.getElementById('lab_' + selectedValue)) {
        alert("Lab already added or invalid selection.");
        return;
      }

      const container = document.getElementById('labs-container');
      const labDiv = document.createElement('div');
      labDiv.className = 'lab-block';
      labDiv.id = 'lab_' + selectedValue;

      labDiv.innerHTML = `
        <h4>${selectedText}
          <button type="button" class="remove-btn" onclick="removeLab('${selectedValue}')">Remove</button>
        </h4>
        <table>
          <tr>
            <td><label>Equipment Available:</label></td>
            <td>
              <label><input type="radio" name="equip_${selectedValue}" value="YES" required> YES</label>
              <label><input type="radio" name="equip_${selectedValue}" value="NO" required> NO</label>
            </td>
            <td><label>Requirements:</label></td>
            <td><input type="text" name="req_${selectedValue}" placeholder="List requirements..."></td>
          </tr>
        </table>
      `;

      container.appendChild(labDiv);
    }

    function removeLab(id) {
      const lab = document.getElementById('lab_' + id);
      if (lab) lab.remove();
    }
  </script>
</head>

<body>
  <div class="facilities-form-container">
    <h2>School Facilities</h2>
    <form action="facilities_submit.php" method="post">
      <table>
        <tr><td colspan="6" class="section-heading">Basic Facilities</td></tr>
        <tr>
          <td><label>Electricity:</label></td>
          <td><label><input type="radio" name="electricity" value="YES" required> YES</label><label><input type="radio" name="electricity" value="NO"> NO</label></td>
          <td><label>Drinking Water:</label></td>
          <td><label><input type="radio" name="water" value="YES" required> YES</label><label><input type="radio" name="water" value="NO"> NO</label></td>
          <td><label>Internet:</label></td>
          <td><label><input type="radio" name="internet" value="YES" required> YES</label><label><input type="radio" name="internet" value="NO"> NO</label></td>
        </tr>
        <tr>
          <td><label>Road:</label></td>
          <td><label><input type="radio" name="road" value="YES" required> YES</label><label><input type="radio" name="road" value="NO"> NO</label></td>
          <td><label>Assembly Ground:</label></td>
          <td><label><input type="radio" name="assembly" value="YES" required> YES</label><label><input type="radio" name="assembly" value="NO"> NO</label></td>
          <td><label>Play Ground:</label></td>
          <td><label><input type="radio" name="ground" value="YES" required> YES</label><label><input type="radio" name="ground" value="NO"> NO</label></td>
        </tr>
        <tr>
          <td><label>Medical Facility:</label></td>
          <td><label><input type="radio" name="medical" value="YES" required> YES</label><label><input type="radio" name="medical" value="NO"> NO</label></td>
          <td><label>Gas:</label></td>
          <td><label><input type="radio" name="gas" value="YES" required> YES</label><label><input type="radio" name="gas" value="NO"> NO</label></td>
          <td><label>Public Transport:</label></td>
          <td><label><input type="radio" name="ptransport" value="YES" required> YES</label><label><input type="radio" name="ptransport" value="NO"> NO</label></td>
        </tr>

        <tr><td colspan="6" class="section-heading">Furniture Facilities</td></tr>
        <tr>
          <td><label>Chair for Staff:</label></td>
          <td><input name="schair" type="number" min="0" max="100" required></td>
          <td><label>Table for Staff:</label></td>
          <td><input name="stable" type="number" min="0" max="100" required></td>
          <td><label>Chair & Desk for Students:</label></td>
          <td><input name="desk" type="number" min="0" max="1000" required></td>
        </tr>
        <tr>
          <td><label>Cupboards:</label></td>
          <td><input name="cupboard" type="number" min="0" max="100" required></td>
          <td><label>White/Black Boards:</label></td>
          <td><input name="board" type="number" min="0" max="100" required></td>
          <td><label>Dice/Podium:</label></td>
          <td><input name="dice" type="number" min="0" max="100" required></td>
        </tr>
      </table>

      <div class="section-heading">Laboratories</div>

      <div id="labs-container"></div>

      <div class="add-lab-container">
        <select id="labDropdown">
          <option value="">-- Select Lab to Add --</option>
          <option value="computer">Computer Lab</option>
          <option value="bio_chem">Biology/Chemistry Lab</option>
          <option value="physics">Physics Lab</option>
          <option value="combined">Combined Lab</option>
          <option value="zoology">Zoology Lab</option>
          <option value="botany">Botany Lab</option>
          <option value="home_economics">Home Economics Lab</option>
          <option value="technical">Technical Workshop</option>
          <option value="smart">Smart Classroom</option>
          <option value="ece">ECE Classroom</option>
          <option value="sports">Sports Stock</option>
        </select>
        <button type="button" class="add-btn" onclick="addLab()">Add Lab</button>
      </div>

      <div style="text-align: center;">
        <input type="submit" value="Submit">
      </div>
    </form>
  </div>
</body>
</html>
