@extends('layouts.backoffice.index', ['title' => 'Edit Artikel'])

@section('main')
    <section class="section">
        <div class="card shadow">
            <div class="card-header">
                <h5><b>Edit Artikel</b></h5>
            </div>
            <div class="card-body">
                <form action="{{ route('backoffice.article.update', ['id' => $article->id]) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label><b> Judul </b> <span class="text-danger"><b>*</b></span></label>
                            <input type="text" class="form-control" value="{{ $article->title }}" name="title"
                                required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label><b>Thumbnail</b> <span class="text-danger"><b>*</b></span></label>
                            <div class="upload-area">
                                <input type="file" id="thumbnail-add" name="thumbnail" class="upload-input"
                                    accept="image/*">
                                <div class="upload-message">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-primary"></i>
                                    <p class="mt-2 mb-0">Klik atau tarik foto ke sini</p>
                                    <small class="text-muted">Format: jpg, png, jpeg</small>
                                </div>
                            </div>
                            <small>Direkomendasikan gambar dengan ratio landscape</small>
                            <div id="preview-thumbnail-add" class="mt-3">
                                <div class="preview-single fade-in">
                                    <img src="{{ asset('storage/' . $article->thumbnail) }}" alt="">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label><b> Isi Artikel </b> <span class="text-danger"><b>*</b></span></label>
                            <textarea id="article" name="content" class="form-control" rows="100">{{ $article->content }}</textarea>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="form-group">
                                <label>Kategori <span class="text-danger"><b>*</b></span></label>
                                <select name="category_id" class="form-control" id="category_selector" required>
                                    <option value="">Pilih Kategori</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ $article->category_id == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>


                        <div class="col-md-4 mb-3">
                            <label><b> Tag (Opsional) </b></label>

                            <div class="tag-container form-control" id="tag-wrapper">
                                <input type="text" id="tag-input" placeholder="Ketik & tekan koma" autocomplete="off">
                            </div>

                            <input type="hidden" name="tags" id="hidden-tags" value="{{ $article->tags }}">

                            <small class="text-muted">Pisahkan tag dengan <b>Koma (,)</b> atau <b>Enter</b></small>
                        </div>

                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-label">Status <span class="text-danger"><b>*</b></span></label>
                                <div class="selectgroup w-100">
                                    <label class="selectgroup-item">
                                        <input type="radio" name="status" value="publish" class="selectgroup-input"
                                            {{ $article->status == 'publish' ? 'checked' : '' }} required>
                                        <span class="selectgroup-button selectgroup-button-icon"><i
                                                class="fas fa-check"></i>
                                            Publish</span>
                                    </label>
                                    <label class="selectgroup-item">
                                        <input type="radio" name="status" value="draft" class="selectgroup-input"
                                            {{ $article->status == 'draft' ? 'checked' : '' }} required>
                                        <span class="selectgroup-button selectgroup-button-icon"><i
                                                class="fas fa-times"></i>
                                            Draft</span>
                                    </label>
                                </div>
                                <small>Jika status <b>Publish</b> akan tampil dihalaman utama</small>
                            </div>
                        </div>

                        <div class="col-md-6 text-left">
                            <span><b> Catatan : </b></span>
                            <p>Masukan dengan tanda bintang merah ( <span class="text-danger">*</span> ) wajib diisi /
                                dipilih</p>
                        </div>
                        <div class="col-md-6 text-right">
                            <button type="submit" class="btn btn-success">
                                <i class="fa fa-save"></i> Simpan Data
                            </button>
                            <a href="{{ route('backoffice.article') }}" class="btn btn-danger">
                                <i class="fa fa-times"></i> Batal
                            </a>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@push('styles')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />

    <style>
        /* Styling Custom Input File agar terlihat seperti Dropzone */
        .upload-area {
            position: relative;
            width: 100%;
            min-height: 150px;
            border: 2px dashed #6777ef;
            /* Warna primary theme */
            border-radius: 10px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.3s ease;
            overflow: hidden;
            cursor: pointer;
        }

        .upload-area:hover {
            background-color: #eef0ff;
            border-color: #4c59d6;
        }

        /* Sembunyikan input file asli tapi buat memenuhi area agar bisa diklik */
        .upload-input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }

        .upload-message {
            z-index: 1;
            pointer-events: none;
            /* Agar klik tembus ke input */
        }

        /* Styling Preview Image */
        .preview-single img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .preview-gallery-item {
            position: relative;
            margin-bottom: 15px;
        }

        .preview-gallery-item img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ddd;
        }


        .fade-in {
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
    <style>
        .upload-area {
            position: relative;
            width: 100%;
            min-height: 150px;
            border: 2px dashed #6777ef;
            border-radius: 10px;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.3s ease;
            overflow: hidden;
            cursor: pointer;
        }

        .upload-area:hover {
            background-color: #eef0ff;
            border-color: #4c59d6;
        }

        .upload-input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }

        .preview-single img {
            max-width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 8px;
        }

        .fade-in {
            animation: fadeIn 0.5s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* === FIXED TAG INPUT CSS === */
        .tag-container {
            display: flex;
            flex-wrap: wrap;
            /* CRITICAL: This forces new lines */
            align-items: center;
            min-height: 45px;
            height: auto !important;
            /* Forces box to grow */
            padding: 5px;
            gap: 5px;
            /* Adds space between tags automatically */
            cursor: text;
        }

        .tag-container input {
            border: none;
            outline: none;
            padding: 5px;
            background: transparent;
            font-size: 14px;
            flex-grow: 1;
            /* Input takes remaining space */
            width: auto;
            min-width: 100px;
            /* Prevents input from becoming invisible */
        }

        .tag-badge {
            display: inline-flex;
            align-items: center;
            background-color: #6777ef;
            color: #fff;
            padding: 6px 12px;
            border-radius: 50px;
            font-size: 13px;
            line-height: 1;
            white-space: nowrap;
            /* Prevents text inside tag from breaking */
            max-width: 100%;
            /* Prevents massive tags from breaking layout */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tag-close {
            margin-left: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 14px;
        }

        .tag-close:hover {
            color: #ffcccc;
        }
    </style>
@endpush

@push('scripts')
    {{-- CKEDITOR --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/41.2.0/classic/ckeditor.js"></script>

    {{-- SELECT2 --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.full.min.js"></script>

    <script>
        function handleFileSelect(event, previewId, isMultiple = false) {
            const files = event.target.files;
            const previewContainer = document.getElementById(previewId);

            previewContainer.innerHTML = '';

            if (files.length === 0) return;

            if (isMultiple) {
                Array.from(files).forEach(file => {
                    if (file.type.match('image.*')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const colDiv = document.createElement('div');
                            colDiv.className = 'col-4 preview-gallery-item fade-in';
                            colDiv.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
                            previewContainer.appendChild(colDiv);
                        }
                        reader.readAsDataURL(file);
                    }
                });
            } else {
                const file = files[0];
                if (file.type.match('image.*')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const div = document.createElement('div');
                        div.className = 'preview-single fade-in';
                        div.innerHTML = `<img src="${e.target.result}" alt="Preview Thumbnail">`;
                        previewContainer.appendChild(div);
                    }
                    reader.readAsDataURL(file);
                }
            }
        }


        document.getElementById('thumbnail-add').addEventListener('change', function(e) {
            handleFileSelect(e, 'preview-thumbnail-add', false);
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tagWrapper = document.getElementById('tag-wrapper');
            const tagInput = document.getElementById('tag-input');
            const hiddenInput = document.getElementById('hidden-tags');

            let tags = [];
            if (hiddenInput.value) {
                tags = hiddenInput.value.split(',').map(tag => tag.trim()).filter(tag => tag !== "");
                renderTags();
            }

            tagWrapper.addEventListener('click', function() {
                tagInput.focus();
            });

            tagInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ',') {
                    e.preventDefault();
                    addTag(tagInput.value);
                } else if (e.key === 'Backspace' && tagInput.value === '' && tags.length > 0) {
                    tags.pop();
                    updateHiddenInput();
                    renderTags();
                }
            });

            function addTag(text) {
                let formattedText = text.replace(/,/g, '').trim();

                if (formattedText !== "" && !tags.includes(formattedText)) {
                    tags.push(formattedText);
                    updateHiddenInput();
                    renderTags();
                    tagInput.value = '';
                } else {
                    tagInput.value = '';
                }
            }

            function removeTag(index) {
                tags.splice(index, 1);
                updateHiddenInput();
                renderTags();
            }

            function renderTags() {
                document.querySelectorAll('.tag-badge').forEach(el => el.remove());

                tags.forEach((tag, index) => {
                    const tagEl = document.createElement('span');
                    tagEl.classList.add('tag-badge');
                    tagEl.innerHTML = `
                        ${tag} 
                        <span class="tag-close" data-index="${index}">&times;</span>
                    `;
                    tagWrapper.insertBefore(tagEl, tagInput);
                });

                document.querySelectorAll('.tag-close').forEach(closeBtn => {
                    closeBtn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const index = parseInt(this.getAttribute('data-index'));
                        removeTag(index);
                    });
                });
            }

            function updateHiddenInput() {
                hiddenInput.value = tags.join(',');
            }
        });
    </script>
    <script>
        class MyUploadAdapter {
            constructor(loader) {
                this.loader = loader;
            }

            upload() {
                return this.loader.file.then(file => {
                    return new Promise((resolve, reject) => {
                        const data = new FormData();
                        data.append('upload', file);

                        fetch("{{ route('backoffice.ckeditor.upload-for-article') }}", {
                                method: 'POST',
                                body: data,
                                headers: {
                                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                                }
                            })
                            .then(response => response.json())
                            .then(result => {
                                if (!result.url) {
                                    reject(result);
                                }

                                resolve({
                                    default: result.url
                                });
                            })
                            .catch(error => reject(error));
                    });
                });
            }

            abort() {}
        }

        function MyCustomUploadAdapterPlugin(editor) {
            editor.plugins.get('FileRepository').createUploadAdapter = loader => {
                return new MyUploadAdapter(loader);
            };
        }
    </script>
    <script>
        ClassicEditor
            .create(document.querySelector('#article'), {
                extraPlugins: [MyCustomUploadAdapterPlugin],
                toolbar: [
                    'heading', '|',
                    'bold', 'italic', 'link',
                    'bulletedList', 'numberedList',
                    '|',
                    'imageUpload',
                    'insertTable',
                    'undo', 'redo'
                ]
            })
            .then(
                editor => {
                    editor.editing.view.change(writer => {
                        writer.setStyle('min-height', '100px', editor.editing.view.document.getRoot());
                    });
                }
            )
            .catch(error => console.error(error));

        $(document).ready(function() {
            $('#category_selector').select2({});
        });
    </script>
@endpush