      <!-- Survey Area Form -->
      <div class="area-survey-container">
          <div class="form-header">
              <h1>AREA SURVEY</h1>
              <div class="header-details">
                  <div class="detail-field">
                      <label>Zone Code</label>
                      <input type="text" id="zoneCode" placeholder="Enter Zone Code">
                  </div>
                  <div class="detail-field">
                      <label>Survey Start Date</label>
                      <input type="date" id="surveyDate" value="2024-01-29">
                  </div>
              </div>
          </div>

          <div class="form-grid">
              <div class="form-group">
                  <label>Zone Name</label>
                  <input type="text" id="zoneName" placeholder="Zone Name">
              </div>
              <div class="form-group">
                  <label>Village Name</label>
                  <input type="text" id="villageName" placeholder="Village Name">
              </div>
              <div class="form-group">
                  <label>Branch</label>
                  <input type="text" id="branch" placeholder="Branch">
              </div>
              <div class="form-group">
                  <label>Area Type</label>
                  <input type="text" id="areaType" placeholder="FULAL / RURAL / URBAN" value="FULAL">
              </div>
              <div class="form-group">
                  <label>FO Name</label>
                  <input type="text" id="foName" placeholder="FO Name">
              </div>
              <div class="form-group">
                  <label>FO Code</label>
                  <input type="text" id="foCode" placeholder="FO Code">
              </div>
              <div class="form-group">
                  <label>Pop of Village</label>
                  <input type="number" id="population" placeholder="Population">
              </div>
              <div class="form-group">
                  <label>Political Situation</label>
                  <select id="politicalSituation">
                      <option value="">Select</option>
                      <option value="Stable">Stable</option>
                      <option value="Moderate">Moderate</option>
                      <option value="Unstable">Unstable</option>
                      <option value="Critical">Critical</option>
                  </select>
              </div>
              <div class="form-group">
                  <label>Law Order Situation</label>
                  <select id="lawOrder">
                      <option value="">Select</option>
                      <option value="Good">Good</option>
                      <option value="Satisfactory">Satisfactory</option>
                      <option value="Poor">Poor</option>
                      <option value="Critical">Critical</option>
                  </select>
              </div>
              <div class="form-group">
                  <label>Distance From Branch (km)</label>
                  <input type="number" id="distance" step="0.1" placeholder="Distance in km">
              </div>
              <div class="form-group">
                  <label>No of Centre Possible</label>
                  <input type="number" id="centresPossible" placeholder="Number">
              </div>
              <div class="form-group">
                  <label>No of MFI Working</label>
                  <input type="number" id="mfiWorking" placeholder="Number">
              </div>
              <div class="form-group">
                  <label>Major Operation of People</label>
                  <input type="text" id="majorOperation" placeholder="e.g., Agriculture, Business">
              </div>
              <div class="form-group">
                  <label>Conveyance / Road Status</label>
                  <select id="roadStatus">
                      <option value="">Select</option>
                      <option value="Excellent">Excellent</option>
                      <option value="Good">Good</option>
                      <option value="Average">Average</option>
                      <option value="Poor">Poor</option>
                  </select>
              </div>
          </div>

          <div class="section-title">Caste In Percentage</div>
          <div class="percentage-grid">
              <div class="perc-group"><label>General</label><input type="number" id="casteGeneral" placeholder="%"></div>
              <div class="perc-group"><label>ST</label><input type="number" id="casteST" placeholder="%"></div>
              <div class="perc-group"><label>OBC</label><input type="number" id="casteOBC" placeholder="%"></div>
              <div class="perc-group"><label>Others</label><input type="number" id="casteOthers" placeholder="%"></div>
          </div>

          <div class="section-title">Religion In Percentage</div>
          <div class="percentage-grid">
              <div class="perc-group"><label>Hindu</label><input type="number" id="religionHindu" placeholder="%"></div>
              <div class="perc-group"><label>Muslim</label><input type="number" id="religionMuslim" placeholder="%"></div>
              <div class="perc-group"><label>Sikh</label><input type="number" id="religionSikh" placeholder="%"></div>
              <div class="perc-group"><label>Christian</label><input type="number" id="religionChristian" placeholder="%"></div>
              <div class="perc-group"><label>Others</label><input type="number" id="religionOthers" placeholder="%"></div>
          </div>

          <div class="button-group">
              <button class="btn btn-new" id="newBtn">New</button>
              <button class="btn btn-save" id="saveBtn">Save</button>
              <button class="btn btn-update" id="updateBtn">Update</button>
              <button class="btn btn-delete" id="deleteBtn">Delete</button>
          </div>

          <div id="messageArea" class="message-area"></div>
      </div>
      <!-- Survey Area Form -->