@extends('admin.layouts.app')

@section('title', $title)

@section('content')
    <div class="col-md-12">
        @include('admin.layouts.notifications')

        <!-- Page Heading -->
        <div class="row mb-3">
            <h4 class="c-grey-900">{{ $title }}</h4>
        </div>

        <!-- Form Section -->
        <form action="{{ route('ch-admin.blog.posts.update', $post->id) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="row">
                <!-- Left Section -->
                <div class="col-md-8">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20">
                        <!-- Title -->
                        <div class="mb-3">
                            <label for="title" class="form-label">Title</label>
                            <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title', $post->title) }}">
                            @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Content -->
                        <div class="mb-3">
                            <label for="content" class="form-label">Content</label>
                            <textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content">{{ old('content', $post->content) }}</textarea>
                            @error('content')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Right Section -->
                <div class="col-md-4">
                    <div class="bgc-white bd bdrs-3 p-20 mB-20">
                        <!-- Categories -->
                        <div class="mb-3">
                            <label for="category_id" class="form-label">Category</label>
                            <select class="form-control @error('category_id') is-invalid @enderror" id="category_id" name="category_id[]" multiple>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}"
                                    @foreach($post->categories as $selectedCategory)
                                        {{ in_array($category->id, $post->categories->pluck('id')->toArray()) ? 'selected' : '' }}
                                        @endforeach>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div class="mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select class="form-control @error('status') is-invalid @enderror" id="status" name="status">
                                <option value="" disabled>Select Status</option>
                                <option value="draft" {{ $post->status == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="published" {{ $post->status == 'published' ? 'selected' : '' }}>Published</option>
                            </select>
                            @error('status')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Featured Image -->
                        <div class="mb-3">
                            <label for="status" class="form-label">Featured Image</label>
                            <div class="uploader">
                                <button
                                    id="logo-uplodaer"
                                    data-media-config='{"key": "featuredImage", "container": ".featured-image", "single_upload": "true", "maxFiles": 1, "previewsContainer": ".featured-image-preview"}'
                                    data-files="@if (isset($featuredImage) && !empty($featuredImage)){{$featuredImage}}@endif"
                                    type="button"
                                    class="btn btn-primary btn-sm text-white dropzone">
                                    <i class="ti-plus"></i> Upload Image
                                </button>

                                <div class="featured-image"></div>
                                <div class="featured-image-preview mt-3"></div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="d-flex">
                            <a href="{{ route('ch-admin.blog.posts.index') }}" class="btn btn-secondary me-2 flex-grow-1">Cancel</a>
                            <button type="submit" class="btn btn-primary flex-grow-1">Update</button>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
@endsection

@push('head')
    <script src="{{ url('assets/backend/js/vendors/ckeditor.js') }}"></script>
@endpush

@push('scripts')
    @include('admin.media.upload')
    <script src="{{ url('assets/backend/js/vendors/dropzone.min.js') }}"></script>
    <script src="{{ url('assets/backend/js/media.js') }}"></script>
    <script>
        const textAreas = ['#content'];
        textAreas.forEach((el) => {
            ClassicEditor.create(document.querySelector(el), {
                removePlugins: ['EasyImage', 'ImageUpload'],
            }).then(editor => {
                const form = document.querySelector('form');
                form.addEventListener('submit', function () {
                    document.querySelector(el).value = editor.getData();
                });
            });
        });
    </script>
@endpush