@extends('layouts.app')

@section('title', 'Templates')

@section('content')
<!-- Hero Section -->
<section class="hero-section bg-gradient-primary text-white py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <div class="hero-content">
                    <h1 class="hero-title display-4 fw-bold mb-4">Pick a beautiful resume template</h1>
                    <p class="hero-subtitle fs-5 mb-4 opacity-90">Professionally designed, ATS-friendly templates crafted to help you stand out. Choose a style and customize it in minutes.</p>
                    <div class="hero-features mb-4">
                        <div class="feature-item d-flex align-items-center mb-2">
                            <i class="bi bi-check-circle-fill me-2"></i>
                            <span>Optimized for readability and ATS systems</span>
                        </div>
                        <div class="feature-item d-flex align-items-center mb-2">
                            <i class="bi bi-check-circle-fill me-2"></i>
                            <span>1-click color and font customization</span>
                        </div>
                        <div class="feature-item d-flex align-items-center">
                            <i class="bi bi-check-circle-fill me-2"></i>
                            <span>Export-ready layouts</span>
                        </div>
                    </div>
                    <div class="hero-actions">
                        <a href="#templates" class="btn btn-light btn-lg me-3">
                            <i class="bi bi-grid me-2"></i>Browse Templates
                        </a>
                        <a href="{{ route('home') }}" class="btn btn-outline-light btn-lg">
                            <i class="bi bi-arrow-left me-2"></i>Back to Home
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 d-none d-lg-block">
                <div class="resume-preview-card">
                    <div class="preview-header">
                        <h3>Jane Smith</h3>
                        <p>Product Designer</p>
                        <div class="contact-info">
                            <span><i class="bi bi-envelope"></i> jane@example.com</span>
                            <span><i class="bi bi-telephone"></i> +1 555-1234</span>
                        </div>
                    </div>
                    <div class="preview-content">
                        <div class="preview-section">
                            <h4>Experience</h4>
                            <div class="preview-item">
                                <h5>Senior Designer - Acme</h5>
                                <p>Led end-to-end product design for web and mobile apps.</p>
                            </div>
                        </div>
                        <div class="preview-section">
                            <h4>Education</h4>
                            <div class="preview-item">
                                <h5>BDes - Visual Communication</h5>
                                <p>University of Design</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Templates Section -->
<section id="templates" class="py-5">
    <div class="container">
        <div class="row mb-5">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h1 class="display-6 fw-bold mb-2">Choose Your Template</h1>
                        <p class="text-muted fs-5">Select from our collection of professional templates</p>
                    </div>
                    <div class="d-flex gap-2">
                        <select id="sortSelect" class="form-select form-select-lg">
                            <option value="featured">Featured First</option>
                            <option value="newest">Newest First</option>
                            <option value="popular">Most Popular</option>
                            <option value="a-z">A → Z</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Template Categories -->
        <div class="template-categories mb-5">
            <div class="d-flex justify-content-center gap-3 flex-wrap">
                <button class="btn btn-outline-primary btn-lg active" data-filter="all">
                    <i class="bi bi-grid me-2"></i>All Templates
                </button>
                <button class="btn btn-outline-primary btn-lg" data-filter="modern">
                    <i class="bi bi-stars me-2"></i>Modern
                </button>
                <button class="btn btn-outline-primary btn-lg" data-filter="classic">
                    <i class="bi bi-building me-2"></i>Classic
                </button>
                <button class="btn btn-outline-primary btn-lg" data-filter="minimal">
                    <i class="bi bi-dash me-2"></i>Minimal
                </button>
                <button class="btn btn-outline-primary btn-lg" data-filter="creative">
                    <i class="bi bi-palette me-2"></i>Creative
                </button>
                <button class="btn btn-outline-primary btn-lg" data-filter="executive">
                    <i class="bi bi-award me-2"></i>Executive
                </button>
            </div>
        </div>

        <!-- Templates Grid -->
        <div class="templates-grid">
            @foreach($templates as $template)
                <div class="template-card" data-template="{{ $template['id'] }}" data-category="{{ strtolower($template['category']) }}" data-type="{{ $template['type'] }}">
                    <div class="template-preview">
                        <div class="template-header {{ strtolower($template['category']) }}-header">
                            <h6>{{ $template['name'] }}</h6>
                            <p>Software Engineer</p>
                        </div>
                        <div class="template-body">
                            <div class="template-section">
                                <h6>Experience</h6>
                                <div class="experience-item">
                                    <p><strong>Senior Developer</strong> at Tech Corp</p>
                                    <small>2020 - Present</small>
                                </div>
                            </div>
                            <div class="template-section">
                                <h6>Education</h6>
                                <div class="education-item">
                                    <p><strong>Bachelor's Degree</strong> in Computer Science</p>
                                    <small>University of Technology</small>
                                </div>
                            </div>
                            <div class="template-section">
                                <h6>Skills</h6>
                                <div class="skills-item">
                                    <span class="skill-tag">JavaScript</span>
                                    <span class="skill-tag">React</span>
                                    <span class="skill-tag">Node.js</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="template-info">
                        <div class="template-badges">
                            @if($template['is_featured'])
                                <span class="badge bg-warning text-dark">Featured</span>
                            @endif
                            @if($template['type'] === 'premium')
                                <span class="badge bg-primary">Premium</span>
                            @endif
                        </div>
                        <h5 class="template-title">{{ $template['name'] }}</h5>
                        <p class="template-description">{{ $template['description'] ?? 'Professional resume template designed for modern job seekers.' }}</p>
                        <div class="template-stats">
                            <span class="stat-item">
                                <i class="bi bi-star-fill text-warning"></i>
                                <span>4.8</span>
                            </span>
                            <span class="stat-item">
                                <i class="bi bi-download text-primary"></i>
                                <span>{{ number_format(rand(500, 2000)) }}K</span>
                            </span>
                            <span class="stat-item">
                                <i class="bi bi-eye text-info"></i>
                                <span>{{ ucfirst($template['category']) }}</span>
                            </span>
                        </div>
                        <div class="template-actions">
                            <button class="btn btn-primary w-100" onclick="selectTemplate({{ $template['id'] }})">
                                <i class="bi bi-eye me-2"></i>Preview & Use
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Load More -->
        <div class="text-center mt-5">
            <button class="btn btn-outline-primary btn-lg" id="loadMoreBtn">
                <i class="bi bi-arrow-down me-2"></i>Load More Templates
            </button>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="features-section bg-light py-5">
    <div class="container">
        <div class="section-header text-center mb-5">
            <h2 class="display-5 fw-bold">Why our templates work</h2>
            <p class="fs-5 text-muted">Designed with hiring managers and ATS systems in mind, so your achievements shine.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="feature-card text-center">
                    <div class="feature-icon mb-3">
                        <i class="bi bi-magic fs-1 text-primary"></i>
                    </div>
                    <h4 class="fw-bold mb-3">Modern & Clean</h4>
                    <p class="text-muted">Sharp typography, balanced spacing, and elegant accents for a professional look.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card text-center">
                    <div class="feature-icon mb-3">
                        <i class="bi bi-funnel fs-1 text-primary"></i>
                    </div>
                    <h4 class="fw-bold mb-3">ATS-Friendly</h4>
                    <p class="text-muted">Layouts engineered to parse well so your resume gets seen by hiring managers.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card text-center">
                    <div class="feature-icon mb-3">
                        <i class="bi bi-sliders fs-1 text-primary"></i>
                    </div>
                    <h4 class="fw-bold mb-3">Flexible</h4>
                    <p class="text-muted">Switch colors, fonts, and density to match your personal brand and industry.</p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
/* Hero Section */
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero-section .resume-preview-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Template Categories */
.template-categories .btn {
    border-radius: 50px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border-width: 2px;
}

.template-categories .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.template-categories .btn.active {
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
    border-color: transparent;
    color: white;
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.3);
}

/* Templates Grid */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.template-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.template-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: #0d6efd;
}

.template-preview {
    height: 220px;
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
}

.template-header {
    padding: 1.5rem;
    color: white;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.template-header h6 {
    margin: 0;
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,.25);
}

.template-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Add a subtle dark-to-transparent overlay to ensure contrast on bright headers */
.template-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
}

/* Minimal header is light; remove overlay and ensure dark text */
.minimal-header {
    color: #495057 !important;
}
.minimal-header::after {
    display: none;
}

.template-body {
    padding: 1.5rem;
    background: white;
}

/* Card polish */
.template-card {
    border-radius: 20px;
    border: 1px solid #e9ecef;
}
.template-card:hover {
    border-color: #0d6efd;
}

.template-section h6 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.template-section p {
    font-size: 0.85rem;
    margin: 0;
    color: #6c757d;
    line-height: 1.4;
}

.template-info {
    padding: 2rem;
    position: relative;
}

.template-badges {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
}

.template-title {
    margin: 0 0 1rem 0;
    font-weight: 700;
    color: #212529;
    font-size: 1.3rem;
}

.template-description {
    margin: 0 0 1.5rem 0;
    color: #6c757d;
    line-height: 1.6;
    font-size: 0.95rem;
}

.template-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
}

.template-actions .btn {
    border-radius: 10px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.template-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.3);
}

/* Template Header Styles */
.modern-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.classic-header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.minimal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #495057 !important;
}

.creative-header {
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
}

.executive-header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
}

/* Feature Cards */
.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Responsive */
@media (max-width: 768px) {
    .templates-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .template-categories {
        flex-direction: column;
        align-items: center;
    }
    
    .template-categories .btn {
        width: 100%;
        max-width: 250px;
    }
    
    .template-stats {
        flex-direction: column;
        gap: 0.75rem;
    }
}
</style>
@endpush

@push('scripts')
<script>
// Template filtering
document.addEventListener('DOMContentLoaded', function() {
    const filterButtons = document.querySelectorAll('[data-filter]');
    const templateCards = document.querySelectorAll('.template-card');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const filter = this.getAttribute('data-filter');
            
            // Update active button
            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // Filter templates
            templateCards.forEach(card => {
                const category = card.getAttribute('data-category');
                if (filter === 'all' || category === filter) {
                    card.style.display = 'block';
                    card.style.animation = 'fadeIn 0.5s ease-in-out';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
    
    // Sorting functionality
    const sortSelect = document.getElementById('sortSelect');
    sortSelect.addEventListener('change', function() {
        const sortBy = this.value;
        const templatesContainer = document.querySelector('.templates-grid');
        const templates = Array.from(templateCards);
        
        templates.sort((a, b) => {
            switch(sortBy) {
                case 'featured':
                    const aFeatured = a.querySelector('.badge.bg-warning') !== null;
                    const bFeatured = b.querySelector('.badge.bg-warning') !== null;
                    return bFeatured - aFeatured;
                case 'newest':
                    return b.dataset.template - a.dataset.template;
                case 'popular':
                    const aDownloads = parseInt(a.querySelector('.stat-item:nth-child(2) span').textContent);
                    const bDownloads = parseInt(b.querySelector('.stat-item:nth-child(2) span').textContent);
                    return bDownloads - aDownloads;
                case 'a-z':
                    const aTitle = a.querySelector('.template-title').textContent;
                    const bTitle = b.querySelector('.template-title').textContent;
                    return aTitle.localeCompare(bTitle);
                default:
                    return 0;
            }
        });
        
        templates.forEach(template => {
            templatesContainer.appendChild(template);
        });
    });
});

// Template selection
function selectTemplate(templateId) {
    // Store selected template
    localStorage.setItem('selectedTemplate', templateId);
    
    // Redirect to template options page
    window.location.href = `{{ route('templates.options', ':id') }}`.replace(':id', templateId);
}

// Load more functionality
document.getElementById('loadMoreBtn').addEventListener('click', function() {
    // Simulate loading more templates
    this.innerHTML = '<i class="bi bi-arrow-clockwise me-2"></i>Loading...';
    this.disabled = true;
    
    setTimeout(() => {
        this.innerHTML = '<i class="bi bi-arrow-down me-2"></i>Load More Templates';
        this.disabled = false;
        // Here you would typically load more templates via AJAX
    }, 2000);
});

// Add fadeIn animation
const style = document.createElement('style');
style.textContent = `
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
`;
document.head.appendChild(style);
</script>
@endpush