function fullScreenMode() {
  let docElm = document.documentElement;
  let icon = document.querySelector('#expandScreen i');

  if (!document.fullscreenElement) {
    if (docElm.requestFullscreen) {
      docElm.requestFullscreen();
    }
    icon.classList.remove('fa-expand');
    icon.classList.add('fa-compress');
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    icon.classList.remove('fa-compress');
    icon.classList.add('fa-expand');
  }
}

function toggleclass(){
  const sidebar = document.querySelector(".sidebar")
  const content = document.querySelector(".content")
  sidebar.classList.toggle("collapse-div")
  content.classList.toggle("collapse-div")
}

// const btn = document.querySelector("#dropdown-div");

// btn.addEventListener("click", function (e) {
//   console.log(e)
//   btn.classList.toggle("show-drop");
//   e.stopPropagation();             
// });

// document.addEventListener("click", function (e) {
//   if ( !btn.contains(e.target)) {
//     console.log(!btn.contains(e.target))
//     btn.classList.remove("show-drop");
//   }
// });


document.querySelectorAll('.sidebar-li-rl > a').forEach(a => {
  a.addEventListener('click', function(e) {
    e.preventDefault();

    document.querySelectorAll('.sidebar-li-rl > a').forEach(link => {
      if (link !== this) link.classList.remove('active');
    });

    // First, close all submenus
    document.querySelectorAll('.sidebar-ul-child').forEach(ul => {
      if (ul !== this.nextElementSibling) {
        ul.classList.remove('show-ul');
      }
    });

    // Toggle the submenu of clicked item
    const submenu = this.nextElementSibling;
    if (submenu) {
      submenu.classList.toggle('show-ul');
      this.classList.toggle('active');
    }
  });
});





function toggleopen(){
    let btn = document.querySelector(".ab-filter-data")
    btn.classList.toggle("open")
}





function searchCollapseData(){
  let searchCollapse = document.querySelector(".search-collapse");
  searchCollapse.classList.toggle("show")
}

function dotlink(){
  let dot_link = document.querySelector(".dot-link-ab");
  dot_link.classList.toggle("show")
}

// document.addEventListener("click", function (e) {
//   const dotLink = document.querySelector(".dot-link-ab");

//   // check: kya click icon par hua?
//   if (e.target.closest(".dot-toggle-btn")) {
//     console.log(e.target)
//     console.log(e.target.closest(".dot-toggle-btn"))
//     dotLink.classList.toggle("show");
//   } else {
//     // body ke kisi aur part pe click hua, to hide
//     dotLink.classList.remove("show");
//   }
// });


// let checkDetailButtons = document.querySelectorAll(".checkDetails-btn");

// checkDetailButtons.forEach(function (button) {
//   button.addEventListener("click", function () {
//     // 1. Find the parent row of the clicked button
//     let tr = button.closest("tr");

//     // 2. Check for next sibling row
//     let nextRow = tr.nextElementSibling;

//     // 3. If already open, remove it (toggle behavior)
//     if (nextRow && nextRow.classList.contains("details-row")) {
//       nextRow.remove();
//       return;
//     }

//     // 4. Create new detail row
//     let detailsRow = document.createElement("tr");
//     detailsRow.classList.add("details-row");

//     detailsRow.innerHTML = `
//       <td colspan="10" class="p-0">
//         <div class="border py-2 mt-3">
//           <table class="w-100 table hide_table_checkDetail">
//             <thead>
//               <tr>
//                 <td>Cheque No</td>
//                 <td>Cheque Date</td>
//                 <td>Bank Name</td>
//                 <td>Bank Branch</td>
//               </tr>
//             </thead>
//             <tbody>
//               <tr>
//                 <td><input type="text" class="form-control"></td>
//                 <td><input type="text" class="form-control"></td>
//                 <td><input type="text" class="form-control"></td>
//                 <td><input type="text" class="form-control"></td>
//               </tr>
//             </tbody>
//           </table>
//         </div>
//       </td>
//     `;

//     // 5. Insert after current row
//     tr.insertAdjacentElement("afterend", detailsRow);
//   });
// });
let rowCounter = 2;

document.addEventListener("click", function (e) {
  if (e.target.closest(".add-checkDetails")) {
    const tbody = document.getElementById("data-body");

    // Unique ID for collapse
    const collapseId = "collapseRow" + rowCounter++;
    const collapseTarget = "#" + collapseId;

    // 🔷 Main Row
    const mainRow = document.createElement("tr");
    mainRow.innerHTML = `
      <td class="col-5">
        <p class="fw-bold my-3">ONLINE(4773799)</p>
      </td>
      <td class="col-2">
        <p class="fw-bold my-3">DR</p>
      </td>
      <td>
        <input type="text" placeholder="Amount" value="564845" class="form-control">
      </td>
      <td>
        <button class="btn accordion-button collapsed" type="button"
          data-bs-toggle="collapse" 
          data-bs-target="${collapseTarget}"
          aria-expanded="false" 
          aria-controls="${collapseId}">
          Click
        </button>
      </td>
      <td>
        <button class="btn btn-danger form-control delete-table-row">
          Delete <i class="fa-regular fa-trash-can ms-1"></i>
        </button>
      </td>
    `;

    // 🔶 Collapse Row (div inside td for smooth transition)
    const collapseRow = document.createElement("tr");
    collapseRow.className = "tr-form-data";
    collapseRow.innerHTML = `
      <td colspan="5" class="p-0">
        <div class="border p-3 accordion-collapse collapse" id="${collapseId}" data-bs-parent="#accordionData">
          <table class="table mb-0">
            <thead>
              <tr>
                <th>Cheque No</th>
                <th>Cheque Date</th>
                <th>Bank Name</th>
                <th>Bank Branch</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control cheque-date-td"></td>
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    `;

    // ➕ Append both rows
    tbody.appendChild(mainRow);
    tbody.appendChild(collapseRow);
  }
});

document.addEventListener("click", function (e) {
  if (e.target.closest(".delete-table-row")) {
    const mainRow = e.target.closest("tr");
    const collapseRow = mainRow.nextElementSibling;
    if (collapseRow && collapseRow.classList.contains("tr-form-data")) {
      collapseRow.remove();
    }
    mainRow.remove();
  }
});






