@extends('admin.app')

@section('content')
<div class="container mt-5">
    <h2>Add Blog</h2>

    {{-- Validation 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

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

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

        {{-- Category --}}
        <div class="mb-3">
            <label>Category</label>
            <select name="category_id" class="form-control" required>
                <option value="">-- Select --</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>

   <div class="mb-3">
    <label>Banner Image</label>
    <input type="file" name="banner_image" class="form-control">
</div>

<div class="mb-3">
    <label>Banner Image Alt Text</label>
    <input type="text"
           name="banner_alt"
           class="form-control"
           placeholder="Eg: Professional cleaning services in Sydney">
</div>
       {{-- Card Image --}}
<div class="mb-3">
    <label>Card Image</label>
    <input type="file" name="card_image" class="form-control" >
</div>

<div class="mb-3">
    <label>Card Image Alt Text</label>
    <input type="text"
           name="card_alt"
           class="form-control"
           placeholder="Eg: KV Cleaning commercial services">
</div>


        {{-- Blog Content --}}
        <div class="mb-3">
            <label>Blog Content</label>
            <textarea id="editor" name="content"></textarea>
        </div>
<hr>
<h5>Frequently Asked Questions (FAQ)</h5>

<div id="faq-wrapper">
    <!-- FAQ ITEM -->
    <div class="faq-item border rounded p-3 mb-3">
        <div class="mb-2">
            <label>Question</label>
            <input type="text"
                   name="faq_question[]"
                   class="form-control"
                   placeholder="Enter FAQ question">
        </div>

        <div class="mb-2">
            <label>Answer</label>
            <textarea name="faq_answer[]"
                      class="form-control"
                      rows="3"
                      placeholder="Enter FAQ answer"></textarea>
        </div>

        <button type="button" class="btn btn-danger btn-sm remove-faq d-none">
            Remove
        </button>
    </div>
</div>

<button type="button" class="btn btn-primary btn-sm" id="add-faq">
    + Add More FAQ
</button>
<hr>

        <hr>

        {{-- SEO & PUBLISH --}}
        <h5>SEO & Publishing</h5>

        {{-- Author Name --}}
        <div class="mb-3">
            <label>Author Name</label>
            <input type="text"
                   name="author_name"
                   class="form-control"
                   placeholder="Freshora Digital Technologies">
        </div>

        {{-- Publish Date --}}
        <div class="mb-3">
            <label>Publish Date</label>
            <input type="date"
                   name="published_at"
                   class="form-control">
        </div>

        {{-- SEO Title --}}
        <div class="mb-3">
            <label>SEO Title</label>
            <input type="text" name="seo_title" class="form-control">
        </div>

        {{-- Meta Tags --}}
        <div class="mb-3">
            <label>Meta Tags</label>
            <textarea name="meta"
                      class="form-control"
                      rows="6"
                      placeholder="Paste meta tags (OG, Twitter, etc.)"></textarea>
        </div>

        {{-- Schema --}}
        <div class="mb-3">
            <label>Schema (JSON-LD)</label>
            <textarea name="schema"
                      class="form-control"
                      rows="8"
                      placeholder="Paste schema JSON-LD"></textarea>
        </div>

        {{-- Status --}}
        <div class="mb-3">
            <label>Status</label>
            <select name="status" class="form-control">
                <option value="draft">Draft</option>
                <option value="published">Published</option>
            </select>
        </div>

        <button class="btn btn-success">Save Blog</button>
        <a href="{{ route('blogs.index') }}" class="btn btn-secondary">Back</a>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/tinymce.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {

    // Safety: remove editor if already exists
    if (window.tinymce && tinymce.get('editor')) {
        tinymce.get('editor').remove();
    }

    tinymce.init({
        selector: '#editor',
        height: 350,

        menubar: 'file edit insert format',

        plugins: 'lists link code',

        toolbar:
            'undo redo | bold italic underline | ' +
            'bullist numlist | link unlink | code',

        toolbar_mode: 'wrap',

        branding: false
    });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const faqWrapper = document.getElementById('faq-wrapper');
    const addFaqBtn = document.getElementById('add-faq');

    addFaqBtn.addEventListener('click', function () {
        const faqItem = document.createElement('div');
        faqItem.classList.add('faq-item', 'border', 'rounded', 'p-3', 'mb-3');

        faqItem.innerHTML = `
            <div class="mb-2">
                <label>Question</label>
                <input type="text"
                       name="faq_question[]"
                       class="form-control"
                       placeholder="Enter FAQ question">
            </div>

            <div class="mb-2">
                <label>Answer</label>
                <textarea name="faq_answer[]"
                          class="form-control"
                          rows="3"
                          placeholder="Enter FAQ answer"></textarea>
            </div>

            <button type="button" class="btn btn-danger btn-sm remove-faq">
                Remove
            </button>
        `;

        faqWrapper.appendChild(faqItem);
        toggleRemoveButtons();
    });

    faqWrapper.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-faq')) {
            e.target.closest('.faq-item').remove();
            toggleRemoveButtons();
        }
    });

    function toggleRemoveButtons() {
        const items = faqWrapper.querySelectorAll('.faq-item');
        items.forEach((item, index) => {
            const btn = item.querySelector('.remove-faq');
            btn.classList.toggle('d-none', index === 0);
        });
    }
});
</script>

@endpush