<?php
// This file is included by the AdminController, which will handle the layout
// No need to set variables here as they're already set in the controller
$isEdit = isset($post);
$formTitle = $isEdit ? 'Edit Blog Post' : 'Add New Blog Post';
$formAction = $isEdit ? "/admin/blog-posts/edit?id={$post['id']}" : "/admin/blog-posts/add";
?>

<div class="admin-card">
    <h2 class="text-xl font-semibold mb-4"><?= $formTitle ?></h2>
    
    <?php if (isset($error) && !empty($error)): ?>
    <div class="bg-red-800 text-white p-4 rounded-md mb-6">
        <i class="fas fa-exclamation-circle mr-2"></i> <?= htmlspecialchars($error) ?>
    </div>
    <?php endif; ?>
    
    <?php if (isset($success) && $success): ?>
    <div class="bg-green-800 text-white p-4 rounded-md mb-6">
        <i class="fas fa-check-circle mr-2"></i> Blog post saved successfully!
    </div>
    <?php endif; ?>
    
    <form class="admin-form" method="POST" action="<?= $formAction ?>" enctype="multipart/form-data">
        <div class="mb-6">
            <label for="title">Title</label>
            <input type="text" id="title" name="title" value="<?= $isEdit && isset($post['title']) ? htmlspecialchars($post['title']) : '' ?>" required>
        </div>
        
        <div class="mb-6">
            <label for="meta_description">Meta Description</label>
            <textarea id="meta_description" name="meta_description" rows="2"><?= $isEdit && isset($post['meta_description']) ? htmlspecialchars($post['meta_description']) : '' ?></textarea>
            <p class="text-sm text-gray-400 mt-1">Brief description for SEO purposes (recommended: 150-160 characters)</p>
        </div>
        
        <div class="mb-6">
            <label for="featured_image">Featured Image</label>
            <div class="file-upload-container">
                <div class="file-upload-area" id="featuredImageUpload">
                    <input type="file" id="featured_image" name="featured_image" accept="image/png,image/jpeg,image/gif,image/webp" class="file-input">
                    <div class="file-upload-placeholder">
                        <?php if ($isEdit && isset($post['featured_image']) && !empty($post['featured_image'])): ?>
                            <div class="current-file-preview">
                                <img src="<?= htmlspecialchars($post['featured_image']) ?>" alt="Current Featured Image" class="preview-image">
                            </div>
                        <?php else: ?>
                            <i class="fas fa-cloud-upload-alt"></i>
                            <p>Drag & drop your featured image here or click to browse</p>
                        <?php endif; ?>
                    </div>
                    <div class="file-preview" id="featuredImagePreview" style="display: none;">
                        <img src="" alt="Preview" class="preview-image">
                        <div class="file-info">
                            <span class="file-name"></span>
                            <button type="button" class="remove-file" data-target="featured_image">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mb-6">
            <label for="tags">Tags</label>
            <input type="text" id="tags" name="tags" value="<?= $isEdit && isset($post['tags']) ? htmlspecialchars($post['tags']) : '' ?>">
            <p class="text-sm text-gray-400 mt-1">Separate tags with commas (e.g., news, updates, tips)</p>
        </div>
        
        <div class="mb-6">
            <label for="content">Content</label>
            
            <!-- Quill.js Toolbar -->
            <div id="toolbar">
                <span class="ql-formats">
                    <select class="ql-header">
                        <option value="1">Heading 1</option>
                        <option value="2">Heading 2</option>
                        <option value="3">Heading 3</option>
                        <option selected>Normal</option>
                    </select>
                </span>
                <span class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </span>
                <span class="ql-formats">
                    <select class="ql-color"></select>
                    <select class="ql-background"></select>
                </span>
                <span class="ql-formats">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-link"></button>
                    <button class="ql-image"></button>
                    <button class="ql-video"></button>
                    <button class="ql-code-block"></button>
                </span>
                <span class="ql-formats">
                    <button class="ql-clean"></button>
                </span>
            </div>
            
            <!-- Quill.js Editor -->
            <div id="editor" class="bg-dark text-white rounded-md" style="min-height: 300px;"><?= $isEdit && isset($post['content']) ? $post['content'] : '' ?></div>
            
            <!-- Hidden textarea to store Quill content -->
            <textarea id="content" name="content" style="display: none;"><?= $isEdit && isset($post['content']) ? htmlspecialchars($post['content']) : '' ?></textarea>
        </div>
        
        <div class="flex justify-between">
            <a href="/admin/blog-posts" class="btn-secondary">
                <i class="fas fa-arrow-left mr-2"></i>Back to Posts
            </a>
            <button type="submit" class="btn-primary">
                <i class="fas fa-save mr-2"></i><?= $isEdit ? 'Update Post' : 'Publish Post' ?>
            </button>
        </div>
    </form>
</div>

<!-- Include Quill.js from CDN -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- Include the file upload JavaScript -->
<script src="/public/js/admin-file-upload.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Quill editor
        var quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: '#toolbar'
            }
        });
        
        // Update hidden form field with Quill content before form submission
        document.querySelector('form').addEventListener('submit', function() {
            document.getElementById('content').value = quill.root.innerHTML;
        });
        
        // Setup file uploader for featured image
        setupFileUploader('featured_image', 'featuredImagePreview', 'featuredImageUpload');
        
        // Handle remove file button clicks
        document.querySelectorAll('.remove-file').forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const fileInput = document.getElementById(targetId);
                const previewId = targetId + 'Preview';
                const uploadAreaId = targetId + 'Upload';
                
                // Clear the file input
                fileInput.value = '';
                
                // Hide the preview and show the placeholder
                document.getElementById(previewId).style.display = 'none';
                const placeholder = document.querySelector(`#${uploadAreaId} .file-upload-placeholder`);
                placeholder.style.display = 'flex';
            });
        });
    });
    
    function setupFileUploader(inputId, previewId, uploadAreaId) {
        const fileInput = document.getElementById(inputId);
        const previewElement = document.getElementById(previewId);
        const uploadArea = document.getElementById(uploadAreaId);
        const placeholder = uploadArea.querySelector('.file-upload-placeholder');
        
        // Handle file selection
        fileInput.addEventListener('change', function() {
            handleFileSelect(this.files, previewElement, placeholder);
        });
        
        // Handle drag and drop
        uploadArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('dragover');
        });
        
        uploadArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            this.classList.remove('dragover');
        });
        
        uploadArea.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('dragover');
            handleFileSelect(e.dataTransfer.files, previewElement, placeholder);
            fileInput.files = e.dataTransfer.files; // Update the file input
        });
    }
    
    function handleFileSelect(files, previewElement, placeholder) {
        if (files.length > 0) {
            const file = files[0];
            
            // Show preview
            const reader = new FileReader();
            reader.onload = function(e) {
                const previewImg = previewElement.querySelector('img');
                previewImg.src = e.target.result;
                
                const fileName = previewElement.querySelector('.file-name');
                fileName.textContent = file.name;
                
                placeholder.style.display = 'none';
                previewElement.style.display = 'block';
            };
            
            reader.readAsDataURL(file);
        }
    }
</script> 