@extends('layouts.admin') 
@section('title', 'Add-Blog')
@section('page-title', 'Add-Blog')
@section('content') 

<div class="container py-5">
    <h2>Create New Blog Post</h2>

    {{-- Display success message --}}
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show rounded-3" role="alert">
            <strong>Success!</strong> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- Display validation errors --}}
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show rounded-3" role="alert">
            <strong>Oops!</strong> Please fix the following errors:
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <form action="{{ route('add.blog') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="mb-3">
            <label for="title" class="form-label">Title <span class="text-danger">*</span></label>
            <input type="text" name="title" id="title" class="form-control" value="{{ old('title') }}" required>
        </div>

        <div class="mb-3">
            <label for="category" class="form-label">Category</label>
            <input type="text" name="category" id="category" class="form-control" value="{{ old('category') }}">
        </div>

        <div class="mb-3">
            <label for="published_date" class="form-label">Published Date</label>
            <input type="date" name="published_date" id="published_date" class="form-control" value="{{ old('published_date') }}">
        </div>

        <div class="mb-3">
            <label for="short_description" class="form-label">Short Description</label>
            <textarea name="short_description" id="short_description" class="form-control" rows="3">{{ old('short_description') }}</textarea>
        </div>

       <div class="mb-3">
            <label for="content" class="form-label">Content <span class="text-danger">*</span></label>
            <textarea name="content" id="content" class="form-control" rows="6" >{{ old('content') }}</textarea>
        </div>

        <div class="mb-3">
            <label for="featured_img" class="form-label">Featured Image</label>
            <input type="file" name="featured_img" id="featured_img" class="form-control" accept="image/*">

            <!-- Featured image preview -->
            <div class="mt-2">
                <img id="featured_preview" style="max-width:100%; display:none;">
            </div>

            @if(isset($hero) && $hero->featured_img)
                <img src="{{ asset($hero->featured_img) }}" alt="Featured" width="200" class="mt-2">
            @endif
        </div>

        <div class="mb-3">
            <label for="status" class="form-label">Status</label>
            <select name="status" id="status" class="form-control">
                <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
            </select>
        </div>

        <hr>
        <h5 class="mt-4">SEO Meta Information</h5>

        <div class="mb-3">
            <label for="meta_title" class="form-label">Meta Title</label>
            <input type="text"
                name="meta_title"
                id="meta_title"
                class="form-control"
                value="{{ old('meta_title') }}"
                placeholder="Meta title for search engines (50–60 characters)">
        </div>

        <div class="mb-3">
            <label for="meta_description" class="form-label">Meta Description</label>
            <textarea name="meta_description"
                    id="meta_description"
                    class="form-control"
                    rows="3"
                    placeholder="Meta description for SEO (150–160 characters)">{{ old('meta_description') }}</textarea>
        </div>

        <div class="mb-3">
            <label for="meta_keywords" class="form-label">Meta Keywords</label>
            <input type="text"
                name="meta_keywords"
                id="meta_keywords"
                class="form-control"
                value="{{ old('meta_keywords') }}"
                placeholder="keyword1, keyword2, keyword3">
        </div>


        <button type="submit" class="btn btn-primary mt-3">Create Blog Post</button>
    </form>
</div>


<script>
let featuredCropper = null;

document.getElementById('featured_img').addEventListener('change', function (e) {
    const file = e.target.files[0];
    if (!file) return;

    const img = document.getElementById('featured_preview');
    img.style.display = 'block';
    img.src = URL.createObjectURL(file);

    if (featuredCropper) {
        featuredCropper.destroy();
    }

    featuredCropper = new Cropper(img, {
        aspectRatio: 1440 / 450, // ✅ comma added
        viewMode: 1,
        autoCropArea: 1,
        responsive: true,
    });
});

document.querySelector('form').addEventListener('submit', function (e) {
    if (!featuredCropper) return;

    e.preventDefault();

    const form = this;
    const formData = new FormData(form);

    featuredCropper.getCroppedCanvas({
        width: 1440,
        height: 450,
    }).toBlob(blob => {
        formData.set('featured_img', blob, 'featured.png');

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document
                    .querySelector('meta[name="csrf-token"]')
                    .getAttribute('content')
            }
        })
        .then(res => res.ok ? location.reload() : alert('Upload failed'))
        .catch(err => console.error(err));
    });
});
</script>

@endsection