@extends('layouts.admin')

@section('title', 'Create New Post - Admin Dashboard')
@section('page-title', 'Create New Post')
@section('page-subtitle', 'Write and publish a new blog post')

@section('content')

<div class="max-w-4xl">
    <form id="post-form" action="{{ route('admin.posts.store') }}" method="POST" enctype="multipart/form-data" class="bg-white dark:bg-gray-900 rounded-xl shadow-lg p-8 space-y-6">
        @csrf

        <!-- Title -->
        <div>
            <label for="title" class="block text-sm font-bold text-gray-900 dark:text-white mb-2">
                Post Title <span class="text-red-500">*</span>
            </label>
            <input 
                type="text" 
                id="title" 
                name="title" 
                value="{{ old('title') }}"
                class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-amber-600 focus:border-transparent transition-all" 
                placeholder="Enter post title"
                required
            >
            @error('title')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        <!-- Subtitle -->
        <div>
            <label for="subtitle" class="block text-sm font-bold text-gray-900 dark:text-white mb-2">
                Subtitle (Sub Heading)
            </label>
            <input 
                type="text" 
                id="subtitle" 
                name="subtitle" 
                value="{{ old('subtitle') }}"
                class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-amber-600 focus:border-transparent transition-all" 
                placeholder="Enter post subtitle (optional)"
            >
            @error('subtitle')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        <!-- Featured Image -->
        <div>
            <label for="featured_image" class="block text-sm font-bold text-gray-900 dark:text-white mb-2">
                Featured Image
            </label>
            <div class="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-6 hover:border-amber-600 transition-colors cursor-pointer" id="image-drop-zone">
                <input 
                    type="file" 
                    id="featured_image" 
                    name="featured_image" 
                    accept="image/*"
                    class="sr-only" 
                    onchange="previewImage(this)"
                >
                <div class="text-center" id="image-placeholder">
                    <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2 block"></i>
                    <p class="text-gray-600 dark:text-gray-400 font-medium">Drag and drop image here, or click to select</p>
                    <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">PNG, JPG, GIF up to 5MB</p>
                </div>
                <img id="image-preview" class="hidden w-full h-48 object-cover rounded-lg mt-4">
            </div>
            @error('featured_image')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        <!-- Excerpt -->
        <div>
            <label for="excerpt" class="block text-sm font-bold text-gray-900 dark:text-white mb-2">
                Excerpt
            </label>
            <textarea 
                id="excerpt" 
                name="excerpt" 
                rows="3"
                class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-amber-600 focus:border-transparent transition-all" 
                placeholder="Brief summary of the post (max 500 characters)"
            >{{ old('excerpt') }}</textarea>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Optional: A shorter version for previews</p>
            @error('excerpt')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        <!-- Content with Quill Editor -->
        <div>
            <label for="editor" class="block text-sm font-bold text-gray-900 dark:text-white mb-2">
                Content <span class="text-red-500">*</span>
            </label>
            <div id="editor" class="bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700" style="height: 400px;"></div>
            <input type="hidden" name="content" id="content">
            @error('content')
                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
            @enderror
        </div>

        <!-- Status and Publish Date -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label for="status" class="block text-sm font-bold text-gray-900 dark:text-white mb-2">
                    Status <span class="text-red-500">*</span>
                </label>
                <select 
                    id="status" 
                    name="status"
                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-amber-600 focus:border-transparent transition-all"
                    required
                >
                    <option value="draft" {{ old('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                    <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>Published</option>
                </select>
                @error('status')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="published_at" class="block text-sm font-bold text-gray-900 dark:text-white mb-2">
                    Publish Date
                </label>
                <input 
                    type="datetime-local" 
                    id="published_at" 
                    name="published_at"
                    value="{{ old('published_at') }}"
                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-amber-600 focus:border-transparent transition-all" 
                >
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Leave empty to publish now (if status is published)</p>
                @error('published_at')
                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="flex items-center justify-between pt-6 border-t border-gray-200 dark:border-gray-700">
            <a href="{{ route('admin.posts.index') }}" class="px-6 py-3 text-gray-600 dark:text-gray-400 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors font-bold">
                Cancel
            </a>
            <button 
                type="submit" 
                class="px-8 py-3 bg-gradient-to-r from-amber-600 to-orange-700 text-white font-bold rounded-lg hover:shadow-lg transform hover:scale-105 transition-all duration-300"
            >
                <i class="fas fa-paper-plane mr-2"></i>
                Create Post
            </button>
        </div>
    </form>
</div>

<script>
    // Image preview function - must be global for inline onchange handler
    function previewImage(input) {
        const imagePreview = document.getElementById('image-preview');
        const imagePlaceholder = document.getElementById('image-placeholder');
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = (e) => {
                imagePreview.src = e.target.result;
                imagePreview.classList.remove('hidden');
                imagePlaceholder.classList.add('hidden');
            };
            reader.readAsDataURL(input.files[0]);
        }
    }

    // Image drop zone
    const dropZone = document.getElementById('image-drop-zone');
    const fileInput = document.getElementById('featured_image');
    const imagePreview = document.getElementById('image-preview');
    const imagePlaceholder = document.getElementById('image-placeholder');

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('border-amber-600', 'bg-amber-50');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('border-amber-600', 'bg-amber-50');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('border-amber-600', 'bg-amber-50');
        if (e.dataTransfer.files.length) {
            const dataTransfer = new DataTransfer();
            Array.from(e.dataTransfer.files).forEach(file => {
                dataTransfer.items.add(file);
            });
            fileInput.files = dataTransfer.files;
            previewImage(fileInput);
        }
    });

    // Also listen for direct file selection changes
    fileInput.addEventListener('change', function() {
        previewImage(this);
    });

    // Trigger file input when clicking the zone
    dropZone.addEventListener('click', (e) => {
        // Prevent trigger if clicking the 'clear' button
        if (!e.target.closest('button')) {
            fileInput.click();
        }
    });
</script>

@endsection

@section('extra-js')
<script>
    // Quill initialization + robust sync for hidden `content` input
    let quill;

    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('post-form');
        const contentInput = document.getElementById('content');

        // If Quill didn't load, prevent submit and show message
        if (typeof Quill === 'undefined') {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                alert('Rich-text editor failed to load. Please refresh the page.');
            }, true);
            return;
        }

        quill = new Quill('#editor', {
            theme: 'snow',
            placeholder: 'Write your post content here...',
            modules: {
                toolbar: [
                    [{ header: [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    ['blockquote', 'code-block'],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    ['link', 'image'],
                    ['clean']
                ]
            }
        });

        // Keep hidden input in sync on every change
        quill.on('text-change', function() {
            contentInput.value = quill.root.innerHTML;
        });

        // Initialize hidden input immediately (use any server-provided old value already present in editor)
        contentInput.value = quill.root.innerHTML;

        // Capture-phase submit handler so this runs before other listeners
        form.addEventListener('submit', function(e) {
            const editorHTML = (quill && quill.root) ? quill.root.innerHTML : document.getElementById('editor').innerHTML;
            const editorText = (quill && quill.getText) ? quill.getText().trim() : editorHTML.replace(/<[^>]*>/g, '').trim();

            if (!editorText) {
                e.preventDefault();
                alert('Post content is required');
                return;
            }

            // Ensure hidden input contains the latest editor HTML
            contentInput.value = editorHTML;
            // allow native submission to proceed
        }, true);
    });
</script>
@endsection