<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Land Details</title>
  <style>
    .land-details-page .land-form-container {
      max-width: 900px;
      margin: 30px auto;
      padding: 30px;
      border: 1px solid #ccc;
      border-radius: 10px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9f9f9;
      box-shadow: 0 0 12px rgba(0,0,0,0.05);
    }

    .land-details-page .land-form-container h2 {
      text-align: center;
      margin-bottom: 30px;
      color: #333;
    }

    .land-details-page .land-form-group {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      flex-wrap: wrap;
    }

    .land-details-page .land-form-group label {
      width: 180px;
      font-weight: 600;
      color: #444;
    }

    .land-details-page .land-form-group input[type="text"],
    .land-details-page .land-form-group select,
    .land-details-page .land-form-group textarea {
      flex: 1;
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 15px;
    }

    .land-details-page .land-form-group textarea {
      min-height: 80px;
      resize: vertical;
    }

    .land-details-page .land-form-section {
      margin-top: 20px;
      padding: 15px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
    }

    .land-details-page .land-form-radio-group {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-bottom: 20px;
    }

    .land-details-page .land-form-radio-group input[type="radio"] {
      margin-right: 8px;
    }

    .land-details-page .land-form-buttons {
      text-align: center;
      margin-top: 30px;
    }

    .land-details-page .land-form-buttons button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 10px 25px;
      font-size: 16px;
      border-radius: 6px;
      cursor: pointer;
    }

    .land-details-page .land-form-buttons button:hover {
      background-color: #0056b3;
    }

    .land-details-page .sub-section {
      margin-left: 20px;
      padding: 10px;
      background-color: #f5f5f5;
      border-left: 3px solid #007BFF;
      margin-top: 10px;
    }

    .land-details-page .checkbox-group {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .land-details-page .checkbox-group input[type="checkbox"] {
      margin-right: 10px;
    }

    @media (max-width: 600px) {
      .land-details-page .land-form-group {
        flex-direction: column;
        align-items: flex-start;
      }

      .land-details-page .land-form-group label {
        width: 100%;
        margin-bottom: 5px;
      }

      .land-details-page .land-form-radio-group {
        flex-direction: column;
        gap: 10px;
        align-items: center;
      }
    }
  </style>
</head>
<body>

  <div class="land-details-page">
    <form action="/submit" method="post" class="land-form-container">
      <h2>School Land Details</h2>

      <div class="land-form-radio-group">
        <label><input type="radio" name="land" value="landyes" onclick="showLandForm('formYes')" required> Land Available</label>
        <label><input type="radio" name="land" value="landno" onclick="showLandForm('formNo')"> No Land</label>
      </div>

      <!-- Land Available Form -->
      <fieldset id="formYes" class="land-form-section" style="display: none;">
        <legend><strong>Available Land Information</strong></legend>

        <div class="land-form-group">
          <label for="kanal">Kanal</label>
          <input id="kanal" name="kanal" type="text" placeholder="Enter Kanal" required>
        </div>

        <div class="land-form-group">
          <label for="marla">Marla</label>
          <input id="marla" name="marla" type="text" placeholder="Enter Marla">
        </div>

        <div class="land-form-group">
          <label for="landtype">Land Type</label>
          <select id="landtype" name="landtype" required>
            <option value="">-- Select Land Type --</option>
            <option value="Hilly">Hilly</option>
            <option value="Plan">Plan</option>
            <option value="Mixed">Mixed</option>
          </select>
        </div>

        <div class="land-form-group">
          <label for="ownershipstatus">Ownership Status</label>
          <select id="ownershipstatus" name="ownershipstatus" required>
            <option value="">-- Select Ownership Status --</option>
            <option value="Awarded">Awarded</option>
            <option value="Khalsa Sarkar">Khalsa Sarkar</option>
            <option value="Matroka">Matroka</option>
            <option value="Donated">Donated</option>
          </select>
        </div>

        <div class="land-form-group">
          <label for="landdocument">Land Document</label>
          <select id="landdocument" name="landdocument" required>
            <option value="">-- Select Document Availability --</option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
          </select>
        </div>

        <!-- Land Under School Section -->
        <div class="land-form-group">
          <label>Land Under School Control</label>
          <div style="flex: 1;">
            <div class="checkbox-group">
              <input type="checkbox" id="landUnderSchool" name="land_under_school" value="yes" onchange="toggleLandUnderSchool()">
              <label for="landUnderSchool" style="width: auto; font-weight: normal;">Land is under school control</label>
            </div>
          </div>
        </div>

        <!-- Land Under School Details (Visible when checked) -->
        <div id="landUnderSchoolDetails" class="sub-section" style="display: none;">
          <div class="land-form-group">
            <label for="land_under_kanal">Kanal Under School</label>
            <input id="land_under_kanal" name="land_under_kanal" type="text" placeholder="Enter Kanal under school control">
          </div>
          <div class="land-form-group">
            <label for="land_under_marla">Marla Under School</label>
            <input id="land_under_marla" name="land_under_marla" type="text" placeholder="Enter Marla under school control">
          </div>
        </div>

        <!-- Land Not Under School Control -->
        <div class="land-form-group">
          <label>Land Not Under School Control</label>
          <div style="flex: 1;">
            <div class="checkbox-group">
              <input type="checkbox" id="landNotUnderSchool" name="land_not_under_school" value="yes" onchange="toggleLandNotUnderSchool()">
              <label for="landNotUnderSchool" style="width: auto; font-weight: normal;">Some land is not under school control</label>
            </div>
          </div>
        </div>

        <!-- Land Not Under School Details (Visible when checked) -->
        <div id="landNotUnderSchoolDetails" class="sub-section" style="display: none;">
          <div class="land-form-group">
            <label for="not_under_kanal">Kanal Not Under Control</label>
            <input id="not_under_kanal" name="not_under_kanal" type="text" placeholder="Enter Kanal not under school control">
          </div>
          <div class="land-form-group">
            <label for="not_under_marla">Marla Not Under Control</label>
            <input id="not_under_marla" name="not_under_marla" type="text" placeholder="Enter Marla not under school control">
          </div>
          <div class="land-form-group">
            <label for="reason_not_under_control">Reason for Not Under Control</label>
            <select id="reason_not_under_control" name="reason_not_under_control">
              <option value="">-- Select Reason --</option>
              <option value="Encroachment">Encroachment</option>
              <option value="Legal Dispute">Legal Dispute</option>
              <option value="Government Use">Government Use</option>
              <option value="Private Ownership">Private Ownership</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <div class="land-form-group">
            <label for="encroachment_details">Details of Encroachment/Issue</label>
            <textarea id="encroachment_details" name="encroachment_details" placeholder="Provide details about the encroachment or control issue..."></textarea>
          </div>
        </div>

        <!-- School Legal Issues About Land -->
        <div class="land-form-group">
          <label>Legal Issues About Land</label>
          <div style="flex: 1;">
            <div class="checkbox-group">
              <input type="checkbox" id="legalIssues" name="legal_issues" value="yes" onchange="toggleLegalIssues()">
              <label for="legalIssues" style="width: auto; font-weight: normal;">There are legal issues about school land</label>
            </div>
          </div>
        </div>

        <!-- Legal Issues Details (Visible when checked) -->
        <div id="legalIssuesDetails" class="sub-section" style="display: none;">
          <div class="land-form-group">
            <label for="legal_issue_type">Type of Legal Issue</label>
            <select id="legal_issue_type" name="legal_issue_type">
              <option value="">-- Select Legal Issue Type --</option>
              <option value="Ownership Dispute">Ownership Dispute</option>
              <option value="Boundary Dispute">Boundary Dispute</option>
              <option value="Encroachment Case">Encroachment Case</option>
              <option value="Title Dispute">Title Dispute</option>
              <option value="Court Case Pending">Court Case Pending</option>
              <option value="Other">Other</option>
            </select>
          </div>
          <div class="land-form-group">
            <label for="court_case_number">Court Case Number (if any)</label>
            <input id="court_case_number" name="court_case_number" type="text" placeholder="Enter court case number">
          </div>
          <div class="land-form-group">
            <label for="court_name">Court Name</label>
            <input id="court_name" name="court_name" type="text" placeholder="Enter court name">
          </div>
          <div class="land-form-group">
            <label for="legal_issue_details">Detailed Description</label>
            <textarea id="legal_issue_details" name="legal_issue_details" placeholder="Provide detailed description of the legal issue..."></textarea>
          </div>
          <div class="land-form-group">
            <label for="legal_status">Current Status</label>
            <select id="legal_status" name="legal_status">
              <option value="">-- Select Current Status --</option>
              <option value="Pending">Pending</option>
              <option value="Under Investigation">Under Investigation</option>
              <option value="Court Hearing">Court Hearing</option>
              <option value="Resolved">Resolved</option>
              <option value="Appeal Filed">Appeal Filed</option>
            </select>
          </div>
        </div>
      </fieldset>

      <!-- No Land Form -->
      <fieldset id="formNo" class="land-form-section" style="display: none;">
        <legend><strong>No Land - Reason</strong></legend>
        <div class="land-form-group">
          <label for="noland">Explain Reason</label>
          <input name="noland" type="text" id="noland" placeholder="Provide reason..." required>
        </div>
      </fieldset>

      <div class="land-form-buttons">
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>

  <script>
    function showLandForm(formId) {
      document.getElementById('formYes').style.display = 'none';
      document.getElementById('formNo').style.display = 'none';
      document.getElementById(formId).style.display = 'block';
      
      // Reset all sub-sections when switching main forms
      document.getElementById('landUnderSchoolDetails').style.display = 'none';
      document.getElementById('landNotUnderSchoolDetails').style.display = 'none';
      document.getElementById('legalIssuesDetails').style.display = 'none';
      document.getElementById('landUnderSchool').checked = false;
      document.getElementById('landNotUnderSchool').checked = false;
      document.getElementById('legalIssues').checked = false;
    }

    function toggleLandUnderSchool() {
      const checkbox = document.getElementById('landUnderSchool');
      const detailsSection = document.getElementById('landUnderSchoolDetails');
      detailsSection.style.display = checkbox.checked ? 'block' : 'none';
    }

    function toggleLandNotUnderSchool() {
      const checkbox = document.getElementById('landNotUnderSchool');
      const detailsSection = document.getElementById('landNotUnderSchoolDetails');
      detailsSection.style.display = checkbox.checked ? 'block' : 'none';
    }

    function toggleLegalIssues() {
      const checkbox = document.getElementById('legalIssues');
      const detailsSection = document.getElementById('legalIssuesDetails');
      detailsSection.style.display = checkbox.checked ? 'block' : 'none';
    }
  </script>

</body>
</html>