
<link href="https://cdn.datatables.net/v/dt/dt-2.0.5/datatables.min.css" rel="stylesheet">
    <style>
        table.dataTable th.dt-type-numeric,
        table.dataTable th.dt-type-date,
        table.dataTable td.dt-type-numeric,
        table.dataTable td.dt-type-date {
            text-align: left;
        }

        .users-management {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: auto;
        }

        .users-add-top {
            display: flex;
            width: auto;
            height: auto;
            margin-top: -30px;
        }

        .users-add-user {
            width: 227px;
            height: 51px;
            background: #75B1E8;
            border-radius: 8px;
            /* Add User */
            font-weight: 600;
            font-size: 20px;
            line-height: 24px;
            color: #FFFFFF;
            text-align: center;
            padding-top: 13px;
        }

        .users-total {
            width: 265.86px;
            height: 90px;
            background: white;
            border-radius: 8px;
            padding-top: 20px;
            padding-left: 20px;
            margin-left: -10px;
        }

        .users-total p,
        .users-total .users-count-top p {
            font-weight: 400;
            font-size: 14px;
            line-height: 16px;
            color: #8F9BB3;
        }

        .users-count-top {
            display: flex;
            justify-content: space-between;
        }

        .users-count-top img {
            margin-top: -15px;
            margin-right: 18px;
        }

        .users-total h6 {
            font-weight: 600;
            font-size: 20px;
            line-height: 24px;
            color: #222B45;
            margin-top: -5px;
            text-align: left;
        }

        .payemnt-status {
            width: 100%;
            height: auto;
            margin-top: 20px;
            border-radius: 8px;
            background: white;
            border: 1px solid #1b59f8;
            padding: 10px;
        }


        .payemnt-status-top {
            width: 100%;
            display: flex;
            margin-bottom: 15px;
        }

        .payemnt-status-top-left {
            display: flex;
            flex: 90%;
            flex-wrap: wrap;
        }

        .payment-status-box {
            width: fit-content;
            border-radius: 6px;
            border: 1px solid #D9DBDE;
            padding: 2px 5px;
            height: 30px;
            margin-right: 20px;
        }

        .payment-status-box p {
            font-size: 12px;
            color: #979797;
        }

        .payment-status-box span {
            background-color: #6788DD;
            padding: 3px 5px;
            border-radius: 4px;
            font-size: 11px;
            color: #ffffff;
            margin-left: 8px;
        }

        /*===============*/
        .payemnt-status-top-right {
            display: flex;
            flex: 10%;
            gap: 18px;
            margin-top: 13px;
        }

        .payemnt-status-top-right img {
            height: 20px;
        }

        .payemnt-status-top-right p {
            font-size: 16px;
            font-weight: 400;
            line-height: 17px;
            letter-spacing: 0px;
            color: #979797;
        }

        .staff-searchAdd .staff-search {
            margin-left: 17px;
        }

        table {
            caption-side: bottom;
            border-collapse: collapse;
            width: 100%;
        }

        table#dynamic-table {
            width: 80%;
            margin: auto;
            margin-top: 15px;
        }

        tr:nth-child(even) {
            background: #F1F3F9;
        }

        #t-head {
            background: #F1F3F9;
        }

        th input[type="checkbox"] {
            margin-right: 10px;
            /* Adjust this value as needed */
        }

        .payment-status-button {
            /* Badge */
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 1.39086px 6.95431px;
            width: 80px;
            height: 20px;
            color: white;
            background: #5EAA3A;
            border: 0.695431px solid #93C5FD;
            border-radius: 2.78173px;
        }

        .payment-order .payment-order-completed {
            width: 280px;
            height: 90px;
            background-color: white;
            padding-top: 20px;
            padding-left: 16px;
            margin-left: 20px;
            border-radius: 20px;
        }

        .searchbaar {
            width: 320px;
            height: 38px;
            border: 1px solid rgb(181, 180, 180);
            border-radius: 6px
        }

        .searchbaar input {
            overflow: hidden;
            width: 70%;
            border: none;
            outline: none;
            font-size: 13px;
        }

        table .admin {
            width: 70px;
            height: Hug (14.78px)px;
            padding: 5px;
            border-radius: 2.78px;
            border: 0.7px;
            background: #FFFFFF;
            border: 0.7px solid #93C5FD;
            font-weight: 500;
            line-height: 11.13px;
            text-align: center;
            color: #00E0FF;
        }

        table .new_user {
            width: 70px;
            height: Hug (14.78px)px;
            padding: 5px;
            border-radius: 2.78px;
            border: 0.7px;
            background: #DBEAFE;
            border: 0.7px solid #93C5FD;
            font-weight: 500;
            line-height: 11.13px;
            text-align: center;
            color: #1E40AF;
        }

        table td button.premium {
            padding: 5px;
            width: 70px;

        }

        table .premium {
            width: 70px;
            padding: 5px;
            height: Hug (14.78px)px;
            padding: 5px;
            border-radius: 2.78px;
            border: 0.7px;
            font-weight: 500;
            line-height: 11.13px;
            text-align: center;
        }

        table .regular {
            width: 70px;
            height: Hug (14.78px)px;
            padding: 5px;
            border-radius: 2.78px;
            border: 0.7px;
            background: #5EAA3A;
            border: 0.7px solid #93C5FD;
            font-weight: 500;
            line-height: 11.13px;
            text-align: center;
            color: #FFFFFF;
        }

        table .check {
            margin-right: 10px;
            margin-top: 3px;
        }

        table .check a {
            text-decoration: none;
            color: black;
        }

        .pagination {
            border: none;
            padding: 10px;

        }

        .page-item {
            margin: 5px;

        }

        .nav-item .nav-link {
            background-color: transparent !important;
        }


        .nav-pills .nav-link.active .users-total,
        .show .nav-link .users-total {
            border: 1px solid #1B59F8;
        }

        .searchbaar input {
            overflow: hidden;
            width: 70%;
            border: none;
            outline: none;
            font-size: 13px;
            line-height: 35px;
        }
    </style>

        <div class="users-management">

                    <div class="payemnt-status">
                    <!-- <div class="payemnt-status-top ">
                            
                        </div> -->
                        <table class="display" style="width:100%" id="example">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Total Orders</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr>
                                    <td><?php echo e($user->name); ?></td>
                                    <td><?php echo e($user->phone); ?></td>
                                    <td><?php echo e($user->email); ?></td>
                                    <td><?php echo e($user->status); ?></td>
                                    <td><?php echo e($user->created_at->format('d-m-y')); ?></td>
                                    <td><?php echo e($user->total_order); ?></td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                    </div>
                 
        </div>
   
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var searchInputs = document.querySelectorAll('.searchInput'); // Select all elements with class "searchInput-2"

            searchInputs.forEach(function(searchInput) {
                // Add event listener to input for filtering
                searchInput.addEventListener('input', function() {
                    var filter = searchInput.value.toUpperCase();
                    var tables = document.querySelectorAll('.searchResults'); // Select all elements with class "searchResults-two"

                    tables.forEach(function(table) {
                        var rows = table.getElementsByTagName('tr');

                        // Loop through all table rows, and hide those who don't match the search query
                        for (var i = 0; i < rows.length; i++) {
                            var cells = rows[i].getElementsByTagName('td');
                            var found = false;
                            for (var j = 0; j < cells.length; j++) {
                                var cell = cells[j];
                                if (cell) {
                                    var textValue = cell.textContent || cell.innerText;
                                    if (textValue.toUpperCase().indexOf(filter) > -1) {
                                        found = true;
                                        break;
                                    }
                                }
                            }
                            if (found) {
                                rows[i].style.display = '';
                            } else {
                                rows[i].style.display = 'none';
                            }
                        }
                    });
                });
            });
        });
    </script>
   
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const selectAllCheckboxes = document.querySelectorAll(".selectAll");

            selectAllCheckboxes.forEach(function(selectAllCheckbox) {
                const checkboxes = selectAllCheckbox.closest('table').querySelectorAll(".check");

                selectAllCheckbox.addEventListener("change", function() {
                    checkboxes.forEach(function(checkbox) {
                        checkbox.checked = selectAllCheckbox.checked;
                    });
                });
            });
        });
    </script>

    <!-- <script>
        new DataTable('#example', {
            info: true,
            ordering: true,
            paging: true,
            showNEntries: false
        });
        document.getElementByClassName("input.form-control.form-control-sm").placeholder = "Search...";

        let ck = document.getElementById('globalCheck');
        ck.addEventListener("click", function() {
            let checkboxes = document.querySelectorAll('#example tr input[type="checkbox"]');

            checkboxes.forEach(function(checkbox) {
                checkbox.checked = true;
                console.log(checkbox);
            });
        });
    </script> -->
    <script>
        new DataTable('#example', {
            layout: {
                bottomEnd: {
                    paging: {
                        boundaryNumbers: false
                    }
                }
            }
        });
    </script>

    <script src="https://cdn.datatables.net/v/dt/dt-2.0.5/datatables.min.js"></script>
<?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/allVendor.blade.php ENDPATH**/ ?>