@extends('layout.master')
@section('content')

 <link href="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.css" rel="stylesheet" />
<script src="https://cdn.ckeditor.com/ckeditor5/40.2.0/classic/ckeditor.js"></script>

   <style>
    .label_custom {
        font-family: Arial, sans-serif;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
    }

    .save_btn {
        background-color: #112B66;
        color: white;
        border: none;
        border-radius: 10px;
        padding: 8px 24px;
        font-size: 16px;
        transition: background-color 0.2s ease;
    }

    .save_btn:hover {
        background-color: #0e2352;
    }

    .breadcum_active {
        color: gray;
        font-size: 12px;
        font-weight: 500;
    }

    .form-control {
        width: 100%;
        padding: 8px;
        border: 1px solid #ced4da;
        border-radius: 8px;
        font-size: 0.95rem;
        transition: all 0.2s ease;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
        outline: none;
    }

    .custom-dropdown {
        position: relative;
        width: 100%;
    }

    .custom-dropdown-toggle {
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 8px;
        background-color: #fff;
        font-size: 0.95rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
    }

    .custom-dropdown-toggle:focus {
        border-color: #007bff;
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
        outline: none;
    }

    .custom-dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #ced4da;
        border-radius: 8px;
        background-color: #fff;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .custom-dropdown-menu.show {
        display: block;
    }

    .custom-dropdown-item {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 0.95rem;
    }

    .custom-dropdown-item:hover {
        background-color: #f8f9fa;
    }

    .custom-dropdown-search {
        padding: 8px;
        width: 100%;
        border: none;
        border-bottom: 1px solid #ced4da;
        border-radius: 0;
        font-size: 0.95rem;
    }

    .custom-dropdown-search:focus {
        outline: none;
        border-color: #007bff;
    }

    #tag_list {
        list-style: none;
        padding: 0;
        margin: 10px 0 0 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #tag_list .badge {
        background-color: #007bff;
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        transition: background-color 0.2s ease;
    }

    #tag_list .badge:hover {
        background-color: #0056b3;
    }

    #tag_list .badge .remove-tag {
        margin-left: 8px;
        font-size: 0.9rem;
        font-weight: bold;
        color: #fff;
        opacity: 0.8;
        cursor: pointer;
    }

    #tag_list .badge .remove-tag:hover {
        opacity: 1;
    }

    .ck-editor__editable {
        min-height: 200px;
        border: 1px solid #ced4da;
        border-radius: 8px;
    }

    .error-message {
        color: #dc3545;
        font-size: 0.85rem;
        margin-top: 5px;
        display: none;
    }

    #image-preview img {
        max-width: 100px;
        max-height: 100px;
        margin: 8px 8px 0 0;
        border-radius: 4px;
        border: 1px solid #ced4da;
    }

    .card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 24px;
    }

    .breadcum {
        margin-bottom: 20px;
    }
</style>
    <div class="main-content side-content pt-0">
        <div class="main-container container-fluid">
            <div class="inner-body">
                <div class="col-lg-12 col-md-12 mt-5">
                    <div class="card border-0 p-3">
                        <h2>Add Blogs</h2>
                        <div class="breadcum">
                            <div class="d-flex align-items-center gap-3">
                                <a href="{{ url('/dashboard') }}">
                                    <p class="inactive_breadcum">Home</p>
                                </a>
                                <p class="mt-1">></p>
                                <a href="">
                                    <p class="inactive_breadcum">Blogs</p>
                                </a>
                                <p class="mt-1">></p>
                                <p class="breadcum_active">Add Blogs</p>
                            </div>
                        </div>
                        <div>
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            @if (session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif
                            <form action="{{ route('blogs.store') }}" method="post" enctype="multipart/form-data" id="blog-form">
                                @csrf
                                <div class="row">
                                    <div class="col-md-12 mt-3">
                                        <label for="title" class="label_custom">Title Name</label>
                                        <input type="text" class="form-control" value="{{ old('title') }}" name="title" id="title">
                                    </div>
                                    <div class="col-md-12 mt-3">
                                <label for="blog_tags" class="label_custom">Blog Tags</label>
                                <div class="custom-dropdown">
                                    <div class="custom-dropdown-toggle" onclick="toggleDropdown()">Select tags <span class="dropdown-arrow">▼</span></div>
                                    <div class="custom-dropdown-menu" id="tag-menu">
                                        @foreach ($tags as $tag)
                                            <div class="custom-dropdown-item" onclick="selectTag('{{ $tag->id }}', '{{ $tag->tag }}')">{{ $tag->tag }}</div>
                                        @endforeach
                                    </div>
                                    <input type="hidden" name="blog_tags[]" id="selected-tags-input">
                                </div>
                                <div id="selected_tags" class="mt-3">
                                    <ul id="tag_list" class="list-unstyled d-flex flex-wrap gap-2"></ul>
                                </div>
                                <div id="tags-error" class="error-message">Please select at least one tag.</div>
                            </div>
                                    <div class="col-md-12 mt-3">
                                        <label for="country" class="label_custom">Country</label>
                                        <input type="text" class="form-control" value="{{ old('country') }}"  name="country" id="country">
                                    </div>
                                    <div class="col-md-12 mt-3">
                                        <label for="thumbnail" class="label_custom">Thumbnail</label>
                                        <input type="file" class="form-control"  name="thumbnail" id="thumbnail" accept="image/*">
                                    </div>
                                    <div class="col-md-12 mt-3">
                                        <label for="blog_description" class="label_custom">Blog Description</label>
                                        <textarea class="form-control" name="blog_description" id="ckeditor"> {{ old('blog_description') }} </textarea>
                                    </div>
                                    <div class="col-md-12 mt-4">
                                        <input type="submit" class="save_btn" value="Save" id="save-btn"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 <script>
    // CKEditor Initialization
    ClassicEditor
        .create(document.querySelector('#ckeditor'), {
            toolbar: {
                items: [
                    'heading', '|',
                    'bold', 'italic', 'underline', 'strikethrough', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
                    'alignment', '|',
                    'bulletedList', 'numberedList', 'outdent', 'indent', '|',
                    'link', 'imageUpload', 'mediaEmbed', 'insertTable', '|',
                    'undo', 'redo', '|',
                    'code', 'codeBlock', 'blockQuote', '|',
                    'sourceEditing'
                ]
            },
            fontSize: {
                options: [8, 10, 12, 14, 'default', 18, 24, 36, 48]
            },
            fontFamily: {
                options: [
                    'default',
                    'Arial, Helvetica, sans-serif',
                    'Times New Roman, Times, serif',
                    'Courier New, Courier, monospace'
                ]
            },
            height: '200px',
            placeholder: 'Write here...',
            removePlugins: ['CKFinder']
        })
        .then(editor => {
            console.log('CKEditor 5 initialized successfully', editor);
            editor.model.document.on('change:data', () => {
                console.log('CKEditor content changed:', editor.getData());
            });
        })
        .catch(error => {
            console.error('CKEditor initialization failed:', error);
        });

    let selectedTags = [];

    // Toggle Dropdown
    function toggleDropdown() {
        const menu = document.getElementById('tag-menu');
        menu.classList.toggle('show');
        document.getElementById('tag-search').focus();
    }

    // Filter Tags
    function filterTags() {
        const searchTerm = document.getElementById('tag-search').value.toLowerCase();
        const items = document.getElementsByClassName('custom-dropdown-item');
        for (let i = 0; i < items.length; i++) {
            const text = items[i].textContent.toLowerCase();
            items[i].style.display = text.includes(searchTerm) ? 'block' : 'none';
        }
    }

    // Select Tag
    function selectTag(id, text) {
        if (!selectedTags.some(tag => tag.id === id)) {
            selectedTags.push({ id, text });
            updateTagList();
            document.getElementById('tag-search').value = '';
            filterTags();
        }
        document.getElementById('tag-menu').classList.remove('show');
    }

    // Remove Tag
    function removeTag(id) {
        selectedTags = selectedTags.filter(tag => tag.id !== id);
        updateTagList();
    }

    // Update Tag List
    function updateTagList() {
        const tagList = document.getElementById('tag_list');
        tagList.innerHTML = '';
        selectedTags.forEach(tag => {
            const li = document.createElement('li');
            li.className = 'badge';
            li.dataset.value = tag.id;
            li.innerHTML = `${tag.text}<span class="remove-tag" onclick="removeTag('${tag.id}')">×</span>`;
            tagList.appendChild(li);
        });
        document.getElementById('selected-tags-input').value = selectedTags.map(tag => tag.id).join(',');
        document.getElementById('tags-error').style.display = selectedTags.length === 0 ? 'block' : 'none';
    }

    // Close Dropdown on Outside Click
    document.addEventListener('click', function(event) {
        const dropdown = document.querySelector('.custom-dropdown');
        if (!dropdown.contains(event.target)) {
            document.getElementById('tag-menu').classList.remove('show');
        }
    });

    // Form Submission Validation
    document.getElementById('blog-form').addEventListener('submit', function(e) {
        if (selectedTags.length === 0) {
            e.preventDefault();
            document.getElementById('tags-error').style.display = 'block';
            toastr.error('Please select at least one tag before saving.');
        }
    });

    // Image Preview
    document.getElementById('thumbnail').addEventListener('change', function() {
        const imagePreview = document.getElementById('image-preview');
        imagePreview.innerHTML = '';
        const files = this.files;
        Array.from(files).forEach(file => {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = 'Thumbnail Preview';
                imagePreview.appendChild(img);
            };
            reader.readAsDataURL(file);
        });
    });
</script>
@endsection