<?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>
        .vendor-count-card {
            min-width: 200px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .vendor-count-card.active {
            border: 2px solid #1b59f8;
            background-color: #f0f5ff;
        }
        .badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .badge-approved { background-color: #dcfce7; color: #166534; }
        .badge-pending { background-color: #ffedd5; color: #9a3412; }
        .badge-rejected { background-color: #fee2e2; color: #991b1b; }
        .action-btn { transition: all 0.2s ease; }
        .action-btn:hover { transform: translateY(-1px); }
        .table-container { overflow-x: auto; }
    </style>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/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.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>

    <div class="container mx-auto px-4 py-6">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-white rounded-lg shadow-sm p-4 mb-6 border-b">
            <h1 class="text-2xl font-semibold text-gray-800">
                Vendor Management <span class="text-base text-gray-500" id="header-label">/ Total Vendors</span>
            </h1>
        </div>

        <div class="flex flex-wrap gap-4 mb-6">
            <button id="exportCsvBtn" class="action-btn bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg transition">
                Export Active Status to CSV
            </button>
        </div>

        <div class="flex flex-wrap gap-4 mb-6 overflow-x-auto pb-2">
            <?php $__currentLoopData = [
                "all" => ["label" => "Total Vendors", "count" => $allVendors->count()],
                "approved" => ["label" => "Approved Vendors", "count" => $approvedVendors->count()],
                "pending" => ["label" => "Pending Vendors", "count" => $pendingVendors->count()],
                "rejected" => ["label" => "Rejected Vendors", "count" => $rejectedVendors->count()]
            ]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $status => $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="vendor-count-card bg-white p-4 rounded-lg shadow-sm border hover:shadow-md" 
                     data-status="<?php echo e($status); ?>" 
                     data-label="<?php echo e($data['label']); ?>">
                    <p class="text-sm text-gray-600"><?php echo e($data['label']); ?></p>
                    <h3 class="text-xl font-bold text-gray-800"><?php echo e($data['count']); ?></h3>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <?php $__currentLoopData = [
                "all" => $allVendors,
                "approved" => $approvedVendors,
                "pending" => $pendingVendors,
                "rejected" => $rejectedVendors
            ]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $status => $vendors): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="tab-pane p-4" id="<?php echo e($status); ?>-vendors" style="display: <?php echo e($status === 'all' ? 'block' : 'none'); ?>;">
                    <div class="table-container">
                        <table class="w-full stripe hover display" id="vendorsTable-<?php echo e($status); ?>">
                            <thead class="bg-gray-100">
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Store</th>
                                    <th>Email</th>
                                    <th>Location</th>
                                    <th>Phone</th>
                                    <th>Status</th>
                                    <th>Orders</th>
                                    <th>Revenue</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $__currentLoopData = $vendors; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $vendor): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <tr>
                                        <td><?php echo e($vendor->user_id); ?></td>
                                        <td class="font-medium"><?php echo e($vendor->name); ?></td>
                                        <td><?php echo e($vendor->store_name); ?></td>
                                        <td class="truncate max-w-xs"><?php echo e($vendor->email); ?></td>
                                        <td class="truncate max-w-xs"><?php echo e($vendor->complete_address); ?></td>
                                        <td><?php echo e($vendor->phone_number ?? 'N/A'); ?></td>
                                        <td>
                                            <span class="badge badge-<?php echo e($vendor->approval_status); ?>">
                                                <?php echo e(ucfirst($vendor->approval_status)); ?>

                                            </span>
                                        </td>
                                        <td><?php echo e($vendor->order_count); ?></td>
                                        <td>₹<?php echo e(number_format($vendor->total_cost, 2)); ?></td>
                                        <td>
                                            <a href="<?php echo e(route('vendor_preview', ['user_id' => $vendor->user_id])); ?>" 
                                               class="text-blue-500 hover:text-blue-700 hover:underline">
                                                View
                                            </a>
                                        </td>
                                    </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const statusCards = $('.vendor-count-card');
            let activeStatus = 'all';
            
            // Initialize all DataTables
            $('.display').DataTable({
                responsive: true,
                paging: true,
                pageLength: 25,
                searching: true,
                ordering: true,
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                dom: '<"top"lf>rt<"bottom"ip>'
            });

            // Handle status card clicks
            statusCards.on('click', function() {
                const status = $(this).data('status');
                const label = $(this).data('label');
                
                statusCards.removeClass('active');
                $(this).addClass('active');
                
                $('#header-label').text(`/ ${label}`);
                $('.tab-pane').hide();
                $(`#${status}-vendors`).show();
                
                activeStatus = status;
            });

            // Export CSV functionality
            $('#exportCsvBtn').on('click', function() {
                const table = $(`#vendorsTable-${activeStatus}`).DataTable();
                table.button('.buttons-csv').trigger();
            });
        });
    </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/vendors.blade.php ENDPATH**/ ?>