<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="assets/vendors/bootstrap/jquery-3.2.1.min.js"></script>
<script src="assets/vendors/bootstrap/popper.min.js"></script>
<script src="assets/vendors/bootstrap/bootstrap.min.js"></script>

<!-- select2 JS -->
<script src="assets/vendors/select2/select2.min.js"></script>

<!-- Circle progress JS -->
<script src="assets/vendors/circle-progress/circle-progress.min.js"></script>

<!-- Noty JS -->
<script src="assets/vendors/noty/noty.min.js"></script>

<!-- Flatpickr -->
<script src="assets/vendors/flatpickr/flatpickr.min.js"></script>
<script src="assets/vendors/flatpickr/flatpickr_ar.js"></script>

<!-- swiper -->
<script src="assets/vendors/swiper/swiper-bundle.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


<!-- ScrollMagic -->
<script src="assets/vendors/scroll-magic/ScrollMagic.min.js"></script>
<script src="assets/vendors/scroll-magic/debug.addIndicators.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/nouislider@15.7.1/dist/nouislider.min.js"></script>










<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/dataTables.select.min.js"></script>




<!-- Custom JS -->
<script src="assets/js/custom.js"></script>









<script>
    $(document).ready(function() {
        $('#drivers , #orders , #returns , #menu , #orders , #returns ').DataTable({
            processing: true,
            searching: false,
            responsive: true,
            dom: "tiplr",
            "language": {
                processing: ' <div class="loading-container orange"> <div class="loader lg"></div> </div> '
            },

        });
    });

    $(function() {
        // initSliderRange();
    });
</script>

<script>
    $(document).ready(function() {

        $(document).ready(function() {

            let example = $('#credit-invoices').DataTable({

                processing: true,
                searching: false,
                responsive: true,
                dom: "tiplr",
                "language": {
                    processing: ' <div class="loading-container orange"> <div class="loader lg"></div> </div> '
                },

                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [
                    [1, 'asc']
                ]
            });

            example.on("click", "th.select-checkbox", function() {
                if ($("th.select-checkbox").hasClass("selected")) {
                    example.rows().deselect();
                    $("th.select-checkbox").removeClass("selected");
                } else {
                    example.rows().select();
                    $("th.select-checkbox").addClass("selected");
                }
            }).on("select deselect", function() {
                ("Some selection or deselection going on")
                if (example.rows({
                        selected: true
                    }).count() !== example.rows().count()) {
                    $("th.select-checkbox").removeClass("selected");
                } else {
                    $("th.select-checkbox").addClass("selected");
                }
            });

        });




    });
</script>

<script>
    /* Formatting function for row details - modify as you need */
    function format(d) {
        // `d` is the original data object for the row
        return (
            `
                <table>
                    <tr>
                        <td> Quantity : ${d.quantity} </td>
                        <td> Discount :  ${d.discount} </td>
                        <td> Offer : ${d.subCategory}</td>
                    </tr>
                </table>
                `
        );
    }

    $(document).ready(function() {
        var table = $('#products').DataTable({
            processing: true,
            searching: false,
            responsive: true,
            dom: "tiplr",

            "language": {
                processing: ' <div class="loading-container orange"> <div class="loader lg"></div> </div> '
            },

            ajax: 'products.json',

            columns: [{
                    className: 'dt-control',
                    orderable: false,
                    data: null,
                    defaultContent: '',
                },
                {
                    data: 'product'
                },
                {
                    data: 'name'
                },
                {
                    data: 'category'
                },
                {
                    data: 'price'
                },
                {
                    data: 'offer'
                },
                {
                    data: 'purchased'
                },
                {
                    data: 'stock'
                },
                {
                    data: 'status'
                },
                {
                    data: 'adminStatus'
                },
                {
                    data: 'action'
                },
            ],

            order: [
                [1, 'asc']
            ],

        });

        // Add event listener for opening and closing details
        $('#products tbody').on('click', 'td.dt-control', function() {

            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            } else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    });
</script>




<script>
    function onClickToggleSideNav() {

        $("li.link-item.has-sub").click(function(event) {
            if ($(event.target).parent().hasClass("has-sub")) {
                if ($($(this)).height() > 45) { // if menu already open
                    $(this).find(".sub-nav-items").slideUp("fast");
                    $(this).removeClass("arrow-down");
                } else {
                    $("li.link-item.has-sub").find(".sub-nav-items").slideUp("fast");
                    $(this).find(".sub-nav-items").slideDown("fast");
                    $("li.link-item.has-sub").removeClass("arrow-down");
                    $(this).addClass("arrow-down");
                }
            }
        });
    }

    $(document).ready(function() {
        onClickToggleSideNav();


        $(".parent-ele").on("click", function(event) {

            if ($(event.target).hasClass("parent-ele")) {
                alert("Parent element clicked");
            }
        });

    });
</script>


</body>

</html>