@extends('layouts.app')

@section('title', 'Buat Artikel Baru')

@section('content')
<div class="bg-gray-50 min-h-screen">

    
    <div class="h-48 md:h-64 bg-gradient-to-r from-blue-900 via-blue-600 to-blue-400 w-full absolute top-0 left-0 z-0"></div>

    <div class="container max-w-6xl mx-auto px-4 py-8 relative z-10">

        <form action="{{ route('admin.articles.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

          
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
                <div class="text-white">
                    <h1 class="text-2xl md:text-3xl font-bold">Buat Artikel</h1>
                    <p class="text-blue-100 text-sm">Isi detail artikel dengan lengkap</p>
                </div>

                <div class="flex flex-col sm:flex-row gap-2 w-full md:w-auto">
                    <a href="{{ route('admin.articles.index') }}"
                        class="w-full sm:w-auto text-center px-4 py-2 rounded-xl bg-white/10 backdrop-blur border border-white/20 text-white hover:bg-white/20 transition">
                        Batal
                    </a>

                    <button type="submit"
                        class="w-full sm:w-auto px-4 py-2 rounded-xl bg-white text-blue-900 font-semibold shadow hover:shadow-lg hover:-translate-y-0.5 transition">
                        ✔ Simpan
                    </button>
                </div>
            </div>

          
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            
                <div class="lg:col-span-2 space-y-6">

                   
                    <div class="bg-white rounded-2xl p-5 md:p-6 shadow-sm border">
                        <label class="text-sm font-semibold text-gray-700 mb-2 block">Judul Artikel</label>
                        <input type="text" name="title"
                            class="w-full rounded-xl border-gray-300 focus:ring-2 focus:ring-blue-500 @error('title') border-red-500 @enderror"
                            value="{{ old('title') }}" placeholder="Masukkan judul..." required>

                        @error('title')
                        <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                  
                    <div class="bg-white rounded-2xl p-5 md:p-6 shadow-sm border">
                        <label class="text-sm font-semibold text-gray-700 mb-3 block">Konten</label>

                       
                        <textarea name="content" id="content">{{ old('content') }}</textarea>

                        @error('content')
                        <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

                </div>

             
                <div class="space-y-6">

              
                    <div class="bg-white rounded-2xl p-5 shadow-sm border">
                        <label class="text-sm font-semibold text-gray-700 mb-2 block">Kategori</label>

                        <select name="category_id"
                            class="w-full rounded-xl border-gray-300 focus:ring-2 focus:ring-blue-500 @error('category_id') border-red-500 @enderror"
                            required>
                            <option value="">Pilih kategori</option>
                            @foreach ($categories as $category)
                            <option value="{{ $category->id }}"
                                {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                            @endforeach
                        </select>

                        @error('category_id')
                        <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                        @enderror
                    </div>

        
                    <div class="bg-white rounded-2xl p-5 shadow-sm border" x-data="imageUploader()">

                        <label class="text-sm font-semibold text-gray-700 mb-3 block">Gambar Artikel</label>

                        <div @dragover.prevent @drop.prevent="dropHandler($event)"
                            class="border-2 border-dashed border-gray-300 rounded-xl p-5 text-center hover:border-blue-400 transition">

                            <div class="space-y-2">
                                <div class="text-3xl">📁</div>

                                <div class="text-sm text-gray-600">
                                    <label for="images" class="cursor-pointer text-blue-600 font-semibold hover:underline">
                                        Upload file
                                    </label>
                                    atau drag & drop
                                </div>

                                <input id="images" name="images[]" type="file" class="hidden" multiple
                                    @change="handleFileSelect($event)">

                                <p class="text-xs text-gray-400">PNG/JPG max 2MB</p>
                            </div>
                        </div>

                        @error('images.*')
                        <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
                        @enderror

                        <div class="mt-4 grid grid-cols-2 gap-3" x-show="previews.length > 0">
                            <template x-for="(preview, index) in previews" :key="index">
                                <div class="relative group">
                                    <img :src="preview.url" class="h-24 sm:h-28 w-full object-cover rounded-xl">

                                    <button @click.prevent="removePreview(index)"
                                        class="absolute top-1 right-1 bg-red-500 text-white text-xs w-6 h-6 rounded-full opacity-0 group-hover:opacity-100 transition">
                                        ✕
                                    </button>
                                </div>
                            </template>
                        </div>

                    </div>

                </div>

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


@push('scripts')

<script src="https://cdn.ckeditor.com/ckeditor5/41.4.2/classic/ckeditor.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    ClassicEditor
        .create(document.querySelector('#content'))
        .then(editor => {
            editor.editing.view.change(writer => {
                writer.setStyle('min-height', '250px', editor.editing.view.document.getRoot());
            });
        })
        .catch(error => {
            console.error(error);
        });
});
</script>


<script>
function imageUploader() {
    return {
        previews: [],
        files: [],
        handleFileSelect(event) {
            const newFiles = Array.from(event.target.files);
            this.addFiles(newFiles);
        },
        dropHandler(event) {
            const newFiles = Array.from(event.dataTransfer.files);
            this.addFiles(newFiles);
        },
        addFiles(newFiles) {
            newFiles.forEach(file => {
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.previews.push({ url: e.target.result });
                    };
                    reader.readAsDataURL(file);
                    this.files.push(file);
                }
            });
            this.updateFileInput();
        },
        removePreview(index) {
            this.previews.splice(index, 1);
            this.files.splice(index, 1);
            this.updateFileInput();
        },
        updateFileInput() {
            const dataTransfer = new DataTransfer();
            this.files.forEach(file => dataTransfer.items.add(file));
            document.getElementById('images').files = dataTransfer.files;
        }
    }
}
</script>
@endpush