@extends('layout.super-admin-app')

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

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/quill/quill.core.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <style>
        .image-preview-box {
            width: 100%;
            height: 180px;
            border: 2px dashed #d0d7de;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-color: #f8fafc;
            position: relative;
        }
        .image-preview-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }
        .ql-container {
            font-family: inherit;
            font-size: 14px;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            background: #fff;
        }
        .ql-toolbar.ql-snow {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            background: #f8fafc;
            border-color: #ced4da;
        }
        .ql-container.ql-snow {
            border-color: #ced4da;
        }
        .ql-editor {
            min-height: 260px;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('super-admin.blogs.index') }}">Blogs</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Create Blog
        </li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <a href="{{ route('super-admin.blogs.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="ri-arrow-left-line"></i> Back to Blogs
        </a>
    </div>
</div>

<div class="app-body">
    <div class="row gx-3">
        <div class="col-sm-12 col-12">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Create New Blog Post</h5>
                </div>
                <div class="card-body">
                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    <form action="{{ route('super-admin.blogs.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="row gx-3">
                            <!-- Left Column: Main Blog Details -->
                            <div class="col-lg-8 col-12">
                                <!-- Blog Title -->
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Blog Title <span class="text-danger">*</span></label>
                                    <input type="text" id="blog_title" name="title" class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}" placeholder="Enter blog title" required>
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Slug -->
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Slug <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light text-muted">/blog/</span>
                                        <input type="text" id="blog_slug" name="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug') }}" placeholder="url-friendly-slug" required>
                                    </div>
                                    <small class="text-muted">Auto-generated from title or enter custom slug (letters, numbers, hyphens only).</small>
                                    @error('slug')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Short Description -->
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Short Description</label>
                                    <textarea name="short_description" rows="3" class="form-control @error('short_description') is-invalid @enderror" placeholder="Brief summary for listings and card previews">{{ old('short_description') }}</textarea>
                                    @error('short_description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Full Description (Theme Quill Editor) -->
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Description</label>
                                    <textarea name="description" id="description_input" style="display: none;">{{ old('description') }}</textarea>
                                    <div id="fullEditor">
                                        {!! old('description') !!}
                                    </div>
                                    @error('description')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Right Column: Meta & Media -->
                            <div class="col-lg-4 col-12">
                                <!-- Publish Date (Theme Datepicker) -->
                                <div class="card mb-3 border">
                                    <div class="card-header bg-light">
                                        <h6 class="card-title mb-0">Publish Info</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-0">
                                            <label class="form-label fw-semibold">Date <span class="text-danger">*</span></label>
                                            <div class="input-group">
                                                <span class="input-group-text"><i class="ri-calendar-line"></i></span>
                                                <input type="text" name="date" id="blog_date" class="form-control @error('date') is-invalid @enderror" value="{{ old('date', date('d-m-Y')) }}" required autocomplete="off">
                                            </div>
                                            @error('date')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <!-- Featured Image -->
                                <div class="card mb-3 border">
                                    <div class="card-header bg-light">
                                        <h6 class="card-title mb-0">Blog Image</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="image-preview-box mb-2" id="preview_container">
                                            <span class="text-muted small" id="preview_placeholder"><i class="ri-image-line fs-3 d-block text-center"></i> No image selected</span>
                                            <img id="image_preview" src="" alt="Preview" style="display: none;">
                                        </div>
                                        <input type="file" name="image" id="image_input" class="form-control @error('image') is-invalid @enderror" accept="image/*">
                                        <small class="text-muted">Allowed: JPG, PNG, WEBP, SVG (Max: 4MB)</small>
                                        @error('image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                                <!-- SEO Meta Section -->
                                <div class="card mb-3 border">
                                    <div class="card-header bg-light">
                                        <h6 class="card-title mb-0"><i class="ri-search-eye-line me-1"></i> SEO Meta Details</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                            <label class="form-label fw-semibold">Meta Title</label>
                                            <input type="text" name="meta_title" class="form-control @error('meta_title') is-invalid @enderror" value="{{ old('meta_title') }}" placeholder="SEO title for search engines">
                                            @error('meta_title')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-0">
                                            <label class="form-label fw-semibold">Meta Description</label>
                                            <textarea name="meta_description" rows="4" class="form-control @error('meta_description') is-invalid @enderror" placeholder="SEO snippet summary shown in Google search results">{{ old('meta_description') }}</textarea>
                                            @error('meta_description')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr class="my-3">

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('super-admin.blogs.index') }}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary px-4">
                                <i class="ri-save-line me-1"></i> Save Blog
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
    <!-- Theme Datepicker & Quill Editor Scripts -->
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/quill/quill.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Theme Datepicker
            $('#blog_date').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                autoApply: true,
                minDate: false,
                maxDate: false,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });

            // Theme Quill Rich Text Editor
            var toolbarOptions = [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'header': 1 }, { 'header': 2 }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'align': [] }],
                ['link', 'clean']
            ];

            var quill = new Quill('#fullEditor', {
                theme: 'snow',
                modules: {
                    toolbar: toolbarOptions
                },
                placeholder: 'Write full blog post content here...'
            });

            // Sync Quill HTML content to hidden input
            quill.on('text-change', function() {
                var html = quill.root.innerHTML;
                if (html === '<p><br></p>') html = '';
                $('#description_input').val(html);
            });

            // Ensure sync before submit
            $('form').on('submit', function() {
                var html = quill.root.innerHTML;
                if (html === '<p><br></p>') html = '';
                $('#description_input').val(html);
            });

            // Auto-generate slug from title
            $('#blog_title').on('keyup change', function() {
                var title = $(this).val();
                var slug = title.toLowerCase()
                    .replace(/[^a-z0-9 -]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-');
                $('#blog_slug').val(slug);
            });

            // Image live preview
            $('#image_input').on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        $('#preview_placeholder').hide();
                        $('#image_preview').attr('src', event.target.result).show();
                    }
                    reader.readAsDataURL(file);
                } else {
                    $('#preview_placeholder').show();
                    $('#image_preview').attr('src', '').hide();
                }
            });
        });
    </script>
@endpush