@extends('admin.layout.tamplate')

@section('content')
<div class="p-6 md:p-10 space-y-8">
    @include('admin.layout.breadcumb')

    <div class="max-w-3xl mx-auto">
        @php
            $route = route('dashboard.komentar.update', $data->id);
        @endphp

        <form action="{{ $route }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="bg-white p-8 md:p-10 rounded-[2.5rem] shadow-sm border border-sky-50 space-y-7">
                <div class="flex items-center gap-4 pb-6 border-b border-sky-50">
                    <div class="w-16 h-16 rounded-2xl bg-sky-50 flex items-center justify-center text-sky-500 text-2xl font-bold">
                        {{ substr($data->name, 0, 1) }}
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-sky-950">Moderasi Komentar</h3>
                        <p class="text-xs text-slate-400">ID Komentar: #{{ $data->id }} — {{ $data->created_at->format('d M Y H:i') }}</p>
                    </div>
                </div>

                <div class="space-y-6">
                    {{-- Info Pengirim (Read Only) --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase ml-1 tracking-widest">Nama Pengirim</label>
                            <input type="text" value="{{ $data->name }}" disabled
                                class="w-full px-6 py-4 rounded-2xl bg-slate-50 border border-slate-100 text-sm font-bold text-slate-500 italic">
                        </div>
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase ml-1 tracking-widest">Email</label>
                            <input type="text" value="{{ $data->email }}" disabled
                                class="w-full px-6 py-4 rounded-2xl bg-slate-50 border border-slate-100 text-sm font-bold text-slate-500 italic">
                        </div>
                    </div>

                    {{-- Isi Komentar (Read Only) --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold text-sky-900/40 uppercase ml-1 tracking-widest">Isi Komentar</label>
                        <div class="w-full px-6 py-4 rounded-2xl bg-slate-50 border border-slate-100 text-sm text-slate-600 leading-relaxed italic">
                            "{{ $data->comment }}"
                        </div>
                    </div>

                    {{-- Status Moderasi (Hanya ini yang bisa diubah) --}}
                    <div class="space-y-2">
                        <label class="text-[10px] font-bold text-sky-900/40 uppercase ml-1 tracking-widest">Status Publikasi</label>
                        <select name="is_active" required
                            class="w-full px-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-bold text-sky-900 shadow-inner">
                            <option value="1" {{ old('is_active', $data->is_active) == 1 ? 'selected' : '' }}>✅ SETUJUI (Tampilkan di Website)</option>
                            <option value="0" {{ old('is_active', $data->is_active) == 0 ? 'selected' : '' }}>⏳ PENDING (Sembunyikan)</option>
                        </select>
                        <p class="text-[10px] text-slate-400 mt-2 ml-1 italic">* Komentar yang disetujui akan muncul di halaman berita terkait.</p>
                    </div>
                </div>

                {{-- Tombol Aksi --}}
                <div class="flex flex-col md:flex-row gap-4 pt-6 border-t border-sky-50">
                    <a href="{{ route('dashboard.komentar') }}" class="flex-1 px-8 py-4 rounded-2xl bg-slate-100 text-slate-500 font-bold text-center text-sm hover:bg-slate-200 transition">
                        Batal
                    </a>
                    <button type="submit" class="flex-[2] px-8 py-4 rounded-2xl bg-sky-600 text-white font-bold text-sm hover:bg-sky-700 shadow-lg shadow-sky-100 transition transform active:scale-95 flex items-center justify-center gap-2">
                        <i class="fas fa-check-circle"></i> Perbarui Status Komentar
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection