@extends('user::layouts.master')
@section('breadcrumb_title', 'Create Blog')

@section('content')

    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-semibold">Create Blog</h1>
        <a href="{{ route('author.blog.index') }}" class="btn btn-primary">
            <i class="fas fa-arrow-left mr-2"></i> Back to Blogs
        </a>
    </div>

    <div class="card">
        <form action="{{ route('author.blog.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-8 lg:divide-x divide-border border-b border-border pb-10">
                <div class="col-span-2">
                    <div class="mb-10">
                        <h5 class="text-lg font-medium mb-4">Basic Information</h5>

                        <div class="mb-4 input-with-label">
                            <label>Title <span class="text-red-500">*</span></label>
                            <input type="text" name="title" id="title" value="{{ old('title') }}"
                                class="@error('title') border-red-500 @enderror" required>
                            @error('title')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Slug</label>
                            <input type="text" name="slug" id="slug" value="{{ old('slug') }}"
                                class="@error('slug') border-red-500 @enderror">
                            @error('slug')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-xs mt-1">Leave empty to auto-generate from title</p>
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Reading Time</label>
                            <input type="text" name="reading_time" value="{{ old('reading_time') }}"
                                class="@error('reading_time') border-red-500 @enderror">
                            @error('reading_time')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Short Description</label>
                            <textarea name="excerpt" rows="3" class="rich-editor @error('excerpt') border-red-500 @enderror">{{ old('excerpt') }}</textarea>
                            @error('excerpt')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Full Description</label>
                            <textarea name="content" class="rich-editor tinymce @error('content') border-red-500 @enderror">{{ old('content') }}</textarea>
                            @error('content')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    <div>
                        <h5 class="text-lg font-medium mb-4">SEO</h5>

                        <div class="mb-4 input-with-label">
                            <label>Title</label>
                            <input type="text" name="seo_meta[title]" value="{{ old('seo_meta.title') }}"
                                class="@error('seo_meta.title') border-red-500 @enderror">
                            @error('seo_meta.title')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Description</label>
                            <textarea name="seo_meta[description]" class="tinymce @error('seo_meta.description') border-red-500 @enderror">{{ old('seo_meta.description') }}</textarea>
                            @error('seo_meta.description')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-4 input-with-label">
                            <label>Keywords</label>
                            <input type="text" name="seo_meta[keywords]" value="{{ old('seo_meta.keywords') }}"
                                class="@error('seo_meta.keywords') border-red-500 @enderror"
                                placeholder="Enter comma separated keywords">
                            @error('seo_meta.keywords')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="flex flex-col col-span-full lg:col-span-1 lg:pl-8">

                    <!-- Publishing Options -->
                    <div class="mb-10">
                        <h3 class="mb-2">Publishing Options</h3>

                        <div class="mb-4 input-with-label">
                            <label>Status <span class="text-red-500">*</span></label>
                            <select name="status" class="form-select" required
                                class="@error('status') border-red-500 @enderror">
                                <option value="draft" {{ old('status') === 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>Published
                                </option>
                            </select>
                            @error('status')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="flex flex-col gap-3 mt-4">
                            <h3>Blog Highlights</h3>

                            <div>
                                <input type="checkbox" name="is_featured" value="1" id="is_featured"
                                    class="w-4 h-4 text-blue-600 border-gray-300 rounded"
                                    {{ old('is_featured') ? 'checked' : '' }}>
                                <label for="is_featured" class="ml-2 text-sm">Featured Blog</label>
                            </div>
                            <div>
                                <input type="checkbox" name="is_popular" value="1" id="is_popular"
                                    class="w-4 h-4 text-blue-600 border-gray-300 rounded"
                                    {{ old('is_popular') ? 'checked' : '' }}>
                                <label for="is_popular" class="ml-2 text-sm">Popular Blog</label>
                            </div>
                            <div>
                                <input type="checkbox" name="is_weacklybest" value="1" id="is_weacklybest"
                                    class="w-4 h-4 text-blue-600 border-gray-300 rounded"
                                    {{ old('is_weacklybest') ? 'checked' : '' }}>
                                <label for="is_weacklybest" class="ml-2 text-sm">Weekly Best</label>
                            </div>
                            <div>
                                <input type="checkbox" name="is_trending" value="1" id="is_trending"
                                    class="w-4 h-4 text-blue-600 border-gray-300 rounded"
                                    {{ old('is_trending') ? 'checked' : '' }}>
                                <label for="is_trending" class="ml-2 text-sm">Trending</label>
                            </div>
                            <div>
                                <input type="checkbox" name="is_hotnews" value="1" id="is_hotnews"
                                    class="w-4 h-4 text-blue-600 border-gray-300 rounded"
                                    {{ old('is_hotnews') ? 'checked' : '' }}>
                                <label for="is_hotnews" class="ml-2 text-sm">Hot News</label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-10">
                        <div class="mb-4">
                            <h3 class="mb-2">Is Video Blog</h3>
                            <input type="checkbox" name="is_video_blog" id="is_video_blog"
                                class="w-4 h-4 text-blue-600 border-gray-300 rounded"
                                {{ old('is_video_blog') ? 'checked' : '' }}>
                            <label for="is_video_blog" class="ml-2 text-sm">Video Blog</label>
                        </div>

                        <div class="mb-4 input-with-label hidden" id="video_url">
                            <input type="text" name="video_url" value="{{ old('video_url') }}"
                                class="@error('video_url') border-red-500 @enderror"
                                placeholder="Enter youtube video url">
                            @error('video_url')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Categories -->
                    <div class="mb-10">
                        <h3 class="mb-2">Categories</h3>
                        <div class="max-h-48 overflow-y-auto space-y-2">
                            @foreach ($categories as $category)
                                <div>
                                    <label class="flex items-center space-x-2">
                                        <input type="checkbox" name="taxonomies[]" value="{{ $category->id }}"
                                            class="rounded border-gray-300 text-blue-600"
                                            {{ in_array($category->id, old('taxonomies', [])) ? 'checked' : '' }}>
                                        <span>{{ $category->name }}</span>
                                    </label>
                                    @if ($category->children->count() > 0)
                                        <div class="ml-6 space-y-1">
                                            @foreach ($category->children as $child)
                                                <label class="flex items-center space-x-2">
                                                    <input type="checkbox" name="taxonomies[]"
                                                        value="{{ $child->id }}"
                                                        class="rounded border-gray-300 text-blue-600"
                                                        {{ in_array($child->id, old('taxonomies', [])) ? 'checked' : '' }}>
                                                    <span>— {{ $child->name }}</span>
                                                </label>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Tags -->
                    <div class="mb-10">
                        <h3 class="mb-2">Tags</h3>
                        <div class="max-h-48 overflow-y-auto space-y-2">
                            @foreach ($tags as $tag)
                                <label class="flex items-center space-x-2">
                                    <input type="checkbox" name="taxonomies[]" value="{{ $tag->id }}"
                                        class="rounded border-gray-300 text-blue-600"
                                        {{ in_array($tag->id, old('taxonomies', [])) ? 'checked' : '' }}>
                                    <span>{{ $tag->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <!-- Theme Selection (only if multi theme blog is enabled) -->
                    @if ($multiThemeBlogEnabled)
                        <div class="mb-10">
                            <h3 class="mb-2">Associated Theme</h3>
                            <div class="input-with-label">
                                <select name="blog_theme"
                                    class="form-select @error('blog_theme') border-red-500 @enderror">
                                    <option value="">Select Theme (Optional)</option>
                                    @foreach ($themes as $themeKey => $theme)
                                        <option value="{{ $themeKey }}"
                                            {{ old('blog_theme') === $themeKey ? 'selected' : '' }}>
                                            {{ $theme['name'] ?? ucfirst($themeKey) }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('blog_theme')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                                <p class="text-xs mt-1 text-gray-600">Select which theme this blog should be associated
                                    with</p>
                            </div>
                        </div>
                    @endif

                    <div>
                        <div class="image-input w-full max-w-[360px]">
                            <h3 class="mb-2">Featured Image</h3>
                            <label for="cover-image" class="aspect-[360/157]">
                                <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_2161_7517)">
                                        <path d="M20 10.6665H20.0133" stroke="#1F61EC" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" />
                                        <path
                                            d="M22.6673 5.3335H9.33398C7.12485 5.3335 5.33398 7.12436 5.33398 9.3335V22.6668C5.33398 24.876 7.12485 26.6668 9.33398 26.6668H22.6673C24.8765 26.6668 26.6673 24.876 26.6673 22.6668V9.3335C26.6673 7.12436 24.8765 5.3335 22.6673 5.3335Z"
                                            stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M5.33398 19.9999L10.6673 14.6666C11.2754 14.0815 11.9652 13.7734 12.6673 13.7734C13.3695 13.7734 14.0592 14.0815 14.6673 14.6666L21.334 21.3333"
                                            stroke="#1F61EC" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M18.666 18.6664L19.9993 17.3331C20.6074 16.748 21.2972 16.4399 21.9993 16.4399C22.7015 16.4399 23.3913 16.748 23.9993 17.3331L26.666 19.9998"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_2161_7517">
                                            <rect width="32" height="32" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>
                                <div class="flex gap-2">
                                    <p><span>Choose file</span></p>
                                </div>
                                <p class="text-14 text-paragraph">
                                    JPEG, PNG, JPG, GIF, WEBP
                                </p>
                            </label>
                            <input type="file" name="featured_image" accept="image/*" id="cover-image" />
                            @error('featured_image')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-span-full flex-col sm:flex-row flex justify-end gap-4 mt-5">
                <a class="btn-secondary" href="{{ route('author.blog.index') }}">
                    Cancel
                </a>
                <button type="submit" class="btn btn-primary">Save &amp; New</button>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('common/tinymce/js/tinymce/tinymce.min.js') }}"></script>
    <script>
        (function($) {
            "use strict"
            $(document).ready(function() {
                tinymce.init({
                    selector: '.rich-editor',
                    plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
                    toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                });

                // Auto-generate slug from title
                $('#title').on('blur', function() {
                    if ($('#slug').val() === '') {
                        const name = $(this).val();
                        const slug = name.toLowerCase()
                            .replace(/[^\w\s-]/g, '')
                            .replace(/\s+/g, '-')
                            .replace(/-+/g, '-');
                        $('#slug').val(slug);
                    }
                });

                $('#is_video_blog').on('change', function() {
                    if ($(this).is(':checked')) {
                        $('#video_url').removeClass('hidden');
                    } else {
                        $('#video_url').addClass('hidden');
                    }
                });

                const isVideoBlog = $('#is_video_blog').is(':checked');
                if (isVideoBlog) {
                    $('#video_url').removeClass('hidden');
                }

            });
        })(jQuery);
    </script>
@endpush