@extends('admin.layouts.master')

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <center>
            <h3 class="py-2">Edit Blog</h3>
        </center>
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                @if (Session::has('success'))
                    <div class="alert alert-success">
                        {{ Session::get('success') }}
                    </div>
                @endif
                @if (Session::has('error'))
                    <div class="alert alert-danger">
                        {{ Session::get('error') }}
                    </div>
                @endif
                <form method="post" action="{{ route('admin.blog.update', ['id' => $blog->id]) }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label for="title">Title</label>
                            <input type="text" class="form-control" id="title" placeholder="Enter title"
                                name="title" value="{{ old('title', $blog->title) }}">
                            <span class="text-danger">
                                @error('title')
                                    {{ $message }}
                                @enderror
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="slug">Slug</label>
                            <input type="text" class="form-control" id="slug" placeholder="Enter slug"
                                name="slug" value="{{ old('slug', $blog->slug) }}">
                            <span class="text-danger">
                                @error('slug')
                                    {{ $message }}
                                @enderror
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="description">Description</label>
                            <textarea class="form-control" rows="3" name="description" placeholder="Enter description">{{ old('description', $blog->description) }}</textarea>
                            <span class="text-danger">
                                @error('description')
                                    {{ $message }}
                                @enderror
                            </span>
                        </div>

                        <div class="form-group">
                            <label for="exampleInputFile">File input</label>
                            <div class="input-group">
                                <div class="custom-file">
                                    <input name="image" type="file" class="custom-file-input" id="exampleInputFile">
                                    <label class="custom-file-label" for="exampleInputFile">Choose image</label>
                                </div>
                            </div>
                            <img src="{{ env('APP_URL') . 'uploads/blog/' . $blog->filename }}" alt="{{ $blog->title }}"
                                class="w-100 img-responsive mt-2" />
                        </div>

                        <div class="form-group">
                            <label for="mtitle">Meta-Title</label>
                            <input type="text" class="form-control" id="mtitle" placeholder="Enter title"
                                name="mtitle" value="{{ old('mtitle', $blog->mtitle) }}">
                            <span class="text-danger">
                                @error('mtitle')
                                    {{ $message }}
                                @enderror
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="mdescription">Meta-Description</label>
                            <textarea class="form-control" rows="3" name="mdescription" placeholder="Enter description">{{ old('mdescription', $blog->mdescription) }}</textarea>
                            <span class="text-danger">
                                @error('mdescription')
                                    {{ $message }}
                                @enderror
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="mkeywords">Meta-Keywords</label>
                            <textarea class="form-control" rows="3" name="mkeywords" placeholder="Enter keywords">{{ old('mkeywords', $blog->mkeywords) }}</textarea>
                            <span class="text-danger">
                                @error('mkeywords')
                                    {{ $message }}
                                @enderror
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="position">Position</label>
                            <input type="number" class="form-control" id="position" placeholder="Enter position"
                                name="position" value="{{ old('position', $blog->position) }}">
                            <span class="text-danger">
                                @error('position')
                                    {{ $message }}
                                @enderror
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="status">Status</label>
                            <select name="status" id="status" class="form-control">
                                <option value="published" {{ $blog->status == 'published' ? 'selected' : '' }}>Published
                                </option>
                                <option value="draft" {{ $blog->status == 'draft' ? 'selected' : '' }}>Draft</option>
                            </select>
                        </div>

                    </div>
                    <!-- /.card-body -->

                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary">Update Blog</button>
                    </div>
                </form>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const titleInput = document.getElementById('title');
            const slugInput = document.getElementById('slug');

            titleInput.addEventListener('input', function() {
                const slug = titleInput.value
                    .toLowerCase()
                    .replace(/[^a-z0-9]+/g, '-') // Replace non-alphanumeric characters with hyphens
                    .replace(/(^-|-$)/g, ''); // Remove leading/trailing hyphens
                slugInput.value = slug;
            });

            slugInput.addEventListener('input', function() {
                // Allow manual editing but ensure a valid slug format
                const manualSlug = slugInput.value
                    .toLowerCase()
                    .replace(/[^a-z0-9-]/g, '') // Allow only alphanumeric and hyphens
                    .replace(/(^-|-$)/g, ''); // Remove leading/trailing hyphens
                slugInput.value = manualSlug;
            });
        });
        CKEDITOR.replace('description', {
            filebrowserUploadUrl: "{{ 'https://digitalterai.com/upload_blog_editor_image?_token=' . csrf_token() }}",
            filebrowserUploadMethod: 'form'
        })
    </script>
@endpush