@extends('layouts.admin')

@section('title', 'Edit Artikel')

@section('content')

<div class="container-fluid py-4">

    <div class="row justify-content-center">
        <div class="col-lg-10">

            {{-- TITLE --}}
            <div class="card mb-4">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="text-uppercase mb-0">Edit Artikel</h6>
                    <a href="{{ route('articles.index') }}" class="btn btn-sm bg-gradient-secondary">
                        Kembali
                    </a>
                </div>
            </div>

            <form id="articleForm" action="{{ route('articles.update', $article->id) }}"
                method="POST"
                enctype="multipart/form-data">

                @csrf
                @method('PUT')

                <div class="row">

                    {{-- ============================
                    CARD: DATA ARTIKEL
                    ============================= --}}
                    <div class="col-12 mb-4">
                        <div class="card shadow-sm">
                            <div class="card-header pb-0">
                                <h6 class="text-primary text-uppercase">
                                    Data Artikel
                                </h6>
                            </div>

                            <div class="card-body px-4 py-4">

                                {{-- Learning Path --}}
                                <div class="mb-3">
                                    <label class="form-label">Learning Path</label>
                                    <select name="learning_path_id" class="form-control" required>
                                        @foreach ($learningPaths as $lp)
                                            <option value="{{ $lp->id }}"
                                                {{ $article->learning_path_id == $lp->id ? 'selected' : '' }}>
                                                {{ $lp->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

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

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

                                {{-- Trending --}}
                                <div class="form-check form-switch">
                                    <input class="form-check-input"
                                           type="checkbox"
                                           name="is_trending"
                                           value="1"
                                           {{ $article->is_trending ? 'checked' : '' }}>
                                    <label class="form-check-label">
                                        Tandai sebagai Trending
                                    </label>
                                </div>

                            </div>
                        </div>
                    </div>

                    {{-- ============================
                    CARD: DETAIL ARTIKEL
                    ============================= --}}
                    <div class="col-12 mb-4">
                        <div class="card shadow-sm">
                            <div class="card-header pb-0">
                                <h6 class="text-primary text-uppercase">
                                    Detail Artikel
                                </h6>
                            </div>

                            <div class="card-body px-4 py-4">

                                {{-- Content --}}
                                <div class="mb-3">
                                    <label class="form-label">Konten Artikel</label>

                                        <!-- Editor -->
                                        <div id="editor" style="height:300px">
                                            {!! old('content', $article->articleDetail->content ?? '') !!}
                                        </div>

                                        <!-- Hidden input -->
                                        <input type="hidden" name="content" id="content">
                                </div>

                                {{-- Thumbnail --}}
                                <div class="col-12 mb-4">
                                    <label class="form-label">Thumbnail</label>
                                    <input type="file"
                                           name="thumbnail"
                                           class="form-control"
                                           accept="image/*">

                                    {{-- Preview Lama --}}
                                    @if (!empty($article->articleDetail->thumbnail))
                                        <div class="mt-3 text-center">
                                            <img src="{{ asset('storage/' . $article->articleDetail->thumbnail) }}"
                                                 class="img-fluid rounded shadow"
                                                 style="max-height: 180px; object-fit: cover;">
                                        </div>
                                    @endif

                                    {{-- Preview Baru --}}
                                    <div class="mt-3 text-center">
                                        <img id="previewThumbnail"
                                             class="img-fluid rounded shadow d-none"
                                             style="max-height: 180px; object-fit: cover;">
                                    </div>
                                </div>

                                {{-- Meta Title --}}
                                <div class="mb-3">
                                    <label class="form-label">Meta Title</label>
                                    <input type="text"
                                           name="meta_title"
                                           class="form-control"
                                           value="{{ old('meta_title', $article->articleDetail->meta_title ?? '') }}">
                                </div>

                                {{-- Meta Description --}}
                                <div class="mb-3">
                                    <label class="form-label">Meta Description</label>
                                    <textarea name="meta_description"
                                              rows="3"
                                              class="form-control">{{ old('meta_description', $article->articleDetail->meta_description ?? '') }}</textarea>
                                </div>

                               <div class="form-check form-switch mt-3">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        name="is_private"
                                        value="1"
                                        {{ old('is_private', $article->is_private) ? 'checked' : '' }}
                                    >

                                    <label class="form-check-label">
                                        Private
                                    </label>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>

                {{-- BUTTON --}}
                <div class="text-end">
                    <button class="btn bg-gradient-primary px-4">
                        Update Artikel
                    </button>
                </div>

            </form>

        </div>
    </div>

</div>

@endsection

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

    const quill = new Quill('#editor', {
        theme: 'snow',
        placeholder: 'Edit konten artikel...',
        modules: {
            toolbar: [
                [{ header: [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                ['link', 'image'],
                ['clean']
            ]
        }
    });

    // Inject konten lama
    const oldContent = `{!! addslashes(old('content', $article->articleDetail->content ?? '')) !!}`;
    if (oldContent) {
        quill.clipboard.dangerouslyPasteHTML(oldContent);
    }

    // Sinkron ke hidden input (PASTI KEFORM YANG BENAR)
    const form = document.getElementById('articleForm');
    form.addEventListener('submit', function () {
        document.getElementById('content').value = quill.root.innerHTML;
    });

});
</script>
@endpush