{{-- resources/views/agency/page/partials/add-section-modal.blade.php --}}

<div class="section-modal" id="addSectionModal" style="display: none;">
    <div class="section-modal-overlay" onclick="closeAddSectionModal()"></div>
    <div class="section-modal-content">
        <div class="modal-header">
            <h3>Yeni Bölüm Ekle</h3>
            <button type="button" class="modal-close" onclick="closeAddSectionModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="modal-body">
            <div class="section-search mb-3">
                <input type="text"
                       id="sectionSearchInput"
                       class="form-control"
                       placeholder="Bölüm ara..."
                       onkeyup="filterSections()">
            </div>

            <div class="section-categories">
                <div class="category-tabs">
                    <button class="category-tab active" data-category="all" onclick="filterByCategory('all')">
                        Tümü
                    </button>
                    <button class="category-tab" data-category="header" onclick="filterByCategory('header')">
                        Header
                    </button>
                    <button class="category-tab" data-category="content" onclick="filterByCategory('content')">
                        İçerik
                    </button>
                    <button class="category-tab" data-category="tours" onclick="filterByCategory('tours')">
                        Turlar
                    </button>
                    <button class="category-tab" data-category="social" onclick="filterByCategory('social')">
                        Sosyal
                    </button>
                    <button class="category-tab" data-category="footer" onclick="filterByCategory('footer')">
                        Footer
                    </button>
                </div>

                <div class="section-types-grid" id="sectionTypesGrid">
                    <!-- Will be populated dynamically -->
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .section-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
    }

    .section-modal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 1;
    }

    .section-modal-content {
        position: relative;
        background: #fff;
        border-radius: 12px;
        width: 90%;
        max-width: 800px;
        max-height: 90vh;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        z-index: 999999;
        animation: sectionModalSlideIn 0.3s ease-out;
    }

    @keyframes sectionModalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .section-modal .modal-header {
        padding: 20px 24px;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: white;
        z-index: 1;
    }

    .section-modal .modal-header h3 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #1f2937;
    }

    .section-modal .modal-close {
        background: none;
        border: none;
        font-size: 20px;
        color: #6b7280;
        cursor: pointer;
        padding: 8px;
        border-radius: 6px;
        transition: all 0.2s;
    }

    .section-modal .modal-close:hover {
        background: #f3f4f6;
        color: #374151;
    }

    .section-modal .modal-body {
        padding: 24px;
        overflow-y: auto;
        flex: 1;
        background: white;
        z-index: 1;
    }

    .section-search {
        margin-bottom: 20px;
    }

    .category-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .category-tab {
        padding: 8px 16px;
        border: 1px solid #e5e7eb;
        background: #fff;
        border-radius: 20px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        color: #6b7280;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .category-tab:hover {
        background: #f3f4f6;
        color: #374151;
    }

    .category-tab.active {
        background: #3B82F6;
        color: #fff;
        border-color: #3B82F6;
    }

    .section-types-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
    }

    .section-type-card {
        padding: 16px;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .section-type-card:hover {
        border-color: #3B82F6;
        background: #EFF6FF;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }

    .section-type-icon {
        font-size: 32px;
        margin-bottom: 8px;
        color: #3B82F6;
    }

    .section-type-name {
        font-weight: 600;
        font-size: 14px;
        color: #1f2937;
        margin-bottom: 4px;
    }

    .section-type-description {
        font-size: 12px;
        color: #6b7280;
        line-height: 1.4;
    }

    .section-type-card[style*="display: none"] {
        display: none !important;
    }
</style>

<script>
    // Icon mappings
    const sectionIcons = {
        hero: '🖼️',
        about: 'ℹ️',
        features: '⭐',
        services: '💼',
        tours_grid: '📱',
        tours_carousel: '🎠',
        tours_list: '📋',
        tours_map: '🗺️',
        tours_masonry: '🎨',
        tour_search: '🔍',
        categories: '📁',
        statistics: '📊',
        testimonials: '💬',
        team: '👥',
        blog: '📰',
        gallery: '📷',
        faq: '❓',
        contact: '📞',
        newsletter: '✉️',
        custom_html: '💻',
    };

    // Will be loaded from API
    let availableSectionTypes = [];
    window.currentCategory = 'all';

    // Load available sections from API
    async function loadAvailableSections() {
        try {
            const response = await axios.get('{{ route("agency.page.show") }}');
            const sections = response.data.available_sections || [];

            // Ensure it's an array
            availableSectionTypes = Array.isArray(sections) ? sections : Object.values(sections);

            console.log('Available sections loaded:', availableSectionTypes);
            console.log('Is array:', Array.isArray(availableSectionTypes));
        } catch (error) {
            console.error('Error loading available sections:', error);
            showAlert('Bölüm tipleri yüklenirken hata oluştu', 'error');
            availableSectionTypes = [];
        }
    }

    function renderSectionTypes(filter = '') {
        const grid = document.getElementById('sectionTypesGrid');
        if (!grid) {
            console.warn('Section types grid not found');
            return;
        }

        grid.innerHTML = '';

        // Check if array is empty or not loaded yet
        if (!Array.isArray(availableSectionTypes) || availableSectionTypes.length === 0) {
            grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #6b7280;">Kullanılabilir bölüm bulunamadı...</div>';
            return;
        }

        let renderedCount = 0;
        const currentCat = window.currentCategory || 'all';

        availableSectionTypes.forEach(section => {
            if (!section || !section.name) {
                console.warn('Invalid section:', section);
                return;
            }

            const matchesSearch = filter === '' ||
                section.name.toLowerCase().includes(filter.toLowerCase()) ||
                section.description.toLowerCase().includes(filter.toLowerCase());

            const matchesCategory = currentCat === 'all' || section.category === currentCat;

            if (matchesSearch && matchesCategory) {
                const card = document.createElement('div');
                card.className = 'section-type-card';
                card.onclick = () => addSection(section.type);
                card.innerHTML = `
                    <div class="section-type-icon">${sectionIcons[section.type] || '📄'}</div>
                    <div class="section-type-name">${section.name}</div>
                    <div class="section-type-description">${section.description || ''}</div>
                `;
                grid.appendChild(card);
                renderedCount++;
            }
        });

        console.log(`Rendered ${renderedCount} section types for category: ${currentCat}, filter: "${filter}"`);

        if (grid.children.length === 0) {
            grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #6b7280;">Sonuç bulunamadı</div>';
        }
    }

    function filterSections() {
        const filter = document.getElementById('sectionSearchInput').value;
        renderSectionTypes(filter);
    }

    function filterByCategory(category) {
        window.currentCategory = category;

        document.querySelectorAll('.category-tab').forEach(tab => {
            tab.classList.remove('active');
            if (tab.dataset.category === category) {
                tab.classList.add('active');
            }
        });

        const filter = document.getElementById('sectionSearchInput').value;
        renderSectionTypes(filter);
    }

    async function addSection(type) {
        try {
            const section = availableSectionTypes.find(s => s.type === type);

            const response = await axios.post('{{ route("agency.page.sections.store") }}', {
                section_type: type,
                title: section ? section.name : '',
                is_active: true
            }, {
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            showAlert('Bölüm eklendi', 'success');
            closeAddSectionModal();
            setTimeout(() => window.location.reload(), 1000);
        } catch (error) {
            console.error(error);
            showAlert('Bölüm eklenirken hata oluştu', 'error');
        }
    }
</script>