<style>

.hiddenRow {
  padding: 0 !important;
}

button[aria-expanded="true"] svg {
  transform: rotate(180deg);
  transition: transform 0.5s ease;
}

button[aria-expanded="false"] svg {
  transform: rotate(0deg);
  transition: transform 0.5s ease;
}

.goHide .tHide input, .goHide .tHide span{
  display: none;
}

</style>

<section class="my-3">
  <form method="POST">
    <div class="container mb-5">
      <div class="col-md-12 pb-5">
        <table class="table">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Website</th>
              <th>Contact</th>
              <th>Email</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <% for (var i=0; i < docs.length; i++) { %>
            <tr id="schoolRow<%= i %>" class="<%= i % 2 === 0 ? 'table-primary' : 'table-success' %>">
              <th><span><%= i %></span><input type="hidden" name="id-<%= i %>" value="<%= docs[i].id || '' %>"></th>
              <td id="rowname<%= i %>"><input name="name-<%= i %>" placeholder="School Name" class="form-control" value="<%= docs[i].name %>"></td>
              <td class="tHide" id="rowwebsite<%= i %>"><input name="website-<%= i %>" class="form-control" placeholder="Website" value="<%= docs[i].website %>"></td>
              <td class="tHide" id="rowcontact<%= i %>"><input name="contact-<%= i %>" class="form-control" placeholder="Contact Name" value="<%= docs[i].contact %>"></td>
              <td class="tHide" id="rowemail<%= i %>"><input name="email-<%= i %>" class="form-control" placeholder="Email" value="<%= docs[i].email %>"></td>
              <td align="center">
                <button onclick="toggleExpand('<%= i %>')" class="btn btn-outline-light btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#school<%= i %>" class="accordion-toggle">
                  <svg style="width:18px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                    <path d="M207 381.5L12.7 187.1c-9.4-9.4-9.4-24.6 0-33.9l22.7-22.7c9.4-9.4 24.5-9.4 33.9 0L224 284.5l154.7-154c9.4-9.3 24.5-9.3 33.9 0l22.7 22.7c9.4 9.4 9.4 24.6 0 33.9L241 381.5c-9.4 9.4-24.6 9.4-33.9 0z"></path>
                  </svg>
                </button>
              </td>
            </tr>
            <tr class="table-secondary">
              <td colspan="6" class="hiddenRow">
                <div id="school<%= i %>" class="accordion-body collapse">
                  <div class="row px-3 py-2">
                    <div class="col-md-3 pe-0">
                      <h6><b>&nbsp;Website</b></h6>
                      <div class="mb-2" id="websiteWrapper<%= i %>"></div>
                      <h6><b>Full Address</b></h6>
                      <div id="nameWrapper<%= i %>"></div>
                      <input name="street-<%= i %>" placeholder="Street" class="form-control">
                      <div class="row">
                        <div class="col-4 pe-0">
                          <input name="zip-<%= i %>" placeholder="Zip" class="form-control">
                        </div>
                        <div class="col-8 ps-0">
                          <input name="place-<%= i %>" placeholder="Place" class="form-control">
                        </div>
                      </div>
                    </div>
                    <div class="col-md-9">
                      <h6><b>Contacts</b></h6>
                      <div class="row align-items-center">
                        <div class="col-md-3 pe-0">
                          <label class="w-100"> Name 1:
                            <div id="contactWrapper<%= i %>"></div>
                          </label>
                        </div>
                        <div class="col-md-3 pe-0">
                          <label class="w-100"> Email:
                            <div id="emailWrapper<%= i %>"></div>
                          </label>
                        </div>
                        <div class="col-md-3 pe-0">
                          <label class="w-100"> Phone:
                            <input name="phone1-<%= i %>" class="form-control mb-1">
                          </label>
                        </div>
                        <div class="col-md-3 pe-0">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="InboundContact1-<%= i %>" id="InboundContact1<%= i %>">
                            <label class="form-check-label" for="InboundContact1<%= i %>">
                              Inbound Contact
                            </label>
                          </div>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="OutboundContact1-<%= i %>" id="OutboundContact1<%= i %>">
                            <label class="form-check-label" for="OutboundContact1<%= i %>">
                              Outbound Contact
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="row align-items-center">
                        <div class="col-md-3 pe-0">
                          <label class="w-100"> Name 2:
                            <input name="contact2-<%= i %>" class="form-control mb-1">
                          </label>
                        </div>
                        <div class="col-md-3 pe-0">
                          <label class="w-100"> Email:
                            <input name="email2-<%= i %>" class="form-control mb-1">
                          </label>
                        </div>
                        <div class="col-md-3 pe-0">
                          <label class="w-100"> Phone:
                            <input name="phone2-<%= i %>" class="form-control mb-1">
                          </label>
                        </div>
                        <div class="col-md-3 pe-0">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="InboundContact2-<%= i %>" id="InboundContact2<%= i %>">
                            <label class="form-check-label" for="InboundContact2<%= i %>">
                              Inbound Contact
                            </label>
                          </div>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="OutboundContact2-<%= i %>" id="OutboundContact2<%= i %>">
                            <label class="form-check-label" for="OutboundContact2<%= i %>">
                              Outbound Contact
                            </label>
                          </div>
                        </div>
                      </div>
                      <div class="row align-items-center">
                        <div class="col-md-3 pe-0">
                          <label class="w-100"> Name 3:
                            <input name="contact3-<%= i %>" class="form-control">
                          </label>
                        </div>
                        <div class="col-md-3 pe-0">
                          <label class="w-100"> Email:
                          <input name="email3-<%= i %>" class="form-control">
                            </label>
                        </div>
                        <div class="col-md-3 pe-0">
                          <label class="w-100"> Phone:
                            <input name="phone3-<%= i %>" class="form-control">
                          </label>
                        </div>
                        <div class="col-md-3 pe-0">
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="InboundContact3-<%= i %>" id="InboundContact3<%= i %>">
                            <label class="form-check-label" for="InboundContact3<%= i %>">
                              Inbound Contact
                            </label>
                          </div>
                          <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="OutboundContact3-<%= i %>" id="OutboundContact3<%= i %>">
                            <label class="form-check-label" for="OutboundContact3<%= i %>">
                              Outbound Contact
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <% } %>
          </tbody>
        </table>
      </div>
    </div>
    <div class="container-fluid position-fixed py-2" style="background: #d7d7d7;bottom: 0px;box-shadow: 0px -2px 6px #00000024;">
      <div class="row justify-content-center">
        <div class="col-md-11">
          <div class="row align-items-center">
            <div class="col-md-4">
              <button class="btn btn-secondary py-2 px-4 float-start" type="submit">Go Back</button>
            </div>
             <div class="col-md-4 text-center">
              <% if (typeof region !== 'undefined') { %>
              <h5><%= region %></h5>
              <% } %>
             </div>
             <div class="col-md-4">
              <button class="btn btn-danger py-2 px-4 float-end" type="submit">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</section>
<script>

function toggleExpand(num) {
  document.getElementById('schoolRow' +num).classList.toggle('goHide');
  //toggleInputVisibility(num, 'name');
  toggleInputVisibility(num, 'website');
  toggleInputVisibility(num, 'contact');
  toggleInputVisibility(num, 'email');
}

function toggleInputVisibility(num, name) {
  // Get the input element based on its name
  var inputElement = document.querySelector('input[name="' + name + '-' + num, + '"]');

  // Get the divs where you want to move the input
  var wrapper = document.getElementById(name + 'Wrapper' + num);
  var row = document.getElementById('row' + name + num);

  // Check if the input is currently in Wrapper
  if (wrapper.contains(inputElement)) {
   // Move the input from Wrapper to row
    wrapper.removeChild(inputElement);
    row.appendChild(inputElement);
  } else {
    // Move the input from row to Wrapper
    row.removeChild(inputElement);
    wrapper.appendChild(inputElement);
  }
}
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>