@csrf

<div class="row g-4">
    <div class="col-lg-6">
        <label class="form-label">H1 EN</label>
        <input type="text" name="h1_en" value="{{ old('h1_en', $blog->h1_en) }}" class="form-control @error('h1_en') is-invalid @enderror">
        @error('h1_en')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">H1 AR</label>
        <input type="text" name="h1_ar" dir="rtl" value="{{ old('h1_ar', $blog->h1_ar) }}" class="form-control @error('h1_ar') is-invalid @enderror">
        @error('h1_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Title EN</label>
        <input type="text" name="title_en" value="{{ old('title_en', $blog->title_en) }}" class="form-control @error('title_en') is-invalid @enderror">
        @error('title_en')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Title AR</label>
        <input type="text" name="title_ar" dir="rtl" value="{{ old('title_ar', $blog->title_ar) }}" class="form-control @error('title_ar') is-invalid @enderror">
        @error('title_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Category EN</label>
        <input type="text" name="category_en" value="{{ old('category_en', $blog->category_en) }}" class="form-control @error('category_en') is-invalid @enderror">
        @error('category_en')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Category AR</label>
        <input type="text" name="category_ar" dir="rtl" value="{{ old('category_ar', $blog->category_ar) }}" class="form-control @error('category_ar') is-invalid @enderror">
        @error('category_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Tags EN</label>
        <input type="text" name="tags_en" value="{{ old('tags_en', is_array($blog->tags_en ?? null) ? implode(', ', $blog->tags_en) : $blog->tags_en) }}" class="form-control @error('tags_en') is-invalid @enderror" placeholder="tag1, tag2, tag3">
        @error('tags_en')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Tags AR</label>
        <input type="text" name="tags_ar" dir="rtl" value="{{ old('tags_ar', is_array($blog->tags_ar ?? null) ? implode(', ', $blog->tags_ar) : $blog->tags_ar) }}" class="form-control @error('tags_ar') is-invalid @enderror" placeholder="وسم 1, وسم 2, وسم 3">
        @error('tags_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-12">
        <label class="form-label">Slug</label>
        <input type="text" name="slug" value="{{ old('slug', $blog->slug) }}" class="form-control @error('slug') is-invalid @enderror">
        @error('slug')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Meta Title EN</label>
        <input type="text" name="meta_title_en" value="{{ old('meta_title_en', $blog->meta_title_en) }}" class="form-control @error('meta_title_en') is-invalid @enderror">
        @error('meta_title_en')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Meta Title AR</label>
        <input type="text" name="meta_title_ar" dir="rtl" value="{{ old('meta_title_ar', $blog->meta_title_ar) }}" class="form-control @error('meta_title_ar') is-invalid @enderror">
        @error('meta_title_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Meta Description EN</label>
        <textarea name="meta_description_en" rows="3" class="form-control @error('meta_description_en') is-invalid @enderror">{{ old('meta_description_en', $blog->meta_description_en) }}</textarea>
        @error('meta_description_en')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Meta Description AR</label>
        <textarea name="meta_description_ar" rows="3" dir="rtl" class="form-control @error('meta_description_ar') is-invalid @enderror">{{ old('meta_description_ar', $blog->meta_description_ar) }}</textarea>
        @error('meta_description_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Excerpt EN</label>
        <textarea name="excerpt_en" rows="4" class="form-control @error('excerpt_en') is-invalid @enderror">{{ old('excerpt_en', $blog->excerpt_en) }}</textarea>
        @error('excerpt_en')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Excerpt AR</label>
        <textarea name="excerpt_ar" rows="4" dir="rtl" class="form-control @error('excerpt_ar') is-invalid @enderror">{{ old('excerpt_ar', $blog->excerpt_ar) }}</textarea>
        @error('excerpt_ar')
            <div class="invalid-feedback">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-12">
        <label class="form-label">Content EN</label>
        <textarea id="content_en" name="content_en" rows="12" class="form-control @error('content_en') is-invalid @enderror">{{ old('content_en', $blog->content_en) }}</textarea>
        @error('content_en')
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-12">
        <label class="form-label">Content AR</label>
        <textarea id="content_ar" name="content_ar" rows="12" dir="rtl" class="form-control @error('content_ar') is-invalid @enderror">{{ old('content_ar', $blog->content_ar) }}</textarea>
        @error('content_ar')
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-lg-6">
        <label class="form-label">Image</label>
        <input type="file" name="image" class="form-control @error('image') is-invalid @enderror">
        @error('image')
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror

        @if($blog->image)
            <div class="mt-3">
                <img src="{{ asset('storage/' . $blog->image) }}" alt="{{ $blog->title_en }}" width="180" class="rounded border img-fluid">
            </div>
        @endif
    </div>

    <div class="col-lg-6">
        <label class="form-label">Published At</label>
        <input type="datetime-local" name="published_at" value="{{ old('published_at', $blog->published_at?->format('Y-m-d\TH:i')) }}" class="form-control @error('published_at') is-invalid @enderror">
        @error('published_at')
            <div class="invalid-feedback d-block">{{ $message }}</div>
        @enderror

        <div class="form-check form-switch mt-3">
            <input type="hidden" name="is_published" value="0">
            <input type="checkbox" class="form-check-input" id="is_published" name="is_published" value="1" {{ old('is_published', $blog->is_published) ? 'checked' : '' }}>
            <label class="form-check-label" for="is_published">Published</label>
        </div>
    </div>
</div>

<div class="d-flex justify-content-end gap-2 mt-4">
    <a href="{{ route('admin.blogs.index') }}" class="btn btn-light border">Cancel</a>
    <button type="submit" class="btn btn-primary">{{ $submitButtonText }}</button>
</div>

@push('ad_styles')
<style>
    .cke_contents {
        min-height: 420px !important;
    }

    .cke_editable[dir="rtl"] {
        text-align: right;
    }
</style>
@endpush

@push('ad_scripts')
<script src="https://cdn.ckeditor.com/4.22.1/standard-all/ckeditor.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if (document.getElementById('content_en')) {
            CKEDITOR.replace('content_en', {
                height: 420,
                removeButtons: '',
                extraAllowedContent: '*(*);*{*}',
                allowedContent: true
            });
        }

        if (document.getElementById('content_ar')) {
            CKEDITOR.replace('content_ar', {
                height: 420,
                contentsLangDirection: 'rtl',
                extraAllowedContent: '*(*);*{*}',
                allowedContent: true
            });
        }
    });
</script>
@endpush