<?php if (isset($component)) { $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\AppLayout::class, []); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
    <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;
        }

        #vendor_add {
            font-size: 16px;
            font-weight: 600;
            color: #000000;
        }
        .second
        {
            margin-right:20px;
        }
        
    .Dashboard_header header .header_left_side .second {
         font-size: 14px;
        color: #4D4D4D;
        font-weight: 600;
    }
    
    .Dashboard_header header .header_box {
        border-bottom: 1px solid #ccc;
        /*width:98%;*/
    }
    .Dashboard_header header {
            border-bottom: 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;
         }
         
          div.dt-container .dt-input {
            border:1px solid #68718229;
            border-radius:6px;
            outline: none;
        }
        

        #dt-search-0::placeholder{
            color: #A1A9B8;
            font-size:13px;
        }
        
       
   
        .VendorApprovalRequest {
            width: 100%;
            margin-left:2px;
        }

        #vendor_add img {
            margin-right: 5px;
            height: 20px;
            width: 20px;
        }

        .table_form {
            /* width: 100%; */
            margin-top: 20px;
            border: 1px solid #1B59F8;
            padding: 15px;
            border-radius: 8px;
            background-color: #FFFFFF;
            /* height: 677px; */
            padding-bottom: 0;
        }

        .table_form table {
            width: 100% !important;
        }

        .table_form p {
            width: 40px;
            height: 32px;
            padding: 8px 0;
            border-radius: 6px;
        }

        .table_form p img {
            display: flex;
            margin: auto;
        }

        table tr th {
            text-align: start;
            font-size: 14px !important;
            font-weight: 600;
            color: #1D2433;
            background-color: #F1F3F9;
            height: 40px;
            padding: 0 20px !important;
        }

        table tr th input[type="checkbox"] {
            height: 15px;
            width: 15px;
            border: 1px solid #1D2433;

        }

        table tr td {

            font-size: 11px;
            font-weight: 400;
            color: #2E2E2E;
            text-align: start;
            height: 40px;
            padding: 10px 20px !important;
        }

        table tr td input[type="checkbox"] {
            height: 15px;
            width: 15px;
            border: 1px solid #1D2433;

        }
         div.dt-container .dt-info{
            display:none;
         }
        div.dt-container .dt-paging {
            text-align:center;
            margin-top:15px;
        }
        table tr td button {
            font-size: 9px;
            font-weight: 500;
            color: #ffffff;
            background-color: #2148C0;
            width: 129px; 
            padding: 0px 20px;
            border: none;
            height: 24px;
            border-radius: 3px;
        }

        table.dataTable thead th, table.dataTable tfoot th{
        color: #1D2433 !important;
        background-color: #F1F3F9;
    }
    table.dataTable.display > tbody > tr:nth-child(even) > *
   {
        background-color: #F8F9FC !important;
}
        table.dataTable.stripe > tbody > tr:nth-child(odd) > *, table.dataTable.display > tbody > tr:nth-child(odd) > *,
    table.dataTable.stripe > tbody > tr:nth-child(even) > *, table.dataTable.display > tbody > tr:nth-child(even) > *,
    table.dataTable > thead > tr > th, table.dataTable > thead > tr > td{
        border: none;
        box-shadow:none;
}
        .table_form_flex {
            display: flex;
        }

        .table_form_flex p {
            width: fit-content;
            /* height: 30px; */
            font-size: 12px;
            font-weight: 400;
            padding: 7px 5px;
            color: #979797;
            border: 1px solid #D9DBDE;
            box-shadow: none;
            border-radius: 6px;
        }

        .table_form_flex span {
            background-color: #6788DD;
            color: white;
            padding: 3px 4px;
            border-radius: 4px;
        }



        .seacrh_icon input[type="text"]::placeholder {

            font-size: 13px;
            font-weight: 400;
            color: #A1A9B8;
        }

        .Shop-add-1 {
            box-shadow: 0px 0px 5px 0px #b1b1b1;
            background-color: #FFFFFF;
            padding: 15px 25px;
            margin-top: 20px;
            border-radius: 10px;
        }

        .Shop_detail .Shop-add-1 table {
            border: 1px solid #1B59F8;
            width: 100%;
        }

        .basic_iinfo ul li {

            font-size: 16px;
            font-weight: 400;
            color: #333333;
            line-height: 40px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .pagination button {
            background-color: #f2f2f2;
            border: 1px solid #ddd;
            color: black;
            padding: 8px 16px;
            text-decoration: none;
            cursor: pointer;
            margin-left: 10px;
            border-radius: 4px;
            background-color: #ffffff;

        }

        .pagination button.active {
            /* background-color: #007bff; */
            color: white;
            border: 1px solid #1B59F8;
            color: #000000;
        }

        .dt-search {
            display: none;
        }

        .dt-length {
            float: right;
            margin-top: -50px;
        }

        div.dt-container div.dt-layout-cell {
            padding: 0;
        }
        
       
        
        

        table.dataTable>thead>tr>th,
        table.dataTable>thead>tr>td {
            border: none !important;
        }

        table.dataTable.display>tbody>tr>td,
        table.dataTable.display>tbody>tr>td {
            border: none !important;
        }
        .dt-length{
            display:flex;
            gap:10px;
        }
        .dt-length label{
            text-transform:capitalize;
            margin-top:5px;
            font-size:15px;
        }
        div.dt-container .dt-paging .dt-paging-button.current{
            width: 39px;
            height: 33px;
            background: #FFFFFF;
            border: 1px solid #1B59F8;
            padding: 4px 7px;
            border-radius: 4px ;
        }
    </style>
    <header>
        <div class="d-flex justify-content-between header_box">
            <h3>Vendor Detail</h3>
            <div class="header_left_side">
                <!--<span class="first"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"-->
                <!--        viewBox="0 0 36 36">-->
                <!--        <path class="clr-i-outline clr-i-outline-path-1" fill="currentColor"-->
                <!--            d="M32.51 27.83A14.4 14.4 0 0 1 30 24.9a12.63 12.63 0 0 1-1.35-4.81v-4.94A10.81 10.81 0 0 0 19.21 4.4V3.11a1.33 1.33 0 1 0-2.67 0v1.31a10.81 10.81 0 0 0-9.33 10.73v4.94a12.63 12.63 0 0 1-1.35 4.81a14.4 14.4 0 0 1-2.47 2.93a1 1 0 0 0-.34.75v1.36a1 1 0 0 0 1 1h27.8a1 1 0 0 0 1-1v-1.36a1 1 0 0 0-.34-.75M5.13 28.94a16.17 16.17 0 0 0 2.44-3a14.24 14.24 0 0 0 1.65-5.85v-4.94a8.74 8.74 0 1 1 17.47 0v4.94a14.24 14.24 0 0 0 1.65 5.85a16.17 16.17 0 0 0 2.44 3Z" />-->
                <!--        <path class="clr-i-outline clr-i-outline-path-2" fill="currentColor"-->
                <!--            d="M18 34.28A2.67 2.67 0 0 0 20.58 32h-5.26A2.67 2.67 0 0 0 18 34.28" />-->
                <!--        <path fill="none" d="M0 0h36v36H0z" />-->
                <!--    </svg>-->
                <!--</span>-->
                <span class="second" ><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                        viewBox="0 0 24 24">
                        <path fill="currentColor"
                            d="M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71M5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1" />
                    </svg> Download</span>
            </div>
        </div>
    </header>



    <div class="user_container">

        <div class="VendorApprovalRequest">

            <span id="vendor_add"><a href="<?php echo e(route('vendors')); ?>"><svg style="margin-right:7px;" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.921 7.5L7.713 13.292L7 14L0 7L7 0L7.713 0.708L1.921 6.5H14V7.5H1.921Z" fill="#333333"/>
</svg>
</a> Vendor Approval Requests</span>

            <div class="table_form ">
                <!-- <div class="d-flex gap-4">

                    <p><img src="IMAGES\icon (1).svg"></p>

                    <div class="table_form_flex">
                        <div class="">
                            <p>Today <span>425</span></p>
                        </div>
                    </div>
                    <div class="table_form_flex">
                        <div class="">
                            <p>Yesterday <span>425</span></p>
                        </div>
                    </div>

                    <div class="table_form_flex">
                        <div class="">
                            <p>Vendor <span>425</span></p>
                        </div>
                    </div>

                    <div class="table_form_flex">
                        <div class="">
                            <p>Email <span>425</span></p>
                        </div>
                    </div>

                    <div class="table_form_flex">
                        <div class="">
                            <p>Number <span>425</span></p>
                        </div>
                    </div>


                </div> -->

                <!-- Custom Search Input -->
                <div class="payemnt-status-top-left d-flex align-items-center ">
                                    <svg width="50" height="42" viewBox="0 0 50 42" id="tog_svg" 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>
                
                <script>
                    var tog_svg= document.getElementById('tog_svg');
                    const divs = document.querySelectorAll(".payment-status-box");
                    tog_svg.addEventListener('click',function(){
                        divs.forEach(function(di){
                             di.classList.toggle("active");
                        });
                    });
                </script>
                <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="dt-search-0" placeholder="Search..." aria-controls="example1" style="border: none; outline: none; padding: 0 10px; color: #A1A9B8; font-size: 13px; width: 100%;">
                </div>
                <table class="display" style="width:100%" id="example1">
                    <thead >
                        <tr >
                            <!-- <th><input type="checkbox" id="select-all"></th> -->
                            <!-- <th>id</th> -->
                            <th class="table_head">Vendor</th>
                            <th class="table_head">Phone Number</th>
                            <th class="table_head">Email</th>
                            <th class="table_head">Address</th>
                            <th class="table_head">Approve</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__currentLoopData = $allApprovedVendors; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $vendor): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr>
                                <td><?php echo e($vendor->user_name); ?></td>
                                <td><?php echo e($vendor->phone_number); ?></td>
                                <td><?php echo e($vendor->email); ?></td>
                                <td><?php echo e($vendor->complete_address); ?></td>
                                
                                <td>
                                    <?php if($vendor->approval_status === 'pending'): ?>
                                        <a href="<?php echo e(route('vendor_approve_button', ['id' => $vendor->vendor_id])); ?>">
                                            <button>Approve</button>
                                        </a>
                                    <?php else: ?>
                                        Unknown
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>

                <div class="pagination"></div>
            </div>

        </div>




    </div>

    </div>

    </div>

    <!-- <script>
        // Get the input field and table body
        const input = document.getElementById('searchInput');
        const tbody = document.querySelector('#dataTable tbody');
        const rows = tbody.getElementsByTagName('tr');

        // Add event listener for input
        input.addEventListener('input', function() {
            const searchText = input.value.toLowerCase(); // Convert input to lowercase for case-insensitive search

            // Loop through all table rows and hide those that don't match the search query
            for (let i = 0; i < rows.length; i++) {
                const cells = rows[i].getElementsByTagName('td');
                let rowMatchesSearch = false;

                // Check if any cell in the row contains the search text
                for (let j = 0; j < cells.length; j++) {
                    const cellText = cells[j].textContent.toLowerCase(); // Convert cell text to lowercase
                    if (cellText.includes(searchText)) {
                        rowMatchesSearch = true;
                        break; // No need to check further cells if the row matches the search
                    }
                }

                // Show/hide the row based on whether it matches the search
                rows[i].style.display = rowMatchesSearch ? '' : 'none';
            }
        });
    </script> -->


    <!-- <script>
        // Get the select all checkbox and all other checkboxes
        const selectAllCheckbox = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('#dataTable tbody input[type="checkbox"]');

        // Function to toggle all checkboxes based on the state of the "Select All" checkbox
        function toggleCheckboxes() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = selectAllCheckbox.checked;
            });
        }

        // Event listener for the "Select All" checkbox
        selectAllCheckbox.addEventListener('change', toggleCheckboxes);
    </script> -->

    <!-- <script>
        const table = document.getElementById('dataTable');
        const rowsPerPage = 10; // Number of rows per page
        const totalRows = table.rows.length - 1; // Exclude header row
        let currentPage = 1;

        // Function to show/hide rows based on current page
        function showPage(page) {
            for (let i = 1; i < table.rows.length; i++) {
                table.rows[i].style.display = (i >= (page - 1) * rowsPerPage + 1 && i <= page * rowsPerPage) ? '' : 'none';
            }
        }

        // Function to generate pagination buttons
        function generatePaginationButtons() {
            const totalPages = Math.ceil(totalRows / rowsPerPage);
            const paginationContainer = document.querySelector('.pagination');
            paginationContainer.innerHTML = '';

            for (let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.textContent = i;
                if (i === currentPage) {
                    button.classList.add('active');
                }
                button.addEventListener('click', () => {
                    currentPage = i;
                    showPage(currentPage);
                    highlightActiveButton();
                });
                paginationContainer.appendChild(button);
            }
        }

        // Function to highlight the active pagination button
        function highlightActiveButton() {
            const buttons = document.querySelectorAll('.pagination button');
            buttons.forEach(button => {
                button.classList.remove('active');
                if (parseInt(button.textContent) === currentPage) {
                    button.classList.add('active');
                }
            });
        }

        // Initialize pagination
        showPage(currentPage);
        generatePaginationButtons();
    </script> -->

    <script>
        $(document).ready(function() {
            var table_head = document.querySelectorAll('.table_head');
            table_head.forEach(function(head){
                head.style.backgroundColor="#f1f3f9";
            });
            
            var table = $('#example1').DataTable({
                columnDefs: [{
                        orderable: false,
                        targets: 0
                    } // Disable ordering for the checkbox column
                ],
                order: [], // No default sorting order
            });

            // Custom search functionality
            $('#dt-search-0').on('keyup', function() {
                // Apply the search query to the DataTable
                table.search(this.value).draw();
            });

            // "Select all" functionality for checkboxes
            $('#select-all').on('click', function() {
                var isChecked = $(this).is(':checked'); // Check if "select all" is checked
                $('.row-checkbox').prop('checked', isChecked); // Check or uncheck all row checkboxes
            });

            // Keep the "select all" checkbox updated based on individual row checkboxes
            $('.row-checkbox').on('change', function() {
                var allChecked = $('.row-checkbox').length === $('.row-checkbox:checked').length;
                $('#select-all').prop('checked', allChecked); // Check "select all" if all rows are checked
            });
        });
    </script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?><?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/Vendor_Approval_Request.blade.php ENDPATH**/ ?>