@extends('layout.layout')
@php
    $title    = 'Tambah Berita Baru';
    $subTitle = 'Manajemen Berita';
@endphp

@section('content')

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        {{-- ============================================== --}}
        {{-- ===== KOLOM KIRI (INFO STATUS)           ===== --}}
        {{-- ============================================== --}}
        <div class="col-span-12 lg:col-span-4">
            <div class="card border-0 rounded-2xl overflow-hidden bg-white dark:bg-neutral-800 h-full shadow-sm">
                <div class="card-body p-6">
                    <h6 class="text-xl mb-4 font-bold text-neutral-800 dark:text-neutral-100">Status Pembuatan</h6>
                    <ul class="space-y-4">
                         <li class="flex items-center gap-2">
                            <span class="w-[35%] text-sm font-semibold text-neutral-500 uppercase tracking-wider">Penulis</span>
                            <span class="w-[65%] text-neutral-800 dark:text-neutral-200 font-bold">: {{ auth()->user()->name ?? 'Admin' }}</span>
                        </li>
                         <li class="flex items-center gap-2">
                            <span class="w-[35%] text-sm font-semibold text-neutral-500 uppercase tracking-wider">Tanggal</span>
                            <span class="w-[65%] text-neutral-800 dark:text-neutral-200 font-bold">: {{ date('d M Y') }}</span>
                        </li>
                        <li class="flex items-center gap-2">
                            <span class="w-[35%] text-sm font-semibold text-neutral-500 uppercase tracking-wider">Status</span>
                            <span class="w-[65%]">
                                : <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded text-xs font-bold uppercase">Draft</span>
                            </span>
                        </li>
                    </ul>
                    
                    <hr class="my-6 border-neutral-100 dark:border-neutral-700">
                    
                    <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-100 dark:border-blue-800">
                        <p class="text-xs text-blue-600 dark:text-blue-400 leading-relaxed font-medium">
                            <iconify-icon icon="solar:info-circle-bold" class="inline-block mr-1"></iconify-icon>
                            Pastikan judul menarik dan isi berita sudah diperiksa ejaannya sebelum diterbitkan ke publik.
                        </p>
                    </div>

                    {{-- Container untuk Preview Gambar --}}
                    <div id="preview-container" class="mt-6 hidden">
                        <p class="text-xs font-bold text-neutral-400 uppercase mb-2">Preview Gambar:</p>
                        <img id="image-preview" src="#" alt="Preview" class="w-full h-48 object-cover rounded-xl border-2 border-dashed border-neutral-200">
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================== --}}
        {{-- ===== KOLOM KANAN (FORM INPUT BERITA)     ===== --}}
        {{-- ============================================== --}}
        <div class="col-span-12 lg:col-span-8">
            <div class="card h-full border-0 shadow-sm rounded-2xl">
                <div class="card-body p-6">
                    <h6 class="text-xl mb-6 font-bold text-neutral-800 dark:text-neutral-100">Konten Berita</h6>

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

                        <div class="grid grid-cols-1 gap-5">
                            {{-- Input Judul Berita --}}
                            <div>
                                <label for="title" class="block font-bold text-neutral-700 dark:text-neutral-200 text-sm mb-2">Judul Berita <span class="text-rose-500">*</span></label>
                                <input type="text" 
                                       class="w-full rounded-xl border {{ $errors->has('title') ? 'border-rose-500' : 'border-neutral-200' }} dark:border-neutral-700 dark:bg-neutral-800 p-3 focus:ring-2 focus:ring-primary-500 focus:outline-none transition-all" 
                                       id="title" name="title"
                                       placeholder="Contoh: Jadwal Pengurasan Bak Penampungan Air"
                                       value="{{ old('title') }}" required>
                                @error('title') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Input Isi Berita --}}
                            <div>
                                <label for="content" class="block font-bold text-neutral-700 dark:text-neutral-200 text-sm mb-2">Isi Berita Lengkap <span class="text-rose-500">*</span></label>
                                <textarea name="content" 
                                          class="w-full rounded-xl border {{ $errors->has('content') ? 'border-rose-500' : 'border-neutral-200' }} dark:border-neutral-700 dark:bg-neutral-800 p-3 focus:ring-2 focus:ring-primary-500 focus:outline-none transition-all" 
                                          id="content" rows="10" 
                                          placeholder="Tuliskan berita secara detail di sini..." required>{{ old('content') }}</textarea>
                                @error('content') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Input Gambar Berita --}}
                            <div>
                                <label for="image" class="block font-bold text-neutral-700 dark:text-neutral-200 text-sm mb-2">Gambar Utama / Thumbnail</label>
                                
                                <div class="relative">
                                    <input type="file" name="image" id="image-input" accept="image/*"
                                        class="block w-full text-sm text-neutral-500 border border-neutral-200 dark:border-neutral-700 rounded-xl cursor-pointer bg-neutral-50 dark:bg-neutral-800 focus:outline-none file:mr-4 file:py-2.5 file:px-4 file:rounded-l-xl file:border-0 file:text-sm file:font-bold file:bg-primary-600 file:text-white hover:file:bg-primary-700 transition-all">
                                </div>
                                <p class="text-[11px] text-neutral-400 mt-2 italic">* Format: JPG, PNG, atau WEBP. Maksimal 2MB.</p>
                                @error('image') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        {{-- Tombol Aksi --}}
                        <div class="flex items-center justify-end gap-3 mt-10">
                            <a href="{{ route('news.index') }}" class="px-6 py-2.5 rounded-xl border border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 font-bold text-sm hover:bg-neutral-50 transition-all">
                                Batal
                            </a>
                            <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white px-8 py-2.5 rounded-xl font-bold text-sm shadow-lg shadow-primary-200 dark:shadow-none transition-all flex items-center gap-2">
                                <iconify-icon icon="solar:diskette-bold-duotone" class="text-xl"></iconify-icon>
                                Simpan Berita
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Script untuk Preview Gambar --}}
    <script>
        document.getElementById('image-input').onchange = evt => {
            const [file] = document.getElementById('image-input').files
            if (file) {
                const container = document.getElementById('preview-container');
                const imgPreview = document.getElementById('image-preview');
                
                imgPreview.src = URL.createObjectURL(file);
                container.classList.remove('hidden');
            }
        }
    </script>

@endsection