@extends('layouts.admin')

@section('title', 'Edit Blog')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-6">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Edit Blog</h1>
                    <p class="mt-2 text-gray-600 dark:text-gray-400">{{ $blog->title }}</p>
                </div>
                <div class="flex space-x-4">
                    <a href="{{ route('admin.blogs.show', $blog) }}" 
                       class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-medium">
                        View Blog
                    </a>
                    <a href="{{ route('admin.blogs.index') }}" 
                       class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium">
                        Back to Blogs
                    </a>
                </div>
            </div>
        </div>

        <!-- Form -->
        <form method="POST" action="{{ route('admin.blogs.update', $blog) }}" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 space-y-6">
                <!-- Basic Information -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Title *</label>
                        <input type="text" name="title" value="{{ old('title', $blog->title) }}" required
                               class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-blue-500 focus:ring-blue-500">
                        @error('title')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Category</label>
                        <select name="category_id" class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $blog->category_id) == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Excerpt -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Excerpt *</label>
                    <textarea name="excerpt" rows="3" required
                              class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-blue-500 focus:ring-blue-500"
                              placeholder="Brief description of the blog post...">{{ old('excerpt', $blog->excerpt) }}</textarea>
                    @error('excerpt')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Content -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Content *</label>
                    <!-- Quill Editor Container -->
                    <div id="quill-editor" style="height: 400px;">{!! old('content', $blog->content) !!}</div>
                    <!-- Hidden textarea to store content -->
                    <textarea id="content-editor" name="content" style="display: none;" required>{!! old('content', $blog->content) !!}</textarea>
                    <p class="mt-1 text-xs text-gray-500">Use the rich text editor above for formatting your content</p>
                    @error('content')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Type -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Blog Type *</label>
                    <div class="grid grid-cols-3 gap-4">
                        <label class="flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700">
                            <input type="radio" name="type" value="text" {{ old('type', $blog->type) == 'text' ? 'checked' : '' }} class="mr-3">
                            <div>
                                <div class="font-medium">Text Only</div>
                                <div class="text-sm text-gray-500">Pure text content</div>
                            </div>
                        </label>
                        <label class="flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700">
                            <input type="radio" name="type" value="video" {{ old('type', $blog->type) == 'video' ? 'checked' : '' }} class="mr-3">
                            <div>
                                <div class="font-medium">Video Content</div>
                                <div class="text-sm text-gray-500">Includes videos</div>
                            </div>
                        </label>
                        <label class="flex items-center p-4 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700">
                            <input type="radio" name="type" value="mixed" {{ old('type', $blog->type) == 'mixed' ? 'checked' : '' }} class="mr-3">
                            <div>
                                <div class="font-medium">Mixed Content</div>
                                <div class="text-sm text-gray-500">Text + Media</div>
                            </div>
                        </label>
                    </div>
                    @error('type')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Current Featured Image -->
                @if($blog->featured_image)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Featured Image</label>
                        <img src="{{ asset('storage/' . $blog->featured_image) }}" 
                             alt="{{ $blog->title }}" 
                             class="w-48 h-32 object-cover rounded-lg">
                    </div>
                @endif

                <!-- Featured Image -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ $blog->featured_image ? 'Replace Featured Image' : 'Featured Image' }}
                    </label>
                    <input type="file" name="featured_image" accept="image/*" 
                           class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    <p class="mt-1 text-sm text-gray-500">Upload a featured image for the blog post (JPG, PNG, GIF - Max 2MB)</p>
                    @error('featured_image')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Current Gallery Images -->
                @if($blog->images && count($blog->images) > 0)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Gallery Images</label>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            @foreach($blog->images as $image)
                                <img src="{{ asset('storage/' . $image) }}" 
                                     alt="Gallery Image" 
                                     class="w-full h-24 object-cover rounded-lg">
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Gallery Images -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        {{ $blog->images && count($blog->images) > 0 ? 'Replace Gallery Images' : 'Gallery Images' }}
                    </label>
                    <input type="file" name="images[]" accept="image/*" multiple
                           class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    <p class="mt-1 text-sm text-gray-500">Upload multiple images for the blog gallery (JPG, PNG, GIF - Max 2MB each)</p>
                    @error('images.*')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Video URLs -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Facebook Video URL</label>
                        <input type="url" name="facebook_video_url" value="{{ old('facebook_video_url', $blog->facebook_video_url) }}"
                               placeholder="https://www.facebook.com/watch?v=..."
                               class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-blue-500 focus:ring-blue-500">
                        <p class="mt-1 text-sm text-gray-500">Paste Facebook video URL to embed</p>
                        @error('facebook_video_url')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">YouTube Video URL</label>
                        <input type="url" name="youtube_video_url" value="{{ old('youtube_video_url', $blog->youtube_video_url) }}"
                               placeholder="https://www.youtube.com/watch?v=..."
                               class="w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-blue-500 focus:ring-blue-500">
                        <p class="mt-1 text-sm text-gray-500">Paste YouTube video URL to embed</p>
                        @error('youtube_video_url')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Publication Settings -->
                <div class="border-t pt-6">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Publication Settings</h3>
                    
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" name="is_published" value="1" {{ old('is_published', $blog->is_published) ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Published</span>
                            </label>
                        </div>
                        
                        <div>
                            <label class="flex items-center">
                                <input type="checkbox" name="is_featured" value="1" {{ old('is_featured', $blog->is_featured) ? 'checked' : '' }}
                                       class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Featured</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="border-t pt-6">
                    <div class="flex justify-end space-x-4">
                        <a href="{{ route('admin.blogs.index') }}" 
                           class="px-6 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">
                            Cancel
                        </a>
                        <button type="submit"
                                class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium">
                            Update Blog
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Quill.js - Free Rich Text Editor -->
<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>

<script>
    // Initialize Quill editor
    var quill = new Quill('#quill-editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'font': [] }],
                [{ 'size': ['small', false, 'large', 'huge'] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'script': 'sub' }, { 'script': 'super' }],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],
                [{ 'align': [] }],
                ['link', 'image', 'video'],
                ['blockquote', 'code-block'],
                ['clean']
            ]
        }
    });

    // Update hidden textarea on form submit
    document.querySelector('form').onsubmit = function() {
        document.querySelector('#content-editor').value = quill.root.innerHTML;
    };

    // Auto-save content to textarea
    quill.on('text-change', function() {
        document.querySelector('#content-editor').value = quill.root.innerHTML;
    });
</script>

<style>
    .ql-editor {
        min-height: 300px;
        font-size: 16px;
        line-height: 1.6;
    }
    .ql-toolbar {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
    .ql-container {
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }
</style>
@endsection