@extends('user.layouts.app')

@section('content')

<div class="max-w-3xl mx-auto mt-10 px-4 pb-20">

    {{-- HEADER --}}
    <div class="mb-8">
        <a href="{{ route('activity.detail', $activity->id) }}" class="text-sm text-blue-600 flex items-center gap-2 mb-4 no-underline hover:underline">
            <i data-lucide="arrow-left" class="w-4 h-4"></i> Kembali ke Detail
        </a>
        <h2 class="text-2xl font-bold text-[#0D215C]">
            Edit Laporan Kegiatan
        </h2>
        <p class="text-sm text-slate-400">Perbarui informasi laporan kegiatan Anda di bawah ini.</p>
    </div>

    {{-- FORM CARD --}}
    <div class="bg-white p-8 rounded-2xl shadow-sm border border-slate-100">
        <form action="{{ route('activity.update', $activity->id) }}" method="POST" class="space-y-6">
            @csrf
            
            <div>
                <label class="text-sm font-semibold text-slate-700 block mb-2">Nama Kegiatan</label>
                <div class="relative">
                    <input type="text" name="nama_kegiatan"
                        value="{{ old('nama_kegiatan', $activity->nama_kegiatan) }}"
                        placeholder="Masukkan nama kegiatan..."
                        class="w-full p-3 rounded-xl bg-slate-50 border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition" required>
                </div>
                @error('nama_kegiatan') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="text-sm font-semibold text-slate-700 block mb-2">Tanggal Pelaksanaan</label>
                    <input type="date" name="tanggal"
                        value="{{ old('tanggal', $activity->tanggal) }}"
                        class="w-full p-3 rounded-xl bg-slate-50 border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition" required>
                    @error('tanggal') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                <div>
                    <label class="text-sm font-semibold text-slate-700 block mb-2">Lokasi</label>
                    <input type="text" name="lokasi"
                        value="{{ old('lokasi', $activity->lokasi) }}"
                        placeholder="Contoh: Kantor Dinas..."
                        class="w-full p-3 rounded-xl bg-slate-50 border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition" required>
                    @error('lokasi') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            </div>

            <div>
                <label class="text-sm font-semibold text-slate-700 block mb-2">Deskripsi Kegiatan</label>
                <textarea name="deskripsi" rows="5"
                    placeholder="Jelaskan detail kegiatan yang dilakukan..."
                    class="w-full p-3 rounded-xl bg-slate-50 border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition">{{ old('deskripsi', $activity->deskripsi) }}</textarea>
                @error('deskripsi') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
            </div>

            <div>
                <label class="text-sm font-semibold text-slate-700 block mb-2">Catatan Status Laporan (Node Petugas)</label>
                <textarea name="status_note" rows="3"
                    placeholder="Contoh: Tugas ini sedang berjalan di desa darit..."
                    class="w-full p-3 rounded-xl bg-slate-50 border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 outline-none transition">{{ old('status_note', $activity->status_note ?? '') }}</textarea>
                @error('status_note') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
            </div>

            <div class="flex flex-wrap items-center gap-4 pt-4 border-t border-slate-100">
                <button type="submit"
                    class="bg-[#0D215C] hover:bg-[#0a1a47] text-white px-8 py-3 rounded-xl font-bold transition shadow-lg shadow-blue-900/10 flex items-center gap-2">
                    <i data-lucide="save" class="w-4 h-4"></i> Simpan Perubahan
                </button>

                <a href="{{ route('activity.detail', $activity->id) }}"
                    class="px-8 py-3 border border-slate-200 text-slate-600 rounded-xl font-semibold hover:bg-slate-50 transition">
                    Batal
                </a>
            </div>

        </form>
    </div>

</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>

@endsection