@extends('admin.layout.main')

@section('admin')
<div class="flex flex-col h-full overflow-auto">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Create New Blog Post</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Write and publish a new blog post</p>
        </div>
        <a href="{{ route('admin.blog.index') }}" 
           class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors flex items-center">
            <i class="fas fa-arrow-left mr-2"></i>
            Back to Posts
        </a>
    </div>

    <!-- Main Form -->
    <form method="POST" action="{{ route('admin.blog.store') }}" enctype="multipart/form-data" class="flex-1 overflow-auto">
        @csrf
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column - Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Title -->
                <div class="bg-white dark:bg-dark-secondary rounded-lg border border-gray-100 dark:border-gray-700 p-6">
                    <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Post Title *
                    </label>
                    <input type="text" id="title" name="title" required
                           value="{{ old('title') }}"
                           class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white"
                           placeholder="Enter post title">
                    @error('title')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Excerpt -->
                <div class="bg-white dark:bg-dark-secondary rounded-lg border border-gray-100 dark:border-gray-700 p-6">
                    <label for="excerpt" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Excerpt *
                    </label>
                    <textarea id="excerpt" name="excerpt" rows="3" required
                              class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white resize-none"
                              placeholder="Brief summary of your post (max 500 characters)">{{ old('excerpt') }}</textarea>
                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-2" id="excerptCounter">0/500</div>
                    @error('excerpt')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Content -->
                <div class="bg-white dark:bg-dark-secondary rounded-lg border border-gray-100 dark:border-gray-700 p-6">
                    <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Content *
                    </label>
                    <textarea id="content" name="content" rows="15" required
                              class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white font-mono">{{ old('content') }}</textarea>
                    @error('content')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Right Column - Sidebar -->
            <div class="space-y-6">
                <!-- Featured Image -->
                <div class="bg-white dark:bg-dark-secondary rounded-lg border border-gray-100 dark:border-gray-700 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Featured Image</h3>
                    
                    <div class="mb-4">
                        <!-- Image Preview -->
                        <div id="imagePreview" class="hidden mb-4">
                            <img id="previewImage" src="" alt="Preview" 
                                 class="w-full h-48 object-cover rounded-lg border border-gray-200 dark:border-gray-600">
                        </div>
                        
                        <!-- Upload Area -->
                        <label for="featured_image" class="cursor-pointer block">
                            <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center hover:border-[#10B981] dark:hover:border-[#10B981] transition-colors">
                                <div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-image text-gray-400 dark:text-gray-500 text-xl"></i>
                                </div>
                                <p class="text-gray-600 dark:text-gray-300 mb-2">
                                    <span class="font-medium text-[#10B981]">Click to upload</span> or drag and drop
                                </p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">
                                    PNG, JPG, GIF up to 2MB
                                </p>
                            </div>
                        </label>
                        
                        <input type="file" id="featured_image" name="featured_image" 
                               class="hidden" accept="image/*" onchange="previewImage(event)">
                        
                        @error('featured_image')
                            <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Publish Settings -->
                <div class="bg-white dark:bg-dark-secondary rounded-lg border border-gray-100 dark:border-gray-700 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Publish Settings</h3>
                    
                    <div class="space-y-4">
                        <!-- Status -->
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" name="is_published" value="1" 
                                       class="rounded border-gray-300 text-[#10B981] focus:ring-[#10B981] dark:border-gray-600 dark:bg-gray-800">
                                <span class="ml-2 text-gray-700 dark:text-gray-300">Publish immediately</span>
                            </label>
                        </div>

                        <!-- Featured -->
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" name="is_featured" value="1" 
                                       class="rounded border-gray-300 text-[#10B981] focus:ring-[#10B981] dark:border-gray-600 dark:bg-gray-800">
                                <span class="ml-2 text-gray-700 dark:text-gray-300">Mark as featured</span>
                            </label>
                        </div>

                        <!-- Published Date -->
                        <div>
                            <label for="published_at" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Schedule Publication
                            </label>
                            <input type="datetime-local" id="published_at" name="published_at"
                                   class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white">
                        </div>

                        <!-- Read Time -->
                        <div>
                            <label for="read_time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Read Time (minutes)
                            </label>
                            <input type="number" id="read_time" name="read_time" min="1" value="{{ old('read_time', 5) }}"
                                   class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white">
                        </div>
                    </div>
                </div>

                <!-- Category & Tags -->
                <div class="bg-white dark:bg-dark-secondary rounded-lg border border-gray-100 dark:border-gray-700 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Category & Tags</h3>
                    
                    <div class="space-y-4">
                        <!-- Category -->
                        <div>
                            <label for="category_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Category
                            </label>
                            <select id="category_id" name="category_id"
                                    class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white">
                                <option value="">Select Category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Tags -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Tags
                            </label>
                            <div class="space-y-2 max-h-40 overflow-y-auto p-2 border border-gray-200 dark:border-gray-600 rounded-lg">
                                @foreach($tags as $tag)
                                    <label class="flex items-center">
                                        <input type="checkbox" name="tags[]" value="{{ $tag->id }}"
                                               class="rounded border-gray-300 text-[#10B981] focus:ring-[#10B981] dark:border-gray-600 dark:bg-gray-800">
                                        <span class="ml-2 text-gray-700 dark:text-gray-300">{{ $tag->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SEO Settings -->
                <div class="bg-white dark:bg-dark-secondary rounded-lg border border-gray-100 dark:border-gray-700 p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">SEO Settings</h3>
                    
                    <div class="space-y-4">
                        <!-- Meta Title -->
                        <div>
                            <label for="meta_title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Meta Title
                            </label>
                            <input type="text" id="meta_title" name="meta_title" value="{{ old('meta_title') }}"
                                   class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white">
                        </div>

                        <!-- Meta Description -->
                        <div>
                            <label for="meta_description" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Meta Description
                            </label>
                            <textarea id="meta_description" name="meta_description" rows="3"
                                      class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white resize-none">{{ old('meta_description') }}</textarea>
                        </div>

                        <!-- Meta Keywords -->
                        <div>
                            <label for="meta_keywords" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Meta Keywords (comma separated)
                            </label>
                            <input type="text" id="meta_keywords" name="meta_keywords" value="{{ old('meta_keywords') }}"
                                   class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-[#10B981] focus:border-[#10B981] outline-none transition-colors duration-200 text-gray-900 dark:text-white">
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="bg-white dark:bg-dark-secondary rounded-lg border border-gray-100 dark:border-gray-700 p-6">
                    <div class="flex space-x-3">
                        <button type="submit" name="action" value="publish"
                                class="flex-1 bg-[#10B981] text-white px-6 py-3 rounded-lg hover:bg-[#0da271] transition-colors font-medium">
                            Publish
                        </button>
                        <button type="submit" name="action" value="draft"
                                class="flex-1 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 px-6 py-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium">
                            Save Draft
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    // Image preview
    function previewImage(event) {
        const input = event.target;
        const preview = document.getElementById('imagePreview');
        const previewImage = document.getElementById('previewImage');
        
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                preview.classList.remove('hidden');
            }
            
            reader.readAsDataURL(input.files[0]);
        }
    }

    // Excerpt character counter
    document.getElementById('excerpt').addEventListener('input', function() {
        const counter = document.getElementById('excerptCounter');
        counter.textContent = this.value.length + '/500';
        
        if (this.value.length > 500) {
            counter.classList.add('text-red-500');
        } else {
            counter.classList.remove('text-red-500');
        }
    });

    // Initialize excerpt counter
    document.addEventListener('DOMContentLoaded', function() {
        const excerpt = document.getElementById('excerpt');
        const counter = document.getElementById('excerptCounter');
        counter.textContent = excerpt.value.length + '/500';
    });

    // Drag and drop for image upload
    document.addEventListener('DOMContentLoaded', function() {
        const dropArea = document.querySelector('label[for="featured_image"]');
        const fileInput = document.getElementById('featured_image');
        
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
            dropArea.classList.add('border-[#10B981]', 'bg-emerald-50', 'dark:bg-emerald-900/10');
        }
        
        function unhighlight() {
            dropArea.classList.remove('border-[#10B981]', 'bg-emerald-50', 'dark:bg-emerald-900/10');
        }
        
        dropArea.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            
            if (files.length > 0) {
                fileInput.files = files;
                previewImage({ target: fileInput });
            }
        }
    });
</script>
@endsection