{% extends "base.html" %}

{% block page_title %}Data Realisasi{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header Section -->
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 mobile-small">
                <i class="fas fa-chart-line text-ocean-600 mr-2"></i>
                Data Realisasi
            </h1>
            <p class="text-gray-600 mt-1 mobile-xs">
                {% if session.role == 'super_admin' %}
                    Kelola data realisasi semua bidang
                {% else %}
                    Kelola data realisasi bidang {{ session.bidang|title }}
                {% endif %}
            </p>
        </div>
        <button onclick="openModal('addRealisasiModal')" class="bg-ocean-600 hover:bg-ocean-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors mobile-small">
            <i class="fas fa-plus"></i>
            <span>Tambah Data</span>
        </button>
    </div>

    <!-- Search and Filter -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <form method="GET" class="flex flex-col sm:flex-row gap-4">
            <div class="flex-1">
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                    <input type="text" name="search" value="{{ search }}" 
                           placeholder="Cari program, kegiatan, sub kegiatan, atau pekerjaan..." 
                           class="pl-10 pr-4 py-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                </div>
            </div>
            <button type="submit" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition-colors mobile-small">
                <i class="fas fa-search mr-2"></i>Cari
            </button>
            {% if search %}
            <a href="/realisasi" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors text-center mobile-small">
                <i class="fas fa-times"></i>
            </a>
            {% endif %}
        </form>
    </div>

    <!-- Realisasi Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900 mobile-small">Daftar Data Realisasi</h3>
        </div>
        
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Program/Kegiatan/Pekerjaan
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Lokasi
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Realisasi Fisik
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Realisasi Keuangan
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Dokumentasi
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Status
                        </th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Periode
                        </th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">
                            Aksi
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for item in realisasi_data %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 mobile-small">
                            <div class="max-w-xs">
                                <div class="font-medium text-gray-900 truncate">{{ item.program_name or 'Program tidak diketahui' }}</div>
                                <div class="text-sm text-gray-500 truncate">{{ item.kegiatan_name or 'Kegiatan tidak diketahui' }}</div>
                                {% if item.sub_kegiatan_name %}
                                <div class="text-xs text-gray-400 truncate">{{ item.sub_kegiatan_name }}</div>
                                {% endif %}
                                {% if item.pekerjaan_name %}
                                <div class="text-xs text-gray-400 italic truncate ml-2">↳ {{ item.pekerjaan_name }}</div>
                                {% endif %}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                            <div>{{ item.kecamatan or '-' }}</div>
                            {% if item.desa %}
                            <div class="text-xs text-gray-400">{{ item.desa }}</div>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap mobile-small">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 w-16">
                                    <div class="bg-gray-200 rounded-full h-2">
                                        <div class="bg-purple-600 h-2 rounded-full" style="width: {{ item.realisasi_fisik or 0 }}%"></div>
                                    </div>
                                </div>
                                <div class="ml-3 text-sm text-gray-900">{{ "%.1f"|format(item.realisasi_fisik or 0) }}%</div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap mobile-small">
                            <div class="text-sm text-gray-900">Rp {{ "{:,.0f}".format(item.realisasi_keuangan or 0) }}</div>
                            <div class="text-xs text-gray-500">dari Rp {{ "{:,.0f}".format(item.pagu_anggaran or 0) }}</div>
                            {% if item.pagu_anggaran and item.pagu_anggaran > 0 %}
                            <div class="text-xs text-gray-400">{{ "%.1f"|format((item.realisasi_keuangan or 0) * 100 / item.pagu_anggaran) }}%</div>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-center mobile-xs">
                            {% if item.dokumentasi_url %}
                                <a href="{{ item.dokumentasi_url }}" target="_blank" class="text-ocean-600 hover:text-ocean-900" title="Lihat Dokumentasi">
                                    <i class="fas fa-link"></i>
                                </a>
                            {% else %}
                                <span class="text-gray-400">-</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap mobile-small">
                            {% if item.status_kontrak == 'Aktif' %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 mobile-xs">
                                    <i class="fas fa-play-circle mr-1"></i>Aktif
                                </span>
                            {% elif item.status_kontrak == 'Selesai' %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800 mobile-xs">
                                    <i class="fas fa-check-circle mr-1"></i>Selesai
                                </span>
                            {% else %}
                                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800 mobile-xs">
                                    <i class="fas fa-times-circle mr-1"></i>{{ item.status_kontrak or 'Tidak diketahui' }}
                                </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                            {% if item.bulan and item.tahun %}
                            <div>{{ ['', 'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'][item.bulan] }} {{ item.tahun }}</div>
                            {% endif %}
                            {% if item.bidang %}
                            <div class="text-xs text-gray-400">{{ item.bidang|title }}</div>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <button onclick="viewDetail({{ item | tojson | safe }})" class="text-ocean-600 hover:text-ocean-900 mr-3 mobile-xs">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="editRealisasi({{ item.id }})" class="text-indigo-600 hover:text-indigo-900 mr-3 mobile-xs">
                                <i class="fas fa-edit"></i>
                            </button>
                            <a href="/delete_realisasi/{{ item.id }}" 
                               onclick="return confirm('Apakah Anda yakin ingin menghapus data realisasi ini? Tindakan ini tidak dapat dibatalkan!')"
                               class="text-red-600 hover:text-red-900 mobile-xs">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            {% if not realisasi_data %}
            <div class="text-center py-12">
                <i class="fas fa-chart-line text-gray-300 text-4xl mb-4"></i>
                <p class="text-gray-500 mobile-small">
                    {% if search %}
                        Tidak ada data realisasi yang ditemukan dengan kata kunci "{{ search }}"
                    {% else %}
                        Belum ada data realisasi yang tersimpan
                    {% endif %}
                </p>
                <button onclick="openModal('addRealisasiModal')" class="mt-4 bg-ocean-600 hover:bg-ocean-700 text-white px-4 py-2 rounded-lg mobile-small">
                    <i class="fas fa-plus mr-2"></i>Tambah Data Pertama
                </button>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Pagination -->
    {% if total_pages > 1 %}
    <div class="flex items-center justify-between bg-white px-4 py-3 border border-gray-200 rounded-lg mobile-small">
        <div class="flex-1 flex justify-between sm:hidden">
            {% if page > 1 %}
            <a href="/realisasi?page={{ page-1 }}&search={{ search }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Previous
            </a>
            {% endif %}
            {% if page < total_pages %}
            <a href="/realisasi?page={{ page+1 }}&search={{ search }}" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Next
            </a>
            {% endif %}
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700 mobile-xs">
                    Halaman {{ page }} dari {{ total_pages }}
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                    {% for p in range(1, total_pages + 1) %}
                        {% if p == page %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-ocean-500 bg-ocean-50 text-sm font-medium text-ocean-600">
                            {{ p }}
                        </span>
                        {% else %}
                        <a href="/realisasi?page={{ p }}&search={{ search }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            {{ p }}
                        </a>
                        {% endif %}
                    {% endfor %}
                </nav>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Add/Edit Realisasi Modals -->

<!-- Base Modal Structure (reused for Add and Edit) -->
{% macro realisasi_modal(modal_id, title, form_action) %}
<div id="{{ modal_id }}" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden modal z-50">
    <div class="relative top-10 mx-auto p-5 border max-w-4xl shadow-lg rounded-xl bg-white modal-content">
        <div class="mt-3">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900 mobile-small">{{ title }}</h3>
                <button onclick="closeModal('{{ modal_id }}')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="{{ modal_id }}Form" method="POST" action="{{ form_action }}" class="space-y-6">
                <!-- Program/Kegiatan Section -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label for="{{ modal_id }}_program_id" class="block text-sm font-medium text-gray-700 mobile-xs">Program</label>
                        <select id="{{ modal_id }}_program_id" name="program_id" required onchange="loadKegiatan('{{ modal_id }}')"
                                class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                            <option value="">Pilih Program</option>
                            {% for program in programs %}
                            <option value="{{ program.id }}">{{ program.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_kegiatan_id" class="block text-sm font-medium text-gray-700 mobile-xs">Kegiatan</label>
                        <select id="{{ modal_id }}_kegiatan_id" name="kegiatan_id" required onchange="loadSubKegiatan('{{ modal_id }}')"
                                class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                            <option value="">Pilih Kegiatan</option>
                        </select>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_sub_kegiatan_id" class="block text-sm font-medium text-gray-700 mobile-xs">Sub Kegiatan</label>
                        <select id="{{ modal_id }}_sub_kegiatan_id" name="sub_kegiatan_id" required onchange="loadPekerjaan('{{ modal_id }}')"
                                class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                            <option value="">Pilih Sub Kegiatan</option>
                        </select>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_pekerjaan_id" class="block text-sm font-medium text-gray-700 mobile-xs">Pekerjaan (Opsional)</label>
                        <select id="{{ modal_id }}_pekerjaan_id" name="pekerjaan_id" 
                                class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                            <option value="">Pilih Pekerjaan</option>
                        </select>
                    </div>
                </div>

                <!-- Location and Source Section -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="{{ modal_id }}_lokasi_id" class="block text-sm font-medium text-gray-700 mobile-xs">Lokasi</label>
                        <select id="{{ modal_id }}_lokasi_id" name="lokasi_id" required
                                class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                            <option value="">Pilih Lokasi</option>
                            {% for lokasi in lokasi %}
                            <option value="{{ lokasi.id }}">{{ lokasi.kecamatan }} - {{ lokasi.desa }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_sumber_dana_id" class="block text-sm font-medium text-gray-700 mobile-xs">Sumber Dana</label>
                        <select id="{{ modal_id }}_sumber_dana_id" name="sumber_dana_id" required
                                class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                            <option value="">Pilih Sumber Dana</option>
                            {% for sumber in sumber_dana %}
                            <option value="{{ sumber.id }}">{{ sumber.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_pihak_ketiga_id" class="block text-sm font-medium text-gray-700 mobile-xs">Pihak Ketiga</label>
                        <select id="{{ modal_id }}_pihak_ketiga_id" name="pihak_ketiga_id"
                                class="mt-1 block w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-ocean-500 focus:border-ocean-500 mobile-small">
                            <option value="">Pilih Pihak Ketiga</option>
                            {% for pihak in pihak_ketiga %}
                            <option value="{{ pihak.id }}">{{ pihak.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- Financial Data Section -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="{{ modal_id }}_target_fisik" class="block text-sm font-medium text-gray-700 mobile-xs">Target Fisik (%)</label>
                            <input type="number" id="{{ modal_id }}_target_fisik" name="target_fisik" step="0.01" min="0" max="100" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm" placeholder="0.00">
                        </div>
                        <div>
                            <label for="{{ modal_id }}_realisasi_fisik" class="block text-sm font-medium text-gray-700 mobile-xs">Realisasi Fisik (%)</label>
                            <input type="number" id="{{ modal_id }}_realisasi_fisik" name="realisasi_fisik" step="0.01" min="0" max="100" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm" placeholder="0.00">
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="{{ modal_id }}_pagu_anggaran" class="block text-sm font-medium text-gray-700 mobile-xs">Pagu Anggaran</label>
                            <input type="number" id="{{ modal_id }}_pagu_anggaran" name="pagu_anggaran" step="1" min="0" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm" placeholder="0">
                        </div>
                        <div>
                            <label for="{{ modal_id }}_realisasi_keuangan" class="block text-sm font-medium text-gray-700 mobile-xs">Realisasi Keuangan</label>
                            <input type="number" id="{{ modal_id }}_realisasi_keuangan" name="realisasi_keuangan" step="1" min="0" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm" placeholder="0">
                        </div>
                    </div>
                </div>

                <!-- Contract Data Section -->
                <div class="space-y-4 border-t pt-4">
                    <h4 class="text-md font-medium text-gray-900 mobile-small">Data Kontrak</h4>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="{{ modal_id }}_nomor_kontrak" class="block text-sm font-medium text-gray-700 mobile-xs">Nomor Kontrak</label>
                            <input type="text" id="{{ modal_id }}_nomor_kontrak" name="nomor_kontrak" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm">
                        </div>
                        <div>
                            <label for="{{ modal_id }}_tanggal_kontrak" class="block text-sm font-medium text-gray-700 mobile-xs">Tanggal Kontrak</label>
                            <input type="date" id="{{ modal_id }}_tanggal_kontrak" name="tanggal_kontrak" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm">
                        </div>
                    </div>
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="{{ modal_id }}_waktu_mulai" class="block text-sm font-medium text-gray-700 mobile-xs">Waktu Mulai</label>
                            <input type="date" id="{{ modal_id }}_waktu_mulai" name="waktu_mulai" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm">
                        </div>
                        <div>
                            <label for="{{ modal_id }}_waktu_selesai" class="block text-sm font-medium text-gray-700 mobile-xs">Waktu Selesai</label>
                            <input type="date" id="{{ modal_id }}_waktu_selesai" name="waktu_selesai" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm">
                        </div>
                        <div>
                            <label for="{{ modal_id }}_nilai_kontrak" class="block text-sm font-medium text-gray-700 mobile-xs">Nilai Kontrak</label>
                            <input type="number" id="{{ modal_id }}_nilai_kontrak" name="nilai_kontrak" step="1" min="0" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm" placeholder="0">
                        </div>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_status_kontrak" class="block text-sm font-medium text-gray-700 mobile-xs">Status Kontrak</label>
                        <select id="{{ modal_id }}_status_kontrak" name="status_kontrak" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm">
                            <option value="Aktif">Aktif</option>
                            <option value="Selesai">Selesai</option>
                            <option value="Dibatalkan">Dibatalkan</option>
                        </select>
                    </div>
                </div>

                <!-- Period and Notes Section -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-t pt-4">
                    <div>
                        <label for="{{ modal_id }}_bulan" class="block text-sm font-medium text-gray-700 mobile-xs">Bulan Pelaporan</label>
                        <select id="{{ modal_id }}_bulan" name="bulan" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm">
                            {% for i in range(1, 13) %}
                            <option value="{{ i }}">{{ ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'][i] }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_tahun" class="block text-sm font-medium text-gray-700 mobile-xs">Tahun Pelaporan</label>
                        <input type="number" id="{{ modal_id }}_tahun" name="tahun" min="2020" max="2030" value="2025" required class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm">
                    </div>
                </div>

                <div class="space-y-4 border-t pt-4">
                     <div>
                        <label for="{{ modal_id }}_permasalahan" class="block text-sm font-medium text-gray-700 mobile-xs">Permasalahan</label>
                        <textarea id="{{ modal_id }}_permasalahan" name="permasalahan" rows="2" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm"></textarea>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_upaya_penyelesaian" class="block text-sm font-medium text-gray-700 mobile-xs">Upaya Penyelesaian</label>
                        <textarea id="{{ modal_id }}_upaya_penyelesaian" name="upaya_penyelesaian" rows="2" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm"></textarea>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_keterangan" class="block text-sm font-medium text-gray-700 mobile-xs">Keterangan</label>
                        <textarea id="{{ modal_id }}_keterangan" name="keterangan" rows="2" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm"></textarea>
                    </div>
                    <div>
                        <label for="{{ modal_id }}_dokumentasi_url" class="block text-sm font-medium text-gray-700 mobile-xs">Link Dokumentasi</label>
                        <input type="url" id="{{ modal_id }}_dokumentasi_url" name="dokumentasi_url" class="mt-1 block w-full border-gray-300 rounded-lg shadow-sm" placeholder="https://">
                    </div>
                </div>
                
                <div class="flex justify-end space-x-3 pt-6 border-t">
                    <button type="button" onclick="closeModal('{{ modal_id }}')" 
                            class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors mobile-small">
                        Batal
                    </button>
                    <button type="submit" 
                            class="px-6 py-2 bg-ocean-600 text-white rounded-lg hover:bg-ocean-700 transition-colors mobile-small">
                        <i class="fas fa-save mr-2"></i>Simpan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endmacro %}

<!-- Render the modals -->
{{ realisasi_modal('addRealisasiModal', 'Tambah Data Realisasi', '/add_realisasi') }}
{{ realisasi_modal('editRealisasiModal', 'Edit Data Realisasi', '#') }}


<script>
async function loadDropdown(selectElement, url, selectedValue) {
    selectElement.innerHTML = '<option value="">Memuat...</option>';
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Network response was not ok');
        const data = await response.json();
        selectElement.innerHTML = '<option value="">Pilih Opsi</option>';
        data.forEach(item => {
            const option = document.createElement('option');
            option.value = item.id;
            option.textContent = item.name;
            selectElement.appendChild(option);
        });
        if (selectedValue) {
            selectElement.value = selectedValue;
        }
    } catch (error) {
        console.error('Error loading dropdown:', error);
        selectElement.innerHTML = '<option value="">Gagal Memuat</option>';
    }
}

function loadKegiatan(modalId, selectedValue = null) {
    const programId = document.getElementById(`${modalId}_program_id`).value;
    const kegiatanSelect = document.getElementById(`${modalId}_kegiatan_id`);
    if (programId) {
        loadDropdown(kegiatanSelect, `/get_kegiatan/${programId}`, selectedValue);
    } else {
        kegiatanSelect.innerHTML = '<option value="">Pilih Program Dulu</option>';
    }
}

function loadSubKegiatan(modalId, selectedValue = null) {
    const kegiatanId = document.getElementById(`${modalId}_kegiatan_id`).value;
    const subKegiatanSelect = document.getElementById(`${modalId}_sub_kegiatan_id`);
    if (kegiatanId) {
        loadDropdown(subKegiatanSelect, `/get_sub_kegiatan/${kegiatanId}`, selectedValue);
    } else {
        subKegiatanSelect.innerHTML = '<option value="">Pilih Kegiatan Dulu</option>';
    }
}

function loadPekerjaan(modalId, selectedValue = null) {
    const subKegiatanId = document.getElementById(`${modalId}_sub_kegiatan_id`).value;
    const pekerjaanSelect = document.getElementById(`${modalId}_pekerjaan_id`);
    if (subKegiatanId) {
        loadDropdown(pekerjaanSelect, `/get_pekerjaan/${subKegiatanId}`, selectedValue);
    } else {
        pekerjaanSelect.innerHTML = '<option value="">Pilih Sub Kegiatan Dulu</option>';
    }
}

async function editRealisasi(id) {
    try {
        const response = await fetch(`/get_realisasi/${id}`);
        if (!response.ok) throw new Error('Data not found');
        const data = await response.json();

        const modalId = 'editRealisasiModal';
        const form = document.getElementById(`${modalId}Form`);
        form.action = `/edit_realisasi/${id}`;

        // Populate simple fields
        document.getElementById(`${modalId}_target_fisik`).value = data.target_fisik || '';
        document.getElementById(`${modalId}_realisasi_fisik`).value = data.realisasi_fisik || '';
        document.getElementById(`${modalId}_pagu_anggaran`).value = data.pagu_anggaran || '';
        document.getElementById(`${modalId}_realisasi_keuangan`).value = data.realisasi_keuangan || '';
        document.getElementById(`${modalId}_nomor_kontrak`).value = data.nomor_kontrak || '';
        document.getElementById(`${modalId}_tanggal_kontrak`).value = data.tanggal_kontrak || '';
        document.getElementById(`${modalId}_waktu_mulai`).value = data.waktu_mulai || '';
        document.getElementById(`${modalId}_waktu_selesai`).value = data.waktu_selesai || '';
        document.getElementById(`${modalId}_nilai_kontrak`).value = data.nilai_kontrak || '';
        document.getElementById(`${modalId}_status_kontrak`).value = data.status_kontrak || 'Aktif';
        document.getElementById(`${modalId}_permasalahan`).value = data.permasalahan || '';
        document.getElementById(`${modalId}_upaya_penyelesaian`).value = data.upaya_penyelesaian || '';
        document.getElementById(`${modalId}_keterangan`).value = data.keterangan || '';
        document.getElementById(`${modalId}_dokumentasi_url`).value = data.dokumentasi_url || '';
        document.getElementById(`${modalId}_bulan`).value = data.bulan || '';
        document.getElementById(`${modalId}_tahun`).value = data.tahun || '';
        document.getElementById(`${modalId}_lokasi_id`).value = data.lokasi_id || '';
        document.getElementById(`${modalId}_sumber_dana_id`).value = data.sumber_dana_id || '';
        document.getElementById(`${modalId}_pihak_ketiga_id`).value = data.pihak_ketiga_id || '';
        
        // Handle cascading dropdowns
        const programSelect = document.getElementById(`${modalId}_program_id`);
        programSelect.value = data.program_id;
        
        // Load and select kegiatan
        await loadDropdown(document.getElementById(`${modalId}_kegiatan_id`), `/get_kegiatan/${data.program_id}`, data.kegiatan_id);
        
        // Load and select sub_kegiatan
        await loadDropdown(document.getElementById(`${modalId}_sub_kegiatan_id`), `/get_sub_kegiatan/${data.kegiatan_id}`, data.sub_kegiatan_id);

        // Load and select pekerjaan
        await loadDropdown(document.getElementById(`${modalId}_pekerjaan_id`), `/get_pekerjaan/${data.sub_kegiatan_id}`, data.pekerjaan_id);

        openModal(modalId);
    } catch (error) {
        console.error('Error editing realisasi:', error);
        alert('Gagal memuat data untuk diedit.');
    }
}


function viewDetail(item) {
    // A simple alert-based detail view for now
    let detailText = `DETAIL REALISASI\n\n`;
    detailText += `Program: ${item.program_name}\n`;
    detailText += `Kegiatan: ${item.kegiatan_name}\n`;
    if (item.sub_kegiatan_name) detailText += `Sub Kegiatan: ${item.sub_kegiatan_name}\n`;
    if (item.pekerjaan_name) detailText += `Pekerjaan: ${item.pekerjaan_name}\n\n`;
    
    detailText += `Lokasi: ${item.kecamatan}, ${item.desa}\n`;
    detailText += `Sumber Dana: ${item.sumber_dana_name}\n`;
    detailText += `Periode: ${item.bulan}/${item.tahun}\n\n`;
    
    detailText += `Pagu Anggaran: Rp ${new Intl.NumberFormat('id-ID').format(item.pagu_anggaran)}\n`;
    detailText += `Realisasi Keuangan: Rp ${new Intl.NumberFormat('id-ID').format(item.realisasi_keuangan)}\n`;
    detailText += `Realisasi Fisik: ${item.realisasi_fisik}%\n\n`;
    
    detailText += `Status Kontrak: ${item.status_kontrak}\n`;
    if (item.nomor_kontrak) detailText += `No. Kontrak: ${item.nomor_kontrak}\n`;
    if (item.nilai_kontrak) detailText += `Nilai Kontrak: Rp ${new Intl.NumberFormat('id-ID').format(item.nilai_kontrak)}\n\n`;

    if (item.permasalahan) detailText += `Permasalahan: ${item.permasalahan}\n`;
    if (item.upaya_penyelesaian) detailText += `Upaya: ${item.upaya_penyelesaian}\n`;

    alert(detailText);
}
</script>
{% endblock %}