<?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([]); ?>
<style>
    .delivery-container1
    {
        display: flex;
        flex-direction: column;
        width:100%;
        height:auto;
    }
    .delivery-combine1
    {
        display: flex;
        width:auto;
        height:auto;
        margin-top:-30px;
    }
    .add-delivery
    {
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
        text-align: left;
        color: #FFFFFF;
        background: #75B1E8;
        width: 227px;
        height: 51px;
        border-radius: 8px;
        padding-top:13px;
        padding-left:15px;
    }
    .delivery-request
    {
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
        text-align: left;
        color: #FFFFFF;
        background: #75B1E8;
        width: 280px;
        height: 51px;
        border-radius: 8px;
        padding-top:13px;
        padding-left:15px;
        margin-left: 30px;
    }
    .delivery-count 
    {
            width: 235px;
            height: 90px;
            border-radius: 8px;
            border: 1px;
            box-sizing: border-box;
            background: white;
            padding-top: 20px;
            padding-left: 20px;
            text-align:left;
            margin-left:-10px;
    }
    .delivery-count p
    {
        width: 100%;
        height: 16px;
        font-size: 13px;
        font-weight: 400;
        line-height: 16px;
        color: #000000;
    }
    .delivery-count h6
    {
        width: 100%;
        height: 24px;
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
        text-align: left;
        color: #222B45;
    }
    .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;
            }

            .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;
                line-height: 35px;
            }


            table .online {
                width: Fixed (53px)px;
                height: Hug (14.78px)px;
                padding: 5px;
                border-radius: 2.78px;
                border: 0.7px;
                background: #FFFFFF;
                border: 0.7px solid #0EAE00;
                font-weight: 500;
                line-height: 11.13px;
                text-align: center;
                color: #22C115;
            }

            table .offline
            {
                width: Fixed (53px)px;
                height: Hug (14.78px)px;
                padding: 5px;
                border-radius: 2.78px;
                border: 0.7px;
                background: #999999;
                border: 0.7px solid #4D4D4D;
                font-weight: 500;
                line-height: 11.13px;
                text-align: center;
                color: #FFFFFF;
            }
            table .pickup {
                width: 53px;
                height: 18x;
                font-size: 8px;
                background-color: rgba(136, 190, 48, 10%);
                color: #2A8200;
                border:1px solid #2A8200;
                border-radius:2.5px;
            }
            
             table .delivery {
                width: 53px;
                height: 18x;
                font-size: 8px;
                background-color: #5EAA3A;
                color: #FFFFFF;
                border:1px solid #49882C;
                border-radius:2.5px;
            }

           table tr th input[type="checkbox"] {
            margin-right:10px;
            border: 1px solid #1D2433;

                }
             table tr td input[type="checkbox"] {
                    margin-right:10px;
                    border: 1px solid #1D2433;

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

            }

            .page-item {
                margin: 5px;

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


            .nav-pills .nav-link.active .delivery-count,
            .show .nav-link .delivery-count {
                border: 1px solid #1B59F8;
            }
            .Dashboard_header header {
                border-bottom: none;
            }
            .Dashboard_header header .header_box {
                border-bottom: 1px solid #ccc;
                width:99.5%;
            }
            .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;
         }
         .Dashboard_header header .header_left_side .second {
         font-size: 14px;
        color: #4D4D4D;
        font-weight: 600;
    }
         div.dt-container .dt-info {
        display: none;
    }
    div.dt-container .dt-paging {
        text-align: center;
    }
    div.dt-container div.dt-layout-cell.dt-start {
        text-align: right !important;
    }
    .searchbaar {
            margin-top: 5px;
            z-index: 9;
            position: absolute;
    }
    div.dt-container .dt-search {
        display: none;
    }
    div.dt-container .dt-length {
        gap: 10px;
        display: inline-flex;
    }
    div.dt-container .dt-input {
        border: 1px solid #ccc !important;
        color: #696D61 !important;
    }
    label {
        color: #696D61 !important;
        text-transform: capitalize;
    }
    table.dataTable thead th, table.dataTable tfoot th{
        background-color: #F1F3F9 !important;
    }
    .table-striped>tbody>tr:nth-of-type(even) td{
        background-color: #F8F9FC !important;
    }
    .table-striped>tbody>tr:nth-of-type(odd) td {
        background-color: #FFFFFF !important;
    }
    div.dt-container .dt-paging .dt-paging-button.current {
        border: 1px solid #1B59F8 !important;
        background: #ffffff !important;
    }
    div.dt-container .dt-paging .dt-paging-button:hover {
        border: 1px solid #1B59F8 !important;
        background: #8eacff !important;
        opacity: 80% !important;
    }
    div.dt-container .dt-length {
        align-items: center !important;
    }
    div.dt-container .dt-paging .dt-paging-button {
        padding: 4px 15px !important;
        border-radius: 4px !important;
    }
    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 !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 !important;
        box-shadow: none !important;
    }
    div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
        color: inherit !important;
        border: 1px solid #1B59F8 !important;
    }
    div.dt-container select.dt-input {
        outline: none;
    }
    div.dt-container .dt-input {
        border:1px solid #68718229;
        border-radius:6px;
        outline:none;
    }

</style>
  <header>
		<div class="d-flex justify-content-between header_box me-4">
			<h3 id="query-heading">Delivery Agent / <span style="font-size: 16px; color: gray;">Total Agent</span></h3>
			<div class="header_left_side">
				
				<!--<span class="second"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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="delivery-container1" style="margin-left:2px;">
                <div class="delivery-combine1">
                    <a href="<?php echo e(route('delivery_add')); ?>"><div class="add-delivery">Add Delivery Agent</div></a>
                    <!--<a href="<?php echo e(route('delivery_import')); ?>"><div class="add-delivery" style="margin-left: 30px">Import Agent File</div></a>-->
                    <a href="<?php echo e(route('delivery_approve_request')); ?>"><div class="delivery-request">Approve Delivery Request</div></a>
                </div>
                <div class="delivery-combine1" style="margin-top: 25px;display: flex;flex-wrap: wrap;">


    <div class="container mx-auto py-8">
        <!-- Agent Stats Cards Section -->
        <ul class="nav nav-pills mb-3 col-12" id="pills-tab" role="tablist">
            <!-- Total Agents Tab -->
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                    aria-selected="true" onclick="updateHeading2('Total Agent')">
                    <div class="delivery-count">
                        <p>Total Agent</p>
                        <h6><?php echo e($deliveryAgents->count()); ?></h6>
                    </div>
                </button>
            </li>

            <!-- Online Agents Tab -->
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
                    aria-selected="false" onclick="updateHeading2('Online Agent')">
                    <div class="delivery-count">
                        <p>Online Agent</p>
                        <h6><?php echo e($onlineAgent->count()); ?></h6>
                    </div>
                </button>
            </li>

            <!-- Offline Agents Tab -->
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
                    data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact"
                    aria-selected="false" onclick="updateHeading2('Offline Agent')">
                    <div class="delivery-count">
                        <p>Offline Agent</p>
                        <h6><?php echo e($offlineAgent->count()); ?></h6>
                    </div>
                </button>
            </li>
        </ul>
<script>
    $(document).ready(function() {
        // Initialize DataTables for each table
        $('#delivery-agents-table').DataTable({
            "ordering": true,
        "autoWidth": false,
        "order": [[6, "desc"]],
        });
        $('#online-agents-table').DataTable({
           "ordering": true,
        "autoWidth": false,
        "order": [[6, "desc"]],
        });
        $('#offline-agents-table').DataTable({
           "ordering": true,
        "autoWidth": false,
        "order": [[6, "desc"]],
        });

        // Checkbox Select All Functionality
        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>
<head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <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>
</head>

        <!-- Tab Contents Section -->
        <div class="tab-content" id="pills-tabContent">
            <!-- Total Agents Tab Content -->
            <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                <table id="delivery-agents-table" class="display table-auto w-full text-left border-collapse border border-gray-200">
                    <thead>
                        <tr class="bg-gray-100 border-b">
                            <th class="px-4 py-2 font-semibold text-gray-600">Agent</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Mobile Number</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Email</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Status</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Total Orders</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Total Sales</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Cash Collection</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Action</th>
                        </tr>
                    </thead>
                    <head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>

<tbody>
    <?php $__currentLoopData = $deliveryAgents; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $agent): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <tr class="hover:bg-blue-100 transition-colors duration-200 ease-in-out">
            <td class="border px-6 py-3 text-gray-700 font-semibold"><?php echo e($agent->name); ?></td>
            <td class="border px-6 py-3 text-gray-600"><?php echo e($agent->phone_number); ?></td>
            <td class="border px-6 py-3 text-gray-600"><?php echo e($agent->email); ?></td>
            <td class="border px-6 py-3">
                <span class="px-2 py-1 rounded-full text-white <?php echo e($agent->online_status == 1 ? 'bg-green-500' : 'bg-red-500'); ?>">
                    <?php echo e($agent->online_status == 1 ? 'Online' : 'Offline'); ?>

                </span>
            </td>
            <td class="border px-6 py-3 text-gray-700"><?php echo e($agent->order_count); ?></td>
            <td class="border px-6 py-3 text-gray-700"><?php echo e($agent->total_sales ?? '0'); ?></td>
            <td class="border px-6 py-3 text-gray-700"><?php echo e($agent->total_cash_collected ?? '0'); ?></td>
            <td class="border px-6 py-3 text-center">
                <a href="<?php echo e(route('deliveryAgentProfile', ['id' => $agent->user_id])); ?>">
                    <button class="px-5 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        View Details
                    </button>
                </a>
            </td>
        </tr>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</tbody>

                </table>
            </div>

            <!-- Online Agents Tab Content -->
            <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                <table id="online-agents-table" class="display table-auto w-full text-left border-collapse border border-gray-200">
                    <thead>
                        <tr class="bg-gray-100 border-b">
                            <th class="px-4 py-2 font-semibold text-gray-600">Agent</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Mobile Number</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Email</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Status</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Total Orders</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Total Sales</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Cash Collection</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__currentLoopData = $onlineAgent; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $agent): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr class="hover:bg-blue-100 transition-colors duration-200 ease-in-out">
            <td class="border px-6 py-3 text-gray-700 font-semibold"><?php echo e($agent->name); ?></td>
            <td class="border px-6 py-3 text-gray-600"><?php echo e($agent->phone_number); ?></td>
            <td class="border px-6 py-3 text-gray-600"><?php echo e($agent->email); ?></td>
            <td class="border px-6 py-3">
                <span class="px-2 py-1 rounded-full text-white <?php echo e($agent->online_status == 1 ? 'bg-green-500' : 'bg-red-500'); ?>">
                    <?php echo e($agent->online_status == 1 ? 'Online' : 'Offline'); ?>

                </span>
            </td>
            <td class="border px-6 py-3 text-gray-700"><?php echo e($agent->order_count); ?></td>
            <td class="border px-6 py-3 text-gray-700"><?php echo e($agent->total_sales ?? '0'); ?></td>
            <td class="border px-6 py-3 text-gray-700"><?php echo e($agent->total_cash_collected ?? '0'); ?></td>
            <td class="border px-6 py-3 text-center">
                <a href="<?php echo e(route('deliveryAgentProfile', ['id' => $agent->user_id])); ?>">
                    <button class="px-5 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        View Details
                    </button>
                </a>
            </td>
        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
            </div>

            <!-- Offline Agents Tab Content -->
            <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                <table id="offline-agents-table" class="display table-auto w-full text-left border-collapse border border-gray-200">
                    <thead>
                        <tr class="bg-gray-100 border-b">
                            <th class="px-4 py-2 font-semibold text-gray-600">Agent</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Mobile Number</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Email</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Status</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Total Orders</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Total Sales</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Cash Collection</th>
                            <th class="px-4 py-2 font-semibold text-gray-600">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__currentLoopData = $offlineAgent; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $agent): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr class="hover:bg-blue-100 transition-colors duration-200 ease-in-out">
            <td class="border px-6 py-3 text-gray-700 font-semibold"><?php echo e($agent->name); ?></td>
            <td class="border px-6 py-3 text-gray-600"><?php echo e($agent->phone_number); ?></td>
            <td class="border px-6 py-3 text-gray-600"><?php echo e($agent->email); ?></td>
            <td class="border px-6 py-3">
                <span class="px-2 py-1 rounded-full text-white <?php echo e($agent->online_status == 1 ? 'bg-green-500' : 'bg-red-500'); ?>">
                    <?php echo e($agent->online_status == 1 ? 'Online' : 'Offline'); ?>

                </span>
            </td>
            <td class="border px-6 py-3 text-gray-700"><?php echo e($agent->order_count); ?></td>
            <td class="border px-6 py-3 text-gray-700"><?php echo e($agent->total_sales ?? '0'); ?></td>
            <td class="border px-6 py-3 text-gray-700"><?php echo e($agent->total_cash_collected ?? '0'); ?></td>
            <td class="border px-6 py-3 text-center">
                <a href="<?php echo e(route('deliveryAgentProfile', ['id' => $agent->user_id])); ?>">
                    <button class="px-5 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        View Details
                    </button>
                </a>
            </td>
        </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>



                
    		</div>
		</div>

<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>
    const rowsPerPage = 10;
    const data = [...]; // Your array of transaction data
    let currentPage = 1;

    // Function to populate table with data for a given page
    function populateTable(page) {
        const tbody = document.querySelector('#searchResults tbody');
        tbody.innerHTML = ''; // Clear existing rows

        const startIndex = (page - 1) * rowsPerPage;
        const endIndex = startIndex + rowsPerPage;

        for (let i = startIndex; i < endIndex && i < data.length; i++) {
            const rowData = data[i];
            const row = document.createElement('tr');
            row.innerHTML = `<td><input type="checkbox" class="check"> ${rowData.date}</td>
                <td>${rowData.transactionId}</td>
                <td><button class="${rowData.status.toLowerCase()}">${rowData.status}</button></td>
                <td>${rowData.totalItems}</td>
                <td>${rowData.totalOrderAmount}</td>
                <td>${rowData.totalPayout}</td>`;
            tbody.appendChild(row);
        }
    }

    // Function to navigate to previous page
    function previousPage() {
        currentPage--;
        if (currentPage < 1) {
            currentPage = 1;
        }
        populateTable(currentPage);
    }

    // Function to navigate to next page
    function nextPage() {
        currentPage++;
        const totalPages = Math.ceil(data.length / rowsPerPage);
        if (currentPage > totalPages) {
            currentPage = totalPages;
        }
        populateTable(currentPage);
    }

    // Function to navigate to specific page
    function goToPage(page) {
        currentPage = page;
        populateTable(currentPage);
    }

    populateTable(currentPage);
    
    function updateHeading2(queryType) {
    const heading = document.getElementById('query-heading');
    heading.innerHTML = `Delivery Agent / <span style="font-size: 16px; color: gray;">${queryType}</span>`;
}

</script>


    
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?><?php /**PATH C:\php\xampp\htdocs\admin\resources\views/components/delivery.blade.php ENDPATH**/ ?>