@extends('admin.layouts.app')

@section('content')

<h3 class="mb-4">Add New Blog</h3>

<div class="card shadow-sm p-4">

    {{-- Backend Errors --}}
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Success --}}
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <form method="POST" action="{{ route('admin.blogs.store') }}" enctype="multipart/form-data" id="blogForm">
    @csrf

        <!-- Cover Image -->
        <div class="mb-3">
            <label class="form-label">Cover Image *</label>
            <input type="file" name="image" class="form-control" id="imageInput" required>
        </div>

        <!-- Preview -->
        <div class="mb-3">
            <img id="previewImage" style="max-height:200px; display:none; border-radius:8px;">
        </div>

        <!-- Title -->
        <div class="mb-3">
            <label class="form-label">Blog Title *</label>
            <input type="text" name="title" class="form-control" required>
        </div>

        <!-- Description -->
        <div class="mb-3">
            <label class="form-label">Meta Description (max 255 chars) *</label>
            <input type="text" name="description" id="descInput" class="form-control" maxlength="255" required>
            <small class="text-muted">
                <span id="charCount">0</span>/255 characters
            </small>
        </div>

        <!-- Multiple Images -->
        <div class="mb-3">
            <label class="form-label">Additional Images (Optional)</label>
            <input type="file" name="images[]" multiple class="form-control">
        </div>

        <!-- Content -->
        <div class="mb-3">
            <label class="form-label">Content *</label>
            <textarea name="content" id="editor"></textarea>
        </div>

        <button class="btn btn-primary px-4">Publish Blog</button>

    </form>

</div>

@endsection


@section('scripts')

<!-- CKEditor -->
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

<script>
    let editorInstance;

    // CKEditor Init
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            editorInstance = editor;
        });

    // Image Preview
    document.getElementById('imageInput').addEventListener('change', function(e) {
        const reader = new FileReader();

        reader.onload = function() {
            const img = document.getElementById('previewImage');
            img.src = reader.result;
            img.style.display = 'block';
        }

        reader.readAsDataURL(e.target.files[0]);
    });

    // Description Character Counter
    const descInput = document.getElementById('descInput');
    const charCount = document.getElementById('charCount');

    descInput.addEventListener('input', function() {
        charCount.innerText = this.value.length;
    });

    // Form Validation (IMPORTANT 🔥)
    document.getElementById('blogForm').addEventListener('submit', function(e) {

        const content = editorInstance.getData().trim();

        if (content === '') {
            e.preventDefault();
            alert("Content is required!");
            return;
        }

        if (descInput.value.length > 255) {
            e.preventDefault();
            alert("Description cannot exceed 255 characters!");
            return;
        }

    });

</script>

@endsection