<div class="row">
    <div class="col-12">
        <div class="container mt-4">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8">
                    <form class="form-inline">
                        <div class="row">
                            <div class="col-sm-6">
                                <label style="font-weight: 700;">Name:</label>
                                <input class="form-control input-sm" id="edtname">
                            </div>
                            <div class="col-sm-6">
                                <label class= 'pe-2'style="font-weight: 700;">Description:</label>
                                <input class="form-control input-sm" id="edtdescription">
                            </div>
                        </div>
                    </form>
                    <div class="row">
                        <div class="col-sm">
                            <form class='form-inline'>
                                <div class="col-sm">
                                    <div class="form-cells"><input type="checkbox" id="cbstatus"></div>
                                    <div class="form-cells ps-1 py-2"><label style="font-weight: 700;font-size: 15px" id="lblactive">Active?</label></div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <form class="form-inline">
                        <div class= "row">
                            <div class="col-sm-5">
                                <label class="py-2" style="font-weight: 700;">Show <select class="custom-select" id="wcbpagesize" style="font-size: 1.00rem;"></select> entries</label>
                            </div>
                            <div class="col-sm-5">
                                <button class= "ps-3" id="btnapply"></button>
                            </div>
                        </div>
                    </form>

                    <table class="table table-responsive table-striped table-bordered" id="tblPhoneGrid">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">Name</th>
                                <th scope="col">Description</th>
                                <th scope="col">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Rows will be added dynamically via Delphi code -->
                        </tbody>
                    </table>
                    <label id="lblentries"></label>
                    <nav aria-label="Page navigation">
                        <ul class="pagination justify-content-center" id="pagination">
                            <!-- Pagination items will be added dynamically via Delphi code -->
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="audioModal" tabindex="-1" aria-labelledby="audioModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="audioModalLabel">Audio Player</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="stopAudio()"></button>
      </div>
      <div class="modal-body">
        <audio controls id="audioPlayer">
          <source src="" type="audio/mp3" id="audioSource">
          Your browser does not support the audio element.
        </audio>
      </div>
    </div>
  </div>
</div>

<script>
    document.getElementById('tblPhoneGrid').addEventListener('click', function(event) {
        // Check if the clicked element is a table cell (td)
        if (event.target.tagName === 'TD') {
            const row = event.target.parentNode;
            const cells = row.getElementsByTagName('td');

            // Extract data from the row
            const id = cells[0].textContent;
            const name = cells[1].textContent;
            const description = cells[2].textContent;
            const status = cells[3].textContent.trim().toLowerCase();

            // Populate form fields
            document.getElementById('edtname').value = name;
            document.getElementById('edtdescription').value = description;

            // Set the checkbox based on the status
            const isActive = status === 'active';
            document.getElementById('cbstatus').checked = isActive;
            console.log(`Row clicked! ID: ${id}, Name: ${name}, Description: ${description}, Status: ${status}`);

        }
    });
</script>