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

@section('title', 'Edit 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">
            Edit 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">Edit Blog: {{ $blog->title }}</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.update', $blog->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <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', $blog->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', $blog->slug) }}" placeholder="url-friendly-slug" required>
                                    </div>
                                    <small class="text-muted">Unique URL identifier for this blog post.</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', $blog->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', $blog->description) }}</textarea>
                                    <div id="fullEditor">
                                        {!! old('description', $blog->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', $blog->date ? $blog->date->format('d-m-Y') : 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">
                                            @if($blog->image && file_exists(public_path('uploads/blogs/' . $blog->image)))
                                                <span class="text-muted small" id="preview_placeholder" style="display: none;"><i class="ri-image-line fs-3 d-block text-center"></i> No image selected</span>
                                                <img id="image_preview" src="{{ asset('uploads/blogs/' . $blog->image) }}" alt="Preview">
                                            @else
                                                <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;">
                                            @endif
                                        </div>
                                        <input type="file" name="image" id="image_input" class="form-control @error('image') is-invalid @enderror" accept="image/*">
                                        <small class="text-muted">Leave empty to keep existing image. Allowed: JPG, PNG, WEBP, SVG.</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', $blog->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', $blog->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> Update 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);
            });

            // 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);
                }
            });
        });
    </script>
@endpush