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

@section('content')

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        {{-- ============================================== --}}
        {{-- ===== KOLOM KIRI (INFO STATUS & GAMBAR)  ===== --}}
        {{-- ============================================== --}}
        <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 Berita</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">ID Berita</span>
                            <span class="w-[65%] text-neutral-800 dark:text-neutral-200 font-bold">: #{{ $news->id }}</span>
                        </li>
                         <li class="flex items-center gap-2">
                            <span class="w-[35%] text-sm font-semibold text-neutral-500 uppercase tracking-wider">Dibuat</span>
                            <span class="w-[65%] text-neutral-800 dark:text-neutral-200 font-bold">: {{ $news->created_at->format('d M Y') }}</span>
                        </li>
                    </ul>
                    
                    <hr class="my-6 border-neutral-100 dark:border-neutral-700">
                    
                    {{-- Preview Gambar Saat Ini --}}
                    <div>
                        <p class="text-xs font-bold text-neutral-400 uppercase mb-3 text-center">Gambar Saat Ini:</p>
                        @if($news->image)
                            <img src="{{ asset('storage/' . $news->image) }}" id="image-preview" class="w-full h-48 object-cover rounded-xl border border-neutral-200 shadow-sm" alt="Preview">
                        @else
                            <div class="w-full h-48 flex items-center justify-center bg-neutral-50 rounded-xl border-2 border-dashed border-neutral-200">
                                <span class="text-neutral-400 text-sm">Tidak ada gambar</span>
                            </div>
                        @endif
                    </div>

                    <div id="new-preview-label" class="mt-4 hidden">
                        <span class="bg-primary-50 text-primary-600 px-2 py-1 rounded text-[10px] font-bold uppercase">Gambar Baru Dipilih</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- ============================================== --}}
        {{-- ===== KOLOM KANAN (FORM EDIT 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">Edit Konten Berita</h6>

                    <form action="{{ route('news.update', $news->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT') {{-- PENTING: Untuk Update di Laravel gunakan method PUT --}}

                        <div class="grid grid-cols-1 gap-5">
                            {{-- Input Judul --}}
                            <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"
                                       value="{{ old('title', $news->title) }}" required>
                                @error('title') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Input Isi --}}
                            <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" required>{{ old('content', $news->content) }}</textarea>
                                @error('content') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
                            </div>

                            {{-- Input Gambar Baru --}}
                            <div>
                                <label for="image" class="block font-bold text-neutral-700 dark:text-neutral-200 text-sm mb-2">Ganti Gambar (Opsional)</label>
                                <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">
                                <p class="text-[11px] text-neutral-400 mt-2 italic">Biarkan kosong jika tidak ingin mengubah gambar utama.</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 transition-all flex items-center gap-2">
                                <iconify-icon icon="solar:check-read-bold" class="text-xl"></iconify-icon>
                                Update Berita
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

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

@endsection