

<?php $__env->startSection('title', 'Supplier Directory - The Mini Port'); ?>

<?php $__env->startSection('content'); ?>
<style>
    .supplier-card {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }
    .supplier-card:hover {
        transform: translateY(-5px);
        border-left-color: #0d6efd;
    }
    .supplier-card.verified {
        border-left-color: #28a745;
    }
    .supplier-logo {
        width: 70px;
        height: 70px;
        object-fit: cover;
    }
    .product-thumb {
        width: 100%;
        height: 80px;
        object-fit: contain;
        border-radius: 4px;
        background-color: #f8f9fa;
    }
    .city-chip {
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .city-chip:hover, .city-chip.active {
        background-color: #0d6efd !important;
        color: white !important;
        border-color: #0d6efd !important;
    }
</style>

<!-- Hero Section -->
<section class="tw-bg-gradient-to-r tw-from-indigo-600 tw-to-purple-700 tw-text-white tw-py-12">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h1 class="tw-text-4xl tw-font-bold tw-mb-3">
                    <i class="bi bi-building tw-text-yellow-300 me-2"></i>
                    KYC Submitted Supplier Directory
                </h1>
                <p class="tw-text-indigo-100 tw-text-lg tw-mb-0">
                    Discover trusted manufacturers and suppliers across India. Connect directly with KYC submitted businesses.
                </p>
            </div>
            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
                <div class="d-flex tw-gap-4 justify-content-lg-end">
                    <div class="text-center">
                        <h2 class="tw-text-3xl tw-font-bold tw-mb-0"><?php echo e($suppliers->total()); ?></h2>
                        <small class="tw-text-indigo-200">Suppliers</small>
                    </div>
                    <div class="text-center">
                        <h2 class="tw-text-3xl tw-font-bold tw-mb-0"><?php echo e(\App\Models\Seller::where('is_verified', true)->orWhereIn('kyc_status', ['submitted', 'verified'])->count()); ?></h2>
                        <small class="tw-text-indigo-200">KYC Submitted</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>



<!-- Main Content -->
<div class="tw-bg-gray-50 tw-py-8">
    <div class="container">
        <div class="row">
            <!-- Sidebar Filters -->
            <div class="col-lg-3 mb-4 mb-lg-0">
                <div style="position: sticky; top: 80px; z-index: 10;">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white fw-bold py-3 d-flex align-items-center">
                            <i class="bi bi-funnel me-2 tw-text-primary"></i> 
                            Filter Suppliers
                        </div>
                        <div class="card-body">
                            <form action="<?php echo e(route('public.suppliers.index')); ?>" method="GET" id="filterForm">
                                <!-- Search -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-search me-1"></i> Company Name
                                    </label>
                                    <input type="text" name="q" class="form-control" value="<?php echo e(request('q')); ?>" placeholder="Search company...">
                                </div>

                                <!-- Location -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-geo-alt me-1"></i> Location
                                    </label>
                                    <input type="text" name="location" class="form-control" value="<?php echo e(request('location')); ?>" placeholder="City, State or Country">
                                </div>

                                <!-- Category -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-grid me-1"></i> Category
                                    </label>
                                    <select name="category" class="form-select">
                                        <option value="">All Categories</option>
                                        <?php $__currentLoopData = \App\Models\Category::all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <option value="<?php echo e($category->id); ?>" <?php echo e(request('category') == $category->id ? 'selected' : ''); ?>>
                                                <?php echo e($category->name); ?>

                                            </option>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </select>
                                </div>

                                <!-- MOQ Range -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-box-seam-fill me-1"></i> MOQ Range
                                    </label>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="number" name="min_moq" class="form-control form-control-sm" placeholder="10" value="<?php echo e(request('min_moq')); ?>" min="1">
                                        <span class="text-muted">-</span>
                                        <input type="number" name="max_moq" class="form-control form-control-sm" placeholder="150" value="<?php echo e(request('max_moq')); ?>" min="1">
                                    </div>
                                    <small class="text-muted">Min Order Quantity (10-150)</small>
                                </div>

                                <!-- Price Range -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-currency-rupee me-1"></i> Price Range (₹)
                                    </label>
                                    <div class="d-flex align-items-center gap-2">
                                        <input type="number" name="min_price" class="form-control form-control-sm" placeholder="Min" value="<?php echo e(request('min_price')); ?>" min="0">
                                        <span class="text-muted">-</span>
                                        <input type="number" name="max_price" class="form-control form-control-sm" placeholder="Max" value="<?php echo e(request('max_price')); ?>" min="0">
                                    </div>
                                </div>

                                <!-- Verified Only -->
                                <div class="mb-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="verified" value="1" id="verifiedCheck" <?php echo e(request('verified') ? 'checked' : ''); ?>>
                                        <label class="form-check-label fw-bold" for="verifiedCheck">
                                            <i class="bi bi-patch-check-fill tw-text-green-500 me-1"></i> KYC Submitted Only
                                        </label>
                                    </div>
                                </div>

                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-search me-1"></i> Search
                                    </button>
                                    <?php if(request()->hasAny(['q', 'location', 'category', 'verified'])): ?>
                                        <a href="<?php echo e(route('public.suppliers.index')); ?>" class="btn btn-outline-secondary">
                                            <i class="bi bi-x-circle me-1"></i> Clear Filters
                                        </a>
                                    <?php endif; ?>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Become a Seller CTA -->
                    <div class="card border-0 shadow-sm mt-4 tw-bg-gradient-to-br tw-from-green-50 tw-to-emerald-50 mb-4">
                        <div class="card-body text-center tw-p-4">
                            <div class="tw-w-14 tw-h-14 tw-mx-auto tw-bg-green-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-3">
                                <i class="bi bi-shop tw-text-2xl tw-text-green-600"></i>
                            </div>
                            <h6 class="fw-bold tw-text-gray-800">Are You a Supplier?</h6>
                            <p class="tw-text-sm tw-text-gray-600 tw-mb-3">List your business and reach thousands of buyers!</p>
                            <a href="<?php echo e(route('register.seller')); ?>" class="btn btn-success btn-sm fw-bold w-100">
                                Register Now
                            </a>
                        </div>
                    </div>

                    <!-- Sidebar Ads (Vertical Slider) -->
                    <?php
                        $sidebarBanners = \App\Models\Banner::where('position', 'supplier_sidebar')->where('active', true)->get();
                    ?>
                    <?php if($sidebarBanners->count() > 0): ?>
                        <div id="sidebarCarousel" class="carousel slide shadow-sm rounded-4 overflow-hidden mb-4" data-bs-ride="carousel">
                            <div class="carousel-inner">
                                <?php $__currentLoopData = $sidebarBanners; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $banner): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <div class="carousel-item <?php echo e($key == 0 ? 'active' : ''); ?>">
                                        <a href="<?php echo e($banner->link ?? '#'); ?>" class="d-block <?php echo e($banner->type == 'blink' ? 'blink-animation' : ''); ?>">
                                            <img src="<?php echo e(asset('storage/' . $banner->image)); ?>" class="d-block w-100" alt="Ad" style="min-height: 400px; object-fit: cover;">
                                        </a>
                                    </div>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>
                    <?php else: ?>
                        <div class="mb-4">
                            <img src="https://placehold.co/300x600?text=Your+Ad+Space" class="img-fluid rounded-4 shadow-sm w-100" alt="Ad Space">
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Supplier List -->
            <div class="col-lg-9">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h4 class="fw-bold mb-1">
                            <?php if(request('location')): ?>
                                Suppliers in <?php echo e(request('location')); ?>

                            <?php else: ?>
                                All Suppliers
                            <?php endif; ?>
                        </h4>
                        <span class="text-muted small">
                            <i class="bi bi-check-circle-fill tw-text-green-500 me-1"></i>
                            <?php echo e($suppliers->total()); ?> Suppliers Found
                        </span>
                    </div>
                    <div class="d-none d-md-block">
                        <select class="form-select form-select-sm" onchange="location.href=this.value">
                            <option value="<?php echo e(route('public.suppliers.index', array_merge(request()->query(), ['sort' => 'latest']))); ?>" <?php echo e(request('sort') == 'latest' || !request('sort') ? 'selected' : ''); ?>>Latest First</option>
                            <option value="<?php echo e(route('public.suppliers.index', array_merge(request()->query(), ['sort' => 'name']))); ?>" <?php echo e(request('sort') == 'name' ? 'selected' : ''); ?>>Name A-Z</option>
                            <option value="<?php echo e(route('public.suppliers.index', array_merge(request()->query(), ['sort' => 'verified']))); ?>" <?php echo e(request('sort') == 'verified' ? 'selected' : ''); ?>>KYC Submitted First</option>
                        </select>
                    </div>
                </div>

                <div class="row g-4">
                    <?php $__empty_1 = true; $__currentLoopData = $suppliers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $supplier): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                        <div class="col-md-6 col-xl-4">
                            <div class="card supplier-card h-100 border-0 shadow-sm <?php echo e(($supplier->is_verified || in_array($supplier->kyc_status, ['submitted', 'verified'])) ? 'verified' : ''); ?>">
                                <!-- Header with Cover -->
                                <div class="tw-h-24 tw-bg-gradient-to-r tw-from-gray-100 tw-to-gray-200 tw-relative tw-overflow-hidden">
                                    <?php if($supplier->banners->first() || $supplier->banner): ?>
                                        <img src="<?php echo e(asset('storage/' . ($supplier->banners->first()?->image_path ?? $supplier->banner))); ?>" 
                                             alt="Cover" 
                                             class="tw-w-full tw-h-full tw-object-cover">
                                    <?php else: ?>
                                        <div class="tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center">
                                            <i class="bi bi-building tw-text-4xl tw-text-gray-300"></i>
                                        </div>
                                    <?php endif; ?>
                                    
                                    <div class="tw-absolute tw-top-2 tw-right-2 d-flex tw-gap-1">
                                        <?php if($supplier->is_verified || in_array($supplier->kyc_status, ['submitted', 'verified'])): ?>
                                            <span class="badge bg-success tw-text-xs" style="background-color: #198754 !important;">
                                                <i class="bi bi-check-circle-fill me-1"></i>KYC Submitted
                                            </span>
                                        <?php else: ?>
                                            <span class="badge bg-secondary tw-text-xs">
                                                <i class="bi bi-exclamation-circle me-1"></i>KYC Pending
                                            </span>
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <!-- Logo & Name -->
                                    <div class="d-flex align-items-center tw-mb-3" style="margin-top: -35px;">
                                        <div class="tw-bg-white tw-rounded-full tw-p-1 tw-shadow-md">
                                            <?php if($supplier->logo): ?>
                                                <img src="<?php echo e(asset('storage/' . $supplier->logo)); ?>" 
                                                     alt="<?php echo e($supplier->company_name); ?>" 
                                                     class="supplier-logo rounded-circle">
                                            <?php else: ?>
                                                <div class="supplier-logo rounded-circle tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-text-2xl tw-font-bold">
                                                    <?php echo e(strtoupper(substr($supplier->company_name, 0, 1))); ?>

                                                </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>

                                    <div class="d-flex align-items-center mb-1">
                                        <h6 class="fw-bold tw-text-gray-800 mb-0 text-truncate">
                                            <a href="<?php echo e(route('seller.public.profile', $supplier->slug)); ?>" class="text-decoration-none tw-text-gray-800 hover:tw-text-blue-600">
                                                <?php echo e($supplier->company_name); ?>

                                            </a>
                                        </h6>
                                        <?php if($supplier->isPaid()): ?>
                                            <i class="bi bi-star-fill text-warning ms-1 flex-shrink-0" title="Premium Seller"></i>
                                        <?php endif; ?>
                                    </div>

                                    <p class="tw-text-gray-500 tw-text-sm mb-2">
                                        <i class="bi bi-geo-alt-fill me-1"></i>
                                        <?php echo e(is_array($supplier->city) ? ($supplier->city[0] ?? 'N/A') : ($supplier->city ?? 'N/A')); ?>, 
                                        <?php echo e(is_array($supplier->state) ? ($supplier->state[0] ?? '') : ($supplier->state ?? '')); ?>

                                    </p>

                                    <!-- Business Type -->
                                    <div class="mb-3">
                                        <span class="badge bg-light text-dark border tw-text-xs">
                                            <?php echo e(is_array($supplier->business_type) ? implode(', ', $supplier->business_type) : $supplier->business_type); ?>

                                        </span>
                                        <?php if($supplier->category): ?>
                                            <span class="badge bg-light text-dark border tw-text-xs">
                                                <?php echo e($supplier->category->name ?? ''); ?>

                                            </span>
                                        <?php endif; ?>
                                    </div>

                                    <!-- Product Preview -->
                                    <?php if($supplier->products->count() > 0): ?>
                                        <div class="row g-1 mb-3">
                                            <?php $__currentLoopData = $supplier->products->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="col-4">
                                                    <a href="<?php echo e(route('public.products.show', $product->slug)); ?>" title="<?php echo e($product->name); ?>">
                                                        <img src="<?php echo e($product->main_image); ?>" class="product-thumb border" alt="Product">
                                                    </a>
                                                </div>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </div>
                                    <?php endif; ?>

                                    <!-- Stats -->
                                    <div class="d-flex tw-gap-3 tw-text-xs tw-text-gray-500 tw-mb-3">
                                        <span><i class="bi bi-box me-1"></i> <?php echo e($supplier->products->count()); ?> Products</span>
                                        <span><i class="bi bi-calendar me-1"></i> Since <?php echo e($supplier->created_at->format('Y')); ?></span>
                                    </div>
                                </div>

                                <div class="card-footer bg-white border-top-0 pt-0 pb-3 px-3">
                                    <div class="d-grid gap-2">
                                        <a href="<?php echo e(route('seller.public.profile', $supplier->slug)); ?>" class="btn btn-primary btn-sm fw-bold">
                                            <i class="bi bi-eye me-1"></i> View Profile
                                        </a>
                                        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#inquiryModal<?php echo e($supplier->id); ?>">
                                            <i class="bi bi-envelope me-1"></i> Send Inquiry
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Middle Banner Injection -->
                        <?php if($loop->iteration == 3): ?>
                            <div class="col-12" style="width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;">
                                <?php
                                    $middleBanners = \App\Models\Banner::where('position', 'supplier_middle')->where('active', true)->get();
                                ?>
                                <?php if($middleBanners->count() > 0): ?>
                                    <div id="middleBannerCarousel" class="carousel slide shadow-sm rounded-4 overflow-hidden" data-bs-ride="carousel">
                                        <div class="carousel-inner">
                                            <?php $__currentLoopData = $middleBanners; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $banner): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="carousel-item <?php echo e($key == 0 ? 'active' : ''); ?>">
                                                    <a href="<?php echo e($banner->link ?? '#'); ?>" class="d-block <?php echo e($banner->type == 'blink' ? 'blink-animation' : ''); ?>">
                                                        <img src="<?php echo e(asset('storage/' . $banner->image)); ?>" class="d-block w-100" alt="Ad" style="max-height: 150px; object-fit: cover;">
                                                    </a>
                                                </div>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </div>
                                    </div>
                                <?php else: ?>
                                    <img src="https://placehold.co/1200x150?text=Your+Ad+Space" class="img-fluid rounded-4 shadow-sm w-100" alt="Ad Space">
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>

                        <!-- Inquiry Modal -->
                        <div class="modal fade" id="inquiryModal<?php echo e($supplier->id); ?>" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content border-0 shadow-lg">
                                    <div class="modal-header tw-text-white border-bottom-0" style="background: #f97316;">
                                        <h5 class="modal-title fw-bold">
                                            <i class="bi bi-envelope-fill me-2"></i> Contact <?php echo e($supplier->company_name); ?>

                                        </h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <form action="<?php echo e(route('inquiries.store', $supplier->id)); ?>" method="POST">
                                        <?php echo csrf_field(); ?>
                                        <div class="modal-body tw-p-4">
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Your Name <span class="text-danger">*</span></label>
                                                <input type="text" name="name" class="form-control" required value="<?php echo e(auth()->user()->name ?? ''); ?>">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Email <span class="text-danger">*</span></label>
                                                <input type="email" name="email" class="form-control" required value="<?php echo e(auth()->user()->email ?? ''); ?>">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Phone</label>
                                                <input type="tel" name="phone" class="form-control" placeholder="+91 XXXXXXXXXX">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Quantity</label>
                                                <input type="number" name="quantity" class="form-control" placeholder="e.g. 100">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label fw-bold">Message <span class="text-danger">*</span></label>
                                                <textarea name="message" class="form-control" rows="4" required placeholder="Describe your requirement..."></textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer border-top-0">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                            <button type="submit" class="btn fw-bold text-white" style="background-color: #f97316; border-color: #f97316;">
                                                <i class="bi bi-send-fill me-1"></i> Send Inquiry
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                        <div class="col-12">
                            <div class="card border-0 shadow-sm">
                                <div class="card-body text-center py-5">
                                    <div class="tw-w-24 tw-h-24 tw-mx-auto tw-bg-gray-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-4">
                                        <i class="bi bi-building tw-text-4xl tw-text-gray-400"></i>
                                    </div>
                                    <h5 class="fw-bold tw-text-gray-800">No Suppliers Found</h5>
                                    <p class="tw-text-gray-500 tw-mb-4">Try adjusting your filters or check back later.</p>
                                    <a href="<?php echo e(route('public.suppliers.index')); ?>" class="btn btn-primary">
                                        <i class="bi bi-arrow-counterclockwise me-1"></i> View All Suppliers
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Pagination -->
                <div class="mt-4 d-flex justify-content-center">
                    <?php echo e($suppliers->appends(request()->query())->links()); ?>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Mobile Filter Toggle -->
<div class="d-lg-none tw-fixed tw-bottom-4 tw-left-4 tw-right-4 tw-z-50">
    <button class="btn btn-primary btn-lg w-100 fw-bold shadow-lg tw-rounded-full" data-bs-toggle="offcanvas" data-bs-target="#filterOffcanvas">
        <i class="bi bi-funnel me-2"></i> Filter Suppliers
    </button>
</div>

<!-- Mobile Filter Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="filterOffcanvas">
    <div class="offcanvas-header border-bottom">
        <h5 class="offcanvas-title fw-bold">Filter Suppliers</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form action="<?php echo e(route('public.suppliers.index')); ?>" method="GET">
            <div class="mb-4">
                <label class="form-label fw-bold">Company Name</label>
                <input type="text" name="q" class="form-control" value="<?php echo e(request('q')); ?>" placeholder="Search...">
            </div>
            <div class="mb-4">
                <label class="form-label fw-bold">Location</label>
                <input type="text" name="location" class="form-control" value="<?php echo e(request('location')); ?>" placeholder="City or State">
            </div>
            <div class="mb-4">
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" name="verified" value="1" id="verifiedMobile" <?php echo e(request('verified') ? 'checked' : ''); ?>>
                    <label class="form-check-label fw-bold" for="verifiedMobile">KYC Submitted Only</label>
                </div>
            </div>
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-lg">Apply Filters</button>
                <a href="<?php echo e(route('public.suppliers.index')); ?>" class="btn btn-outline-secondary">Clear All</a>
            </div>
        </form>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/u281583269/domains/theminiport.com/public_html/resources/views/public/suppliers/index.blade.php ENDPATH**/ ?>