@extends('admin.layout')

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

@section('content')
<div>
    @if ($errors->any())
    <div class="bg-red-100 border-l-4 border-red-500 text-red-800 p-4 rounded-lg mb-4 shadow">
        {{-- Pesan error akan muncul di sini, seperti "The isi1 field is required." --}}
        {{ $errors->first() }}
    </div>
    @endif

    <form action="{{ route('berita.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
        @csrf
        {{-- Judul, Penulis, Kategori --}}
        <div>
            <label class="block font-semibold text-gray-700 mb-1">Judul <span class="text-red-500">*</span></label>
            <input type="text" name="judul" value="{{ old('judul') }}"
                class="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" required>
        </div>
        <div>
            <label class="block font-semibold text-gray-700 mb-1">Penulis <span class="text-red-500">*</span></label>
            <input type="text" name="penulis" value="{{ old('penulis') }}"
                class="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" required>
        </div>
        <div>
            <label class="block font-semibold text-gray-700 mb-1">Kategori <span class="text-red-500">*</span></label>
            <select name="kategori_id" class="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" required>
                <option value="">-- Pilih Kategori --</option>
                @foreach($kategori as $kat)
                <option value="{{ $kat->id }}" {{ old('kategori_id') == $kat->id ? 'selected' : '' }}>
                    {{ $kat->nama_kategori }}
                </option>
                @endforeach
            </select>
        </div>

        {{-- 1. KONTEN UTAMA (isi1), GAMBAR 1, dan KETERANGAN 1 (ket1) --}}
        <div class="space-y-3 p-4 border border-gray-200 rounded-lg">
            <h3 class="font-bold text-gray-800">Konten Utama</h3>
            <div class="flex items-center gap-3">
                <label class="block font-semibold text-gray-700 w-32">Gambar 1</label>
                <input type="file" name="gambar1" class="w-full border border-gray-300 px-3 py-2 rounded-lg file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
            </div>
            <div class="flex items-center gap-3">
                <label class="block font-semibold text-gray-700 w-32">Keterangan Gambar 1</label>
                <input type="text" name="ket1" value="{{ old('ket1') }}" class="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <label class="block font-semibold text-gray-700 mb-1">Isi 1 (Teks Konten Utama) <span class="text-red-500">*</span></label>
            <textarea name="isi1" class="tinymce w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">{{ old('isi1') }}</textarea>
        </div>
        
        {{-- 2. KONTEN TAMBAHAN (isi2), GAMBAR 2, dan KETERANGAN 2 (ket2) --}}
        <div class="space-y-3 p-4 border border-gray-200 rounded-lg">
            <h3 class="font-bold text-gray-800">Konten Tambahan 2</h3>
            <div class="flex items-center gap-3">
                <label class="block font-semibold text-gray-700 w-32">Gambar 2</label>
                <input type="file" name="gambar2" class="w-full border border-gray-300 px-3 py-2 rounded-lg file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
            </div>
            <div class="flex items-center gap-3">
                <label class="block font-semibold text-gray-700 w-32">Keterangan Gambar 2</label>
                <input type="text" name="ket2" value="{{ old('ket2') }}" class="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <label class="block font-semibold text-gray-700 mb-1">Isi 2 (Teks Konten Tambahan)</label>
            {{-- PERBAIKAN: name diubah dari 'konten2' menjadi 'isi2' --}}
            <textarea name="isi2" class="tinymce w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">{{ old('isi2') }}</textarea>
        </div>
        
        {{-- 3. KONTEN TAMBAHAN (isi3), GAMBAR 3, dan KETERANGAN 3 (ket3) --}}
        <div class="space-y-3 p-4 border border-gray-200 rounded-lg">
            <h3 class="font-bold text-gray-800">Konten Tambahan 3</h3>
            <div class="flex items-center gap-3">
                <label class="block font-semibold text-gray-700 w-32">Gambar 3</label>
                <input type="file" name="gambar3" class="w-full border border-gray-300 px-3 py-2 rounded-lg file:mr-3 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
            </div>
            <div class="flex items-center gap-3">
                <label class="block font-semibold text-gray-700 w-32">Keterangan Gambar 3</label>
                <input type="text" name="ket3" value="{{ old('ket3') }}" class="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">
            </div>
            <label class="block font-semibold text-gray-700 mb-1">Isi 3 (Teks Konten Tambahan)</label>
            {{-- PERBAIKAN: name diubah dari 'konten3' menjadi 'isi3' --}}
            <textarea name="isi3" class="tinymce w-full border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400">{{ old('isi3') }}</textarea>
        </div>

        <div>
            <label class="block font-semibold text-gray-700 mb-1">Tanggal <span class="text-red-500">*</span></label>
            <input type="date" name="tanggal" value="{{ old('tanggal') }}"
                class="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400" required>
        </div>
        <div class="flex items-center gap-3">
            <button class="bg-blue-600 text-white px-5 py-2.5 rounded-lg shadow hover:bg-blue-700 transition">
                Simpan
            </button>
            <a href="{{ route('berita.index') }}" class="text-gray-600 hover:underline">Batal</a>
        </div>
    </form>
</div>
@endsection