@extends('layouts.site')

@section('title', 'Partner Directory - Our Collaborative Network')
@section('meta-description', 'Explore our network of verified organizational partners committed to health advocacy and community development.')

@section('content')
<!-- Hero Section -->
<div class="bg-gradient-to-r from-blue-600 to-blue-700 shadow-lg">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-serif font-bold text-white mb-4">
                <i class="fas fa-handshake mr-3"></i>
                Partner Directory
            </h1>
            <p class="text-xl text-blue-100 max-w-3xl mx-auto">
                Discover our network of trusted organizations collaborating to advance health advocacy, research, and community development.
            </p>
        </div>
    </div>
</div>

<!-- Breadcrumb -->
<div class="bg-gray-50 border-b border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
        <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
            <a href="{{ url('/') }}" class="hover:text-blue-600 transition flex items-center">
                <i class="fas fa-home mr-1"></i>Home
            </a>
            <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
            <span class="text-gray-900 font-medium">Partners Directory</span>
        </nav>
    </div>
</div>

<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <!-- Filters -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <div class="flex flex-col md:flex-row gap-4">
            <!-- Search -->
            <div class="flex-1 relative" id="search-container">
                <label for="search" class="sr-only">Search partners</label>
                <div class="relative">
                    <input type="text" 
                           name="search" 
                           id="search"
                           value="{{ $filters['search'] ?? '' }}"
                           placeholder="Search organizations..."
                           class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                           autocomplete="off">
                    <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <!-- Search Results Dropdown -->
                <div id="search-results" 
                     class="hidden absolute top-full left-0 right-0 mt-2 bg-white border border-gray-300 rounded-lg shadow-lg max-h-96 overflow-y-auto z-50">
                </div>
            </div>

            <!-- Type Filter -->
            <div class="md:w-64">
                <label for="type" class="sr-only">Filter by type</label>
                <select name="type" 
                        id="type"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="">All Organization Types</option>
                    @foreach($types as $value => $label)
                        <option value="{{ $value }}" {{ ($filters['type'] ?? '') == $value ? 'selected' : '' }}>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Clear Button -->
            <div id="clear-container" class="{{ (!empty($filters['search']) || !empty($filters['type'])) ? '' : 'hidden' }}">
                <a href="{{ route('partners.public.index') }}" 
                   class="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-center inline-block w-full">
                    <i class="fas fa-times mr-2"></i>
                    Clear
                </a>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="mb-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
            <i class="fas fa-check-circle mr-2"></i>
            {{ session('success') }}
        </div>
    @endif

    <!-- Featured Partners -->
    @php($featuredPartners = $partners->where('is_featured', true)->take(3))
    @if($featuredPartners->count() > 0)
        <div class="mb-12">
            <h2 class="text-2xl font-serif font-bold text-gray-900 mb-6">
                <i class="fas fa-star text-yellow-500 mr-2"></i>
                Featured Partners
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach($featuredPartners as $partner)
                    <div class="bg-gradient-to-br from-yellow-50 to-orange-50 rounded-lg shadow-lg overflow-hidden border-2 border-yellow-400">
                        @if($partner->logo)
                            <div class="h-32 bg-white flex items-center justify-center p-4">
                                <img src="{{ asset('storage/' . $partner->logo) }}" 
                                     alt="{{ $partner->organization_name }}"
                                     class="max-h-full max-w-full object-contain">
                            </div>
                        @else
                            <div class="h-32 bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                                <i class="fas fa-building text-white text-4xl"></i>
                            </div>
                        @endif
                        <div class="p-5">
                            <div class="flex items-start justify-between mb-2">
                                <h3 class="font-serif font-bold text-lg text-gray-900 line-clamp-1">
                                    {{ $partner->organization_name }}
                                </h3>
                                <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">
                                    <i class="fas fa-star"></i>
                                </span>
                            </div>
                            <p class="text-sm text-gray-600 mb-3">
                                <i class="fas fa-tag mr-1"></i>
                                {{ $partner->type_label }}
                            </p>
                            <p class="text-gray-700 text-sm line-clamp-2 mb-4">
                                {{ Str::limit($partner->description, 100) }}
                            </p>
                            <a href="{{ route('partners.public.show', $partner) }}" 
                               class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
                                View Profile
                                <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <!-- All Partners Grid -->
    @if($partners->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($partners as $partner)
                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                    @if($partner->logo)
                        <div class="h-32 bg-gray-50 flex items-center justify-center p-4">
                            <img src="{{ asset('storage/' . $partner->logo) }}" 
                                 alt="{{ $partner->organization_name }}"
                                 class="max-h-full max-w-full object-contain">
                        </div>
                    @else
                        <div class="h-32 bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
                            <i class="fas fa-building text-white text-4xl"></i>
                        </div>
                    @endif
                    <div class="p-5">
                        <div class="flex items-start justify-between mb-2">
                            <h3 class="font-serif font-bold text-lg text-gray-900 line-clamp-1">
                                {{ $partner->organization_name }}
                            </h3>
                            @if($partner->is_verified)
                                <span class="text-green-500" title="Verified Partner">
                                    <i class="fas fa-check-circle"></i>
                                </span>
                            @endif
                        </div>
                        <p class="text-sm text-gray-600 mb-3">
                            <i class="fas fa-tag mr-1"></i>
                            {{ $partner->type_label }}
                        </p>
                        @if($partner->description)
                            <p class="text-gray-700 text-sm line-clamp-2 mb-4">
                                {{ Str::limit($partner->description, 100) }}
                            </p>
                        @endif
                        <div class="flex items-center justify-between">
                            <a href="{{ route('partners.public.show', $partner) }}" 
                               class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
                                View Profile
                                <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                            @if($partner->website)
                                <a href="{{ $partner->website }}" 
                                   target="_blank"
                                   rel="noopener noreferrer"
                                   class="text-gray-400 hover:text-gray-600">
                                    <i class="fas fa-external-link-alt"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-10">
            {{ $partners->withQueryString()->links() }}
        </div>
    @else
        <div class="text-center py-16">
            <i class="fas fa-search text-6xl text-gray-300 mb-4"></i>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">No Partners Found</h3>
            <p class="text-gray-500 mb-6">Try adjusting your search or filter criteria.</p>
            <a href="{{ route('partners.public.index') }}" 
               class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                <i class="fas fa-redo mr-2"></i>
                View All Partners
            </a>
        </div>
    @endif

    <!-- Become a Partner CTA -->
    <div class="mt-16 bg-gradient-to-r from-green-600 to-green-700 rounded-2xl shadow-xl p-8 md:p-12 text-center">
        <h2 class="text-3xl font-serif font-bold text-white mb-4">
            Become Our Partner
        </h2>
        <p class="text-green-100 max-w-5xl mx-auto mb-8">
            Join our growing network of organizations committed to making a difference in health advocacy and community development. Partner with us to create lasting impact.
        </p>
        <a href="{{ route('register.role.partner') }}" 
           class="inline-flex items-center px-8 py-4 bg-white text-green-700 rounded-lg font-semibold hover:bg-green-50 transition shadow-lg">
            <i class="fas fa-handshake mr-2"></i>
            Apply for Partnership
        </a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('search');
    const typeSelect = document.getElementById('type');
    const searchResults = document.getElementById('search-results');
    const searchContainer = document.getElementById('search-container');
    let searchTimeout;

    // Function to fetch and display results
    function performSearch() {
        const search = searchInput.value.trim();
        const type = typeSelect.value;

        if (search.length < 2 && !type) {
            searchResults.classList.add('hidden');
            updateClearButton();
            return;
        }

        // Fetch results via AJAX
        fetch(`{{ route('partners.public.search') }}?search=${encodeURIComponent(search)}&type=${encodeURIComponent(type)}`)
            .then(response => response.json())
            .then(data => {
                if (data.success && data.partners.length > 0) {
                    displaySearchResults(data.partners);
                } else {
                    searchResults.innerHTML = `
                        <div class="p-4 text-center text-gray-500">
                            <i class="fas fa-search text-2xl mb-2"></i>
                            <p>No partners found matching your criteria.</p>
                        </div>
                    `;
                    searchResults.classList.remove('hidden');
                }
            })
            .catch(error => console.error('Search error:', error));

        updateClearButton();
    }

    // Display search results in dropdown
    function displaySearchResults(partners) {
        let html = '<div class="divide-y">';
        
        partners.forEach(partner => {
            html += `
                <a href="${partner.url}" class="p-4 hover:bg-gray-50 flex gap-3 transition block">
                    <div class="flex-shrink-0">
                        ${partner.logo ? 
                            `<img src="${partner.logo}" alt="${partner.name}" class="w-12 h-12 rounded object-contain bg-gray-100">` :
                            `<div class="w-12 h-12 bg-blue-100 rounded flex items-center justify-center"><i class="fas fa-building text-blue-600"></i></div>`
                        }
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-start justify-between gap-2">
                            <h3 class="font-semibold text-gray-900 truncate">${partner.name}</h3>
                            ${partner.is_verified ? '<i class="fas fa-check-circle text-green-500 text-sm flex-shrink-0"></i>' : ''}
                        </div>
                        <p class="text-sm text-gray-600">${partner.type}</p>
                        <p class="text-sm text-gray-700 line-clamp-1">${partner.description || 'No description'}</p>
                    </div>
                </a>
            `;
        });
        
        html += '</div>';
        searchResults.innerHTML = html;
        searchResults.classList.remove('hidden');
    }

    // Update clear button visibility
    function updateClearButton() {
        const clearContainer = document.getElementById('clear-container');
        const search = searchInput.value.trim();
        const type = typeSelect.value;
        
        if (search || type) {
            clearContainer.classList.remove('hidden');
        } else {
            clearContainer.classList.add('hidden');
        }
    }

    // Event listeners
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(performSearch, 300);
    });

    typeSelect.addEventListener('change', performSearch);

    // Close search results when clicking outside
    document.addEventListener('click', function(e) {
        if (!searchContainer.contains(e.target)) {
            searchResults.classList.add('hidden');
        }
    });

    // Show results on focus if there's already search text
    searchInput.addEventListener('focus', function() {
        if (this.value.trim().length > 0) {
            performSearch();
        }
    });
});
</script>
@endsection
