@extends('user.layout.app')
@section('title', 'Templates')
@section('content')

<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1">Choose Your Template</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active">Templates</li>
            </ol>
        </nav>
    </div>
</div>

<!-- Hero Section -->
<div class="row mb-4">
    <div class="col-12">
        <div class="hero-section text-center p-5 rounded" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
            <h2 class="mb-3">Professional Resume Templates</h2>
            <p class="mb-4">Choose from our collection of professionally designed templates to create a standout resume</p>
            <div class="template-stats d-flex justify-content-center gap-4">
                <div class="stat-item">
                    <h4 class="mb-1">{{ $templates->count() }}+</h4>
                    <small>Templates</small>
                </div>
                <div class="stat-item">
                    <h4 class="mb-1">{{ $templates->where('is_featured', true)->count() }}</h4>
                    <small>Featured</small>
                </div>
                <div class="stat-item">
                    <h4 class="mb-1">{{ $templates->where('type', 'premium')->count() }}</h4>
                    <small>Premium</small>
                </div>
            </div>
        </div>
    </div>
</div>

            <!-- Filters and Search -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-6">
                                    <div class="form-group mb-0">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                            </div>
                                            <input type="text" id="searchInput" class="form-control" placeholder="Search templates...">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <select id="categoryFilter" class="form-control">
                                        <option value="">All Categories</option>
                                        <option value="Modern">Modern</option>
                                        <option value="Classic">Classic</option>
                                        <option value="Minimal">Minimal</option>
                                        <option value="Creative">Creative</option>
                                        <option value="Executive">Executive</option>
                                    </select>
                                </div>
                                <div class="col-md-3 d-flex align-items-center" style="gap: 10px;">
                                    <select id="sortFilter" class="form-control">
                                        <option value="featured">Featured First</option>
                                        <option value="newest">Newest First</option>
                                        <option value="popular">Most Popular</option>
                                        <option value="alphabetical">A → Z</option>
                                    </select>
                                    <input type="color" id="accentColor" class="form-control" title="Accent color" value="#667eea" style="max-width: 60px; padding: 2px;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Templates Grid -->
            <div class="row" id="templatesGrid">
                @foreach($templates as $template)
                <div class="col-lg-4 col-md-6 mb-4 template-item"
                     data-category="{{ $template->category }}"
                     data-name="{{ strtolower($template->name) }}">
                    <div class="card template-card h-100">
                        <div class="card-header p-0 position-relative">
                                                         <!-- Template Preview -->
                             <div class="template-preview" style="height: 200px; background: white; border: 1px solid #e9ecef; position: relative; overflow: hidden;">
                                 <div class="template-preview-content" style="padding: 15px; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
                                     <!-- Header -->
                                     <div class="template-header" style="border-bottom: 2px solid #667eea; padding-bottom: 10px; margin-bottom: 10px;">
                                         <h4 style="margin: 0; color: #667eea; font-weight: 600; font-size: 1.1rem;">{{ $template->name }}</h4>
                                         <p style="margin: 5px 0 0 0; color: #6c757d; font-size: 0.8rem;">Software Engineer</p>
                                     </div>

                                     <!-- Content Sections -->
                                     <div class="template-content" style="flex: 1; display: flex; flex-direction: column; gap: 8px;">
                                         <div class="template-section">
                                             <h6 style="margin: 0 0 5px 0; color: #495057; font-size: 0.7rem; text-transform: uppercase; font-weight: 600;">Experience</h6>
                                             <div style="background: #f8f9fa; padding: 8px; border-radius: 4px; border-left: 3px solid #667eea;">
                                                 <p style="margin: 0; font-size: 0.7rem; color: #495057;"><strong>Senior Developer</strong> at Tech Corp</p>
                                                 <p style="margin: 2px 0 0 0; font-size: 0.6rem; color: #6c757d;">2020 - Present</p>
                                             </div>
                                         </div>

                                         <div class="template-section">
                                             <h6 style="margin: 0 0 5px 0; color: #495057; font-size: 0.7rem; text-transform: uppercase; font-weight: 600;">Education</h6>
                                             <div style="background: #f8f9fa; padding: 8px; border-radius: 4px; border-left: 3px solid #28a745;">
                                                 <p style="margin: 0; font-size: 0.7rem; color: #495057;"><strong>Bachelor's Degree</strong> in Computer Science</p>
                                                 <p style="margin: 2px 0 0 0; font-size: 0.6rem; color: #6c757d;">University of Technology</p>
                                             </div>
                                         </div>
                                     </div>

                                     <!-- Footer -->
                                     <div class="template-footer" style="border-top: 1px solid #e9ecef; padding-top: 8px; margin-top: 8px;">
                                         <div style="display: flex; justify-content: space-between; align-items: center;">
                                             <span style="font-size: 0.6rem; color: #6c757d;">{{ $template->category }}</span>
                                             <span style="font-size: 0.6rem; color: #667eea; font-weight: 600;">{{ strtoupper($template->type) }}</span>
                                         </div>
                                     </div>
                                 </div>
                             </div>

                            <!-- Badges -->
                            <div class="template-badges position-absolute" style="top: 10px; left: 10px;">
                                @if($template->is_featured)
                                    <span class="badge badge-warning mr-1">
                                        <i class="fas fa-star"></i> Featured
                                    </span>
                                @endif
                                @if($template->type === 'premium')
                                    <span class="badge badge-primary">
                                        <i class="fas fa-crown"></i> Premium
                                    </span>
                                @endif
                            </div>

                            <!-- Category Badge -->
                            <div class="position-absolute" style="top: 10px; right: 10px;">
                                <span class="badge badge-info">{{ $template->category }}</span>
                            </div>
                        </div>

                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title mb-2">{{ $template->name }}</h5>
                            <p class="card-text text-muted flex-grow-1">{{ $template->description }}</p>

                            <!-- Template Stats -->
                            <div class="template-stats mb-3">
                                <div class="row text-center">
                                    <div class="col-4">
                                        <small class="text-muted">Downloads</small>
                                        <div class="font-weight-bold">{{ rand(50, 500) }}</div>
                                    </div>
                                    <div class="col-4">
                                        <small class="text-muted">Rating</small>
                                        <div class="font-weight-bold">
                                            <i class="fas fa-star text-warning"></i> {{ number_format(rand(35, 50) / 10, 1) }}
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <small class="text-muted">Type</small>
                                        <div class="font-weight-bold text-capitalize">{{ $template->type }}</div>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="template-actions">
                                <a href="{{ route('user.templates.options', ['template' => $template->id]) }}" class="btn btn-primary btn-block mb-2">
                                    <i class="fas fa-edit mr-2"></i>Use This Template
                                </a>
                                <div class="btn-group btn-block">
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="previewTemplate({{ $template->id }})">
                                        <i class="fas fa-eye mr-1"></i>Preview
                                    </button>
                                    <button type="button" class="btn btn-outline-info btn-sm" onclick="duplicateTemplate({{ $template->id }})">
                                        <i class="fas fa-copy mr-1"></i>Duplicate
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <!-- No Results Message -->
            <div id="noResults" class="text-center py-5" style="display: none;">
                <i class="fas fa-search fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">No templates found</h4>
                <p class="text-muted">Try adjusting your search or filter criteria</p>


<!-- Template Preview Modal -->
<div class="modal fade" id="templatePreviewModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Template Preview</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="templatePreviewContent" class="text-center">
                    <div class="template-preview-large" style="height: 400px; background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%), linear-gradient(-45deg, #f8f9fa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f8f9fa 75%), linear-gradient(-45deg, transparent 75%, #f8f9fa 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; display: flex; align-items: center; justify-content: center;">
                        <div class="text-center">
                            <i class="fas fa-file-alt fa-5x text-muted"></i>
                            <p class="mt-3 text-muted">Template Preview</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex align-items-center w-100">
                <div class="me-auto d-flex align-items-center" style="gap: 8px;">
                    <label class="mb-0">Accent</label>
                    <input type="color" id="modalAccentColor" value="#667eea" style="width: 36px; height: 36px; border: none; background: none;">
                </div>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="useTemplateBtn">Use This Template</button>
            </div>
        </div>
    </div>
</div>

<style>
.hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.stat-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.template-card {
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-radius: 15px;
    transition: all 0.3s ease;
    overflow: hidden;
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.template-preview {
    background: linear-gradient(45deg, #f8f9fa 25%, transparent 25%),
                linear-gradient(-45deg, #f8f9fa 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #f8f9fa 75%),
                linear-gradient(-45deg, transparent 75%, #f8f9fa 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.template-badges .badge {
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.card-header {
    background: none;
    border-bottom: none;
}

.template-stats {
    border-top: 1px solid #e9ecef;
    padding-top: 1rem;
}

.template-actions .btn {
    border-radius: 10px;
    font-weight: 600;
}

.btn-group .btn {
    border-radius: 8px;
}

.form-control {
    border-radius: 10px;
    border: 2px solid #e4e6fc;
}

.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.input-group-text {
    background: #667eea;
    border: 2px solid #667eea;
    color: white;
    border-radius: 10px 0 0 10px;
}

.modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 15px 15px 0 0;
}

.modal-header .close {
    color: white;
    opacity: 0.8;
}

.modal-header .close:hover {
    opacity: 1;
}
</style>

<script>
let currentTemplateId = null;

// Search functionality
document.getElementById('searchInput').addEventListener('input', filterTemplates);
document.getElementById('categoryFilter').addEventListener('change', filterTemplates);
document.getElementById('sortFilter').addEventListener('change', sortTemplates);
document.getElementById('accentColor').addEventListener('input', syncAccentToPreview);

function filterTemplates() {
    const searchTerm = document.getElementById('searchInput').value.toLowerCase();
    const categoryFilter = document.getElementById('categoryFilter').value;
    const templateItems = document.querySelectorAll('.template-item');
    let visibleCount = 0;

    templateItems.forEach(item => {
        const name = item.dataset.name;
        const category = item.dataset.category;

        const matchesSearch = name.includes(searchTerm);
        const matchesCategory = !categoryFilter || category === categoryFilter;

        if (matchesSearch && matchesCategory) {
            item.style.display = 'block';
            visibleCount++;
        } else {
            item.style.display = 'none';
        }
    });

    // Show/hide no results message
    const noResults = document.getElementById('noResults');
    if (visibleCount === 0) {
        noResults.style.display = 'block';
    } else {
        noResults.style.display = 'none';
    }
}

function sortTemplates() {
    const sortBy = document.getElementById('sortFilter').value;
    const templatesGrid = document.getElementById('templatesGrid');
    const templateItems = Array.from(templatesGrid.children);

    templateItems.sort((a, b) => {
        const aFeatured = a.querySelector('.badge-warning') !== null;
        const bFeatured = b.querySelector('.badge-warning') !== null;
        const aName = a.querySelector('.card-title').textContent;
        const bName = b.querySelector('.card-title').textContent;

        switch(sortBy) {
            case 'featured':
                if (aFeatured && !bFeatured) return -1;
                if (!aFeatured && bFeatured) return 1;
                return aName.localeCompare(bName);
            case 'newest':
                return 0; // Already sorted by creation date in backend
            case 'popular':
                const aDownloads = parseInt(a.querySelector('.template-stats .col-4:first-child .font-weight-bold').textContent);
                const bDownloads = parseInt(b.querySelector('.template-stats .col-4:first-child .font-weight-bold').textContent);
                return bDownloads - aDownloads;
            case 'alphabetical':
                return aName.localeCompare(bName);
            default:
                return 0;
        }
    });

    // Re-append sorted items
    templateItems.forEach(item => templatesGrid.appendChild(item));
}

function previewTemplate(templateId) {
    currentTemplateId = templateId;
    $('#templatePreviewModal').modal('show');
    const accent = document.getElementById('accentColor').value;
    const modalPicker = document.getElementById('modalAccentColor');
    if (modalPicker) modalPicker.value = accent;
}

function duplicateTemplate(templateId) {
    // Redirect to create resume with this template
    window.location.href = `{{ route('user.resumes.create') }}?template=${templateId}`;
}

// Update modal button when template is selected
document.getElementById('useTemplateBtn').addEventListener('click', function() {
    if (currentTemplateId) {
        const accent = (document.getElementById('modalAccentColor').value || '#667eea').replace('#','');
        const url = `{{ route('user.templates.options', ':id') }}`.replace(':id', currentTemplateId);
        window.location.href = `${url}?accent=${accent}`;
    }
});

// Initialize tooltips
$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
    $('#modalAccentColor').on('input', function(){
        $('#accentColor').val(this.value);
        syncAccentToPreview();
    });
});

function syncAccentToPreview(){
    const color = document.getElementById('accentColor').value;
    document.querySelectorAll('.template-header').forEach(el => { el.style.borderBottomColor = color; });
    document.querySelectorAll('.template-content .template-section:first-child > div').forEach(el => { el.style.borderLeftColor = color; });
    document.querySelectorAll('.template-footer span:last-child').forEach(el => { el.style.color = color; });
}
</script>

@endsection