{{--
    Resume Templates - Professional Bootstrap Design
    Professional Template Selection Page
    
    @author David Valera Melendez <david@valera-melendez.de>
    @created 2025-08-09
    @location Made in Germany 🇩🇪
--}}

@extends('layouts.app')

@section('title', 'Resume Templates - Professional Resume Builder')
@section('page_class', 'templates-page')

@section('content')
<div class="templates-container">
    <!-- Page Header -->
    <section class="page-header">
        <div class="header-content">
            <div class="header-text">
                <h1 class="page-title">Choose Your Template</h1>
                <p class="page-subtitle">
                    Select from our collection of professional resume templates designed to make you stand out
                </p>
            </div>
            <div class="header-actions">
                <a href="{{ route('dashboard') }}" class="btn secondary-cta">
                    <i class="bi bi-arrow-left"></i>
                    Back to Dashboard
                </a>
            </div>
        </div>
    </section>

    <!-- Template Filters -->
    <section class="template-filters">
        <div class="card filter-card">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="filter-group">
                            <label class="filter-label">Category</label>
                            <select class="form-select" id="categoryFilter">
                                <option value="">All Templates</option>
                                <option value="professional">Professional</option>
                                <option value="modern">Modern</option>
                                <option value="classic">Classic</option>
                                <option value="creative">Creative</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="filter-group">
                            <label class="filter-label">Type</label>
                            <select class="form-select" id="typeFilter">
                                <option value="">All Types</option>
                                <option value="free">Free Templates</option>
                                <option value="premium">Premium Templates</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Templates Grid -->
    <section class="templates-grid">
        <div class="row g-4" id="templatesGrid">
            @forelse($templates as $template)
                <div class="col-lg-4 col-md-6 template-item" 
                     data-category="{{ strtolower($template['name']) }}" 
                     data-type="{{ $template['is_premium'] ? 'premium' : 'free' }}">
                    <div class="card template-card h-100">
                        <!-- Template Preview -->
                        <div class="template-preview">
                            @if($template['preview_image'])
                                <img src="{{ asset($template['preview_image']) }}" 
                                     alt="{{ $template['name'] }} Template" 
                                     class="template-image"
                                     onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDMwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIzMDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjRjVGNUY1Ii8+CjxyZWN0IHg9IjIwIiB5PSIyMCIgd2lkdGg9IjI2MCIgaGVpZ2h0PSIzNjAiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNFMEUwRTAiLz4KPHN2ZyB4PSI1MCIgeT0iNTAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyMDAgMzAiIGZpbGw9Im5vbmUiPgo8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjMTk3NkQyIi8+CjwvY3ZnPgo8dGV4dCB4PSIxNTAiIHk9IjIxMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjE2IiBmaWxsPSIjNjY2NjY2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj5SZXN1bWUgVGVtcGxhdGU8L3RleHQ+Cjwvc3ZnPg=='">
                            @else
                                <div class="template-placeholder">
                                    <i class="bi bi-file-earmark-text"></i>
                                    <span>{{ $template['name'] }} Template</span>
                                </div>
                            @endif
                            
                            @if($template['is_premium'])
                                <div class="premium-badge">
                                    <i class="bi bi-crown"></i>
                                    Premium
                                </div>
                            @else
                                <div class="free-badge">
                                    <i class="bi bi-check-circle"></i>
                                    Free
                                </div>
                            @endif
                        </div>
                        
                        <!-- Template Info -->
                        <div class="card-body">
                            <h5 class="template-title">{{ $template['name'] }}</h5>
                            <p class="template-description">{{ $template['description'] }}</p>
                        </div>
                        
                        <!-- Template Actions -->
                        <div class="card-footer">
                            <div class="template-actions">
                                <a href="{{ route('templates.show', $template['id']) }}" class="btn btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                    Preview
                                </a>
                                <a href="{{ route('resume-builder.create', ['template' => $template['id']]) }}" class="btn primary-cta">
                                    <i class="bi bi-plus-circle"></i>
                                    Use Template
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12">
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="bi bi-file-earmark-text"></i>
                        </div>
                        <h5 class="empty-title">No Templates Available</h5>
                        <p class="empty-description">
                            We're working on adding more professional templates for you to choose from.
                        </p>
                        <a href="{{ route('dashboard') }}" class="btn primary-cta">
                            <i class="bi bi-arrow-left"></i>
                            Back to Dashboard
                        </a>
                    </div>
                </div>
            @endforelse
        </div>
    </section>

    <!-- Template Categories Info -->
    <section class="template-categories">
        <div class="section-header">
            <h2>Template Categories</h2>
            <p>Choose the style that best represents your professional image</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-3 col-md-6">
                <div class="card category-card">
                    <div class="card-body text-center">
                        <div class="category-icon">
                            <i class="bi bi-briefcase"></i>
                        </div>
                        <h6 class="category-title">Professional</h6>
                        <p class="category-description">Clean, formal templates perfect for traditional industries</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="card category-card">
                    <div class="card-body text-center">
                        <div class="category-icon">
                            <i class="bi bi-lightning"></i>
                        </div>
                        <h6 class="category-title">Modern</h6>
                        <p class="category-description">Contemporary designs for tech and startup environments</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="card category-card">
                    <div class="card-body text-center">
                        <div class="category-icon">
                            <i class="bi bi-bookmark"></i>
                        </div>
                        <h6 class="category-title">Classic</h6>
                        <p class="category-description">Timeless layouts that work across all industries</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6">
                <div class="card category-card">
                    <div class="card-body text-center">
                        <div class="category-icon">
                            <i class="bi bi-palette"></i>
                        </div>
                        <h6 class="category-title">Creative</h6>
                        <p class="category-description">Unique designs for creative and artistic professionals</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Template filtering functionality
        const categoryFilter = document.getElementById('categoryFilter');
        const typeFilter = document.getElementById('typeFilter');
        const templateItems = document.querySelectorAll('.template-item');
        
        function filterTemplates() {
            const categoryValue = categoryFilter.value.toLowerCase();
            const typeValue = typeFilter.value;
            
            templateItems.forEach(item => {
                const itemCategory = item.dataset.category;
                const itemType = item.dataset.type;
                
                let showItem = true;
                
                // Filter by category
                if (categoryValue && itemCategory !== categoryValue) {
                    showItem = false;
                }
                
                // Filter by type
                if (typeValue && itemType !== typeValue) {
                    showItem = false;
                }
                
                // Show/hide item with animation
                if (showItem) {
                    item.style.display = 'block';
                    item.classList.add('animate-fade-in');
                } else {
                    item.style.display = 'none';
                    item.classList.remove('animate-fade-in');
                }
            });
        }
        
        // Add event listeners
        if (categoryFilter) {
            categoryFilter.addEventListener('change', filterTemplates);
        }
        
        if (typeFilter) {
            typeFilter.addEventListener('change', filterTemplates);
        }
        
        // Template card hover effects
        const templateCards = document.querySelectorAll('.template-card');
        templateCards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });
        
        // Smooth scroll animations
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in');
                }
            });
        });
        
        templateCards.forEach(card => {
            observer.observe(card);
        });
    });
</script>
@endpush
@endsection