{% extends "layouts/dashboard.twig" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{{ title }}</h5>
                </div>
                <div class="card-body">
                    {% if session_has('success') %}
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session_get('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endif %}
                    
                    {% if errors|length > 0 %}
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                {% for error in errors.all() %}
                                    <li>{{ error }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}
                    
                    <form action="{{ page ? url('/admin/pages/' ~ page.pages_id) : url('/admin/pages') }}" method="POST">
                        {% if page %}
                            <input type="hidden" name="_method" value="PUT">
                        {% endif %}
                        
                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-3">
                                    <label for="pages_title" class="form-label">{{ __('pagebuilder.title') }} *</label>
                                    <input type="text" class="form-control" id="pages_title" name="pages_title" value="{{ old('pages_title', page.pages_title ?? '') }}" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="pages_slug" class="form-label">{{ __('pagebuilder.slug') }} *</label>
                                    <input type="text" class="form-control" id="pages_slug" name="pages_slug" value="{{ old('pages_slug', page.pages_slug ?? '') }}" required>
                                    <div class="form-text">{{ __('pagebuilder.slug_help') }}</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="pages_content" class="form-label">{{ __('pagebuilder.form.content_label') }}</label>
                            <div id="quill-editor" style="height: 300px;" data-target="pages_content">{{ old('pages_content', page.pages_content ?? '')|raw }}</div>
                            <textarea class="form-control" id="pages_content" name="pages_content" style="display:none">{{ old('pages_content', page.pages_content ?? '') }}</textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="pages_meta_title" class="form-label">{{ __('pagebuilder.meta_title') }}</label>
                                    <input type="text" class="form-control" id="pages_meta_title" name="pages_meta_title" value="{{ old('pages_meta_title', page.pages_meta_title ?? '') }}">
                                    <div class="form-text">{{ __('pagebuilder.meta_title_help') }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="pages_meta_keywords" class="form-label">{{ __('pagebuilder.meta_keywords') }}</label>
                                    <input type="text" class="form-control" id="pages_meta_keywords" name="pages_meta_keywords" value="{{ old('pages_meta_keywords', page.pages_meta_keywords ?? '') }}">
                                    <div class="form-text">{{ __('pagebuilder.meta_keywords_help') }}</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="pages_meta_description" class="form-label">{{ __('pagebuilder.meta_description') }}</label>
                            <textarea class="form-control" id="pages_meta_description" name="pages_meta_description" rows="3">{{ old('pages_meta_description', page.pages_meta_description ?? '') }}</textarea>
                            <div class="form-text">{{ __('pagebuilder.meta_description_help') }}</div>
                        </div>
                        
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="mb-3 form-check">
                                    <input type="checkbox" class="form-check-input" id="pages_is_published" name="pages_is_published" value="1" {{ old('pages_is_published', page.pages_is_published ?? false) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="pages_is_published">{{ __('pagebuilder.published') }}</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between mt-4">
                            <a href="{{ url('/admin/pages') }}" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> {{ __('pagebuilder.form.back') }}
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> {{ page ? __('pagebuilder.form.update_button') : __('pagebuilder.form.create_button') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-generate slug from title
    const titleInput = document.getElementById('pages_title');
    const slugInput = document.getElementById('pages_slug');
    
    titleInput.addEventListener('input', function() {
        if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
            slugInput.value = this.value.toLowerCase()
                .replace(/[^\w\s-]/g, '') // Remove special characters
                .replace(/\s+/g, '-')   // Replace spaces with hyphens
                .replace(/-+/g, '-');   // Replace multiple hyphens with single hyphen
            
            slugInput.dataset.autoGenerated = 'true';
        }
    });
    
    slugInput.addEventListener('input', function() {
        slugInput.dataset.autoGenerated = 'false';
    });
});
</script>
{% endblock %}