@extends('layouts.app')
@section('title', 'Kelola Berita')

@section('content')
<div class="space-y-6">

    {{-- HEADER --}}
    <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center">
                <i class="fas fa-newspaper text-white text-sm"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-gray-900">Kelola Berita</h1>
                <p class="text-sm text-gray-500">Kelola berita yang tampil di landing page perusahaan</p>
            </div>
        </div>
        <button onclick="openModal('createModal')"
            class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg text-sm font-semibold transition flex items-center gap-2">
            <i class="fas fa-plus text-xs"></i> Tambah Berita
        </button>
    </div>

    {{-- INFO API --}}
    <div class="bg-blue-50 border border-blue-200 rounded-xl p-4 flex gap-3">
        <i class="fas fa-info-circle text-blue-500 mt-0.5 flex-shrink-0"></i>
        <div class="text-sm text-blue-700">
            <p class="font-semibold mb-1">API Publik untuk Landing Page</p>
            <p>Landing page <code class="bg-blue-100 px-1 rounded">putrataropaloma.com</code> bisa fetch berita dari:</p>
            <code class="block mt-1 bg-blue-100 px-2 py-1 rounded text-xs">GET https://hr.putrataropaloma.com/api/news</code>
            <code class="block mt-1 bg-blue-100 px-2 py-1 rounded text-xs">GET https://hr.putrataropaloma.com/api/news/{id}</code>
        </div>
    </div>

    {{-- SUCCESS/ERROR --}}
    @if(session('success'))
    <div class="bg-emerald-50 border border-emerald-200 rounded-xl px-4 py-3 flex items-center gap-2 text-sm text-emerald-700">
        <i class="fas fa-check-circle"></i> {{ session('success') }}
    </div>
    @endif

    {{-- SEARCH --}}
    <form method="GET" class="flex gap-3">
        <div class="relative flex-1 max-w-sm">
            <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm"></i>
            <input type="text" name="search" value="{{ $search }}" placeholder="Cari judul, kategori, penulis..."
                class="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
        </div>
        <button type="submit" class="px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-semibold transition">Cari</button>
        @if($search)
        <a href="{{ route('berita.index') }}" class="px-4 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Reset</a>
        @endif
    </form>

    {{-- GRID BERITA --}}
    @if($newsList->isEmpty())
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-12 text-center">
        <i class="fas fa-newspaper text-gray-300 text-4xl mb-3 block"></i>
        <p class="text-gray-500 font-medium">Belum ada berita</p>
        <p class="text-gray-400 text-sm mt-1">Klik "Tambah Berita" untuk membuat berita pertama</p>
    </div>
    @else
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
        @foreach($newsList as $news)
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden group">
            {{-- Gambar --}}
            <div class="relative h-44 bg-gray-100 overflow-hidden">
                @if($news->image_slider || $news->image)
                <img src="{{ $news->image_slider ?? $news->image }}" alt="{{ $news->title }}"
                    class="w-full h-full object-cover group-hover:scale-105 transition duration-300">
                @else
                <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-100 to-indigo-100">
                    <i class="fas fa-newspaper text-blue-300 text-3xl"></i>
                </div>
                @endif
                {{-- Badge featured --}}
                @if($news->featured)
                <span class="absolute top-2 left-2 px-2 py-1 bg-amber-500 text-white text-xs font-bold rounded-full">
                    <i class="fas fa-star mr-1"></i>Featured
                </span>
                @endif
                <span class="absolute top-2 right-2 px-2 py-1 bg-white/90 text-gray-700 text-xs font-semibold rounded-full">
                    {{ $news->category }}
                </span>
            </div>

            <div class="p-4">
                <h3 class="font-bold text-gray-800 text-sm line-clamp-2 mb-1">{{ $news->title }}</h3>
                <p class="text-xs text-gray-500 line-clamp-2 mb-3">{{ $news->excerpt }}</p>
                <div class="flex items-center justify-between text-xs text-gray-400 mb-3">
                    <span><i class="fas fa-user mr-1"></i>{{ $news->author }}</span>
                    <span><i class="fas fa-calendar mr-1"></i>{{ $news->published_at?->format('d/m/Y') ?? '-' }}</span>
                </div>
                <div class="flex gap-2">
                    <button onclick='openEdit(@json($news))'
                        class="flex-1 py-1.5 border border-gray-200 text-gray-600 rounded-lg text-xs font-semibold hover:bg-gray-50 transition flex items-center justify-center gap-1">
                        <i class="fas fa-edit text-xs"></i> Edit
                    </button>
                    <form method="POST" action="{{ route('berita.destroy', $news) }}"
                        onsubmit="return confirm('Hapus berita ini?')" class="flex-1">
                        @csrf @method('DELETE')
                        <button type="submit"
                            class="w-full py-1.5 bg-red-50 hover:bg-red-100 text-red-600 rounded-lg text-xs font-semibold transition flex items-center justify-center gap-1">
                            <i class="fas fa-trash text-xs"></i> Hapus
                        </button>
                    </form>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    {{-- PAGINATION --}}
    @if($newsList->hasPages())
    <div class="flex justify-center">{{ $newsList->links() }}</div>
    @endif
    @endif

</div>

{{-- ── MODAL TAMBAH ─────────────────────────────────────────────────────── --}}
<div id="createModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-start justify-center p-4 overflow-y-auto">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl my-8">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-blue-50 flex items-center justify-center">
                    <i class="fas fa-plus text-blue-600 text-xs"></i>
                </div>
                <h3 class="font-bold text-gray-800 text-sm">Tambah Berita</h3>
            </div>
            <button onclick="closeModal('createModal')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
        </div>
        <form method="POST" action="{{ route('berita.store') }}" enctype="multipart/form-data" class="px-6 py-5 space-y-4">
            @csrf
            @include('dashboard.berita._form')
            <div class="flex gap-3 pt-1">
                <button type="button" onclick="closeModal('createModal')"
                    class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit"
                    class="flex-1 py-2.5 bg-emerald-600 hover:bg-blue-700 text-white rounded-lg text-sm font-semibold transition">Simpan Berita</button>
            </div>
        </form>
    </div>
</div>

{{-- ── MODAL EDIT ───────────────────────────────────────────────────────── --}}
<div id="editModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-start justify-center p-4 overflow-y-auto">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl my-8">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-indigo-50 flex items-center justify-center">
                    <i class="fas fa-edit text-indigo-600 text-xs"></i>
                </div>
                <h3 class="font-bold text-gray-800 text-sm">Edit Berita</h3>
            </div>
            <button onclick="closeModal('editModal')" class="text-gray-400 hover:text-gray-600"><i class="fas fa-times"></i></button>
        </div>
        <form method="POST" id="editForm" action="" enctype="multipart/form-data" class="px-6 py-5 space-y-4">
            @csrf @method('PUT')
            @include('dashboard.berita._form', ['edit' => true])
            <div class="flex gap-3 pt-1">
                <button type="button" onclick="closeModal('editModal')"
                    class="px-5 py-2.5 border border-gray-200 text-gray-600 rounded-lg text-sm font-semibold hover:bg-gray-50 transition">Batal</button>
                <button type="submit"
                    class="flex-1 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-semibold transition">Update Berita</button>
            </div>
        </form>
    </div>
</div>

<script>
function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}
function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.body.style.overflow = '';
}
document.querySelectorAll('#createModal, #editModal').forEach(m => {
    m.addEventListener('click', function(e) { if (e.target === this) closeModal(this.id); });
});

function openEdit(news) {
    const form = document.getElementById('editForm');
    form.action = `/berita/${news.id}`;

    form.querySelector('[name="title"]').value    = news.title || '';
    form.querySelector('[name="excerpt"]').value  = news.excerpt || '';
    form.querySelector('[name="content"]').value  = news.content || '';
    form.querySelector('[name="category"]').value = news.category || '';
    form.querySelector('[name="author"]').value   = news.author || '';
    form.querySelector('[name="featured"]').checked = news.featured;

    const pubAt = news.published_at ? news.published_at.substring(0, 16) : '';
    form.querySelector('[name="published_at"]').value = pubAt;

    // Preview gambar
    const imgSlider = form.querySelector('#editImgSliderPreview');
    if (imgSlider) {
        imgSlider.src = news.image_slider || '';
        imgSlider.classList.toggle('hidden', !news.image_slider);
    }
    const imgDetail = form.querySelector('#editImgDetailPreview');
    if (imgDetail) {
        imgDetail.src = news.image_detail || '';
        imgDetail.classList.toggle('hidden', !news.image_detail);
    }

    openModal('editModal');
}
</script>
@endsection