<div class="row">
    <div class="col-12">
        <h1 class="page-header pt-3" id="view.orders.title" style="font-size: 24px;">Orders</h1>
        <div class="container mt-4">
            <div class="row justify-content-center">
                <div class="col-12 col-md-8">
                        <div class="mb-3" id="filter_info" style="display: none;">
                        <h4 class="custom-h4 mt-3">Filters</h4>
                        <hr class="custom-hr">
                        <div class="row">
                            <div class="col-auto">
                                <label class='pe-2'style="font-weight: 700;">Search:</label>
                                <input class="form-control input-sm" id="edtsearch">
                            </div>
                            <div class="col-auto">
                                <label class='pe-2'style="font-weight: 700;">Start Date:</label>
                                <input class="form-control input-sm" id="dtpstartdate" type="date">
                            </div>
                            <div class="col-auto">
                                <label class='pe-2'style="font-weight: 700;">End Date:</label>
                                <input class="form-control input-sm" id="dtpenddate" type="date">
                            </div>
                            <div class="col-auto">
                                <label class="py-2" style="font-weight: 700;">Status Type:</label>
                                <select class="custom-select" id="wcbsortby" style="font-size: 1.00rem;"></select>
                            </div>
                        </div>
                        <div class ="row mt-2">
                            <div class="col-auto">
                                <button class= "mt2-2" id="btnapply"></button>
                            </div>
                        </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">

                            </div>
                            <div class="col-sm-2">
                                <button class= "ps-3" id="btnfilters"></button>
                            </div>
                            <div class="col-sm-2">
                                <button class= "ps-3" id="btnaddorder"></button>
                            </div>
                        </div>
                    </form>
                    </div>
                    <table class="table table-responsive table-striped table-bordered" id="tblPhoneGrid">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">Order ID</th>
                                <th scope="col">Company Name</th>
                                <th scope="col">Job Name</th>
                                <th scope="col">Order Date</th>
                                <th scope="col">Proof Due</th>
                                <th scope="col">Proof Date</th>
                                <th scope="col">Art Due</th>
                                <th scope="col">Art Done</th>
                                <th scope="col">Mount Due</th>
                                <th scope="col">Mount Done</th>
                                <th scope="col">Ship Due</th>
                                <th scope="col">Ship Done</th>
                                <th scope="col">Price</th>
                                <th scope="col">Quickbooks Reference Number</th>
                                <th scope="col">Colors</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>
<!-- 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>
  // JavaScript function to stop audio
  function stopAudio() {
    var audioPlayer = document.getElementById('audioPlayer');
    audioPlayer.pause(); // Pause the audio
    audioPlayer.currentTime = 0; // Reset audio to beginning
  }
</script>