@extends('layouts.admin.app')

@section('title', 'Thêm tin tức mới')

@section('content')
    <div class="bg-white shadow-md rounded-lg p-6 fade-in">
        <h2 class="text-2xl font-bold text-gray-800 mb-6">Thêm tin tức mới</h2>
        <div class="bg-white shadow rounded-lg p-6 space-y-6">
            <form id="newsForm" action="{{ route('news.store') }}" method="POST" enctype="multipart/form-data"
                class="space-y-6">
                @csrf
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Tiêu đề<span
                                class="text-red-500">*</span></label>
                        <input type="text" name="title" value="{{ old('title') }}"
                            class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2">Danh mục</label>
                        <select name="category_id"
                            class="w-full border border-gray-300 rounded-lg p-2.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
                            <option value="">Chọn danh mục</option>
                            @foreach ($categories as $cat)
                                <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                                    {{ $cat->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">Hình ảnh <span
                            class="text-red-500">*</span></label>
                    <div class="flex flex-col items-center justify-center w-full">
                        <label for="image"
                            class="flex flex-col items-center justify-center w-full h-44 border-2 border-dashed rounded-xl cursor-pointer bg-gray-50 hover:bg-gray-100 transition relative">
                            <div id="image-preview-container"
                                class="hidden absolute inset-0 flex items-center justify-center">
                                <img id="image-preview" src="" alt="Preview"
                                    class="max-h-40 object-contain rounded-lg">
                            </div>
                            <div id="image-upload-text" class="flex flex-col items-center justify-center pt-5 pb-6">
                                <svg class="w-10 h-10 text-gray-400 mb-3" fill="none" stroke="currentColor"
                                    stroke-width="2" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6H16a5 5 0 010 10H7z" />
                                </svg>
                                <p class="text-sm text-gray-500"><span class="font-medium">Click để tải ảnh</span> hoặc kéo
                                    thả vào đây</p>
                            </div>
                            <input id="image" type="file" name="image" class="hidden" accept="image/*">
                        </label>
                    </div>
                </div>
                <div>
                    <label class="block text-gray-700 font-medium mb-2">Tóm tắt</label>
                    <textarea id="excerpt" name="excerpt" rows="5"
                        class="w-full border border-gray-300 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">{{ old('excerpt') }}</textarea>
                </div>
                <div>
                    <label class="block text-gray-700 font-medium mb-2">
                        Nội dung chi tiết
                    </label>

                    <!-- Toolbar custom -->
                    <div class="mb-2 flex gap-2">
                        <button type="button" id="btnUploadVideo"
                            class="px-3 py-1 rounded bg-green-600 text-white text-sm hover:bg-green-700">
                            Upload video
                        </button>

                        <input type="file" id="videoInput" accept="video/mp4,video/webm,video/quicktime" hidden>

                    </div>

                    <textarea id="content" name="content" rows="10"
                        class="w-full border rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">{{ old('content') }}</textarea>
                </div>

                <div class="flex items-center">
                    <input type="checkbox" name="featured" value="1" {{ old('featured') ? 'checked' : '' }}
                        class="w-4 h-4 text-blue-600 border-gray-300 rounded">
                    <label class="ml-2 text-gray-700">Đánh dấu là bài viết nổi bật</label>
                </div>
                <div class="flex justify-end space-x-3">
                    <button id="cancelNewsCreate" type="button"
                        class="px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100">
                        Hủy
                    </button>
                    <button type="submit" class="px-4 py-2 rounded-lg bg-blue-500 text-white">
                        Lưu bài viết
                    </button>
                </div>
            </form>
        </div>
    </div>
    <script type="module" src="{{ asset('ckeditor5/new-ckeditor.js') }}"></script>

    <style>
        .ck-editor__editable {
            min-height: 400px !important;
        }
    </style>
    <script>
        $(document).ready(function() {

            const $fileInput = $('#image');
            const $previewContainer = $('#image-preview-container');
            const $previewImage = $('#image-preview');
            const $uploadText = $('#image-upload-text');

            // Preview ảnh
            $fileInput.on('change', function() {
                const file = this.files[0];

                if (file) {
                    const reader = new FileReader();

                    reader.onload = function(e) {
                        $previewImage.attr('src', e.target.result);
                        $previewContainer.removeClass('hidden');
                        $uploadText.addClass('hidden');
                    };

                    reader.readAsDataURL(file);
                } else {
                    $previewContainer.addClass('hidden');
                    $uploadText.removeClass('hidden');
                    $previewImage.attr('src', '');
                }
            });

            // Submit form
            $('#newsForm').on('submit', function(e) {
                e.preventDefault();

                const form = this;
                const $btn = $(form).find("button[type='submit']");
                const originalText = $btn.text().trim();
                const formData = new FormData(form);

                formData.append('content', window.editorInstance.getData());

                $.ajax({
                    url: form.action,
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function() {
                        setBtnLoading($btn, originalText);
                    },
                    success: function(res) {
                        showAlert('Thêm bài viết thành công!', 'success');
                        window.location.href = '/admin/news';
                    },
                    error: function(xhr) {
                        handleAjaxError(xhr);
                    },
                    complete: function() {
                        clearBtnLoading($btn, originalText);
                    }
                });
            });

            $('#cancelNewsCreate').on('click', function(e) {
                e.preventDefault();
                window.location.href = '/admin/news';
            });

        });
    </script>
@endsection