@extends('manager.layouts.app')
@section('page_title')
    {{ !empty($page_title) && isset($page_title) ? $page_title : '' }}
@endsection
@push('head-scripts')
    img {
    max-width: 100%;
    }
    </style>
@endpush
@section('content')
    <div class="card mt-3">
        <div class="card-body">
            {{-- Start: Page Content --}}
            <div class="d-flex justify-content-between">
                <div>
                    <h4 class="card-title mb-0">Blog Posts</h4>
                    <div class="small text-medium-emphasis">
                        Edit Blog Post
                    </div>
                </div>
                <div class="btn-toolbar d-none d-md-block" role="toolbar" aria-label="Toolbar with buttons">
                    @can('manager_news-event_list')
                        <a href="{{ route('manager.blogs.index') }}" class="btn btn-sm btn-primary">View All</a>
                    @endcan
                </div>
            </div>
            <hr>
            {{-- Start: Form --}}

            {{-- Create Blog Post Form --}}
            <form method="POST" action="{{ route('manager.blogs.update', $blog->id) }}" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="mb-3">
                    <label class="form-label" for="title">Title</label>
                    <input type="text" required class="form-control @error('title') is-invalid @enderror" name="title"
                        id="title" placeholder="Enter post title" value="{{ old('title', $blog->title) }}">
                    @error('title')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>

                <div class="mb-3">
                    <div class="row">

                        <div class="col-6">
                            <div class="row gy-2 gx-3 align-items-center">
                                <label>Select Category</label>
                                <div class="col-12">
                                    <select required class="form-control" name="blog_category_id" id="category-id"
                                        autocomplete="category-id">

                                        <option value="">Select Category</option>

                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}"
                                                {{ old('blog_category_id', $blog->blog_category_id) == $category->id ? 'selected' : '' }}>
                                                {{ $category->name }}
                                            </option>
                                        @endforeach

                                    </select>
                                </div>
                            </div>

                            @error('blog_category_id')
                                <strong class="text-danger">{{ $message }}</strong>
                            @enderror
                        </div>


                        <div class="col-6">
                            <label class="form-label" for="slug">Slug (URL)</label>
                            <input type="text" class="form-control @error('slug') is-invalid @enderror" name="slug"
                                id="slug" placeholder="auto-generated-from-title"
                                value="{{ old('slug', $blog->slug) }}">
                            <small class="text-muted">Leave empty to auto-generate</small>
                            @error('slug')
                                <strong class="text-danger">{{ $message }}</strong>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label" for="excerpt">Excerpt (Short Description)</label>
                    <textarea type="text" rows="3" maxlength="500" placeholder="Brief summary of the post (max 500 characters)"
                        class="form-control @error('excerpt') is-invalid @enderror" name="excerpt">{{ old('excerpt', $blog->excerpt) }}</textarea>
                    @error('excerpt')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>

                <div class="mb-3">
                    <label class="form-label" for="content">Content</label>
                    <textarea type="text" required id="blog-post-description" class="form-control @error('content') is-invalid @enderror"
                        name="content">{{ old('content', $blog->content) }}</textarea>
                    @error('content')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3" id="featured_image_input">
                        <label class="form-label" for="featured_image">Featured Image</label>

                        <input type="file" id="featured-image-cropper" accept=".png, .jpg, .jpeg" name="featured_image"
                            class="form-control rounded-0 featured-image-cropper @error('featured_image') is-invalid @enderror">

                        <small class="text-muted">This will be displayed as the main image</small>

                        @if ($errors->has('featured_image'))
                            <span class="text-danger">{{ $errors->first('featured_image') }}</span>
                        @endif

                        {{-- OLD IMAGE PREVIEW --}}
                        @if (isset($blog) && $blog->featured_image)
                            <div class="mt-3">
                                <p class="mb-1 fw-bold">Current Image:</p>
                                <img src="{{ asset('storage/blog-images/featured/' . $blog->featured_image) }}"
                                    width="150" class="img-thumbnail shadow-sm">
                            </div>
                        @endif
                    </div>



                    <div class="col-md-6 mb-3">
                        <label class="form-label" for="tags">Tags</label>
                        <select name="tags[]" class="form-control select2-tags" multiple>
                            {{-- @foreach ($tags as $tag)
                                <option value="{{ $tag->id }}"
                                    {{ in_array($tag->id, old('tags', [])) ? 'selected' : '' }}>
                                    {{ $tag->name }}
                                </option>
                            @endforeach --}}
                        </select>
                        <small class="text-muted">Select multiple tags</small>
                        @error('tags')
                            <strong class="text-danger">{{ $message }}</strong>
                        @enderror
                    </div>
                </div>

                <div class="mb-3">
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label" for="published_at">Publish Date & Time</label>
                            <input type="datetime-local" class="form-control @error('published_at') is-invalid @enderror"
                                name="published_at" id="published_at"
                                value="{{ old('published_at', $blog->published_at ? $blog->published_at->format('Y-m-d\TH:i') : '') }}">
                            <small class="text-muted">Leave empty to publish immediately</small>
                            @error('published_at')
                                <strong class="text-danger">{{ $message }}</strong>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label" for="reading_time">Reading Time (minutes)</label>
                            <input type="number" class="form-control @error('reading_time') is-invalid @enderror"
                                name="reading_time" id="reading_time" placeholder="Auto-calculated if empty"
                                min="1" value="{{ old('reading_time') }}">
                            <small class="text-muted">Leave empty for auto-calculation</small>
                            @error('reading_time')
                                <strong class="text-danger">{{ $message }}</strong>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label" for="status">Status</label>

                    <select name="status" required class="form-control @error('status') is-invalid @enderror">

                        <option value="">Select Status</option>

                        <option value="draft" {{ old('status', $blog->status) == 'draft' ? 'selected' : '' }}>
                            Draft
                        </option>

                        <option value="published" {{ old('status', $blog->status) == 'published' ? 'selected' : '' }}>
                            Published
                        </option>

                        <option value="archived" {{ old('status', $blog->status) == 'archived' ? 'selected' : '' }}>
                            Archived
                        </option>

                    </select>

                    @error('status')
                        <strong class="text-danger">{{ $message }}</strong>
                    @enderror
                </div>


                {{-- SEO Meta Fields (Optional) --}}
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">SEO Settings (Optional)</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label" for="meta_title">Meta Title</label>
                            <input type="text" class="form-control" name="meta[title]" id="meta_title"
                                placeholder="SEO title for search engines"
                                value="{{ old('meta.title', $blog->meta['title'] ?? $blog->title) }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="meta_description">Meta Description</label>
                            <textarea class="form-control" name="meta[description]" id="meta_description" rows="2"
                                placeholder="SEO description for search engines">{{ old('meta.description', $blog->meta['description'] ?? ($blog->excerpt ?? '')) }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="meta_keywords">Meta Keywords</label>
                            <input type="text" class="form-control" name="meta[keywords]" id="meta_keywords"
                                placeholder="keyword1, keyword2, keyword3"
                                value="{{ old('meta.keywords', $blog->meta['keywords'] ?? '') }}">
                        </div>
                    </div>
                </div>

                {{-- Homepage Settings --}}
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">Homepage Settings</h6>
                    </div>

                    <div class="card-body">

                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="is_trending" id="is_trending"
                                value="1" {{ old('is_trending', $blog->is_trending) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_trending">
                                Mark as Trending
                            </label>
                        </div>

                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" name="is_featured" id="is_featured"
                                value="1" {{ old('is_featured', $blog->is_featured) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_featured">
                                Mark as Featured
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="is_must_read" id="is_must_read"
                                value="1" {{ old('is_must_read', $blog->is_must_read) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_must_read">
                                Mark as Must Read
                            </label>
                        </div>

                    </div>
                </div>

                <button type="submit" class="btn btn-sm btn-success">
                    <i class="fas fa-check me-1"></i>Update
                </button>
                <a href="{{ route('manager.blogs.index') }}" class="btn btn-sm btn-secondary">
                    Cancel
                </a>
            </form>
            {{-- End: Form --}}
            {{--            Uploading Profile Image Modal --}}
            <div class="modal fade bd-example-modal-lg imageCropImg" id="model_document" tabindex="-1" role="dialog"
                aria-labelledby="cropperModalLabel" aria-hidden="true" data-coreui-backdrop="static">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="cropperModal">Crop Thumbnail</h5>
                            <button type="button" class="close btn-close" id="reset-image" data-coreui-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="img-container">
                                <div class="row">
                                    <div class="col-md-11">
                                        <img class="cropper-image" id="previewImage" src="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" id="reset-image-close"
                                data-coreui-dismiss="modal">Close
                            </button>
                            <button type="button" class="btn btn-secondary crop" id="cropImage">Crop
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {{--  End: Modal --}}
            {{--            Uploading Profile Image Modal --}}
            <div class="modal fade bd-example-modal-lg coverCropImg" id="model_cover" tabindex="-1" role="dialog"
                aria-labelledby="cropperModalLabel" aria-hidden="true" data-coreui-backdrop="static">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="cropperModal2">Crop Cover Image</h5>
                            <button type="button" class="close btn-close" id="reset-image" data-coreui-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="img-container">
                                <div class="row">
                                    <div class="col-md-11">
                                        <img class="cropper-image" id="previewImage2" src="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" id="reset-image-close"
                                data-coreui-dismiss="modal">Close
                            </button>
                            <button type="button" class="btn btn-secondary crop" id="cropImage2">Crop
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {{--  End: Modal --}}
            {{-- Page Description : Start --}}
            @if (!empty($p_description) && isset($p_description))
                <div class="card-footer">
                    <div class="row">
                        <div class="col-12 mb-sm-2 mb-0">
                            <p>{{ !empty($p_description) && isset($p_description) ? $p_description : '' }}</p>
                        </div>
                    </div>
                </div>
            @endif
            {{-- Page Description : End --}}
            {{-- End: Page Content --}}
        </div>
    </div>
@endsection
@push('footer-scripts')
    <!-- ckeditor -->
    <script src="{{ asset('manager/ckeditor/ckeditor.js') }}"></script>
    <script src="{{ asset('manager/ckeditor/ckfinder/ckfinder.js') }}"></script>
    <script src="{{ asset('manager/ckeditor/samples/js/sample.js') }}"></script>

    <script>
        $(document).ready(function() {
            var editor = CKEDITOR.replace('blog-post-description');

            $('form').on('submit', function() {
                for (instance in CKEDITOR.instances) {
                    CKEDITOR.instances[instance].updateElement();
                }
            });
        });
    </script>
    <script>
        //this is my js code
        // Auto-generate slug from title
        document.getElementById('title').addEventListener('keyup', function() {
            const title = this.value;
            const slug = title
                .toLowerCase()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-')
                .trim();
            document.getElementById('slug').value = slug;
        });
    </script>
    {{-- Toastr : Script : Start --}}
    @if (Session::has('messages'))
        <script>
            noti({!! json_encode(Session::get('messages')) !!});
        </script>
    @endif
    {{-- Toastr : Script : End --}}
@endpush