@extends('layouts.master')

@section('title', 'Supplier Directory - The Mini Port')

@section('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: 50px;
        object-fit: cover;
        border-radius: 4px;
    }
    .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">{{ $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">{{ \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="{{ 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="{{ 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="{{ 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>
                                        @foreach(\App\Models\Category::all() as $category)
                                            <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- MOQ Range -->
                                <div class="mb-4">
                                    <label class="form-label small text-muted fw-bold">
                                        <i class="bi bi-box-seam 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="{{ 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="{{ 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="{{ 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="{{ 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" {{ 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>
                                    @if(request()->hasAny(['q', 'location', 'category', 'verified']))
                                        <a href="{{ route('public.suppliers.index') }}" class="btn btn-outline-secondary">
                                            <i class="bi bi-x-circle me-1"></i> Clear Filters
                                        </a>
                                    @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="{{ 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();
                    @endphp
                    @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">
                                @foreach($sidebarBanners as $key => $banner)
                                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                        <a href="{{ $banner->link ?? '#' }}" class="d-block {{ $banner->type == 'blink' ? 'blink-animation' : '' }}">
                                            <img src="{{ asset('storage/' . $banner->image) }}" class="d-block w-100" alt="Ad" style="min-height: 400px; object-fit: cover;">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @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>
                    @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">
                            @if(request('location'))
                                Suppliers in {{ request('location') }}
                            @else
                                All Suppliers
                            @endif
                        </h4>
                        <span class="text-muted small">
                            <i class="bi bi-check-circle-fill tw-text-green-500 me-1"></i>
                            {{ $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="{{ route('public.suppliers.index', array_merge(request()->query(), ['sort' => 'latest'])) }}" {{ request('sort') == 'latest' || !request('sort') ? 'selected' : '' }}>Latest First</option>
                            <option value="{{ route('public.suppliers.index', array_merge(request()->query(), ['sort' => 'name'])) }}" {{ request('sort') == 'name' ? 'selected' : '' }}>Name A-Z</option>
                            <option value="{{ route('public.suppliers.index', array_merge(request()->query(), ['sort' => 'verified'])) }}" {{ request('sort') == 'verified' ? 'selected' : '' }}>KYC Submitted First</option>
                        </select>
                    </div>
                </div>

                <div class="row g-4">
                    @forelse($suppliers as $supplier)
                        <div class="col-md-6 col-xl-4">
                            <div class="card supplier-card h-100 border-0 shadow-sm {{ ($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">
                                    @if($supplier->banners->first() || $supplier->banner)
                                        <img src="{{ asset('storage/' . ($supplier->banners->first()?->image_path ?? $supplier->banner)) }}" 
                                             alt="Cover" 
                                             class="tw-w-full tw-h-full tw-object-cover">
                                    @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>
                                    @endif
                                    
                                    <div class="tw-absolute tw-top-2 tw-right-2 d-flex tw-gap-1">
                                        @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>
                                        @else
                                            <span class="badge bg-secondary tw-text-xs">
                                                <i class="bi bi-exclamation-circle me-1"></i>KYC Pending
                                            </span>
                                        @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">
                                            @if($supplier->logo)
                                                <img src="{{ asset('storage/' . $supplier->logo) }}" 
                                                     alt="{{ $supplier->company_name }}" 
                                                     class="supplier-logo rounded-circle">
                                            @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">
                                                    {{ strtoupper(substr($supplier->company_name, 0, 1)) }}
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <h6 class="fw-bold tw-text-gray-800 mb-1 text-truncate">
                                        <a href="{{ route('seller.public.profile', $supplier->slug) }}" class="text-decoration-none tw-text-gray-800 hover:tw-text-blue-600">
                                            {{ $supplier->company_name }}
                                        </a>
                                    </h6>

                                    <p class="tw-text-gray-500 tw-text-sm mb-2">
                                        <i class="bi bi-geo-alt-fill me-1"></i>
                                        {{ is_array($supplier->city) ? ($supplier->city[0] ?? 'N/A') : ($supplier->city ?? 'N/A') }}, 
                                        {{ 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">
                                            {{ is_array($supplier->business_type) ? implode(', ', $supplier->business_type) : ($supplier->business_type ?? 'Manufacturer') }}
                                        </span>
                                        @if($supplier->category)
                                            <span class="badge bg-light text-dark border tw-text-xs">
                                                {{ $supplier->category->name ?? '' }}
                                            </span>
                                        @endif
                                    </div>

                                    <!-- Product Preview -->
                                    @if($supplier->products->count() > 0)
                                        <div class="row g-1 mb-3">
                                            @foreach($supplier->products->take(3) as $product)
                                                <div class="col-4">
                                                    <a href="{{ route('public.products.show', $product->slug) }}" title="{{ $product->name }}">
                                                        @if(!empty($product->images_json) && isset($product->images_json[0]['thumbnail']))
                                                            <img src="{{ asset('storage/' . $product->images_json[0]['thumbnail']) }}" class="product-thumb border" alt="Product">
                                                        @else
                                                            <div class="product-thumb border bg-light d-flex align-items-center justify-content-center text-muted">
                                                                <i class="bi bi-box"></i>
                                                            </div>
                                                        @endif
                                                    </a>
                                                </div>
                                            @endforeach
                                        </div>
                                    @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> {{ $supplier->products->count() }} Products</span>
                                        <span><i class="bi bi-calendar me-1"></i> Since {{ $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="{{ 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{{ $supplier->id }}">
                                            <i class="bi bi-envelope me-1"></i> Send Inquiry
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Middle Banner Injection -->
                        @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();
                                @endphp
                                @if($middleBanners->count() > 0)
                                    <div id="middleBannerCarousel" class="carousel slide shadow-sm rounded-4 overflow-hidden" data-bs-ride="carousel">
                                        <div class="carousel-inner">
                                            @foreach($middleBanners as $key => $banner)
                                                <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                                    <a href="{{ $banner->link ?? '#' }}" class="d-block {{ $banner->type == 'blink' ? 'blink-animation' : '' }}">
                                                        <img src="{{ asset('storage/' . $banner->image) }}" class="d-block w-100" alt="Ad" style="max-height: 150px; object-fit: cover;">
                                                    </a>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @else
                                    <img src="https://placehold.co/1200x150?text=Your+Ad+Space" class="img-fluid rounded-4 shadow-sm w-100" alt="Ad Space">
                                @endif
                            </div>
                        @endif

                        <!-- Inquiry Modal -->
                        <div class="modal fade" id="inquiryModal{{ $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-bg-gradient-to-r tw-from-blue-600 tw-to-blue-700 tw-text-white border-bottom-0">
                                        <h5 class="modal-title fw-bold">
                                            <i class="bi bi-envelope-fill me-2"></i> Contact {{ $supplier->company_name }}
                                        </h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <form action="{{ route('inquiries.store', $supplier->id) }}" method="POST">
                                        @csrf
                                        <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="{{ 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="{{ 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">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 btn-primary fw-bold">
                                                <i class="bi bi-send-fill me-1"></i> Send Inquiry
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @empty
                        <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="{{ route('public.suppliers.index') }}" class="btn btn-primary">
                                        <i class="bi bi-arrow-counterclockwise me-1"></i> View All Suppliers
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforelse
                </div>

                <!-- Pagination -->
                <div class="mt-4 d-flex justify-content-center">
                    {{ $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="{{ 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="{{ 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="{{ 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" {{ 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="{{ route('public.suppliers.index') }}" class="btn btn-outline-secondary">Clear All</a>
            </div>
        </form>
    </div>
</div>
@endsection