{{--
    Template Preview - Professional Bootstrap Design
    Full Screen Template Preview with Sample Data
    
    @author David Valera Melendez <david@valera-melendez.de>
    @created 2025-08-09
    @location Made in Germany 🇩🇪
--}}

@extends('layouts.app')

@section('title', 'Preview: ' . $templateData['name'] . ' Template - Professional Resume Builder')
@section('page_class', 'template-preview-page')

@section('content')
<div class="template-preview-container">
    <!-- Preview Header -->
    <section class="preview-header">
        <div class="d-flex justify-content-between align-items-center">
            <div class="preview-info">
                <h1 class="preview-title">{{ $templateData['name'] }} Template Preview</h1>
                <p class="preview-subtitle">Sample resume with placeholder content</p>
            </div>
            <div class="preview-actions">
                <a href="{{ route('templates.show', $templateData['id']) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i>
                    Back to Template
                </a>
                <a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta">
                    <i class="bi bi-plus-circle"></i>
                    Use This Template
                </a>
            </div>
        </div>
    </section>

    <!-- Template Preview Content -->
    <section class="preview-content">
        <div class="resume-preview-wrapper">
            <div class="resume-page">
                <!-- Sample Resume Content -->
                <div class="resume-container">
                    <!-- Header Section -->
                    <header class="resume-header">
                        <div class="header-content">
                            <h1 class="resume-name">{{ $sampleData['name'] }}</h1>
                            <h2 class="resume-title">{{ $sampleData['title'] }}</h2>
                            <div class="contact-info">
                                <div class="contact-item">
                                    <i class="bi bi-envelope"></i>
                                    <span>{{ $sampleData['email'] }}</span>
                                </div>
                                <div class="contact-item">
                                    <i class="bi bi-telephone"></i>
                                    <span>{{ $sampleData['phone'] }}</span>
                                </div>
                                <div class="contact-item">
                                    <i class="bi bi-geo-alt"></i>
                                    <span>Berlin, Germany</span>
                                </div>
                                <div class="contact-item">
                                    <i class="bi bi-linkedin"></i>
                                    <span>linkedin.com/in/johndoe</span>
                                </div>
                            </div>
                        </div>
                    </header>

                    <!-- Professional Summary -->
                    <section class="resume-section">
                        <h3 class="section-title">Professional Summary</h3>
                        <div class="section-content">
                            <p>{{ $sampleData['summary'] }} Proven track record of delivering high-quality solutions and leading cross-functional teams to achieve business objectives.</p>
                        </div>
                    </section>

                    <!-- Experience -->
                    <section class="resume-section">
                        <h3 class="section-title">Professional Experience</h3>
                        <div class="section-content">
                            <div class="experience-item">
                                <div class="experience-header">
                                    <h4 class="position-title">Senior Software Developer</h4>
                                    <span class="company-name">Tech Solutions GmbH</span>
                                    <span class="employment-period">Jan 2020 - Present</span>
                                </div>
                                <ul class="experience-duties">
                                    <li>Led development of web applications using modern frameworks</li>
                                    <li>Collaborated with cross-functional teams to deliver projects on time</li>
                                    <li>Mentored junior developers and conducted code reviews</li>
                                    <li>Improved system performance by 40% through optimization</li>
                                </ul>
                            </div>

                            <div class="experience-item">
                                <div class="experience-header">
                                    <h4 class="position-title">Software Developer</h4>
                                    <span class="company-name">Digital Innovations Ltd</span>
                                    <span class="employment-period">Mar 2018 - Dec 2019</span>
                                </div>
                                <ul class="experience-duties">
                                    <li>Developed and maintained web applications using PHP and Laravel</li>
                                    <li>Implemented responsive designs and improved user experience</li>
                                    <li>Participated in agile development processes and sprint planning</li>
                                </ul>
                            </div>
                        </div>
                    </section>

                    <!-- Education -->
                    <section class="resume-section">
                        <h3 class="section-title">Education</h3>
                        <div class="section-content">
                            <div class="education-item">
                                <h4 class="degree-title">Bachelor of Science in Computer Science</h4>
                                <span class="institution">Technical University of Berlin</span>
                                <span class="graduation-year">2018</span>
                            </div>
                        </div>
                    </section>

                    <!-- Skills -->
                    <section class="resume-section">
                        <h3 class="section-title">Technical Skills</h3>
                        <div class="section-content">
                            <div class="skills-grid">
                                <div class="skill-category">
                                    <h5 class="skill-category-title">Programming Languages</h5>
                                    <div class="skill-tags">
                                        <span class="skill-tag">PHP</span>
                                        <span class="skill-tag">JavaScript</span>
                                        <span class="skill-tag">Python</span>
                                        <span class="skill-tag">TypeScript</span>
                                    </div>
                                </div>
                                <div class="skill-category">
                                    <h5 class="skill-category-title">Frameworks & Libraries</h5>
                                    <div class="skill-tags">
                                        <span class="skill-tag">Laravel</span>
                                        <span class="skill-tag">Vue.js</span>
                                        <span class="skill-tag">React</span>
                                        <span class="skill-tag">Bootstrap</span>
                                    </div>
                                </div>
                                <div class="skill-category">
                                    <h5 class="skill-category-title">Tools & Technologies</h5>
                                    <div class="skill-tags">
                                        <span class="skill-tag">Git</span>
                                        <span class="skill-tag">Docker</span>
                                        <span class="skill-tag">MySQL</span>
                                        <span class="skill-tag">Redis</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <!-- Languages -->
                    <section class="resume-section">
                        <h3 class="section-title">Languages</h3>
                        <div class="section-content">
                            <div class="language-list">
                                <div class="language-item">
                                    <span class="language-name">English</span>
                                    <span class="language-level">Native</span>
                                </div>
                                <div class="language-item">
                                    <span class="language-name">German</span>
                                    <span class="language-level">Fluent</span>
                                </div>
                                <div class="language-item">
                                    <span class="language-name">Spanish</span>
                                    <span class="language-level">Intermediate</span>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </section>

    <!-- Preview Controls -->
    <section class="preview-controls">
        <div class="card controls-card">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="control-info">
                            <h6 class="mb-1">Template: {{ $templateData['name'] }}</h6>
                            <p class="text-muted mb-0">This is a sample preview with placeholder content</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="control-actions text-md-end">
                            <button class="btn btn-outline-secondary" onclick="window.print()">
                                <i class="bi bi-printer"></i>
                                Print Preview
                            </button>
                            <a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta">
                                <i class="bi bi-pencil-square"></i>
                                Edit This Template
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@push('styles')
<style>
    /* Resume Preview Specific Styles */
    .resume-preview-wrapper {
        max-width: 800px;
        margin: 0 auto;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    .resume-page {
        background: white;
        min-height: 1056px; /* A4 height */
        width: 100%;
        padding: 40px;
        font-family: 'Arial', sans-serif;
        line-height: 1.6;
        color: #333;
    }

    .resume-header {
        border-bottom: 3px solid var(--color-primary);
        padding-bottom: 20px;
        margin-bottom: 30px;
    }

    .resume-name {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--color-primary);
        margin: 0;
    }

    .resume-title {
        font-size: 1.5rem;
        font-weight: 400;
        color: #666;
        margin: 5px 0 15px 0;
    }

    .contact-info {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.95rem;
    }

    .contact-item i {
        color: var(--color-primary);
    }

    .resume-section {
        margin-bottom: 25px;
    }

    .section-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--color-primary);
        border-bottom: 2px solid var(--color-primary-light);
        padding-bottom: 5px;
        margin-bottom: 15px;
    }

    .experience-item {
        margin-bottom: 20px;
    }

    .experience-header {
        margin-bottom: 8px;
    }

    .position-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        margin: 0;
    }

    .company-name {
        font-weight: 500;
        color: var(--color-primary);
        margin-right: 15px;
    }

    .employment-period {
        color: #666;
        font-style: italic;
    }

    .experience-duties {
        margin: 8px 0;
        padding-left: 20px;
    }

    .experience-duties li {
        margin-bottom: 4px;
    }

    .education-item {
        margin-bottom: 15px;
    }

    .degree-title {
        font-weight: 600;
        color: #333;
        margin: 0 15px 0 0;
    }

    .institution {
        color: var(--color-primary);
        margin-right: 15px;
    }

    .graduation-year {
        color: #666;
    }

    .skills-grid {
        display: grid;
        gap: 15px;
    }

    .skill-category-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 8px;
        color: #333;
    }

    .skill-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .skill-tag {
        background: var(--color-primary-light);
        color: var(--color-primary);
        padding: 4px 12px;
        border-radius: 15px;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .language-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 10px;
    }

    .language-item {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }

    .language-name {
        font-weight: 500;
    }

    .language-level {
        color: var(--color-primary);
        font-weight: 500;
    }

    /* Print Styles */
    @media print {
        .preview-header,
        .preview-controls {
            display: none !important;
        }
        
        .resume-page {
            box-shadow: none;
            margin: 0;
            padding: 20px;
        }
        
        body {
            background: white;
        }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .resume-page {
            padding: 20px;
        }
        
        .resume-name {
            font-size: 2rem;
        }
        
        .contact-info {
            flex-direction: column;
            gap: 10px;
        }
    }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Smooth animations
        const sections = document.querySelectorAll('.resume-section');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        });
        
        sections.forEach(section => {
            section.style.opacity = '0';
            section.style.transform = 'translateY(20px)';
            section.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(section);
        });
    });
</script>
@endpush
@endsection