@extends('layouts.admin')
@section('title', 'Edit Program Kegiatan')

@section('content')
<div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
    <h2 class="text-2xl font-bold text-gray-800">Edit Program Kegiatan</h2>
    <a href="{{ route('programs.index') }}" class="text-gray-500 hover:text-[#00923F] font-bold transition flex items-center gap-1 bg-white px-4 py-2 rounded-lg shadow-sm border border-gray-100">
        &larr; Kembali ke Daftar
    </a>
</div>

<form action="{{ route('programs.update', $program->id) }}" method="POST" enctype="multipart/form-data">
    @csrf @method('PUT')
    
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100">
                <label class="block text-sm font-extrabold text-gray-700 mb-2">Judul Program Kegiatan *</label>
                <input type="text" name="title" value="{{ old('title', $program->title) }}" required class="w-full border border-gray-300 rounded-xl p-4 focus:ring-2 focus:ring-green-200 outline-none transition text-lg">
                
                <label class="block text-sm font-extrabold text-gray-700 mb-2 mt-6">Pilih Bidang / Divisi *</label>
                <select name="bidang" required class="w-full bg-gray-50 border border-gray-300 rounded-xl p-4 outline-none transition cursor-pointer">
                    <option value="Pengembangan Organisasi dan Pengkaderan" {{ $program->bidang == 'Pengembangan Organisasi dan Pengkaderan' ? 'selected' : '' }}>1. Pengembangan Organisasi & Pengkaderan</option>
                    <option value="Pendidikan dan Dakwah" {{ $program->bidang == 'Pendidikan dan Dakwah' ? 'selected' : '' }}>2. Pendidikan & Dakwah</option>
                    <option value="Kesehatan dan Lingkungan Hidup" {{ $program->bidang == 'Kesehatan dan Lingkungan Hidup' ? 'selected' : '' }}>3. Kesehatan & Lingkungan Hidup</option>
                    <option value="Ekonomi dan Koperasi" {{ $program->bidang == 'Ekonomi dan Koperasi' ? 'selected' : '' }}>4. Ekonomi & Koperasi</option>
                    <option value="Hukum, Politik, dan Advokasi" {{ $program->bidang == 'Hukum, Politik, dan Advokasi' ? 'selected' : '' }}>5. Hukum, Politik & Advokasi</option>
                    <option value="Sosial, Seni, dan Budaya" {{ $program->bidang == 'Sosial, Seni, dan Budaya' ? 'selected' : '' }}>6. Sosial, Seni & Budaya</option>
                    <option value="Media Informasi, Penelitian, dan Pengembangan" {{ $program->bidang == 'Media Informasi, Penelitian, dan Pengembangan' ? 'selected' : '' }}>7. Media Informasi, Penelitian & Pengembangan</option>
                </select>

                <label class="block text-sm font-extrabold text-gray-700 mb-2 mt-6">Deskripsi Konten *</label>
                <textarea name="content" rows="12" required class="w-full border border-gray-300 rounded-xl p-4 outline-none transition text-gray-700 leading-relaxed">{{ old('content', $program->content) }}</textarea>
            </div>
        </div>

        <div class="lg:col-span-1 space-y-6 sticky top-6">
            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex flex-col h-full">
                <h3 class="font-extrabold text-gray-800 mb-4 border-b border-gray-100 pb-3">Media & Dokumentasi</h3>
                
                @if($program->image)
                    <div class="mb-4">
                        <span class="block text-xs font-bold text-gray-400 mb-2">FOTO UTAMA SAAT INI</span>
                        <div class="w-full h-40 rounded-lg overflow-hidden bg-gray-100 border border-gray-200 flex justify-center items-center">
                            <img src="{{ asset('storage/' . $program->image) }}" class="max-w-full max-h-full object-cover">
                        </div>
                    </div>
                @endif

                @if(!empty($program->images) && count(json_decode($program->images, true)) > 0)
                    <div class="mb-4 border-t border-gray-100 pt-4" id="container-foto-tambahan">
                        <span class="block text-xs font-bold text-gray-400 mb-3">FOTO TAMBAHAN SAAT INI</span>
                        <div class="grid grid-cols-2 gap-3">
                            @foreach(json_decode($program->images, true) as $index => $img)
                                <div class="relative rounded-lg overflow-hidden border border-gray-200 group aspect-video bg-gray-100 shadow-sm" id="foto-tambahan-{{ $index }}">
                                    <img src="{{ asset('storage/' . $img) }}" class="w-full h-full object-cover">
                                    <button type="button" onclick="hapusFotoSeketika('{{ $img }}', 'foto-tambahan-{{ $index }}')" class="absolute inset-0 bg-black/70 opacity-0 group-hover:opacity-100 flex items-center justify-center text-white">
                                        <span class="text-sm font-bold bg-red-600 px-3 py-1 rounded">Hapus</span>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <label class="block text-xs font-bold text-gray-400 mb-2 mt-4 border-t border-gray-100 pt-4">GANTI / TAMBAH FOTO</label>
                <div class="mb-3 border-2 border-dashed border-gray-300 rounded-xl p-3 bg-gray-50 text-center relative hover:bg-orange-50 hover:border-orange-500 transition cursor-pointer">
                    <input type="file" name="image" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/*" onchange="document.getElementById('file-name-edit').innerText = this.files[0] ? this.files[0].name : 'Pilih File Baru'">
                    <span id="file-name-edit" class="text-sm font-bold text-orange-600">Upload Sampul Baru</span>
                </div>
                <div class="mt-auto pt-4 border-t border-gray-100">
                    <button type="submit" class="w-full py-3.5 bg-yellow-500 text-white font-extrabold rounded-xl hover:bg-yellow-600 shadow-md transition">Update Program</button>
                </div>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
function hapusFotoSeketika(imagePath, elementId) {
    if(confirm('Yakin ingin menghapus foto ini? (Tidak bisa dikembalikan)')) {
        let el = document.getElementById(elementId);
        el.style.opacity = '0.5';
        fetch(`{{ url('admin/programs') }}/{{ $program->id }}/delete-image`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify({ image: imagePath })
        }).then(response => response.json()).then(data => {
            if(data.success) {
                el.style.transition = 'all 0.4s ease';
                el.style.transform = 'scale(0)';
                setTimeout(() => el.remove(), 400);
            } else { alert('Gagal menghapus foto.'); el.style.opacity = '1'; }
        }).catch(error => { alert('Terjadi kesalahan.'); el.style.opacity = '1'; });
    }
}
</script>
@endpush
@endsection