{{-- resources/views/connect/companies/index.blade.php --}}
@extends('connect.layouts.main')

@section('title', 'Suppliers Directory - CLEDA Connect')
@section('description', 'Find verified suppliers and manufacturers from the 
Caribbean and Latin America. Browse profiles, compare ratings, and connect 
directly with quality businesses.')

@push('styles')
<style>
    .page-header {
        background: linear-gradient(135deg, var(--cleda-blue), 
var(--cleda-teal));
        color: white;
        padding: 2rem 0;
        margin-bottom: 2rem;
    }

    .page-header h1 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
    }

    .page-header p {
        font-size: 1.1rem;
        opacity: 0.9;
    }

    .search-filters {
        background: white;
        padding: 2rem;
        border-radius: var(--border-radius);
        margin-bottom: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .filter-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .filter-group {
        display: flex;
        flex-direction: column;
    }

    .filter-group label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--cleda-blue);
    }

    .filter-group select,
    .filter-group input {
        padding: 0.75rem;
        border: 2px solid #ddd;
        border-radius: var(--border-radius);
        font-size: 1rem;
    }

    .filter-group select:focus,
    .filter-group input:focus {
        outline: none;
        border-color: var(--cleda-teal);
    }

    .filter-actions {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .results-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .results-count {
        color: var(--cleda-dark-gray);
        font-size: 1rem;
    }

    .sort-options {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .sort-options select {
        padding: 0.5rem;
        border: 1px solid #ddd;
        border-radius: var(--border-radius);
    }

    .companies-list {
        display: grid;
        gap: 1.5rem;
    }

    .company-item {
        background: white;
        border-radius: var(--border-radius);
        padding: 1.5rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: var(--transition);
        border: 2px solid transparent;
    }

    .company-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        border-color: var(--cleda-teal);
    }

    .company-content {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 1.5rem;
        align-items: start;
    }

    .company-logo {
        width: 80px;
        height: 80px;
        border-radius: var(--border-radius);
        object-fit: cover;
        border: 2px solid #eee;
    }

    .company-logo-placeholder {
        width: 80px;
        height: 80px;
        border-radius: var(--border-radius);
        background: var(--cleda-teal);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 1.5rem;
    }

    .company-info h3 {
        font-size: 1.3rem;
        color: var(--cleda-blue);
        margin-bottom: 0.5rem;
    }

    .company-info h3 a {
        text-decoration: none;
        color: inherit;
    }

    .company-info h3 a:hover {
        color: var(--cleda-teal);
    }

    .company-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    .location {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        color: var(--cleda-dark-gray);
        font-size: 0.9rem;
    }

    .verification {
        background: var(--cleda-teal);
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .gold-verification {
        background: linear-gradient(45deg, #FFD700, #FFA500);
    }

    .membership-badge {
        background: var(--cleda-blue);
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .premium-badge {
        background: #8B5CF6;
    }

    .enterprise-badge {
        background: #059669;
    }

    .company-stats {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
        font-size: 0.9rem;
        color: var(--cleda-dark-gray);
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .company-description {
        color: var(--cleda-dark-gray);
        line-height: 1.5;
        margin-bottom: 1rem;
    }

    .company-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .tag {
        background: var(--cleda-gray);
        color: var(--cleda-blue);
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.8rem;
    }

    .company-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: end;
    }

    .rating {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .stars {
        color: #ffc107;
        font-size: 1.1rem;
    }

    .rating-text {
        font-size: 0.9rem;
        color: var(--cleda-dark-gray);
    }

    .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        margin-top: 3rem;
    }

    .pagination a,
    .pagination span {
        padding: 0.75rem 1rem;
        border-radius: var(--border-radius);
        text-decoration: none;
        border: 2px solid #ddd;
        color: var(--cleda-blue);
    }

    .pagination a:hover {
        background: var(--cleda-teal);
        color: white;
        border-color: var(--cleda-teal);
    }

    .pagination .active {
        background: var(--cleda-blue);
        color: white;
        border-color: var(--cleda-blue);
    }

    .empty-state {
        text-align: center;
        padding: 3rem;
        color: var(--cleda-dark-gray);
    }

    .empty-state h3 {
        color: var(--cleda-blue);
        margin-bottom: 1rem;
    }

    @media (max-width: 768px) {
        .company-content {
            grid-template-columns: 1fr;
            text-align: center;
        }
        
        .company-actions {
            align-items: center;
        }
        
        .filter-grid {
            grid-template-columns: 1fr;
        }
        
        .results-header {
            flex-direction: column;
            align-items: stretch;
        }
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <h1>Supplier Directory</h1>
    <p>Connect with verified suppliers and manufacturers across the Caribbean 
and Latin America</p>
</div>

<!-- Search and Filters -->
<div class="search-filters">
    <form method="GET" action="{{ route('connect.companies.index') }}">
        <div class="filter-grid">
            <div class="filter-group">
                <label for="search">Company Name or Keywords</label>
                <input type="text" id="search" name="search" placeholder="Search 
companies..."
                       value="{{ request('search') }}">
            </div>
            
            <div class="filter-group">
                <label for="country">Country</label>
                <select id="country" name="country">
                    <option value="">All Countries</option>
                    @foreach($countries ?? ['Jamaica', 'Trinidad & Tobago', 
'Barbados', 'Dominican Republic', 'Costa Rica', 'Panama', 'Colombia', 'Mexico'] 
as $country)
                    <option value="{{ $country }}" {{ request('country') === 
$country ? 'selected' : '' }}>
                        {{ $country }}
                    </option>
                    @endforeach
                </select>
            </div>
            
            <div class="filter-group">
                <label for="industry">Industry</label>
                <select id="industry" name="industry">
                    <option value="">All Industries</option>
                    @foreach($industries ?? ['Manufacturing', 'Agriculture', 
'Tourism', 'Technology', 'Construction', 'Food & Beverage'] as $industry)
                    <option value="{{ $industry }}" {{ request('industry') === 
$industry ? 'selected' : '' }}>
                        {{ $industry }}
                    </option>
                    @endforeach
                </select>
            </div>
            
            <div class="filter-group">
                <label for="verification">Verification Status</label>
                <select id="verification" name="verification">
                    <option value="">All Companies</option>
                    <option value="verified" {{ request('verification') === 
'verified' ? 'selected' : '' }}>Verified Only</option>
                    <option value="gold" {{ request('verification') === 'gold' ? 
'selected' : '' }}>Gold Verified</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label for="membership">Membership</label>
                <select id="membership" name="membership">
                    <option value="">All Plans</option>
                    <option value="premium" {{ request('membership') === 
'premium' ? 'selected' : '' }}>Premium</option>
                    <option value="enterprise" {{ request('membership') === 
'enterprise' ? 'selected' : '' }}>Enterprise</option>
                </select>
            </div>
        </div>
        
        <div class="filter-actions">
            <button type="submit" class="btn btn-primary">🔍 Search 
Companies</button>
            <a href="{{ route('connect.companies.index') }}" class="btn 
btn-outline">Clear Filters</a>
        </div>
    </form>
</div>

<!-- Results Header -->
<div class="results-header">
    <div class="results-count">
        @if(isset($companies))
            Showing {{ $companies->count() }} of {{ $companies->total() }} 
suppliers
        @else
            Showing sample suppliers
        @endif
    </div>
    
    <div class="sort-options">
        <label for="sort">Sort by:</label>
        <select id="sort" name="sort" onchange="this.form.submit();">
            <option value="name" {{ request('sort') === 'name' ? 'selected' : '' 
}}>Company Name</option>
            <option value="rating" {{ request('sort') === 'rating' ? 'selected' 
: '' }}>Highest Rated</option>
            <option value="products" {{ request('sort') === 'products' ? 
'selected' : '' }}>Most Products</option>
            <option value="recent" {{ request('sort') === 'recent' ? 'selected' 
: '' }}>Recently Joined</option>
        </select>
    </div>
</div>

<!-- Companies List -->
@if(isset($companies) && $companies->count() > 0)
<div class="companies-list">
    @foreach($companies as $company)
    <div class="company-item">
        <div class="company-content">
            <!-- Company Logo -->
            <div>
                @if($company->logo)
                    <img src="{{ $company->logo }}" alt="{{ $company->name }}" 
class="company-logo">
                @else
                    <div class="company-logo-placeholder">
                        {{ substr($company->name, 0, 2) }}
                    </div>
                @endif
            </div>
            
            <!-- Company Information -->
            <div class="company-info">
                <h3><a href="{{ route('connect.companies.show', $company) }}">{{ 
$company->name }}</a></h3>
                
                <div class="company-meta">
                    <div class="location">
                        📍 {{ $company->city }}, {{ $company->country }}
                    </div>
                    
                    @if($company->verification_status === 'gold')
                        <span class="verification gold-verification">🏆 
Gold Verified</span>
                    @elseif($company->verification_status === 'verified')
                        <span class="verification">✓ Verified</span>
                    @endif
                    
                    @if($company->membership_plan === 'enterprise')
                        <span class="membership-badge 
enterprise-badge">Enterprise</span>
                    @elseif($company->membership_plan === 'premium')
                        <span class="membership-badge 
premium-badge">Premium</span>
                    @endif
                </div>
                
                <div class="company-stats">
                    <div class="stat-item">
                        📦 {{ $company->products_count ?? rand(15, 150) }} 
Products
                    </div>
                    <div class="stat-item">
                        🏢 {{ $company->years_in_business ?? rand(3, 25) }} 
Years in Business
                    </div>
                    <div class="stat-item">
                        👥 {{ $company->employees_count ?? rand(10, 500) }} 
Employees
                    </div>
                </div>
                
                @if($company->average_rating)
                <div class="rating">
                    <div class="stars">
                        @for($i = 1; $i <= 5; $i++)
                            @if($i <= floor($company->average_rating))
                                ⭐
                            @else
                                ☆
                            @endif
                        @endfor
                    </div>
                    <span class="rating-text">{{ 
number_format($company->average_rating, 1) }} ({{ $company->reviews_count ?? 0 
}} reviews)</span>
                </div>
                @endif
                
                <div class="company-description">
                    {{ Str::limit($company->description ?? 'Quality supplier 
specializing in various products and services for the Caribbean and Latin 
American markets.', 180) }}
                </div>
                
                @if($company->specialties)
                <div class="company-tags">
                    @foreach(explode(',', $company->specialties) as $specialty)
                    <span class="tag">{{ trim($specialty) }}</span>
                    @endforeach
                </div>
                @endif
            </div>
            
            <!-- Company Actions -->
            <div class="company-actions">
                <a href="{{ route('connect.companies.show', $company) }}" 
class="btn btn-primary btn-sm">
                    View Profile
                </a>
                <a href="{{ route('connect.inquiries.create', ['company' => 
$company->id]) }}" class="btn btn-outline btn-sm">
                    Send Inquiry
                </a>
                @if($company->products_count > 0)
                <a href="{{ route('connect.products.index', ['company' => 
$company->id]) }}" class="btn btn-outline btn-sm">
                    View Products ({{ $company->products_count }})
                </a>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</div>

<!-- Pagination -->
@if(method_exists($companies, 'links'))
    {{ $companies->appends(request()->query())->links() }}
@endif

@else
{{-- Sample data when no companies are loaded --}}
<div class="companies-list">
    @for($i = 1; $i <= 8; $i++)
    @php
    $sampleCompanies = [
        ['name' => 'Caribbean Manufacturing Ltd.', 'country' => 'Jamaica', 
'city' => 'Kingston', 'industry' => 'Manufacturing'],
        ['name' => 'Tropical Foods Export Co.', 'country' => 'Costa Rica', 
'city' => 'San José', 'industry' => 'Food & Beverage'],
        ['name' => 'Island Tech Solutions', 'country' => 'Barbados', 'city' => 
'Bridgetown', 'industry' => 'Technology'],
        ['name' => 'Dominican Textiles SA', 'country' => 'Dominican Republic', 
'city' => 'Santo Domingo', 'industry' => 'Textiles'],
        ['name' => 'Pacific Construction Group', 'country' => 'Panama', 'city' 
=> 'Panama City', 'industry' => 'Construction'],
        ['name' => 'Caribe Agriculture Corp.', 'country' => 'Trinidad & Tobago', 
'city' => 'Port of Spain', 'industry' => 'Agriculture'],
        ['name' => 'Andean Mining Enterprises', 'country' => 'Colombia', 'city' 
=> 'Bogotá', 'industry' => 'Mining'],
        ['name' => 'Maya Tourism Services', 'country' => 'Mexico', 'city' => 
'Cancún', 'industry' => 'Tourism'],
    ];
    $company = (object) $sampleCompanies[($i-1) % count($sampleCompanies)];
    $company->id = $i;
    $company->products_count = rand(25, 200);
    $company->years_in_business = rand(5, 30);
    $company->employees_count = rand(20, 500);
    $company->average_rating = rand(35, 50) / 10;
    $company->reviews_count = rand(5, 150);
    $company->verification_status = $i % 3 === 0 ? 'verified' : ($i % 7 === 0 ? 
'gold' : null);
    $company->membership_plan = $i % 4 === 0 ? 'premium' : ($i % 6 === 0 ? 
'enterprise' : 'basic');
    @endphp
    
    <div class="company-item">
        <div class="company-content">
            <div>
                <div class="company-logo-placeholder">
                    {{ substr($company->name, 0, 2) }}
                </div>
            </div>
            
            <div class="company-info">
                <h3><a href="/connect/companies/{{ $company->id }}">{{ 
$company->name }}</a></h3>
                
                <div class="company-meta">
                    <div class="location">
                        📍 {{ $company->city }}, {{ $company->country }}
                    </div>
                    
                    @if($company->verification_status === 'gold')
                        <span class="verification gold-verification">🏆 
Gold Verified</span>
                    @elseif($company->verification_status === 'verified')
                        <span class="verification">✓ Verified</span>
                    @endif
                    
                    @if($company->membership_plan === 'enterprise')
                        <span class="membership-badge 
enterprise-badge">Enterprise</span>
                    @elseif($company->membership_plan === 'premium')
                        <span class="membership-badge 
premium-badge">Premium</span>
                    @endif
                </div>
                
                <div class="company-stats">
                    <div class="stat-item">
                        📦 {{ $company->products_count }} Products
                    </div>
                    <div class="stat-item">
                        🏢 {{ $company->years_in_business }} Years in 
Business
                    </div>
                    <div class="stat-item">
                        👥 {{ $company->employees_count }} Employees
                    </div>
                </div>
                
                <div class="rating">
                    <div class="stars">
                        @for($j = 1; $j <= 5; $j++)
                            @if($j <= floor($company->average_rating))
                                ⭐
                            @else
                                ☆
                            @endif
                        @endfor
                    </div>
                    <span class="rating-text">{{ 
number_format($company->average_rating, 1) }} ({{ $company->reviews_count }} 
reviews)</span>
                </div>
                
                <div class="company-description">
                    A leading {{ strtolower($company->industry) }} company based 
in {{ $company->country }}, specializing in high-quality products and services 
for the regional market. Known for reliability, innovation, and customer 
satisfaction.
                </div>
                
                <div class="company-tags">
                    <span class="tag">{{ $company->industry }}</span>
                    <span class="tag">Export Ready</span>
                    <span class="tag">ISO Certified</span>
                </div>
            </div>
            
            <div class="company-actions">
                <a href="/connect/companies/{{ $company->id }}" class="btn 
btn-primary btn-sm">
                    View Profile
                </a>
                <a href="/connect/inquiries/create?company={{ $company->id }}" 
class="btn btn-outline btn-sm">
                    Send Inquiry
                </a>
                <a href="/connect/products?company={{ $company->id }}" 
class="btn btn-outline btn-sm">
                    View Products ({{ $company->products_count }})
                </a>
            </div>
        </div>
    </div>
    @endfor
</div>

<!-- Sample Pagination -->
<div class="pagination">
    <a href="#">← Previous</a>
    <span class="active">1</span>
    <a href="#">2</a>
    <a href="#">3</a>
    <span>...</span>
    <a href="#">15</a>
    <a href="#">Next →</a>
</div>
@endif

<!-- Call to Action -->
<section style="background: var(--cleda-gray); padding: 2rem; border-radius: 
var(--border-radius); text-align: center; margin-top: 3rem;">
    <h3 style="color: var(--cleda-blue); margin-bottom: 1rem;">Don't see what 
you're looking for?</h3>
    <p style="margin-bottom: 1.5rem; color: var(--cleda-dark-gray);">
        Post a Request for Quote (RFQ) and let qualified suppliers come to you
    </p>
    <a href="{{ route('connect.inquiries.create') }}" class="btn 
btn-primary">Post RFQ</a>
</section>
@endsection

@push('scripts')
<script>
// Auto-submit form when sort changes
document.getElementById('sort').addEventListener('change', function() {
    const form = document.querySelector('.search-filters form');
    const sortInput = document.createElement('input');
    sortInput.type = 'hidden';
    sortInput.name = 'sort';
    sortInput.value = this.value;
    form.appendChild(sortInput);
    form.submit();
});

// Simple fade-in animation
document.addEventListener('DOMContentLoaded', function() {
    const companies = document.querySelectorAll('.company-item');
    companies.forEach((company, index) => {
        company.style.opacity = '0';
        company.style.transform = 'translateY(20px)';
        company.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        setTimeout(() => {
            company.style.opacity = '1';
            company.style.transform = 'translateY(0)';
        }, index * 100);
    });
});
</script>
@endpush