@extends('admin.layout')

@section('title', 'Edit Berita')
@section('page-title', 'Edit Berita')

@section('content')
<div class="bg-white p-4 md:p-6 rounded-xl shadow-lg">
    @if ($errors->any())
    <div class="bg-red-100 border-l-4 border-red-500 text-red-800 p-4 rounded-lg mb-6 shadow">
        {{ $errors->first() }}
    </div>
    @endif

    <form action="{{ route('berita.update', $berita->id) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
        @csrf
        @method('PUT')
        
        {{-- INFORMASI UTAMA --}}
        <div class="space-y-6 p-4 md:p-6 border border-gray-200 rounded-xl bg-gray-50/50">
            <div class="flex items-center space-x-2">
                <div class="w-1 h-8 bg-blue-600 rounded"></div>
                <h3 class="text-xl font-bold text-gray-800">Informasi Utama Berita</h3>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Kategori --}}
                <div>
                    <label class="block font-semibold text-gray-700 mb-2">
                        <span class="flex items-center">Kategori <span class="text-red-500 ml-1">*</span></span>
                    </label>
                    <select name="kategori_id" class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition" required>
                        @foreach($kategori as $kat)
                        <option value="{{ $kat->id }}" {{ old('kategori_id', $berita->kategori_id) == $kat->id ? 'selected' : '' }}>
                            {{ $kat->nama_kategori }}
                        </option>
                        @endforeach
                    </select>
                </div>

                {{-- Tanggal --}}
                <div>
                    <label class="block font-semibold text-gray-700 mb-2">
                        <span class="flex items-center">Tanggal <span class="text-red-500 ml-1">*</span></span>
                    </label>
                    <input type="date" name="tanggal" 
                           class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition"
                           value="{{ old('tanggal', \Carbon\Carbon::parse($berita->tanggal)->format('Y-m-d')) }}" required>
                </div>
            </div>
            
            {{-- Judul --}}
            <div>
                <label class="block font-semibold text-gray-700 mb-2">
                    <span class="flex items-center">Judul Berita <span class="text-red-500 ml-1">*</span></span>
                </label>
                <input type="text" name="judul" 
                       class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition"
                       value="{{ old('judul', $berita->judul) }}" required>
            </div>

            {{-- Penulis --}}
            <div>
                <label class="block font-semibold text-gray-700 mb-2">
                    <span class="flex items-center">Penulis <span class="text-red-500 ml-1">*</span></span>
                </label>
                <input type="text" name="penulis" 
                       class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition"
                       value="{{ old('penulis', $berita->penulis) }}" required>
            </div>
        </div>

        {{-- KONTEN UTAMA --}}
        <div class="space-y-6 p-4 md:p-6 border border-gray-200 rounded-xl bg-white shadow-sm">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="w-1 h-8 bg-blue-600 rounded"></div>
                    <h3 class="text-xl font-bold text-gray-800">Konten Utama</h3>
                </div>
                <span class="text-sm font-medium text-red-500 bg-red-50 px-3 py-1 rounded-full">Wajib</span>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {{-- Gambar Utama --}}
                <div class="space-y-4">
                    <div>
                        <label class="block font-semibold text-gray-700 mb-2">Gambar Utama</label>
                        @if($berita->gambar1)
                        <div class="mb-4">
                            <p class="text-sm text-gray-600 mb-2">Gambar saat ini:</p>
                            <div class="relative group">
                                <img src="{{ asset('storage/' . $berita->gambar1) }}" 
                                     class="w-full h-64 md:h-72 object-cover rounded-lg border shadow hover:shadow-lg transition">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition rounded-lg"></div>
                            </div>
                        </div>
                        @endif
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 hover:border-blue-400 transition">
                            <input type="file" name="gambar1" 
                                   class="w-full cursor-pointer"
                                   accept="image/*">
                            <p class="text-sm text-gray-500 mt-2">Unggah gambar baru (opsional)</p>
                        </div>
                    </div>
                    
                    {{-- Keterangan Gambar --}}
                    <div>
                        <label class="block font-semibold text-gray-700 mb-2">Keterangan Gambar</label>
                        <input type="text" name="ket1" 
                               value="{{ old('ket1', $berita->ket1) }}" 
                               class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition"
                               placeholder="Masukkan keterangan gambar">
                    </div>
                </div>
                
                {{-- Editor Konten Utama --}}
                <div>
                    <label class="block font-semibold text-gray-700 mb-2">
                        <span class="flex items-center">Isi Konten Utama <span class="text-red-500 ml-1">*</span></span>
                    </label>
                    <div class="border border-gray-300 rounded-lg overflow-hidden">
                        <textarea name="isi1" rows="12" 
                                class="tinymce w-full border-0 focus:outline-none focus:ring-0 p-4"
                                required>{!! old('isi1', $berita->isi1) !!}</textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- KONTEN TAMBAHAN 2 --}}
        <div class="space-y-6 p-4 md:p-6 border border-gray-200 rounded-xl bg-white shadow-sm">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="w-1 h-8 bg-green-600 rounded"></div>
                    <h3 class="text-xl font-bold text-gray-800">Konten Tambahan 2</h3>
                </div>
                <span class="text-sm font-medium text-gray-500 bg-gray-100 px-3 py-1 rounded-full">Opsional</span>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {{-- Gambar 2 --}}
                <div class="space-y-4">
                    <div>
                        <label class="block font-semibold text-gray-700 mb-2">Gambar 2</label>
                        @if($berita->gambar2)
                        <div class="mb-4">
                            <p class="text-sm text-gray-600 mb-2">Gambar saat ini:</p>
                            <div class="relative group">
                                <img src="{{ asset('storage/' . $berita->gambar2) }}" 
                                     class="w-full h-56 md:h-64 object-cover rounded-lg border shadow hover:shadow-lg transition">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition rounded-lg"></div>
                            </div>
                        </div>
                        @endif
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 hover:border-green-400 transition">
                            <input type="file" name="gambar2" 
                                   class="w-full cursor-pointer"
                                   accept="image/*">
                            <p class="text-sm text-gray-500 mt-2">Unggah gambar baru</p>
                        </div>
                    </div>
                    
                    {{-- Keterangan Gambar 2 --}}
                    <div>
                        <label class="block font-semibold text-gray-700 mb-2">Keterangan Gambar 2</label>
                        <input type="text" name="ket2" 
                               value="{{ old('ket2', $berita->ket2) }}" 
                               class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-400 focus:border-transparent transition"
                               placeholder="Masukkan keterangan gambar">
                    </div>
                </div>
                
                {{-- Editor Konten 2 --}}
                <div>
                    <label class="block font-semibold text-gray-700 mb-2">Isi Konten Tambahan 2</label>
                    <div class="border border-gray-300 rounded-lg overflow-hidden">
                        <textarea name="isi2" rows="10" 
                                class="tinymce w-full border-0 focus:outline-none focus:ring-0 p-4">{!! old('isi2', $berita->isi2) !!}</textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- KONTEN TAMBAHAN 3 --}}
        <div class="space-y-6 p-4 md:p-6 border border-gray-200 rounded-xl bg-white shadow-sm">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="w-1 h-8 bg-purple-600 rounded"></div>
                    <h3 class="text-xl font-bold text-gray-800">Konten Tambahan 3</h3>
                </div>
                <span class="text-sm font-medium text-gray-500 bg-gray-100 px-3 py-1 rounded-full">Opsional</span>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {{-- Gambar 3 --}}
                <div class="space-y-4">
                    <div>
                        <label class="block font-semibold text-gray-700 mb-2">Gambar 3</label>
                        @if($berita->gambar3)
                        <div class="mb-4">
                            <p class="text-sm text-gray-600 mb-2">Gambar saat ini:</p>
                            <div class="relative group">
                                <img src="{{ asset('storage/' . $berita->gambar3) }}" 
                                     class="w-full h-56 md:h-64 object-cover rounded-lg border shadow hover:shadow-lg transition">
                                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition rounded-lg"></div>
                            </div>
                        </div>
                        @endif
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 hover:border-purple-400 transition">
                            <input type="file" name="gambar3" 
                                   class="w-full cursor-pointer"
                                   accept="image/*">
                            <p class="text-sm text-gray-500 mt-2">Unggah gambar baru</p>
                        </div>
                    </div>
                    
                    {{-- Keterangan Gambar 3 --}}
                    <div>
                        <label class="block font-semibold text-gray-700 mb-2">Keterangan Gambar 3</label>
                        <input type="text" name="ket3" 
                               value="{{ old('ket3', $berita->ket3) }}" 
                               class="w-full border border-gray-300 px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-400 focus:border-transparent transition"
                               placeholder="Masukkan keterangan gambar">
                    </div>
                </div>
                
                {{-- Editor Konten 3 --}}
                <div>
                    <label class="block font-semibold text-gray-700 mb-2">Isi Konten Tambahan 3</label>
                    <div class="border border-gray-300 rounded-lg overflow-hidden">
                        <textarea name="isi3" rows="10" 
                                class="tinymce w-full border-0 focus:outline-none focus:ring-0 p-4">{!! old('isi3', $berita->isi3) !!}</textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- ACTION BUTTONS --}}
        <div class="sticky bottom-0 bg-white/90 backdrop-blur-sm p-4 md:p-6 -mx-4 md:-mx-6 -mb-4 md:-mb-6 border-t border-gray-200 rounded-b-xl">
            <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="text-sm text-gray-600">
                    <span class="font-semibold">Terakhir diubah:</span> {{ \Carbon\Carbon::parse($berita->updated_at)->translatedFormat('d F Y, H:i') }}
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ route('berita.index') }}" 
                       class="px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition font-medium">
                        Batal
                    </a>
                    <button type="submit" 
                            class="bg-blue-600 text-white px-6 py-2.5 rounded-lg shadow hover:bg-blue-700 transition font-semibold flex items-center space-x-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span>Update Berita</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
    .tinymce {
        min-height: 300px;
    }
    
    @media (max-width: 640px) {
        .tinymce {
            min-height: 250px;
        }
    }
    
    input[type="file"] {
        padding: 0.5rem;
    }
    
    input[type="file"]::file-selector-button {
        background-color: #f3f4f6;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        padding: 0.5rem 1rem;
        margin-right: 1rem;
        font-weight: 500;
        color: #374151;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    input[type="file"]::file-selector-button:hover {
        background-color: #e5e7eb;
    }
</style>
@endsection