@extends('layouts.app')

@section('title', 'Home')

@section('content')
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="hero-content">
                    <h1 class="hero-title">
                        Create a Professional Resume in Minutes
                    </h1>
                    <p class="hero-subtitle">
                        Build a standout resume that gets you hired. Choose from professional templates, customize
                        colors, and let AI enhance your content.
                    </p>
                    <div class="hero-features">
                        <div class="feature-item">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Professional Templates</span>
                        </div>
                        <div class="feature-item">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>AI-Powered Content</span>
                        </div>
                        <div class="feature-item">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>Instant PDF Download</span>
                        </div>
                        <div class="feature-item">
                            <i class="bi bi-check-circle-fill"></i>
                            <span>100% Free</span>
                        </div>
                    </div>
                    <div class="hero-actions">
                        <button class="btn btn-primary btn-lg" onclick="scrollToBuilder()">
                            <i class="bi bi-plus-circle me-2"></i>
                            Start Building Resume
                        </button>
                        <button class="btn btn-outline-secondary btn-lg ms-3" onclick="scrollToTemplates()">
                            <i class="bi bi-eye me-2"></i>
                            View Templates
                        </button>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-image">
                    <div class="resume-preview-card">
                        <div class="preview-header">
                            <h3>John Doe</h3>
                            <p>Senior Software Developer</p>
                            <div class="contact-info">
                                <span><i class="bi bi-envelope"></i> john@example.com</span>
                                <span><i class="bi bi-telephone"></i> +1 (555) 123-4567</span>
                            </div>
                        </div>
                        <div class="preview-content">
                            <div class="preview-section">
                                <h4>Experience</h4>
                                <div class="preview-item">
                                    <h5>Senior Developer - Tech Corp</h5>
                                    <p>Led development team, improved performance by 40%</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="features-section">
    <div class="container">
        <div class="section-header text-center">
            <h2>Why Choose Our Resume Builder?</h2>
            <p>Everything you need to create a professional resume that stands out</p>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-palette"></i>
                    </div>
                    <h4>Beautiful Templates</h4>
                    <p>Choose from professional templates designed by experts</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-magic"></i>
                    </div>
                    <h4>AI-Powered</h4>
                    <p>Let AI enhance your job descriptions and professional summary</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-download"></i>
                    </div>
                    <h4>Instant Download</h4>
                    <p>Download your resume as PDF in seconds, ready to send</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-phone"></i>
                    </div>
                    <h4>Mobile Friendly</h4>
                    <p>Create your resume on any device, anywhere, anytime</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section class="how-it-works-section">
    <div class="container">
        <div class="section-header text-center">
            <h2>How to Build Your Resume</h2>
            <p>Follow these simple steps to create your professional resume</p>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="step-card">
                    <div class="step-number">1</div>
                    <div class="step-icon">
                        <i class="bi bi-file-earmark-text"></i>
                    </div>
                    <h4>Choose Template</h4>
                    <p>Select from our professional templates that match your industry</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="step-card">
                    <div class="step-number">2</div>
                    <div class="step-icon">
                        <i class="bi bi-palette"></i>
                    </div>
                    <h4>Customize Colors</h4>
                    <p>Pick your preferred color scheme or create custom colors</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="step-card">
                    <div class="step-number">3</div>
                    <div class="step-icon">
                        <i class="bi bi-pencil"></i>
                    </div>
                    <h4>Fill Information</h4>
                    <p>Add your details, experience, education, and skills</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="step-card">
                    <div class="step-number">4</div>
                    <div class="step-icon">
                        <i class="bi bi-download"></i>
                    </div>
                    <h4>Download PDF</h4>
                    <p>Download your professional resume ready for job applications</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Dynamic Templates Section -->
<section class="resume-builder-section" id="resumeBuilder">
    <div class="container">
        <div class="section-header text-center">
            <h2>Choose Your Resume Template</h2>
            <p>Select a professional template that matches your industry and style</p>
        </div>

        <!-- Template Categories -->
        <div class="template-categories mb-4">
            <div class="d-flex justify-content-center gap-2 flex-wrap">
                <button class="btn btn-outline-primary active" data-filter="all">All Templates</button>
                <button class="btn btn-outline-primary" data-filter="modern">Modern</button>
                <button class="btn btn-outline-primary" data-filter="classic">Classic</button>
                <button class="btn btn-outline-primary" data-filter="minimal">Minimal</button>
                <button class="btn btn-outline-primary" data-filter="creative">Creative</button>
                <button class="btn btn-outline-primary" data-filter="executive">Executive</button>
            </div>
        </div>

        <!-- Dynamic Templates Grid -->
        <div class="template-grid">
            @php
                $templates = \App\Models\Template::active()->with('sections')->orderBy('is_featured', 'desc')->orderBy('created_at', 'desc')->get();
            @endphp
            
            @foreach($templates as $template)
                <div class="template-card" data-template="{{ $template->id }}" data-category="{{ strtolower($template->category) }}" onclick="selectTemplate({{ $template->id }})">
                    <div class="template-preview">
                        <div class="template-header {{ strtolower($template->category) }}-header">
                            <h6>John Doe</h6>
                            <p>Software Engineer</p>
                        </div>
                        <div class="template-body">
                            <div class="template-section">
                                <h6>Experience</h6>
                                <p>Senior Developer at Tech Corp</p>
                            </div>
                            <div class="template-section">
                                <h6>Education</h6>
                                <p>BS Computer Science</p>
                            </div>
                        </div>
                    </div>
                    <div class="template-info">
                        <h5>{{ $template->name }}</h5>
                        <p>{{ $template->description ?? 'Professional resume template' }}</p>
                        <div class="template-stats">
                            <span><i class="bi bi-star-fill"></i> 4.8</span>
                            <span><i class="bi bi-download"></i> {{ number_format(rand(500, 2000)) }}K</span>
                        </div>
                        @if($template->is_featured)
                            <span class="featured-badge">Featured</span>
                        @endif
                        @if($template->type === 'premium')
                            <span class="premium-badge">Premium</span>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Quick Start Button -->
        <div class="text-center mt-5">
            <button class="btn btn-primary btn-lg" onclick="startBuilding()">
                <i class="bi bi-plus-circle me-2"></i>
                Start Building Your Resume
            </button>
        </div>
    </div>
</section>
@endsection

@push('styles')
<style>
/* Template Categories */
.template-categories .btn {
    border-radius: 25px;
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

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

.template-categories .btn.active {
    background: linear-gradient(135deg, #0d6efd, #6f42c1);
    border-color: transparent;
    color: white;
}

/* Template Grid */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

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

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

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

.template-header {
    padding: 1rem;
    color: white;
    text-align: center;
}

.template-header h6 {
    margin: 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.template-header p {
    margin: 0.25rem 0 0 0;
    opacity: 0.9;
    font-size: 0.9rem;
}

.template-body {
    padding: 1rem;
}

.template-section h6 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #495057;
}

.template-section p {
    font-size: 0.75rem;
    margin: 0;
    color: #6c757d;
}

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

.template-info h5 {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: #212529;
}

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

.template-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: #6c757d;
}

.template-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.featured-badge, .premium-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
}

.featured-badge {
    background: linear-gradient(135deg, #ffc107, #ff8c00);
    color: white;
}

.premium-badge {
    background: linear-gradient(135deg, #6f42c1, #e83e8c);
    color: white;
}

/* 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%);
}

/* Responsive */
@media (max-width: 768px) {
    .template-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .template-categories {
        flex-direction: column;
        align-items: center;
    }
    
    .template-categories .btn {
        width: 100%;
        max-width: 200px;
    }
}
</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';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
});

// 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);
}

// Start building
function startBuilding() {
    // If no template selected, go to templates page
    if (!localStorage.getItem('selectedTemplate')) {
        window.location.href = '{{ route("templates.index") }}';
    } else {
        const templateId = localStorage.getItem('selectedTemplate');
        window.location.href = `{{ route('templates.options', ':id') }}`.replace(':id', templateId);
    }
}

// Scroll functions
function scrollToBuilder() {
    document.getElementById('resumeBuilder').scrollIntoView({
        behavior: 'smooth'
    });
}

function scrollToTemplates() {
    document.getElementById('resumeBuilder').scrollIntoView({
        behavior: 'smooth'
    });
}
</script>
@endpush