@extends('admin.app')

@section('content')
<div class="container mt-5">
    <h2>Edit 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.update', $blog->id) }}"
          method="POST"
          enctype="multipart/form-data">
        @csrf
        @method('PUT')

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

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

        {{-- Banner Image --}}
<div class="mb-3">
    <label>Current Banner Image</label><br>

    @if($blog->banner_image)
        <img src="{{ asset('storage/'.$blog->banner_image) }}"
             alt="{{ $blog->banner_alt ?? $blog->title }}"
             width="220"
             class="mb-2 rounded">
    @endif

    <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"
           value="{{ $blog->banner_alt ?? '' }}"
           class="form-control"
           placeholder="Eg: Professional cleaning services in Sydney">
</div>

        {{-- Card Image --}}
        <div class="mb-3">
            <label>Current Card Image</label><br>
            @if($blog->card_image)
                <img src="{{ asset('storage/'.$blog->card_image) }}"
                     alt="{{ $blog->card_alt ?? $blog->title }}"
                     width="220"
                     class="mb-2 rounded">
            @endif
            <input type="file" name="card_image" class="form-control">
        </div>

        {{-- Card Alt Text --}}
        <div class="mb-3">
            <label>Card Image Alt Text</label>
            <input type="text"
                   name="card_alt"
                   value="{{ $blog->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">{!! $blog->content !!}</textarea>
        </div>
<hr>
<h5>Frequently Asked Questions (FAQ)</h5>

@php
    $faqs = !empty($blog->faqs) ? json_decode($blog->faqs, true) : [];
@endphp

<div id="faq-wrapper">

    {{-- EXISTING FAQS --}}
    @if(count($faqs))
        @foreach($faqs as $index => $faq)
            <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"
                           value="{{ $faq['question'] ?? '' }}"
                           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">{{ $faq['answer'] ?? '' }}</textarea>
                </div>

                <button type="button"
                        class="btn btn-danger btn-sm remove-faq {{ $index == 0 ? 'd-none' : '' }}">
                    Remove
                </button>
            </div>
        @endforeach
    @else
        {{-- EMPTY DEFAULT FAQ --}}
        <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>
    @endif

</div>

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


        <hr>

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

        {{-- Author Name --}}
        <div class="mb-3">
            <label>Author Name</label>
            <input type="text"
                   name="author_name"
                   value="{{ $blog->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"
                   value="{{ $blog->published_at ? \Carbon\Carbon::parse($blog->published_at)->format('Y-m-d') : '' }}"
                   class="form-control">
        </div>

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

        {{-- Meta Tags --}}
        <div class="mb-3">
            <label>Meta Tags</label>
            <textarea name="meta"
                      class="form-control"
                      rows="6">{!! $blog->meta ?? '' !!}</textarea>
        </div>

        {{-- Schema --}}
        <div class="mb-3">
            <label>Schema (JSON-LD)</label>
            <textarea name="schema"
                      class="form-control"
                      rows="8">{!! $blog->schema ?? '' !!}</textarea>
        </div>

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

        <button class="btn btn-primary">Update 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/tinymce.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    if (window.tinymce && tinymce.get('editor')) {
        tinymce.get('editor').remove();
    }

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

        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.className = '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