@include('includes.app')
@include('includes.sidebar')
@include('includes.header')
<style>
    .filter-transition {
        overflow: hidden;
        transition: all 0.4s ease;
        transform-origin: top;
        max-height: 1000px;
        /* enough height to accommodate content */
        transform: scaleY(1);
        opacity: 1;
    }

    .filter-transition.hidden {
        max-height: 0;
        transform: scaleY(0);
        opacity: 0;
        padding: 0 !important;
        margin: 0 !important;
    }

    .page-content {
        min-height: 100vh;
        padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
    }

    /*@media (max-width: 991.98px) {*/
    /*  #sidebarWrapper {*/
    /*    transform: translateX(-100%);*/
    /*    transition: transform 0.3s ease-in-out;*/
    /*    display: block !important;*/
    /*    position: fixed;*/
    /*    top: 70px;*/
    /*    left: 0;*/
    /*    width: 250px;*/
    /*    background: white;*/
    /*    z-index: 1000;*/
    /*    height: 100vh;*/
    /*    overflow-y: auto;*/
    /*    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);*/
    /*  }*/

    /*  #sidebarWrapper.active {*/
    /*    transform: translateX(0);*/
    /*  }*/
    /*}*/
    /*#sidebarWrapper a.active {*/

    /*  font-weight: bold;*/
    /*  background: #e6f4ff;*/
    /*  color: #007bff !important;*/
    /*  border-radius: 5px;*/
    /*  padding: 6px 12px;*/
    /*  display: block;*/


    /*}*/


    .custom-dropdown {
        min-width: 100px;
        padding: 4px 0;
        font-size: 13px;
        text-align: center;
    }

    .custom-dropdown .dropdown-item {
        padding: 4px 8px;
    }

    .offcanvas-body .card {
        background-color: white;
        border: none;
        margin-bottom: 1rem;
    }

    .offcanvas-body .card-header {
        font-weight: bold;
        font-size: 16px;
    }

    .offcanvas-body p {
        margin: 0 0 5px;
        font-size: 14px;
    }

    th {
        white-space: nowrap;
    }

    th,
    td {
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }
</style>
<div class="page-content">
    <div class="container-fluid media-containerfluid" style="background-color: #F6F7F9; padding-left: 45px;">
        <div class="row mt-4">

            <!-- Sidebar Column -->
            @include('includes.under-invoice-sidebar')



            <!-- Main Content -->
            <div class="col-md-10">
                <!--              <button class="btn btn-primary d-lg-none m-2" onclick="toggleSidebar()">-->
                <!--  ☰ Menu-->
                <!--</button>-->
                <!-- Filter Card -->
                <!--      <div class="d-flex justify-content-end mb-3">-->
                <!--        <button class="btn btn-primary"-->
                <!--        style="background: linear-gradient(180deg, #190650 -14.29%, #16ACF2 158.33%);"-->
                <!--        data-bs-toggle="modal"-->
                <!--        data-bs-target="#addOrderModal">-->
                <!--  + Add Order-->
                <!--</button>-->

                <!--      </div>-->

                <div class="card mb-4 responsive-card">

                    <!-- Filter Form -->
                    <div id="filterForm" class="card-body filter-transition">
                        <form class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">User Name:</label>
                                <select class="form-select">
                                    <option>Select User</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Category:</label>
                                <select class="form-select">
                                    <option>Select Category</option>
                                </select>
                            </div>
                            <!--<div class="col-md-4">-->
                            <!--	<label class="form-label">Order Status</label>-->
                            <!--	<select class="form-select"><option>Select Status</option></select>-->
                            <!--</div>-->
                            <!--<div class="col-md-4">-->
                            <!--	<label class="form-label">Payment Status</label>-->
                            <!--	<select class="form-select"><option>Select Payment</option></select>-->
                            <!--</div>-->
                            <!--<div class="col-md-4">-->
                            <!--	<label class="form-label">Driver</label>-->
                            <!--	<select class="form-select"><option>Select Driver</option></select>-->
                            <!--</div>-->
                            <div class="col-md-4">
                                <label class="form-label">Date Range</label>
                                <select class="form-select">
                                    <option>Last Week</option>
                                </select>
                            </div>
                            <div class="col-12 text-end">
                                <button class="btn btn-primary mt-2"
                                    style="background-color: #16ACF2; border-color: #16ACF2;">Apply</button>

                                <button class="btn btn-primary mt-2"
                                    style="background-color: #E33C5A; border-color: #E33C5A;">Clear</button>
                            </div>
                        </form>
                    </div>

                    <hr style="border: 1px solid #0D0D0D;">

                    <div class="d-flex justify-content-between align-items-center p-2 rounded">
                        <!-- Left Buttons -->
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-dark btn-sm"
                                style="background: #DFEAFC; border-color: #DFEAFC;">

                                <span>Invoice Not Received</span>
                            </button>
                            <button class="btn btn-outline-dark btn-sm"
                                style="background: #DFEAFC; border-color: #DFEAFC;">
                                Invoice Received
                            </button>
                            <button class="btn btn-outline-dark btn-sm"
                                style="background: #DFEAFC; border-color: #DFEAFC;">
                                Paid Invoice
                            </button>
                        </div>


                    </div>

                    <!-- Filter Toggle Section -->
                    <div class="d-flex justify-content-between align-items-center p-2 rounded">
                        <!-- Left Buttons -->
                        <div class="d-flex gap-2">
                            <button class="btn btn-outline-dark btn-sm"
                                style="background: #DFEAFC; border-color: #DFEAFC;">
                                <img src="../assets/images/icons/Group 207309.png">
                            </button>
                            <button class="btn btn-outline-dark btn-sm"
                                style="background: #DFEAFC; border-color: #DFEAFC;">
                                <img src="../assets/images/icons/Group 207310.png">
                            </button>
                            <button class="btn btn-outline-dark btn-sm"
                                style="background: #DFEAFC; border-color: #DFEAFC;">
                                <img src="../assets/images/icons/Group 207311.png">
                            </button>
                        </div>

                        <!-- Center Title -->
                        <div class="text-center">
                            <h6 class="mb-0" style="font-size: 20px; font-weight: 600;">All Customer Invoice</h6>
                            <small style="font-size: 16px; font-weight: 500;">From Jun 25, 2025 to Aug 30, 2025</small>
                        </div>

                        <!-- Right Filter Button -->
                        <div>
                            <button onclick="toggleFilter()" class="btn btn-light btn-sm border"
                                style="width: 70px; height:30px; background: #DFEAFC; border-color: #DFEAFC;">
                                Filter <i id="chevronIcon" class="bi bi-chevron-up"></i>
                            </button>
                        </div>
                    </div>

                    <!-- JavaScript -->
                    <script>
                        function toggleFilter() {
                            const filterForm = document.getElementById("filterForm");
                            const icon = document.getElementById("chevronIcon");

                            filterForm.classList.toggle("hidden");

                            // Toggle icon
                            if (filterForm.classList.contains("hidden")) {
                                icon.classList.remove("bi-chevron-up");
                                icon.classList.add("bi-chevron-down");
                            } else {
                                icon.classList.remove("bi-chevron-down");
                                icon.classList.add("bi-chevron-up");
                            }
                        }

                        // On page load, filter should be visible
                        document.addEventListener("DOMContentLoaded", function () {
                            document.getElementById("filterForm").classList.remove("hidden");
                        });
                    </script>



                    <!-- Table Card -->

                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="ordersTable" class="table table-bordered"
                                style="background-color: white; color: black;">
                                <thead style="background: #05BCF6; color: white;">
                                    <tr>
                                        <th></th>
                                        <th>Invoice Date</th>
                                        <th>Invoice ID</th>
                                        <th>Payment Status</th>
                                        <th>Order Id</th>
                                        <th>Order Date</th>
                                        <th>Customer</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody style="background-color: white; color: black;">
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center gap-2">
                                                <input type="checkbox" class="select-row" aria-label="Select row" />
                                                <button type="button" class="btn btn  toggle-row p-1 text-success"
                                                    title="Toggle Details">
                                                    <i class="bi bi-plus-circle"></i>
                                                </button>
                                            </div>
                                        </td>
                                        <!--					<td style="color: #05BCF6; cursor: pointer;" data-bs-toggle="offcanvas" data-bs-target="#loadRequestDetails">-->
                                        <!--  #654123-->
                                        <!--</td>-->

                                        <td>Jul 7, 2025</td>

                                        <td style="color: #05BCF6; cursor: pointer;">#123654</td>

                                        <td><span class="badge bg-success text-white">Paid</span></td>
                                        <td style="color: #05BCF6; cursor: pointer;">#321456</td>
                                        <td>Jul 6, 2025</td>
                                        <td>ABC</td>




                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-info dropdown-toggle" type="button"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                    Action
                                                </button>
                                                <ul class="dropdown-menu custom-dropdown">

                                                    <li>
                                                        <a class="dropdown-item d-flex align-items-center" href="#"
                                                            data-bs-toggle="" data-bs-target="#loadRequestDetails">
                                                            <i class="bi bi-eye me-2 text-primary"></i> View
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a class="dropdown-item d-flex align-items-center" href="#">
                                                            <i class="bi bi-pencil-square me-2 text-warning"></i> Edit
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-item d-flex align-items-center text-danger"
                                                            href="#" data-bs-toggle="modal"
                                                            data-bs-target="#deleteConfirmModal">
                                                            <i class="bi bi-trash me-2"></i> Delete
                                                        </a>
                                                    </li>
                                                    <!--<li><a class="dropdown-item" href="#">Publish</a></li>-->

                                                    <li>
                                                        <a class="dropdown-item d-flex align-items-center" href="#">
                                                            <i class="bi bi-pencil-square me-2 text-warning"></i> Send
                                                            Invoice
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a class="dropdown-item d-flex align-items-center text-success"
                                                            href="{{ url('Customer_MakePayment')}}" data-bs-toggle=""
                                                            data-bs-target="#CloseConfirmModal">
                                                            <i class="bi bi-cash-stack me-2"></i>Make Payment
                                                        </a>
                                                    </li>


                                                </ul>
                                            </div>
                                        </td>



                                    </tr>




                                </tbody>
                            </table>
                        </div>


                    </div>
                </div>

            </div>
        </div>

        <script>
            $(document).ready(function () {
                const table = $('#ordersTable').DataTable();

                $('#ordersTable tbody').on('click', '.toggle-row', function () {
                    const tr = $(this).closest('tr');
                    const row = table.row(tr);
                    const icon = $(this).find('i');

                    if (row.child.isShown()) {
                        row.child.hide();
                        icon.removeClass('bi-dash-circle').addClass('bi-plus-circle');
                    } else {
                        // Static row content
                        const detailHtml = `
         
          <div class="" style="background-color:  border-radius: 6px; max-width: 350px;">
 
  
  
  <div class="mb-2 d-flex justify-content-between">
    <strong>Pending Since(Days):</strong>
    <span >10</span>
  </div>
  
  <div class="mb-2 d-flex justify-content-between">
    <strong>Invoice Amount:</strong>
    <span >123</span>
  </div>
  
  <div class="mb-2 d-flex justify-content-between">
    <strong>Paid Amount:</strong>
    <span >123</span>
  </div>
  
  <div class="mb-2 d-flex justify-content-between">
    <strong>Payment Mode:</strong>
    <span >Cash</span>
  </div>
  
  <div class="mb-2 d-flex justify-content-between">
    <strong>Customer Email:</strong>
    <span >customer@gmail.com</span>
  </div>
  
  </div>
</div>






        `;
                        row.child(detailHtml).show();
                        icon.removeClass('bi-plus-circle').addClass('bi-dash-circle');
                    }
                });
            });
        </script>

        <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
            aria-hidden="true" data-bs-backdrop="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-4">
                    <div class="modal-header bg-danger text-white rounded-top-4">
                        <h5 class="modal-title" id="deleteConfirmModalLabel"><i
                                class="bi bi-exclamation-triangle me-2"></i>Confirm Deletion</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p class="mb-2">Are you sure you want to delete this data?</p>
                        <p class="text-muted small">This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-sm btn-danger">Yes, Delete</button>
                    </div>
                </div>
            </div>
        </div>



        <div class="modal fade" id="CloseConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
            aria-hidden="true" data-bs-backdrop="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-4">
                    <div class="modal-header bg-danger text-white rounded-top-4">
                        <h5 class="modal-title" id="deleteConfirmModalLabel"><i
                                class="bi bi-exclamation-triangle me-2"></i>Confirm Publish</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center">
                        <p class="mb-2">Are you sure you want to Publish this Load Order?</p>
                        <p class="text-muted small">This action cannot be undone.</p>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-sm btn-danger">Yes, Delete</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Trigger Button (optional for demo) -->


        <!-- Offcanvas Right Panel -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="loadRequestDetails"
            style="width: 980px; border-top-left-radius: 12px; border-bottom-left-radius: 12px; overflow: hidden;"
            data-bs-backdrop="false">
            <div class="offcanvas-header d-flex justify-content-between align-items-center"
                style="background-color: #000; padding: 16px 25px;">
                <h5 class="offcanvas-title text-white mb-0" style="font-size: 18px;">
                    Load Order Details <span style="color: #05BCF6;">"SHP-654123"</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
                    aria-label="Close"></button>
            </div>

            <div class="offcanvas-body" style="background-color: #F6F7F9; padding: 20px;">
                <div class="container-fluid">
                    <div class="row g-3">

                        <!-- Load Details -->
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0 rounded-3">
                                <div class="card-header text-white fw-semibold py-1 px-3"
                                    style="background-color: #05BCF6; font-size: 14px;">Load Details</div>
                                <div class="card-body px-3 py-2" style="line-height: 1.8; font-size: 13px;">
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Load
                                            Request ID:</strong> <span>SHP-654123</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Request
                                            Type:</strong> <span>CRM Lead</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Request
                                            Date & Time:</strong> <span>Jun 26, 2025 04:30:45</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Shipment
                                            Request Status:</strong> <span>Pending</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Created
                                            By:</strong> <span>CRM Staff: Ramesh Kumar</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Mode of
                                            Transport:</strong> <span>Road</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong
                                            style="width: 180px;">Priority:</strong> <span>Normal</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Special
                                            Instructions:</strong> <span>Handle with care</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Bid
                                            Limit:</strong> <span>10</span></div>
                                    <div class="d-flex"><strong style="width: 180px;">Bid Count:</strong> <span>8</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Customer Details -->
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0 rounded-3">
                                <div class="card-header text-white fw-semibold py-1 px-3"
                                    style="background-color: #05BCF6; font-size: 14px;">Customer Details</div>
                                <div class="card-body px-3 py-2" style="line-height: 1.8; font-size: 13px;">
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Customer
                                            Name:</strong> <span>Umar Traders</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Contact
                                            Person:</strong> <span>Mr. Azin Naza</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong
                                            style="width: 180px;">Address:</strong> <span>21, MG Road, Indore</span>
                                    </div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong
                                            style="width: 180px;">GSTIN:</strong> <span>CUST-00045</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Customer
                                            ID:</strong> <span>CUST-00045</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong
                                            style="width: 180px;">Phone:</strong> <span>+91-9876 543210</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong
                                            style="width: 180px;">Country:</strong> <span>India</span></div>
                                    <div class="d-flex"><strong style="width: 180px;">City:</strong> <span>Indore</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pickup Details -->
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0 rounded-3">
                                <div class="card-header text-white fw-semibold py-1 px-3"
                                    style="background-color: #05BCF6; font-size: 14px;">Pickup Details</div>
                                <div class="card-body px-3 py-2" style="line-height: 1.8; font-size: 13px;">
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Pickup
                                            Address</strong> <span>Warehouse #3, Palda, Indore</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Pickup
                                            Contact Name</strong> <span>Ramesh Verma</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Pickup
                                            Contact No.</strong> <span>+91-99988 77665</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Pickup
                                            Date & Time</strong> <span>Jun 27, 2025 20:12:05</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Pickup
                                            Pincode</strong> <span>452020</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Pickup
                                            Instructions</strong> <span>Loading dock entry only</span></div>

                                </div>
                            </div>
                        </div>

                        <!-- Delivery Details -->
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0 rounded-3">
                                <div class="card-header text-white fw-semibold py-1 px-3"
                                    style="background-color: #05BCF6; font-size: 14px;">Delivery Details</div>
                                <div class="card-body px-3 py-3" style="line-height: 1.8; font-size: 13px;">
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Drop
                                            Address</strong> <span>Shop No. 12, Chandni Chowk, Delhi</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Drop
                                            Contact Name</strong> <span>Vinay Gupta</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Drop
                                            Contact No.</strong> <span>+91-99988 77665</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Expected
                                            Delivery</strong> <span>Jun 28,2025 Before 5 PM</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Drop
                                            Pin-code</strong> <span>110006</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Delivery
                                            Instructions</strong> <span>Call before delivery</span></div>
                                    >
                                </div>
                            </div>
                        </div>

                        <!-- Item Details -->
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0 rounded-3">
                                <div class="card-header text-white fw-semibold py-1 px-3"
                                    style="background-color: #05BCF6; font-size: 14px;">Item Details</div>
                                <div class="card-body px-3 py-2" style="line-height: 1.8; font-size: 13px;">
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong style="width: 180px;">Item
                                            Type:</strong> <span>Electronic Goods</span></div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong
                                            style="width: 180px;">Description:</strong> <span>Laptops and Phones</span>
                                    </div>
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong
                                            style="width: 180px;">Quantity:</strong> <span>14 Units</span></div>
                                    <div class="d-flex"><strong style="width: 180px;">Total Weight:</strong> <span>20
                                            Kg</span></div>
                                </div>
                            </div>
                        </div>

                        <!-- Pricing Info -->
                        <div class="col-md-6">
                            <div class="card shadow-sm border-0 rounded-3">
                                <div class="card-header text-white fw-semibold py-2 px-3"
                                    style="background-color: #05BCF6; font-size: 14px;">Pricing Info</div>
                                <div class="card-body px-3 py-2" style="line-height: 1.8; font-size: 13px;">
                                    <div class="mb-2 d-flex border-bottom pb-2"><strong
                                            style="width: 180px;">Budget:</strong> <span>₹1,20,000</span></div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>



        <!-- Footer -->

    </div>
</div>
@include('includes.footer')
<!-- Scripts -->
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script> -->
<!-- jQuery -->


</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


<script>
    document.getElementById('select-all').addEventListener('change', function () {
        const isChecked = this.checked;
        document.querySelectorAll('.select-row').forEach(cb => {
            cb.checked = isChecked;
        });
    });
</script>
<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/sidebarmenu.js"></script>
<script src="../assets/js/app.min.js"></script>
<script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
<script src="../assets/js/dashboard.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


<script>
    $(document).ready(function () {
        if (!$.fn.DataTable.isDataTable('#ordersTable')) {
            $('#ordersTable').DataTable({
                responsive: true
            });
        }
    });
</script>
<script>
    function toggleSidebar() {
        const sidebar = document.getElementById("sidebarWrapper");
        sidebar.classList.toggle("active");
    }
</script>
</body>

</html>