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

@extends('layouts.app')

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

@section('content')
<div class="template-detail-container">
    <!-- Template Header -->
    <section class="template-header">
        <div class="row align-items-center">
            <div class="col-md-8">
                <div class="template-info">
                    <div class="breadcrumb-nav">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                                <li class="breadcrumb-item"><a href="{{ route('templates.index') }}">Templates</a></li>
                                <li class="breadcrumb-item active" aria-current="page">{{ $templateData['name'] }}</li>
                            </ol>
                        </nav>
                    </div>
                    <h1 class="template-name">{{ $templateData['name'] }} Template</h1>
                    <p class="template-description">{{ $templateData['description'] }}</p>
                    
                    <div class="template-badges">
                        @if($templateData['is_premium'])
                            <span class="badge premium-badge">
                                <i class="bi bi-crown"></i>
                                Premium Template
                            </span>
                        @else
                            <span class="badge free-badge">
                                <i class="bi bi-check-circle"></i>
                                Free Template
                            </span>
                        @endif
                        <span class="badge category-badge">Professional</span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="template-actions">
                    <a href="{{ route('templates.preview', $templateData['id']) }}" class="btn btn-outline-primary btn-lg">
                        <i class="bi bi-eye"></i>
                        Live Preview
                    </a>
                    <a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta btn-lg">
                        <i class="bi bi-plus-circle"></i>
                        Use This Template
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Template Preview & Features -->
    <section class="template-content">
        <div class="row g-4">
            <!-- Template Preview -->
            <div class="col-lg-8">
                <div class="card preview-card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-eye"></i>
                            Template Preview
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="template-preview-container">
                            @if($templateData['preview_image'])
                                <img src="{{ asset($templateData['preview_image']) }}" 
                                     alt="{{ $templateData['name'] }} Template Preview" 
                                     class="template-preview-image"
                                     onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDYwMCA4MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iODAwIiBmaWxsPSIjRjVGNUY1Ii8+CjxyZWN0IHg9IjQwIiB5PSI0MCIgd2lkdGg9IjUyMCIgaGVpZ2h0PSI3MjAiIGZpbGw9IndoaXRlIiBzdHJva2U9IiNFMEUwRTAiLz4KPHN2ZyB4PSI4MCIgeT0iODAiIHdpZHRoPSI0NDAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA0NDAgNjAiIGZpbGw9Im5vbmUiPgo8cmVjdCB3aWR0aD0iNDQwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjMTk3NkQyIi8+CjwvY3ZnPgo8dGV4dCB4PSIzMDAiIHk9IjQyMCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBmaWxsPSIjNjY2NjY2IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj57eyAkdGVtcGxhdGVEYXRhWyduYW1lJ10gfX0gVGVtcGxhdGU8L3RleHQ+Cjx0ZXh0IHg9IjMwMCIgeT0iNDYwIiBmb250LWZhbWlseT0iQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTYiIGZpbGw9IiM5OTk5OTkiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkNsaWNrICJMaXZlIFByZXZpZXciIGZvciBmdWxsIHZpZXc8L3RleHQ+Cjwvc3ZnPg=='">
                            @else
                                <div class="template-preview-placeholder">
                                    <i class="bi bi-file-earmark-text"></i>
                                    <h5>{{ $templateData['name'] }} Template</h5>
                                    <p>Click "Live Preview" to see the full template</p>
                                </div>
                            @endif
                        </div>
                        
                        <div class="preview-actions mt-3">
                            <a href="{{ route('templates.preview', $templateData['id']) }}" class="btn btn-outline-primary">
                                <i class="bi bi-fullscreen"></i>
                                Full Screen Preview
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Template Features -->
            <div class="col-lg-4">
                <div class="card features-card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-star"></i>
                            Template Features
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="feature-list">
                            <div class="feature-item">
                                <i class="bi bi-check-circle feature-icon"></i>
                                <span>Professional Layout</span>
                            </div>
                            <div class="feature-item">
                                <i class="bi bi-check-circle feature-icon"></i>
                                <span>ATS Friendly</span>
                            </div>
                            <div class="feature-item">
                                <i class="bi bi-check-circle feature-icon"></i>
                                <span>Print Optimized</span>
                            </div>
                            <div class="feature-item">
                                <i class="bi bi-check-circle feature-icon"></i>
                                <span>Easy Customization</span>
                            </div>
                            <div class="feature-item">
                                <i class="bi bi-check-circle feature-icon"></i>
                                <span>Multiple Formats</span>
                            </div>
                            <div class="feature-item">
                                <i class="bi bi-check-circle feature-icon"></i>
                                <span>Modern Typography</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Template Stats -->
                <div class="card stats-card mt-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-bar-chart"></i>
                            Template Stats
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="stat-item">
                            <div class="stat-value">4.8/5</div>
                            <div class="stat-label">Rating</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">2,345</div>
                            <div class="stat-label">Downloads</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">98%</div>
                            <div class="stat-label">Success Rate</div>
                        </div>
                    </div>
                </div>
                
                <!-- Quick Actions -->
                <div class="card actions-card mt-4">
                    <div class="card-body">
                        <div class="d-grid gap-2">
                            <a href="{{ route('resume-builder.create', ['template' => $templateData['id']]) }}" class="btn primary-cta">
                                <i class="bi bi-plus-circle"></i>
                                Start With This Template
                            </a>
                            <a href="{{ route('templates.preview', $templateData['id']) }}" class="btn btn-outline-primary">
                                <i class="bi bi-eye"></i>
                                Preview Template
                            </a>
                            <a href="{{ route('templates.index') }}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left"></i>
                                Back to Templates
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Template Guidelines -->
    <section class="template-guidelines">
        <div class="card guidelines-card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-lightbulb"></i>
                    Tips for Using This Template
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="guideline-item">
                            <div class="guideline-icon">
                                <i class="bi bi-target"></i>
                            </div>
                            <div class="guideline-content">
                                <h6>Perfect For</h6>
                                <p>Corporate professionals, managers, and executives in traditional industries.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="guideline-item">
                            <div class="guideline-icon">
                                <i class="bi bi-palette"></i>
                            </div>
                            <div class="guideline-content">
                                <h6>Customization</h6>
                                <p>Easily customize colors, fonts, and sections to match your personal brand.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="guidelines-footer mt-3">
                    <p class="text-muted mb-0">
                        <i class="bi bi-info-circle"></i>
                        Need help customizing your resume? Check out our 
                        <a href="{{ route('help') }}" class="text-primary">help center</a> 
                        for detailed guides and tips.
                    </p>
                </div>
            </div>
        </div>
    </section>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Smooth scroll animations
        const cards = document.querySelectorAll('.card');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in');
                }
            });
        });
        
        cards.forEach(card => {
            observer.observe(card);
        });
        
        // Template preview image zoom
        const previewImage = document.querySelector('.template-preview-image');
        if (previewImage) {
            previewImage.addEventListener('click', function() {
                // Open preview in new tab
                window.open(this.src, '_blank');
            });
            
            previewImage.style.cursor = 'zoom-in';
        }
    });
</script>
@endpush
@endsection