<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ isNew ? 'Create' : 'Edit' }} Static Page - Admin - LocalLendables</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Quill Rich Text Editor -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/main.css">
    
    <style>
        .admin-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
        }
        .editor-container {
            min-height: 300px;
            background: white;
            border: 1px solid #ccc;
        }
        .variable-helper {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .variable-tag {
            display: inline-block;
            background: #e9ecef;
            border: 1px solid #adb5bd;
            border-radius: 0.25rem;
            padding: 0.25rem 0.5rem;
            margin: 0.125rem;
            cursor: pointer;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }
        .variable-tag:hover {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
        .breadcrumb {
            background: transparent;
            padding: 0;
        }
        .preview-section {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 1rem;
        }
        .form-control:focus, .ql-editor:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
    </style>
</head>
<body>
    {% include 'common-header.html.twig' %}
    
    <div class="admin-header">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h1><i class="fas fa-{{ isNew ? 'plus' : 'edit' }}"></i> {{ isNew ? 'Create New' : 'Edit' }} Static Page</h1>
                    <p class="mb-0">{{ isNew ? 'Create a new static page with dynamic content' : 'Edit page content and settings' }}</p>
                </div>
                <div class="col-md-4 text-md-end">
                    <a href="/admin/static-pages" class="btn btn-light">
                        <i class="fas fa-arrow-left"></i> Back to Pages
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container">


        <form method="POST" action="{{ isNew ? '/admin/static-pages/create' : '/admin/static-pages/' ~ page.slug ~ '/update' }}">
            <div class="row">
                <!-- Main Form -->
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-file-alt"></i> Page Details</h5>
                        </div>
                        <div class="card-body">
                            <!-- Title -->
                            <div class="mb-3">
                                <label for="title" class="form-label">Page Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="title" name="title" 
                                       value="{{ page.title ?? '' }}" required>
                                <div class="form-text">This will appear as the page heading and in the browser title.</div>
                            </div>

                            <!-- Slug -->
                            <div class="mb-3">
                                <label for="slug" class="form-label">URL Slug <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ site_url }}/</span>
                                    <input type="text" class="form-control" id="slug" name="slug" 
                                           value="{{ page.slug ?? '' }}" required pattern="[a-z0-9-]+">
                                </div>
                                <div class="form-text">URL-friendly identifier (lowercase letters, numbers, and hyphens only).</div>
                            </div>

                            <!-- Content Editor -->
                            <div class="mb-3">
                                <label class="form-label">Page Content <span class="text-danger">*</span></label>
                                <div id="editor" class="editor-container"></div>
                                <textarea name="content" id="content" style="display: none;">{{ page.content ?? '' }}</textarea>
                                <div class="form-text">Use the rich text editor to format your content. Click variable tags to insert them.</div>
                            </div>
                        </div>
                    </div>

                    <!-- Preview Section -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-eye"></i> Live Preview</h5>
                        </div>
                        <div class="card-body">
                            <div id="preview" class="preview-section">
                                <p class="text-muted"><i class="fas fa-info-circle"></i> Preview will update as you type...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <!-- Page Settings -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-cogs"></i> Page Settings</h5>
                        </div>
                        <div class="card-body">
                            <!-- Active Status -->
                            <div class="mb-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="isActive" name="isActive" 
                                           {{ (page.isActive ?? true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="isActive">
                                        Page is Active
                                    </label>
                                </div>
                                <div class="form-text">Inactive pages are not accessible to visitors.</div>
                            </div>

                            <!-- Sort Order -->
                            <div class="mb-3">
                                <label for="sortOrder" class="form-label">Sort Order</label>
                                <input type="number" class="form-control" id="sortOrder" name="sortOrder" 
                                       value="{{ page.sortOrder ?? 0 }}" min="0">
                                <div class="form-text">Higher numbers appear first in navigation.</div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> {{ isNew ? 'Create Page' : 'Save Changes' }}
                                </button>
                                
                                {% if not isNew %}
                                <a href="/{{ page.slug }}" class="btn btn-outline-secondary" target="_blank">
                                    <i class="fas fa-external-link-alt"></i> View Live Page
                                </a>
                                
                                <button type="button" class="btn btn-outline-danger" onclick="confirmDelete()">
                                    <i class="fas fa-trash"></i> Delete Page
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Dynamic Variables Helper -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <h5 class="mb-0"><i class="fas fa-code"></i> Dynamic Variables</h5>
                        </div>
                        <div class="card-body">
                            <div class="variable-helper">
                                <h6>Site Variables:</h6>
                                <span class="variable-tag" onclick="insertVariable('{{site_name}}')">{{site_name}}</span>
                                <span class="variable-tag" onclick="insertVariable('{{total_members}}')">{{total_members}}</span>
                                <span class="variable-tag" onclick="insertVariable('{{total_items}}')">{{total_items}}</span>
                                <span class="variable-tag" onclick="insertVariable('{{active_loans}}')">{{active_loans}}</span>
                                
                                <h6 class="mt-3">Contact Variables:</h6>
                                <span class="variable-tag" onclick="insertVariable('{{manager_name}}')">{{manager_name}}</span>
                                <span class="variable-tag" onclick="insertVariable('{{manager_email}}')">{{manager_email}}</span>
                                <span class="variable-tag" onclick="insertVariable('{{community_phone}}')">{{community_phone}}</span>
                                
                                <h6 class="mt-3">System Variables:</h6>
                                <span class="variable-tag" onclick="insertVariable('{{last_updated}}')">{{last_updated}}</span>
                                <span class="variable-tag" onclick="insertVariable('{{current_date}}')">{{current_date}}</span>
                            </div>
                            <div class="form-text">
                                <i class="fas fa-info-circle"></i> Click any variable to insert it into your content.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {% include 'common-footer.html.twig' %}

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Quill Rich Text Editor -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
    
    <script>
        // Initialize Quill editor
        var quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'blockquote', 'code-block'],
                    [{ 'align': [] }],
                    ['clean']
                ]
            }
        });

        // Load existing content
        const existingContent = document.getElementById('content').value;
        if (existingContent) {
            quill.root.innerHTML = existingContent;
        }

        // Sync editor content with hidden textarea
        quill.on('text-change', function() {
            document.getElementById('content').value = quill.root.innerHTML;
            updatePreview();
        });

        // Auto-generate slug from title
        document.getElementById('title').addEventListener('input', function() {
            const title = this.value;
            const slug = title.toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim('-');
            document.getElementById('slug').value = slug;
        });

        // Insert variable into editor
        function insertVariable(variable) {
            const range = quill.getSelection(true);
            quill.insertText(range.index, variable);
        }

        // Update preview
        function updatePreview() {
            const content = quill.root.innerHTML;
            // Simple variable replacement for preview
            let previewContent = content
                .replace(/\{\{site_name\}\}/g, 'LocalLendables')
                .replace(/\{\{total_members\}\}/g, '42')
                .replace(/\{\{total_items\}\}/g, '156')
                .replace(/\{\{active_loans\}\}/g, '23')
                .replace(/\{\{manager_name\}\}/g, 'Community Manager')
                .replace(/\{\{manager_email\}\}/g, 'manager@locallendables.com')
                .replace(/\{\{community_phone\}\}/g, '(555) 123-4567')
                .replace(/\{\{last_updated\}\}/g, new Date().toLocaleDateString())
                .replace(/\{\{current_date\}\}/g, new Date().toLocaleDateString());
            
            document.getElementById('preview').innerHTML = previewContent || '<p class="text-muted"><i class="fas fa-info-circle"></i> Preview will update as you type...</p>';
        }

        // Delete confirmation
        function confirmDelete() {
            if (confirm('Are you sure you want to delete this page? This action cannot be undone.')) {
                window.location.href = '/admin/static-pages/{{ page.slug }}/delete';
            }
        }

        // Initial preview update
        updatePreview();
    </script>
</body>
</html>