<link href="https://cdn.datatables.net/v/dt/dt-2.0.5/datatables.min.css" rel="stylesheet">
    
<div class="payemnt-status-top ">
    <div class="payemnt-status-top-left d-flex align-items-center ">
            <!--<svg width="50" height="42" viewBox="0 0 50 42" id="tog_svg2" 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>-->

        
        <div class="payment-status-box " style="margin-left:15px;">
            <p class="mb-0">Today</p>
            <span>425</span>
        </div>
        <div class="payment-status-box ">
            <p class="mb-0">Yesterday</p>
             <span>425</span>
        </div>
        <div class="payment-status-box">
            <p class="mb-0">Vendor</p>
            <span>425</span>
        </div>
        <div class="payment-status-box ">
            <p class="mb-0">Email</p>
            <span>425</span>
        </div>
        <div class="payment-status-box" >
            <p class="mb-0">Number</p>
             <span>425</span>
        </div>
    </div>
    <div class="payemnt-status-top-right">
        <p>Export</p>
        <img src="IMAGES\Vector (2).svg" alt="">
    </div>
</div>
<div class="searchbaar">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
        style="width: 14px; height: 14px; margin-left:10px;">
        <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.-->
        <path fill="#a0a0a2"
            d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z" />
    </svg>
    <input type="text" placeholder="Search" id="custom-search2">
</div>
<table id="example2" class="display table-striped table-hover table-borderless" style="width:100%">
    <thead>
        <tr>
            <th class="th-1">Vendor</th>
            <th class="th-3">Mobile Number </th>
            <th class="th-4">Email </th>
            <th class="th-5">Location</th>
            <th class="th-6">Status</th>
            <th class="th-7">Date</th>
            <th class="th-8">Action</th>
            <!--<th class="th-8">Total Sales</th>-->
            <!--<th class="th-9">Reconcilliation</th>-->
        </tr>
    </thead>
    <tbody id="searchResults2">
        @foreach ($inactiveVendors as $inactiveVendor)
                                    
                                <tr>
                                    <td> {{ $inactiveVendor->name }}</td>
                                    <td> {{ $inactiveVendor->phone }}</td>
                                    <td> {{ $inactiveVendor->email }}</td>
                                    <td> {{ $inactiveVendor->address }}</td>
                                    @if($inactiveVendor->status == 'A')
                                    <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;
                                            border: 0.695431px solid #0CCF2B;
                                            border-radius: 2.78173px;
                                            color: #0CCF2B;">Active</button></td>
                                   
                                    @elseif($inactiveVendor->status == 'P')
                                     <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: #2D2828;
                                            border: 0.695431px solid #93C5FD;
                                            border-radius: 2.78173px;
                                            color: #F7B261;">Premium</button></td>
                                     
                                    @elseif($inactiveVendor->status == 'R')
                                     <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: #5EAA3A;
                                            border: 0.695431px solid #93C5FD;
                                            border-radius: 2.78173px;
                                            color: #Fff;">Regular</button></td>
                                     
                                    @elseif($inactiveVendor->status == 'N')
                                    <!--<td><button style="width:75px;border-radius: 2.78px 0px 0px 0px;border: 0.7px;background: #FFD580;font-weight: 500;color: red">VIP</button></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>
                                    @else
                                    <td>New User</td>
                                    @endif

                                    <td>{{ $inactiveVendor->created_at->format('d-m-y') }}</td>
                                    <td><a href="" > <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>
                                    <!--<td>{{ $inactiveVendor->total_order }}</td>-->
                                </tr>
                                    
                                @endforeach
    </tbody>
    
</table>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Get the search input
        var searchInput = document.getElementById('custom-search2');
        // Get the table body
        var tableBody = document.getElementById('searchResults2');

        // 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>
        new DataTable('#example2', {
            info: true,
            ordering: true,
            paging: true,
            showNEntries: false
        });
        document.getElementByClassName("input.form-control.form-control-sm").placeholder = "Search...";

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

            checkboxes1.forEach(function(checkbox) {
                checkbox.checked = true;
                console.log(checkbox);
            });
        });
    </script>
        <script>
        var tog_svg2= document.getElementById('tog_svg2');
        const divs2 = document.querySelectorAll(".payment-status-box");
        tog_svg2.addEventListener('click',function(){
            divs2.forEach(function(di){
                 di.classList.toggle("active");
            });
        });
</script>

    

    <script src="https://cdn.datatables.net/v/dt/dt-2.0.5/datatables.min.js"></script>