@extends('admin.layouts.app')

@section('title', 'Edit Page - ' . ucwords(str_replace('-', ' ', $page)))

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 rounded-2xl p-8 text-white">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div class="flex items-center space-x-4">
                <div class="p-3 bg-white/20 backdrop-blur-sm rounded-xl">
                    <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                </div>
                <div>
                    <h1 class="text-3xl font-bold">Edit Page</h1>
                    <p class="text-indigo-100 mt-1">{{ ucwords(str_replace('-', ' ', $page)) }}</p>
                </div>
            </div>
            <div class="flex items-center space-x-3">
                <div class="text-center">
                    <div class="text-sm text-indigo-100">Last Modified</div>
                    <div class="font-semibold">{{ date('M d, Y H:i') }}</div>
                </div>
                <a href="{{ route('pages.index') }}" class="bg-white/20 backdrop-blur-sm text-white px-6 py-3 rounded-xl hover:bg-white/30 transition-all flex items-center space-x-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    <span>Back to Pages</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Edit Form -->
    <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
        <!-- Tab Navigation -->
        <div class="border-b border-gray-200">
            <nav class="flex">
                <button type="button" id="content-tab" class="tab-button active px-8 py-4 text-sm font-medium text-indigo-600 border-b-2 border-indigo-600 bg-indigo-50/50">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                    Content
                </button>
                <button type="button" id="seo-tab" class="tab-button px-8 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-9 0V1m10 3V1m0 3l1 1v16a2 2 0 01-2 2H6a2 2 0 01-2-2V5l1-1z"></path>
                    </svg>
                    SEO & Settings
                </button>
                <button type="button" id="preview-tab" class="tab-button px-8 py-4 text-sm font-medium text-gray-500 hover:text-gray-700 border-b-2 border-transparent hover:border-gray-300">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                    Preview
                </button>
            </nav>
        </div>

        <form action="{{ route('pages.update', $page) }}" method="POST" id="page-form" class="divide-y divide-gray-200">
            @csrf
            @method('PUT')

            <!-- Content Tab -->
            <div id="content-panel" class="tab-panel p-8 space-y-8">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <!-- Main Content -->
                    <div class="lg:col-span-2 space-y-6">
                        <!-- Page Title -->
                        <div>
                            <label for="title" class="block text-sm font-semibold text-gray-700 mb-2">Page Title</label>
                            <input type="text" name="title" id="title" value="{{ old('title', $pageData['title'] ?? '') }}"
                                   class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent shadow-sm"
                                   placeholder="Enter page title..." required>
                            @error('title') <p class="mt-2 text-sm text-red-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>{{ $message }}</p> @enderror
                        </div>

                        <!-- Page Content -->
                        <div>
                            <label for="content" class="block text-sm font-semibold text-gray-700 mb-2">Page Content</label>
                            <div class="relative">
                                <textarea name="content" id="content" rows="20"
                                          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-500 focus:border-transparent shadow-sm resize-none"
                                          placeholder="Start writing your page content...">{{ old('content', $pageData['content'] ?? '') }}</textarea>
                                <div class="absolute bottom-3 right-3 text-xs text-gray-400 bg-white px-2 py-1 rounded">
                                    <span id="char-count">0</span> characters
                                </div>
                            </div>
                            @error('content') <p class="mt-2 text-sm text-red-600 flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>{{ $message }}</p> @enderror
                        </div>
                    </div>

                    <!-- Sidebar -->
                    <div class="space-y-6">
                        <!-- Quick Actions -->
                        <div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
                            <div class="space-y-3">
                                <button type="button" id="save-draft" class="w-full bg-white text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors border border-gray-200">
                                    Save as Draft
                                </button>
                                <button type="button" id="preview-btn" class="w-full bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
                                    Preview Changes
                                </button>
                            </div>
                        </div>

                        <!-- Page Stats -->
                        <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">Page Statistics</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">Words</span>
                                    <span class="font-semibold text-gray-900" id="word-count">0</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">Reading Time</span>
                                    <span class="font-semibold text-gray-900" id="reading-time">0 min</span>
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">Last Saved</span>
                                    <span class="font-semibold text-gray-900" id="last-saved">Never</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SEO & Settings Tab -->
            <div id="seo-panel" class="tab-panel hidden p-8 space-y-8">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- SEO Settings -->
                    <div class="space-y-6">
                        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-9 0V1m10 3V1m0 3l1 1v16a2 2 0 01-2 2H6a2 2 0 01-2-2V5l1-1z"></path>
                                </svg>
                                SEO Settings
                            </h3>

                            <div class="space-y-4">
                                <div>
                                    <label for="seo_title" class="block text-sm font-medium text-gray-700 mb-2">SEO Title</label>
                                    <input type="text" name="seo_title" id="seo_title" value="{{ old('seo_title', $pageData['seo_title'] ?? '') }}"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                           placeholder="Custom SEO title">
                                    <p class="text-xs text-gray-500 mt-1"><span id="seo-title-count">0</span>/60 characters</p>
                                </div>

                                <div>
                                    <label for="seo_keywords" class="block text-sm font-medium text-gray-700 mb-2">SEO Keywords</label>
                                    <input type="text" name="seo_keywords" id="seo_keywords" value="{{ old('seo_keywords', $pageData['seo_keywords'] ?? '') }}"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                           placeholder="keyword1, keyword2, keyword3">
                                </div>

                                <div>
                                    <label for="meta_description" class="block text-sm font-medium text-gray-700 mb-2">Meta Description</label>
                                    <textarea name="meta_description" id="meta_description" rows="3"
                                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                                              placeholder="Brief description for search engines">{{ old('meta_description', $pageData['meta_description'] ?? '') }}</textarea>
                                    <p class="text-xs text-gray-500 mt-1"><span id="meta-desc-count">0</span>/160 characters</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Page Settings -->
                    <div class="space-y-6">
                        <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                </svg>
                                Page Settings
                            </h3>

                            <div class="space-y-4">
                                <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200">
                                    <div class="flex items-center">
                                        <div class="w-4 h-4 bg-green-500 rounded-full mr-3"></div>
                                        <span class="text-sm font-medium text-gray-700">Page is Active</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $pageData['is_active'] ?? true) ? 'checked' : '' }} class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
                                    </label>
                                </div>

                                <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200">
                                    <div class="flex items-center">
                                        <div class="w-4 h-4 bg-blue-500 rounded-full mr-3"></div>
                                        <span class="text-sm font-medium text-gray-700">Show in Header</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="show_in_header" id="show_in_header" value="1" {{ old('show_in_header', $pageData['show_in_header'] ?? false) ? 'checked' : '' }} class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                    </label>
                                </div>

                                <div class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200">
                                    <div class="flex items-center">
                                        <div class="w-4 h-4 bg-purple-500 rounded-full mr-3"></div>
                                        <span class="text-sm font-medium text-gray-700">Show in Footer</span>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" name="show_in_footer" id="show_in_footer" value="1" {{ old('show_in_footer', $pageData['show_in_footer'] ?? false) ? 'checked' : '' }} class="sr-only peer">
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Save Actions -->
                        <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-4">Save Options</h3>
                            <div class="space-y-3">
                                <button type="submit" class="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-3 rounded-xl hover:from-indigo-700 hover:to-purple-700 transition-all font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    Save Changes
                                </button>
                                <a href="{{ route('pages.index') }}" class="w-full bg-gray-100 text-gray-700 px-6 py-3 rounded-xl hover:bg-gray-200 transition-colors font-medium text-center block">
                                    Cancel & Return
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Preview Tab -->
            <div id="preview-panel" class="tab-panel hidden p-8">
                <div class="max-w-4xl mx-auto">
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl p-8 border border-gray-200">
                        <div class="bg-white rounded-lg shadow-sm p-6">
                            <h1 class="text-3xl font-bold text-gray-900 mb-6" id="preview-title">{{ old('title', $pageData['title'] ?? 'Page Title') }}</h1>
                            <div class="prose prose-lg max-w-none" id="preview-content">
                                {!! old('content', $pageData['content'] ?? '<p class="text-gray-500 italic">Start writing your page content to see the preview here...</p>') !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Preview Section -->
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Preview</h3>
        <div class="border rounded-lg p-4 bg-gray-50">
            <h1 class="text-2xl font-bold mb-4">{{ old('title', $pageData['title'] ?? 'Page Title') }}</h1>
            <div class="prose max-w-none">
                {!! old('content', $pageData['content'] ?? '<p>Page content will appear here...</p>') !!}
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Auto-save functionality (optional)
let autoSaveTimeout;
function autoSave() {
    clearTimeout(autoSaveTimeout);
    autoSaveTimeout = setTimeout(() => {
        // Implement auto-save logic here if needed
        console.log('Auto-saving...');
    }, 30000); // 30 seconds
}

// Update preview on content change
document.getElementById('content').addEventListener('input', function() {
    const preview = document.querySelector('.prose');
    if (preview) {
        preview.innerHTML = this.value || '<p>Page content will appear here...</p>';
    }
});

document.getElementById('title').addEventListener('input', function() {
    const titlePreview = document.querySelector('h1');
    if (titlePreview) {
        titlePreview.textContent = this.value || 'Page Title';
    }
});
</script>
@endpush
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tab functionality
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabPanels = document.querySelectorAll('.tab-panel');

    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Remove active class from all tabs
            tabButtons.forEach(btn => {
                btn.classList.remove('active', 'text-indigo-600', 'border-indigo-600', 'bg-indigo-50/50');
                btn.classList.add('text-gray-500', 'border-transparent');
            });

            // Hide all panels
            tabPanels.forEach(panel => panel.classList.add('hidden'));

            // Add active class to clicked tab
            button.classList.add('active', 'text-indigo-600', 'border-indigo-600', 'bg-indigo-50/50');
            button.classList.remove('text-gray-500', 'border-transparent');

            // Show corresponding panel
            const targetPanel = document.getElementById(button.id.replace('-tab', '-panel'));
            if (targetPanel) {
                targetPanel.classList.remove('hidden');
            }
        });
    });

    // Character and word counting
    const contentTextarea = document.getElementById('content');
    const seoTitleInput = document.getElementById('seo_title');
    const metaDescTextarea = document.getElementById('meta_description');
    const charCount = document.getElementById('char-count');
    const wordCount = document.getElementById('word-count');
    const readingTime = document.getElementById('reading-time');
    const seoTitleCount = document.getElementById('seo-title-count');
    const metaDescCount = document.getElementById('meta-desc-count');

    function updateCounts() {
        const content = contentTextarea.value;
        const seoTitle = seoTitleInput.value;
        const metaDesc = metaDescTextarea.value;

        // Character count
        charCount.textContent = content.length;

        // Word count
        const words = content.trim() ? content.trim().split(/\s+/).length : 0;
        wordCount.textContent = words;

        // Reading time (assuming 200 words per minute)
        const minutes = Math.ceil(words / 200);
        readingTime.textContent = minutes + ' min';

        // SEO title count
        seoTitleCount.textContent = seoTitle.length;

        // Meta description count
        metaDescCount.textContent = metaDesc.length;

        // Update preview
        updatePreview();
    }

    function updatePreview() {
        const title = document.getElementById('title').value || 'Page Title';
        const content = contentTextarea.value || '<p class="text-gray-500 italic">Start writing your page content to see the preview here...</p>';

        document.getElementById('preview-title').textContent = title;
        document.getElementById('preview-content').innerHTML = content;
    }

    // Event listeners
    contentTextarea.addEventListener('input', updateCounts);
    seoTitleInput.addEventListener('input', updateCounts);
    metaDescTextarea.addEventListener('input', updateCounts);
    document.getElementById('title').addEventListener('input', updatePreview);

    // Initialize counts
    updateCounts();

    // Auto-save functionality
    let autoSaveTimeout;
    const lastSaved = document.getElementById('last-saved');

    function autoSave() {
        clearTimeout(autoSaveTimeout);
        autoSaveTimeout = setTimeout(() => {
            // Here you would typically send an AJAX request to save the draft
            // For now, we'll just update the timestamp
            const now = new Date();
            lastSaved.textContent = now.toLocaleTimeString();
            showNotification('Draft saved automatically', 'success');
        }, 3000); // Save after 3 seconds of inactivity
    }

    // Add auto-save listeners to form inputs
    document.querySelectorAll('input, textarea').forEach(element => {
        element.addEventListener('input', autoSave);
    });

    // Preview button functionality
    document.getElementById('preview-btn').addEventListener('click', () => {
        document.getElementById('preview-tab').click();
    });

    // Save draft button
    document.getElementById('save-draft').addEventListener('click', () => {
        // Here you would send an AJAX request to save as draft
        showNotification('Draft saved successfully!', 'success');
        const now = new Date();
        lastSaved.textContent = now.toLocaleTimeString();
    });

    // Notification system
    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 ${
            type === 'success' ? 'bg-green-500 text-white' :
            type === 'error' ? 'bg-red-500 text-white' :
            'bg-blue-500 text-white'
        }`;
        notification.innerHTML = `
            <div class="flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${
                        type === 'success' ? 'M5 13l4 4L19 7' :
                        type === 'error' ? 'M6 18L18 6M6 6l12 12' :
                        'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
                    }"></path>
                </svg>
                ${message}
            </div>
        `;

        document.body.appendChild(notification);

        // Animate in
        setTimeout(() => {
            notification.classList.remove('translate-x-full');
        }, 100);

        // Auto remove after 3 seconds
        setTimeout(() => {
            notification.classList.add('translate-x-full');
            setTimeout(() => {
                document.body.removeChild(notification);
            }, 300);
        }, 3000);
    }

    // Form submission with loading state
    document.getElementById('page-form').addEventListener('submit', function(e) {
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;

        submitBtn.disabled = true;
        submitBtn.innerHTML = `
            <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
            </svg>
            Saving...
        `;

        // Re-enable after 3 seconds (in case of error)
        setTimeout(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalText;
        }, 3000);
    });

    // Keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl/Cmd + S to save
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
            e.preventDefault();
            document.querySelector('button[type="submit"]').click();
        }

        // Ctrl/Cmd + Shift + P to preview
        if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'P') {
            e.preventDefault();
            document.getElementById('preview-tab').click();
        }
    });
});
</script>
@endsection