@extends('layouts.dashboard')
@section('title', $blog->id ? 'Edit Blog' : 'New Blog')
@section('page-title', $blog->id ? 'Edit Blog' : 'Write New Blog')
@section('content')
<div class="content-card">
    @if(!$blog->id)
        <div class="alert alert-info">
            <strong>{{ auth()->user()->blogsRemaining() }} posts remaining.</strong>
            Blogs publish instantly and stay online for life.
        </div>
    @endif

    <form method="POST" action="{{ $blog->id ? route('reseller.blogs.update', $blog) : route('reseller.blogs.store') }}" enctype="multipart/form-data">
        @csrf @if($blog->id)@method('PUT')@endif

        <div class="mb-3">
            <label class="form-label">Blog Title</label>
            <input type="text" name="title" class="form-control form-control-lg" value="{{ old('title', $blog->title) }}" required>
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label">Category</label>
                <select name="category_id" class="form-select">
                    <option value="">— Select category —</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat['id'] }}" {{ old('category_id', $blog->category_id) == $cat['id'] ? 'selected' : '' }}>{{ $cat['name'] }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 mb-3">
                <label class="form-label">Language Code</label>
                <input type="text" name="language" class="form-control" placeholder="en, ar, es, fr…" value="{{ old('language', $blog->language ?? 'en') }}">
                <small class="text-muted">Write in any language.</small>
            </div>
            <div class="col-md-3 mb-3">
                <label class="form-label">Tags (comma separated)</label>
                <input type="text" name="tags" class="form-control" value="{{ old('tags', is_array($blog->tags) ? implode(',', $blog->tags) : '') }}">
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label">Excerpt (short summary)</label>
            <textarea name="excerpt" rows="2" class="form-control" maxlength="500">{{ old('excerpt', $blog->excerpt) }}</textarea>
        </div>

        <div class="mb-3">
            <label class="form-label">Content (HTML allowed)</label>
            <textarea name="content" rows="14" class="form-control rich-editor" required>{{ old('content', $blog->content) }}</textarea>
            <small class="text-muted">Basic HTML supported: &lt;p&gt; &lt;h2&gt; &lt;ul&gt; &lt;img&gt; &lt;a&gt; &lt;strong&gt; etc.</small>
        </div>

        <div class="mb-3">
            <label class="form-label">Featured Image (optional)</label>
            <input type="file" name="featured_image_file" class="form-control" accept="image/*">
            @if($blog->featured_image)
                <div class="mt-2"><img src="{{ $blog->featuredImageUrl() }}" style="max-height:120px;border-radius:4px;"></div>
            @endif
        </div>

        <div class="d-flex gap-2">
            <button class="btn btn-primary">{{ $blog->id ? 'Update Blog' : 'Publish Blog' }}</button>
            <a href="{{ route('reseller.blogs.index') }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </form>
</div>
@push('head')
<link href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" rel="stylesheet">
@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const textarea = document.querySelector('textarea.rich-editor');
    if (!textarea) return;

    const wrapper = document.createElement('div');
    wrapper.style.background = '#fff';
    wrapper.style.borderRadius = '6px';
    textarea.style.display = 'none';
    textarea.parentNode.insertBefore(wrapper, textarea.nextSibling);

    function setup() {
        const quill = new Quill(wrapper, {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ header: [1, 2, 3, false] }],
                    ['bold', 'italic', 'underline'],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    ['link', 'blockquote', 'code-block'],
                    ['clean']
                ]
            }
        });
        quill.root.innerHTML = textarea.value || '';
        textarea.closest('form').addEventListener('submit', function () {
            textarea.value = quill.root.innerHTML;
        });
    }

    if (window.Quill) {
        setup();
    } else {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js';
        script.onload = setup;
        document.body.appendChild(script);
    }
});
</script>
@endpush
@endsection
