@extends('layouts.app')

@section('content')
<div x-data="{ show: false }" x-init="setTimeout(() => show = true, 100)" x-show="show" x-transition.opacity.duration.700ms class="container mx-auto py-10 px-6">

    <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-8 text-center">📰 Buat Berita Baru</h1>

    <form action="{{ route('news.store') }}" method="POST" enctype="multipart/form-data" class="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-xl space-y-6">
        @csrf

        {{-- Judul Berita --}}
        <div>
            <label for="title" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Judul Berita</label>
            <input type="text" name="title" id="title" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
        </div>

        {{-- Isi Konten --}}
        <div>
            <label for="content" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Isi Berita</label>
            <textarea name="content" id="content" rows="5" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required></textarea>
        </div>

        {{-- Kategori Berita --}}
        <div>
            <label for="category" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Kategori</label>
            <select name="category" id="category" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
                <option value="">-- Pilih Kategori --</option>
                <option value="Pendidikan">Pendidikan</option>
                <option value="Teknologi">Teknologi</option>
                <option value="Kesehatan">Kesehatan</option>
                <option value="Lingkungan">Lingkungan</option>
                <option value="Lainnya">Lainnya</option>
            </select>
        </div>

        {{-- Tanggal Terbit --}}
        <div>
            <label for="publish_date" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Tanggal Terbit</label>
            <input type="date" name="publish_date" id="publish_date" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>
        </div>

        {{-- Upload Gambar --}}
        <div>
            <label for="image" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Unggah Gambar</label>
            <input type="file" name="image" id="image" accept="image/*" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-white">
        </div>

        {{-- Pin Berita --}}
        <div class="flex items-center">
            <input type="checkbox" name="is_pinned" id="is_pinned" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
            <label for="is_pinned" class="ml-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Pin Berita Ini</label>
        </div>

        {{-- Tombol Submit --}}
        <div class="text-center">
            <button type="submit" class="inline-flex items-center px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 shadow-md transition-all">
                🚀 Buat Berita
            </button>
        </div>
    </form>
</div>
@endsection