@extends('layouts.app')

@section('title', 'Professional Website Templates - Choose Your Design')
@section('description', 'Browse our collection of professional website templates designed for local businesses. Find the perfect design for your industry and get started in minutes.')

@push('styles')
<style>
    .template-card {
        transition: all 0.3s ease;
        overflow: hidden;
    }
    .template-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    .template-preview {
        height: 240px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        position: relative;
        overflow: hidden;
    }
    
    .template-preview img,
    .template-image {
        width: 100%;
        height: auto;
        min-height: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform 6s ease;
        transform: translateY(0);
    }
    
    .template-card:hover .template-preview img,
    .template-card:hover .template-image {
        transform: translateY(calc(-100% + 240px));
    }
    
    .filter-btn.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    .search-input:focus {
        ring-color: #667eea;
        border-color: #667eea;
    }
    
    /* Utility classes */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
@endpush

@section('content')
<!-- Header Section -->
<section class="bg-white py-16 border-b">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-heading font-bold text-gray-900 mb-4">
                Choose Your Perfect Template
            </h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
                Professional website templates designed specifically for local businesses. 
                Each template is mobile-responsive, SEO-optimized, and ready to customize with your content.
            </p>
            
            <!-- Search Bar -->
            <div class="max-w-md mx-auto mb-8">
                <div class="relative">
                    <input type="text" 
                           id="template-search" 
                           placeholder="Search templates..." 
                           class="search-input w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Filters Section -->
<section class="bg-gray-50 py-8 sticky top-16 z-40 border-b">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Category Filters -->
        <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-3 text-center">Categories</h3>
            <div class="flex flex-wrap justify-center gap-3">
                <button class="filter-btn category-btn active px-6 py-2 rounded-full border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors font-medium" data-category="all">
                    All Templates
                </button>
                @foreach($categories as $category)
                <button class="filter-btn category-btn px-6 py-2 rounded-full border border-gray-300 text-gray-700 hover:bg-gray-100 transition-colors font-medium" data-category="{{ $category }}">
                    {{ ucfirst(str_replace('-', ' ', $category)) }}
                </button>
                @endforeach
            </div>
        </div>
        
        <!-- Subcategory Filters -->
        <div>
            <h3 class="text-lg font-semibold text-gray-900 mb-3 text-center">Sub-Categories</h3>
            <div class="flex flex-wrap justify-center gap-2">
                <button class="filter-btn subcategory-btn active px-4 py-2 rounded-full border border-gray-300 text-gray-600 hover:bg-gray-100 transition-colors text-sm" data-subcategory="all" data-parent-category="all">
                    All
                </button>
                
                @foreach($categorySubcategories as $category => $subcategories)
                    @foreach($subcategories as $subcategory)
                    <button class="filter-btn subcategory-btn hidden px-4 py-2 rounded-full border border-gray-300 text-gray-600 hover:bg-gray-100 transition-colors text-sm" 
                            data-subcategory="{{ $subcategory }}" 
                            data-parent-category="{{ $category }}">
                        {{ ucfirst(str_replace('-', ' ', $subcategory)) }}
                    </button>
                    @endforeach
                @endforeach
            </div>
        </div>
    </div>
</section>

<!-- Templates Grid -->
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div id="templates-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($templates as $template)
            <div class="template-card bg-white rounded-xl shadow-lg" data-category="{{ $template->category }}" data-name="{{ strtolower($template->name) }}" data-subcategory="{{ $template->subcategory ?? '' }}">
                <!-- Template Preview -->
                <div class="template-preview rounded-t-xl relative">
                    <img src="{{ $template->preview_image ?? '/images/templates/' . ($template->preview_image ?? 'placeholder.jpg') }}" 
                         alt="{{ $template->name }} Preview" 
                         class="template-image"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 flex items-center justify-center absolute inset-0" style="display: none;">
                        <i class="fas fa-image text-4xl text-gray-400"></i>
                    </div>
                    
                    <!-- Overlay on Hover -->
                    <div class="absolute inset-0 bg-black bg-opacity-0 hover:bg-opacity-60 transition-all duration-300 flex items-center justify-center rounded-t-xl">
                        <div class="opacity-0 hover:opacity-100 transition-opacity duration-300 flex space-x-3">
                            @if($template->preview_url ?? false)
                            <a href="{{ $template->preview_url }}" target="_blank" class="bg-white text-gray-900 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                                <i class="fas fa-eye mr-2"></i>Preview
                            </a>
                            @endif
                            <button onclick="selectTemplate('{{ $template->tpl_name ?? $template->slug }}', '{{ $template->category }}', '{{ $template->subcategory ?? 'general' }}', '{{ $template->homepage ?? 'main' }}')" class="bg-primary-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-primary-700 transition-colors">
                                <i class="fas fa-rocket mr-2"></i>Use Template
                            </button>
                        </div>
                    </div>
                    
                    <!-- Featured Badge -->
                    @if($template->is_featured)
                    <div class="absolute top-3 left-3 bg-yellow-400 text-gray-900 px-2 py-1 rounded-full text-xs font-semibold">
                        <i class="fas fa-star mr-1"></i>Featured
                    </div>
                    @endif
                    
                    <!-- Rating -->
                    <div class="absolute top-3 right-3 bg-white bg-opacity-90 px-2 py-1 rounded-full text-xs font-semibold flex items-center">
                        <i class="fas fa-star text-yellow-400 mr-1"></i>
                        {{ number_format($template->rating, 1) }}
                    </div>
                </div>
                
                <!-- Template Info -->
                <div class="p-6">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-xl font-semibold text-gray-900">{{ $template->name }}</h3>
                        <span class="text-xs text-white bg-gray-600 px-2 py-1 rounded-full uppercase tracking-wide">
                            {{ ucfirst($template->category) }}
                        </span>
                    </div>
                    
                    <p class="text-gray-600 mb-4 line-clamp-2">{{ $template->description }}</p>
                    
                    <!-- Features -->
                    <div class="mb-4">
                        <div class="flex flex-wrap gap-1">
                            @if($template->features)
                                @foreach(array_slice($template->features, 0, 3) as $feature)
                                <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">{{ $feature }}</span>
                                @endforeach
                                @if(count($template->features) > 3)
                                <span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded-full">+{{ count($template->features) - 3 }} more</span>
                                @endif
                            @endif
                        </div>
                    </div>
                    
                    <!-- Stats -->
                    <div class="flex items-center justify-between text-sm text-gray-500 mb-4">
                        <div class="flex items-center">
                            <i class="fas fa-download mr-1"></i>
                            {{ number_format($template->usage_count) }} uses
                        </div>
                        <div class="flex items-center">
                            <i class="fas fa-clock mr-1"></i>
                            {{ $template->estimated_setup_time ?? 60 }} min setup
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="flex space-x-3">
                        @if($template->preview_url ?? false)
                        <a href="{{ $template->preview_url }}" target="_blank" class="flex-1 text-center border border-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-50 transition-colors">
                            <i class="fas fa-eye mr-2"></i>Preview
                        </a>
                        @endif
                        <button onclick="selectTemplate('{{ $template->tpl_name ?? $template->slug }}', '{{ $template->category }}', '{{ $template->subcategory ?? 'general' }}', '{{ $template->homepage ?? 'main' }}')" class="flex-1 text-center bg-primary-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-primary-700 transition-colors">
                            <i class="fas fa-rocket mr-2"></i>Use This
                        </button>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- No Results Message -->
        <div id="no-results" class="text-center py-16 hidden">
            <i class="fas fa-search text-4xl text-gray-300 mb-4"></i>
            <h3 class="text-xl font-semibold text-gray-600 mb-2">No templates found</h3>
            <p class="text-gray-500">Try adjusting your search criteria or browse all templates.</p>
        </div>
        
        <!-- Pagination -->
        <div class="mt-12 flex justify-center">
            {{ $templates->links() }}
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="gradient-bg text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-heading font-bold mb-4">
            Can't Find What You're Looking For?
        </h2>
        <p class="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
            Our design team is constantly creating new templates. 
            Contact us to request a custom template for your specific industry.
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a href="#contact" class="bg-yellow-400 text-gray-900 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-yellow-300 transition-colors shadow-lg hover-lift">
                <i class="fas fa-envelope mr-2"></i>Request Custom Template
            </a>
            <a href="{{ route('builder.create') }}" class="bg-white bg-opacity-20 text-white px-8 py-4 rounded-lg font-semibold text-lg hover:bg-opacity-30 transition-colors backdrop-blur-sm border border-white border-opacity-30">
                <i class="fas fa-rocket mr-2"></i>Start with Blank Template
            </a>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
// Template selection function
function selectTemplate(tplName, category, subcategory, homepage) {
    // Create the URL for the website creation form
    const params = new URLSearchParams({
        'tpl-name': tplName,
        'category': category,
        'subcategory': subcategory,
        'homepage': homepage
    });
    
    // Redirect to the website creation form
    window.location.href = '{{ route("builder.form") }}?' + params.toString();
}

document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('template-search');
    const categoryButtons = document.querySelectorAll('.category-btn');
    const subcategoryButtons = document.querySelectorAll('.subcategory-btn');
    
    // Get current URL parameters
    const urlParams = new URLSearchParams(window.location.search);
    let currentCategory = urlParams.get('category') || 'all';
    let currentSubcategory = urlParams.get('subcategory') || 'all';
    let currentSearch = urlParams.get('search') || '';
    
    // Set initial search input value
    if (currentSearch) {
        searchInput.value = currentSearch;
    }
    
    // Set active category button
    categoryButtons.forEach(btn => {
        if (btn.getAttribute('data-category') === currentCategory) {
            btn.classList.add('active');
        } else {
            btn.classList.remove('active');
        }
    });
    
    // Category filter functionality
    categoryButtons.forEach(button => {
        button.addEventListener('click', function() {
            const category = this.getAttribute('data-category');
            updateFilters(category, 'all', currentSearch);
        });
    });
    
    // Subcategory filter functionality
    subcategoryButtons.forEach(button => {
        button.addEventListener('click', function() {
            const subcategory = this.getAttribute('data-subcategory');
            updateFilters(currentCategory, subcategory, currentSearch);
        });
    });
    
    // Search functionality with debounce
    let searchTimeout;
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            updateFilters(currentCategory, currentSubcategory, this.value);
        }, 500);
    });
    
    function updateFilters(category, subcategory, search) {
        const params = new URLSearchParams();
        
        if (category && category !== 'all') {
            params.set('category', category);
        }
        if (subcategory && subcategory !== 'all') {
            params.set('subcategory', subcategory);
        }
        if (search) {
            params.set('search', search);
        }
        
        // Remove page parameter to start from page 1
        const newUrl = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
        window.location.href = newUrl;
    }
    
    function updateSubcategoryVisibility() {
        subcategoryButtons.forEach(button => {
            const parentCategory = button.getAttribute('data-parent-category');
            const subcategory = button.getAttribute('data-subcategory');
            
            button.classList.remove('active');
            button.classList.add('hidden');
            
            if (currentCategory === 'all') {
                // Show the "All" subcategory button
                if (subcategory === 'all') {
                    button.classList.remove('hidden');
                    if (currentSubcategory === 'all') {
                        button.classList.add('active');
                    }
                }
            } else {
                // Show subcategories for the selected category + the "All" button
                if (subcategory === 'all' || parentCategory === currentCategory) {
                    button.classList.remove('hidden');
                    if (subcategory === currentSubcategory) {
                        button.classList.add('active');
                    }
                }
            }
        });
    }
    
    // Initialize subcategory visibility
    updateSubcategoryVisibility();
});
</script>
@endpush