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

    <!-- My Resumes -->
    <div class="template-section-container">

        <div class="template-section-header">
            <div class="template-section-title">Templates</div>
            <div class="template-navigation">
                <div class="nav-arrow arrow-left">
                    <div class="arrow-icon">
                        <div class="arrow-icon-inner"></div>
                    </div>
                </div>
                <div class="nav-arrow arrow-right">
                    <div class="arrow-icon">
                        <div class="arrow-icon-inner"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="template-categories">
            <div class="category-btn category-all active" data-filter="all">All</div>
            @foreach ($templates->unique('category') as $template)
                <div class="category-btn category-other" data-filter="{{ strtolower($template->category) }}">
                    {{ $template->category }}</div>
            @endforeach
        </div>

        <!-- Popular Templates Section -->

        <div class="templates-grid" id="templatesGrid">
            <!-- Template Card 1 -->
            <div class="row">
                @forelse($templates as $template)
                    <div class="col-lg-3 col-sm-6 col-md-3 mb-4" style="min-width: 380px;">
                        <!-- Template Card 1 -->
                        <div class="template-card" data-name="{{ strtolower($template->name) }}"
                            data-category="{{ strtolower($template->category) }}"
                            data-featured="{{ $template->is_featured ? 'true' : 'false' }}" data-id="{{ $template->id }}">
                            <div class="template-image template-width"
                                style="height: 400px;
                               padding: 20px; overflow: hidden; border: 1px solid #e0e0e0; position: relative; background: #f0f2f5; box-sizing: border-box;">
                                <div class="preview-wrapper" style="height: 100%; width: 100%;">
                                    <iframe src="{{ route('user.templates.preview', $template) }}"
                                        style="width: 100%; height: 1414px; transform: scale(0.4); transform-origin: top left; border: none;"></iframe>
                                </div>
                            </div>
                            <div class="template-body">
                                <div class="template-info">
                                    <div class="template-name">{{ $template->name }}</div>
                                    <div class="template-description">{{ Str::limit($template->description, 60) }}</div>
                                </div>

                                <div class="template-tags">
                                    @if ($template->is_featured)
                                        <div class="tag featured-tag">
                                            <div class="tag-icon">
                                                <img src="{{ asset('assets/user/assets/images/icon/featured-icon.png') }}"
                                                    alt="">
                                                <!-- <div class="star-icon"></div> -->
                                            </div>
                                            <div class="tag-text">Featured</div>
                                        </div>
                                    @endif
                                    @if ($template->type === 'premium')
                                        <div class="tag premium-tag">
                                            <div class="tag-icon">
                                                <img src="{{ asset('assets/user/assets/images/icon/premium-icon.png') }}"
                                                    alt="">
                                            </div>
                                            <div class="premium-tag-text">Premium</div>
                                        </div>
                                    @endif
                                    <div class="tag executive-tag">
                                        <div class="tag-icon">
                                            <img src="{{ asset('assets/user/assets/images/icon/executive-icon.png') }}"
                                                alt="">
                                        </div>
                                        <div class="executive-tag-text">{{ $template->category ?? 'General' }}</div>
                                    </div>
                                </div>

                                <div class="template-stats">
                                    <div class="star-download">
                                        <div class="download-stat">
                                            <i class="fas fa-download" style="color: #AEAEAE;"></i>
                                            <!-- <img src="" alt=""> -->
                                            <div class="stat-text">200</div>
                                        </div>
                                        <div class="download-stat">
                                            <i class="far fa-star" style="color: #AEAEAE;"></i>
                                            <!-- <img src="" alt=""> -->
                                            <div class="stat-text">3.5</div>
                                        </div>
                                    </div>
                                    <div class="free-badge">{{ strtoupper($template->type) }}</div>
                                </div>

                                <div class="template-actions">
                                    <a href="{{ route('user.templates.options', $template->id) }}"
                                        style="text-decoration: none">
                                        <button class="use-template-btn">
                                            Use Template
                                        </button>
                                    </a>
                                    <div class="action-icons">
                                        <div class="action-icon">
                                            <i class="far fa-copy"></i>
                                        </div>
                                        <div class="action-icon">
                                            <i class="far fa-eye"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="text-center py-4">
                            <i class="fas fa-palette fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">No templates available</h5>
                            <p class="text-muted">Check back later for new templates</p>
                        </div>
                    </div>
                @endforelse
            </div>

        </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            try {
                const categoryButtons = Array.from(document.querySelectorAll('.category-btn'));
                const cards = Array.from(document.querySelectorAll('.template-card'));
                const templatesGrid = document.getElementById('templatesGrid');
                const row = templatesGrid ? templatesGrid.querySelector('.row') : null;

                const normalize = str => (str || '').toString().trim().toLowerCase();

                // Create or toggle a "no results" message
                function ensureNoResultsNode() {
                    if (!row) return null;
                    let el = row.querySelector('.no-templates-message');
                    if (!el) {
                        el = document.createElement('div');
                        el.className = 'no-templates-message col-12';
                        el.innerHTML = `
                  <div class="text-center py-4">
                    <i class="fas fa-palette fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No templates match the filter</h5>
                  </div>`;
                        // keep it hidden by default
                        el.style.display = 'none';
                        row.appendChild(el);
                    }
                    return el;
                }

                const noResultsNode = ensureNoResultsNode();

                function applyFilter(filter) {
                    const normalizedFilter = normalize(filter);
                    let visibleCount = 0;

                    cards.forEach(card => {
                        const cardCategory = normalize(card.dataset.category);
                        // find the column element that wraps this card (fallback to parentElement)
                        const col = card.closest('[class*="col-"]') || card.parentElement;
                        if (!col) return;

                        if (normalizedFilter === 'all' || cardCategory === normalizedFilter) {
                            col.style.display = ''; // show
                            visibleCount++;
                        } else {
                            col.style.display = 'none'; // hide
                        }
                    });

                    if (noResultsNode) noResultsNode.style.display = visibleCount === 0 ? '' : 'none';
                }

                // Wire up category buttons
                categoryButtons.forEach(btn => {
                    btn.addEventListener('click', function() {
                        // Toggle active class (style your CSS using .category-btn.active)
                        categoryButtons.forEach(b => b.classList.remove('active'));
                        this.classList.add('active');

                        const filter = this.dataset.filter || 'all';
                        applyFilter(filter);
                    });
                });

                // Initialize (show all)
                applyFilter('all');

                // Navigation arrows (safe attach)
                const left = document.querySelector('.arrow-left');
                const right = document.querySelector('.arrow-right');
                const catContainer = document.querySelector('.template-categories');

                if (left && catContainer) left.addEventListener('click', () => catContainer.scrollBy({
                    left: -200,
                    behavior: 'smooth'
                }));
                if (right && catContainer) right.addEventListener('click', () => catContainer.scrollBy({
                    left: 200,
                    behavior: 'smooth'
                }));

            } catch (err) {
                console.error('Template filter error:', err);
            }
        });
    </script>

    {{-- <script>
        document.addEventListener('DOMContentLoaded', function() {
            // const searchInput = document.getElementById('searchInput'); // This element does not exist on this page
            // const sortFilter = document.getElementById('sortFilter'); // This element does not exist on this page
            const categoryButtons = document.querySelectorAll('.category-btn');
            const templatesGrid = document.getElementById('templatesGrid');
            const templateColumns = Array.from(templatesGrid.querySelectorAll('.col-4')); // Select the column containers
            let activeCategoryFilter = 'all';

            function applyFiltersAndSort() {
                // const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
                // const sortBy = sortFilter ? sortFilter.value : 'featured';
                const row = templatesGrid.querySelector('.row');

                // 1. Filter
                const filteredColumns = templateColumns.filter(col => {
                    const card = col.querySelector('.template-card');
                    const name = card.dataset.name;
                    const category = card.dataset.category;

                    // const matchesSearch = name.includes(searchTerm);
                    const matchesCategory = activeCategoryFilter === 'all' || category === activeCategoryFilter;

                    return matchesCategory; // Only filter by category for now
                });

                // 2. Sort
                /*
                filteredColumns.sort((a, b) => {
                    const cardA = a.querySelector('.template-card');
                    const cardB = b.querySelector('.template-card');

                    switch (sortBy) {
                        case 'featured':
                            const aFeatured = cardA.dataset.featured === 'true';
                            const bFeatured = cardB.dataset.featured === 'true';
                            return bFeatured - aFeatured;
                        case 'newest':
                            return parseInt(cardB.dataset.id) - parseInt(cardA.dataset.id);
                        case 'alphabetical':
                            return cardA.dataset.name.localeCompare(cardB.dataset.name);
                        default:
                            return 0;
                    }
                });
                */

                // 3. Clear and re-append to the row
                row.innerHTML = ''; // Clear the row
                if (filteredColumns.length > 0) {
                    filteredColumns.forEach(col => row.appendChild(col));
                } else {
                    row.innerHTML = `<div class="col-12"><div class="text-center py-4"><i class="fas fa-palette fa-3x text-muted mb-3"></i><h5 class="text-muted">No templates match the filter</h5></div></div>`;
                }
            }

            // Event Listeners
            // if (searchInput) searchInput.addEventListener('input', applyFiltersAndSort);
            // if (sortFilter) sortFilter.addEventListener('change', applyFiltersAndSort);

            categoryButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Update active button
                    categoryButtons.forEach(btn => {
                        btn.classList.remove('category-all', 'active');
                        btn.classList.add('category-other');
                    });
                    this.classList.add('category-all', 'active');
                    this.classList.remove('category-other');

                    // Update filter and apply
                    activeCategoryFilter = this.dataset.filter;
                    applyFiltersAndSort();
                });
            });

            // Initial sort
            // applyFiltersAndSort(); // No need to run on load if 'all' is default
        });

        // Simple navigation functionality
        document.querySelector('.arrow-left').addEventListener('click', function() {
            document.querySelector('.template-categories').scrollBy({
                left: -200,
                behavior: 'smooth'
            });
        });

        document.querySelector('.arrow-right').addEventListener('click', function() {
            document.querySelector('.template-categories').scrollBy({
                left: 200,
                behavior: 'smooth'
            });
        });


    </script> --}}
@endsection