
<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;
        }
         table.dataTable thead>tr>th.dt-orderable-asc, table.dataTable thead>tr>th.dt-orderable-desc, table.dataTable thead>tr>td.dt-orderable-asc, table.dataTable thead>tr>td.dt-orderable-desc
      {
          background: #F1F3F9;
      }
     div.dt-container .dt-info
     {
         display:none;
     }
     div.dt-container .dt-paging
     {
         text-align:center;
     }
     div.dt-container .dt-paging .dt-paging-button.current
     {
         height:33px;
         width:39px;
         color: #FFFFFF;
         border: 1px solid #1B59F8 !important;
         padding:4px 6px;
     }
    .dt-search
    {
        display:none;
    }
    .dt-layout-cell dt-start
    {
        float:right;   
    }
    .dt-length
    {
        float:right;
        margin-top:-70px;
    }
    table.dataTable
    {
        margin-top:-20px !important;
    }
    #custom-search::-ms-clear {
        display: none;
    }
    #custom-search::-webkit-search-cancel-button {
        display: none;
    }
     .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;
            gap:15px;
            display:none;
            justify-content:center;
            align-items:center;
        }
        .payment-status-box.active{
            display:flex;
            
        } 
        .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;
         }
    </style>

        <div class="users-management">

                    <div class="payemnt-status">
                          <div class="payemnt-status-top-left d-flex align-items-center justify-content-between">
                                    <svg width="50" height="42" viewBox="0 0 50 42" id="tog_svg4" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <!--<g filter="url(#filter0_ddd_708_18664)">-->
                                    <!--<rect x="5" y="3" width="40" height="32" rx="6" fill="white"/>-->
                                    <!--<path d="M30.79 13.6156C31.3029 12.9591 30.8351 12 30.002 12H20.0019C19.1687 12 18.7009 12.9591 19.2138 13.6156L24.0398 19.7287C24.1772 19.9045 24.2518 20.1212 24.2518 20.3443V25.7961C24.2518 25.9743 24.4672 26.0635 24.5932 25.9375L25.6054 24.9254C25.6991 24.8316 25.7518 24.7044 25.7518 24.5718V20.3443C25.7518 20.1212 25.8264 19.9045 25.9638 19.7287L30.79 13.6156Z" fill="#464F60"/>-->
                                    <!--</g>-->
                                    <!--<defs>-->
                                    <!--<filter id="filter0_ddd_708_18664" x="0" y="0" width="50" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">-->
                                    <!--<feFlood flood-opacity="0" result="BackgroundImageFix"/>-->
                                    <!--<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>-->
                                    <!--<feOffset dy="2"/>-->
                                    <!--<feGaussianBlur stdDeviation="2.5"/>-->
                                    <!--<feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.376471 0 0 0 0 0.470588 0 0 0 0.1 0"/>-->
                                    <!--<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_708_18664"/>-->
                                    <!--<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>-->
                                    <!--<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_708_18664"/>-->
                                    <!--<feOffset/>-->
                                    <!--<feColorMatrix type="matrix" values="0 0 0 0 0.27451 0 0 0 0 0.308497 0 0 0 0 0.376471 0 0 0 0.16 0"/>-->
                                    <!--<feBlend mode="normal" in2="effect1_dropShadow_708_18664" result="effect2_dropShadow_708_18664"/>-->
                                    <!--<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>-->
                                    <!--<feOffset dy="1"/>-->
                                    <!--<feGaussianBlur stdDeviation="0.5"/>-->
                                    <!--<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>-->
                                    <!--<feBlend mode="normal" in2="effect2_dropShadow_708_18664" result="effect3_dropShadow_708_18664"/>-->
                                    <!--<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_708_18664" result="shape"/>-->
                                    <!--</filter>-->
                                    <!--</defs>-->
                                    </svg>

 <button class="text-white px-4 py-2 rounded" onclick="downloadTableAsExcel('example', 'user_data.xlsx')" style="
    padding: 5px 10px !important;
    margin-bottom: 25px;
"><svg xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome  - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg></button>
                                
                                <div class="payment-status-box " style="margin-left:15px;">
                                    <p class="mb-0">All</p>
                                    <span>425</span>
                                </div>
                                <div class="payment-status-box ">
                                    <p class="mb-0">Returning</p>
                                     <span>425</span>
                                </div>
                                <div class="payment-status-box">
                                    <p class="mb-0">Imported</p>
                                    <span>425</span>
                                </div>
                                <div class="payment-status-box ">
                                    <p class="mb-0">Date</p>
                                    <span>425</span>
                                </div>
                                <div class="payment-status-box" >
                                    <p class="mb-0">User Type</p>
                                     <span>425</span>
                                </div>
                    </div>
                
                <script>
                    document.addEventListener("DOMContentLoaded", function() {
                    var tog_svg4 = document.getElementById('tog_svg4');
                    const divs = document.querySelectorAll(".payment-status-box");
                    tog_svg4.addEventListener('click', function() {
                        divs.forEach(function(di) {
                            di.classList.toggle("active");
                        });
                    });
                });
                </script>
                                


                     <div class="payemnt-status-top ">
                            <div class="search_icon" style="box-shadow: 0px 0px 0px 1px #68718229;width: 30%; height: 32px; margin: 15px 0 20px 0; display: flex; border-radius: 6px; align-items: center; padding: 0 10px; background-color: #FFFFFF;">
                            <span>
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6821 11.7458C9.66576 12.5361 8.38866 13.0067 7.00167 13.0067C3.68704 13.0067 1 10.3189 1 7.00335C1 3.68779 3.68704 1 7.00167 1C10.3163 1 13.0033 3.68779 13.0033 7.00335C13.0033 8.39059 12.533 9.66794 11.743 10.6845L14.7799 13.7186C15.0731 14.0115 15.0734 14.4867 14.7806 14.7799C14.4878 15.0731 14.0128 15.0734 13.7196 14.7805L10.6821 11.7458ZM11.5029 7.00335C11.5029 9.49002 9.48765 11.5059 7.00167 11.5059C4.5157 11.5059 2.50042 9.49002 2.50042 7.00335C2.50042 4.51668 4.5157 2.50084 7.00167 2.50084C9.48765 2.50084 11.5029 4.51668 11.5029 7.00335Z" fill="#868FA0" />
                                </svg>
                            </span>
                            <input type="search" id="custom-search4" placeholder="Search..." aria-controls="example" style="border: none; outline: none; padding: 0 10px; color: #A1A9B8; font-size: 13px; width: 100%;">
                                </div> 
                            
                        </div> 
                        <table class="display" style="width:100%" id="vip">
                           
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Phone</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Total Orders</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="searchResults4">
                                <?php $__currentLoopData = $users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $user): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <tr>
                                    <td><?php echo e($user->name); ?></a></td>
                                    <td><?php echo e($user->phone); ?></td>
                                    <td><?php echo e($user->email); ?></td>
                                    <td><button style="box-sizing: border-box;
                                            display: flex;
                                            flex-direction: row;
                                            justify-content: center;
                                            align-items: center;
                                            padding: 1.39086px 6.95431px;
                                            width: 80px;
                                            height: 20px;
                                            background: #FFD580;
                                            border: 0.695431px solid #93C5FD;
                                            border-radius: 2.78173px;
                                            color: red;">Vip</button></td>
                                    <td><?php echo e($user->created_at->format('d-m-y')); ?></td>
                                    <td><?php echo e($user->total_order); ?></td>
                                    <td><a href="<?php echo e(route('usermanagement_userdetail', ['id' => $user->ID])); ?>" > <button style="box-sizing: border-box;
                                            display: flex;
                                            flex-direction: row;
                                            justify-content: center;
                                            align-items: center;
                                            padding: 1.39086px 6.95431px;
                                            <!--width: 80px;-->
                                            <!--height: 20px;-->
                                            background: #FFD580;
                                            border: 0.695431px solid #93C5FD;
                                            border-radius: 2.78173px;
                                                color: #fff;
    background: #2148C0;">View Details</button></a></td>
                                </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                    </div>
                 
        </div>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        // Get the search input
        var searchInput = document.getElementById('custom-search4');
        // Get the table body
        var tableBody = document.getElementById('searchResults4');

        // Add event listener for input changes
        searchInput.addEventListener('input', function () {
            var searchText = this.value.toLowerCase();
            // Get all rows of the table
            var rows = tableBody.getElementsByTagName('tr');

            // Loop through all rows
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                var rowData = row.innerText.toLowerCase();

                // If the row data contains the search text, display the row, otherwise hide it
                if (rowData.includes(searchText)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    });
</script>
    <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('#vip', {
            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/vipUserTable.blade.php ENDPATH**/ ?>