<div class="sidebar-section">
    <h3 class="sidebar-title">Tema Seçimi</h3>

    <div class="modern-theme-grid">
        @foreach($themes as $theme)
            <div class="modern-theme-card {{ $page->theme_id == $theme->id ? 'active' : '' }} {{ !$theme->is_active ? 'disabled' : '' }}"
                data-theme-id="{{ $theme->id }}"
                onclick="{{ $theme->is_active ? 'selectTheme(' . $theme->id . ')' : 'return false;' }}">
                <div class="theme-card-icon">
                    <i class="fas fa-palette"></i>
                </div>
                <div class="theme-card-content">
                    <div class="theme-card-name">
                        {{ $theme->display_name }}
                        @if(!$theme->is_active)
                            <span class="coming-soon-badge">Yakında Gelecek</span>
                        @endif
                    </div>
                    <div class="theme-card-description">{{ $theme->description }}</div>
                </div>
                <div class="theme-card-check">
                    <i class="fas {{ $theme->is_active ? 'fa-check-circle' : 'fa-lock' }}"></i>
                </div>
            </div>
        @endforeach
    </div>

    @if($page->theme)
        <hr style="margin: 1.5rem 0; border: none; border-top: 1px solid var(--gray-200);">

        <h4 class="sidebar-title" style="font-size: 14px; margin-bottom: 10px;">Tema Renkleri</h4>

        <div class="theme-colors">
            <div class="form-group">
                <label class="form-label">Ana Renk</label>
                <div class="color-picker-wrapper">
                    <input type="text" id="primaryColorText" class="form-control color-input"
                        value="{{ $page->getThemeSetting('colors.primary', '#3B82F6') }}"
                        onblur="updateColorFromText('primary', this.value)">
                    <input type="color" id="primaryColor" class="color-picker-native"
                        value="{{ $page->getThemeSetting('colors.primary', '#3B82F6') }}"
                        onchange="updateColorFromNative('primary', this.value)">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">İkincil Renk</label>
                <div class="color-picker-wrapper">
                    <input type="text" id="secondaryColorText" class="form-control color-input"
                        value="{{ $page->getThemeSetting('colors.secondary', '#8B5CF6') }}"
                        onblur="updateColorFromText('secondary', this.value)">
                    <input type="color" id="secondaryColor" class="color-picker-native"
                        value="{{ $page->getThemeSetting('colors.secondary', '#8B5CF6') }}"
                        onchange="updateColorFromNative('secondary', this.value)">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label">Vurgu Rengi</label>
                <div class="color-picker-wrapper">
                    <input type="text" id="accentColorText" class="form-control color-input"
                        value="{{ $page->getThemeSetting('colors.accent', '#F59E0B') }}"
                        onblur="updateColorFromText('accent', this.value)">
                    <input type="color" id="accentColor" class="color-picker-native"
                        value="{{ $page->getThemeSetting('colors.accent', '#F59E0B') }}"
                        onchange="updateColorFromNative('accent', this.value)">
                </div>
            </div>

            <button type="button" class="btn-reset w-100" onclick="resetThemeColors()" style="margin-top: 0.5rem;">
                <i class="fas fa-undo"></i> Renkleri Sıfırla
            </button>
        </div>

        <hr style="margin: 1.5rem 0; border: none; border-top: 1px solid var(--gray-200);">

        <h4 class="sidebar-title" style="font-size: 14px; margin-bottom: 10px;">Tipografi</h4>

        <div class="form-group">
            <label class="form-label">Font Ailesi</label>
            <input type="hidden" id="fontFamilyInput"
                value="{{ $page->getThemeSetting('typography.font_family', 'Inter, sans-serif') }}">
            <div class="font-selector-grid">
                <div class="font-option {{ $page->getThemeSetting('typography.font_family', 'Inter, sans-serif') == 'Inter, sans-serif' ? 'active' : '' }}"
                    data-font="Inter, sans-serif" onclick="selectFont('font_family', 'Inter, sans-serif')">
                    <div class="font-preview" style="font-family: Inter, sans-serif;">Aa</div>
                    <div class="font-name">Inter</div>
                </div>
                <div class="font-option {{ $page->getThemeSetting('typography.font_family', 'Inter, sans-serif') == 'Poppins, sans-serif' ? 'active' : '' }}"
                    data-font="Poppins, sans-serif" onclick="selectFont('font_family', 'Poppins, sans-serif')">
                    <div class="font-preview" style="font-family: Poppins, sans-serif;">Aa</div>
                    <div class="font-name">Poppins</div>
                </div>
                <div class="font-option {{ $page->getThemeSetting('typography.font_family', 'Inter, sans-serif') == 'Roboto, sans-serif' ? 'active' : '' }}"
                    data-font="Roboto, sans-serif" onclick="selectFont('font_family', 'Roboto, sans-serif')">
                    <div class="font-preview" style="font-family: Roboto, sans-serif;">Aa</div>
                    <div class="font-name">Roboto</div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="form-label">Başlık Font</label>
            <input type="hidden" id="headingFontInput"
                value="{{ $page->getThemeSetting('typography.heading_font', 'Inter, sans-serif') }}">
            <div class="font-selector-grid">
                <div class="font-option {{ $page->getThemeSetting('typography.heading_font', 'Inter, sans-serif') == 'Inter, sans-serif' ? 'active' : '' }}"
                    data-heading-font="Inter, sans-serif" onclick="selectFont('heading_font', 'Inter, sans-serif')">
                    <div class="font-preview" style="font-family: Inter, sans-serif;">Aa</div>
                    <div class="font-name">Inter</div>
                </div>
                <div class="font-option {{ $page->getThemeSetting('typography.heading_font', 'Inter, sans-serif') == 'Poppins, sans-serif' ? 'active' : '' }}"
                    data-heading-font="Poppins, sans-serif" onclick="selectFont('heading_font', 'Poppins, sans-serif')">
                    <div class="font-preview" style="font-family: Poppins, sans-serif;">Aa</div>
                    <div class="font-name">Poppins</div>
                </div>
                <div class="font-option {{ $page->getThemeSetting('typography.heading_font', 'Inter, sans-serif') == 'Bebas Neue, sans-serif' ? 'active' : '' }}"
                    data-heading-font="Bebas Neue, sans-serif"
                    onclick="selectFont('heading_font', 'Bebas Neue, sans-serif')">
                    <div class="font-preview" style="font-family: Bebas Neue, sans-serif;">Aa</div>
                    <div class="font-name">Bebas Neue</div>
                </div>
            </div>
        </div>
    @endif
</div>

<style>
    /* Modern Theme Cards */
    .modern-theme-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-top: 0.75rem;
    }

    .modern-theme-card {
        position: relative;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
        border: 2px solid #e5e7eb;
        border-radius: 10px;
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .modern-theme-card:hover {
        border-color: #3b82f6;
        background: #f0f9ff;
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
    }

    .modern-theme-card.active {
        border-color: #3b82f6;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
    }

    .theme-card-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 8px;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: white;
        font-size: 1.25rem;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .modern-theme-card:hover .theme-card-icon {
        transform: scale(1.1) rotate(5deg);
    }

    .modern-theme-card.active .theme-card-icon {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    }

    .theme-card-content {
        flex: 1;
    }

    .theme-card-name {
        font-size: 0.938rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 0.25rem;
    }

    .theme-card-description {
        font-size: 0.75rem;
        color: #6b7280;
        line-height: 1.4;
    }

    .theme-card-check {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: #d1d5db;
        font-size: 1.25rem;
        transition: all 0.3s ease;
    }

    .modern-theme-card.active .theme-card-check {
        color: #3b82f6;
        transform: scale(1.2);
    }

    .modern-theme-card.active .theme-card-name {
        color: #1e40af;
    }

    .modern-theme-card.active .theme-card-description {
        color: #3b82f6;
    }

    .modern-theme-card.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background: #f9fafb;
        border-color: #e5e7eb;
    }

    .modern-theme-card.disabled:hover {
        border-color: #e5e7eb;
        background: #f9fafb;
        transform: none;
        box-shadow: none;
    }

    .modern-theme-card.disabled .theme-card-icon {
        background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    }

    .modern-theme-card.disabled:hover .theme-card-icon {
        transform: none;
    }

    .modern-theme-card.disabled .theme-card-name {
        color: #6b7280;
    }

    .modern-theme-card.disabled .theme-card-description {
        color: #9ca3af;
    }

    .modern-theme-card.disabled .theme-card-check {
        color: #9ca3af;
    }

    .coming-soon-badge {
        display: inline-block;
        font-size: 0.625rem;
        font-weight: 600;
        padding: 0.125rem 0.5rem;
        margin-left: 0.5rem;
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        color: white;
        border-radius: 9999px;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    }

    /* Font Selector */
    .font-selector-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .font-option {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.875rem 0.5rem;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        background: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .font-option:hover {
        border-color: #3b82f6;
        background: #f0f9ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.1);
    }

    .font-option.active {
        border-color: #3b82f6;
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        box-shadow: 0 3px 10px rgba(59, 130, 246, 0.2);
    }

    .font-option.active::after {
        content: '\f00c';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        position: absolute;
        top: 6px;
        right: 6px;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #3b82f6;
        color: white;
        border-radius: 50%;
        font-size: 0.625rem;
    }

    .font-preview {
        font-size: 2rem;
        font-weight: 600;
        color: #111827;
        margin-bottom: 0.375rem;
        transition: all 0.3s ease;
    }

    .font-option:hover .font-preview {
        color: #3b82f6;
        transform: scale(1.1);
    }

    .font-option.active .font-preview {
        color: #2563eb;
    }

    .font-name {
        font-size: 0.75rem;
        font-weight: 500;
        color: #6b7280;
        text-align: center;
    }

    .font-option.active .font-name {
        color: #1e40af;
        font-weight: 600;
    }
</style>

<script>
    async function selectFont(key, font) {
        // Update active states based on the key
        const selector = key === 'font_family' ? '[data-font]' : '[data-heading-font]';
        document.querySelectorAll(`.font-option${selector}`).forEach(option => {
            option.classList.remove('active');
        });

        // Add active class to selected option
        const attribute = key === 'font_family' ? 'data-font' : 'data-heading-font';
        const selectedOption = document.querySelector(`.font-option[${attribute}="${font}"]`);
        if (selectedOption) {
            selectedOption.classList.add('active');
        }

        // Update typography via API
        await updateTypography(key, font);
    }

    async function updateColorFromText(field, color) {
        // Hex formatı kontrolü
        if (!/^#[0-9A-F]{6}$/i.test(color)) {
            showAlert('Lütfen geçerli bir HEX kod girin (örn: #3B82F6)', 'error');
            return;
        }

        // Renk picker'ı güncelle
        const picker = document.getElementById(`${field}Color`);
        if (picker) {
            picker.value = color;
        }

        await updateColorFromNative(field, color);
    }

    async function updateColorFromNative(field, color) {
        console.log('Updating color:', field, color);

        // UI'ı güncelle
        const textInput = document.getElementById(`${field}ColorText`);
        if (textInput) {
            textInput.value = color.toUpperCase();
        }

        // Server'a kaydet
        try {
            const response = await axios.put('{{ route("agency.page.theme.settings") }}', {
                [`colors.${field}`]: color
            }, {
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });

            console.log('Server response:', response.data);
            showAlert('Renk güncellendi', 'success');
        } catch (error) {
            console.error('Update error:', error.response || error);
            showAlert('Renk güncellenirken hata oluştu', 'error');
        }
    }

    async function selectTheme(themeId) {
        if (!confirm('Temayı değiştirmek istediğinize emin misiniz?')) return;

        try {
            await axios.post('{{ route("agency.page.theme.change") }}', {
                theme_id: themeId
            }, {
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });

            showAlert('Tema değiştirildi', 'success');
            setTimeout(() => window.location.reload(), 1000);
        } catch (error) {
            console.error(error);
            showAlert('Tema değiştirilirken hata oluştu', 'error');
        }
    }

    async function resetThemeColors() {
        if (!confirm('Renkleri sıfırlamak istediğinize emin misiniz?')) return;

        try {
            await axios.put('{{ route("agency.page.theme.settings") }}', {
                'colors.primary': null,
                'colors.secondary': null,
                'colors.accent': null
            }, {
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });

            showAlert('Renkler sıfırlandı', 'success');
            setTimeout(() => window.location.reload(), 1000);
        } catch (error) {
            console.error(error);
            showAlert('Renkler sıfırlanırken hata oluştu', 'error');
        }
    }

    async function updateTypography(key, value) {
        try {
            await axios.put('{{ route("agency.page.theme.settings") }}', {
                [`typography.${key}`]: value
            }, {
                headers: { 'X-CSRF-TOKEN': csrfToken }
            });

            showAlert('Tipografi güncellendi', 'success');
        } catch (error) {
            console.error(error);
            showAlert('Tipografi güncellenirken hata oluştu', 'error');
        }
    }
</script>