{% 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.id }})" 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 Realisasi Modal -->
<div id="addRealisasiModal" 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">
                    <i class="fas fa-plus-circle text-ocean-600 mr-2"></i>
                    Tambah Data Realisasi
                </h3>
                <button onclick="closeModal('addRealisasiModal')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form method="POST" action="/add_realisasi" class="space-y-6">
                <!-- Program/Kegiatan Section -->
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label for="program_id" class="block text-sm font-medium text-gray-700 mobile-xs">Program</label>
                        <select id="program_id" name="program_id" required onchange="loadKegiatan()"
                                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="kegiatan_id" class="block text-sm font-medium text-gray-700 mobile-xs">Kegiatan</label>
                        <select id="kegiatan_id" name="kegiatan_id" required onchange="loadSubKegiatan()"
                                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="sub_kegiatan_id" class="block text-sm font-medium text-gray-700 mobile-xs">Sub Kegiatan</label>
                        <select id="sub_kegiatan_id" name="sub_kegiatan_id" required onchange="loadPekerjaan()"
                                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="pekerjaan_id" class="block text-sm font-medium text-gray-700 mobile-xs">Pekerjaan</label>
                        <select 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="lokasi_id" class="block text-sm font-medium text-gray-700 mobile-xs">Lokasi</label>
                        <select 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="sumber_dana_id" class="block text-sm font-medium text-gray-700 mobile-xs">Sumber Dana</label>
                        <select 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="pihak_ketiga_id" class="block text-sm font-medium text-gray-700 mobile-xs">Pihak Ketiga</label>
                        <select 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="target_fisik" class="block text-sm font-medium text-gray-700 mobile-xs">Target Fisik (%)</label>
                            <input type="number" id="target_fisik" name="target_fisik" step="0.01" min="0" max="100"
                                   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"
                                   placeholder="0.00">
                        </div>
                        
                        <div>
                            <label for="realisasi_fisik" class="block text-sm font-medium text-gray-700 mobile-xs">Realisasi Fisik (%)</label>
                            <input type="number" id="realisasi_fisik" name="realisasi_fisik" step="0.01" min="0" max="100"
                                   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"
                                   placeholder="0.00">
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="pagu_anggaran" class="block text-sm font-medium text-gray-700 mobile-xs">Pagu Anggaran</label>
                            <input type="number" id="pagu_anggaran" name="pagu_anggaran" step="1" min="0"
                                   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"
                                   placeholder="0">
                        </div>
                        
                        <div>
                            <label for="realisasi_keuangan" class="block text-sm font-medium text-gray-700 mobile-xs">Realisasi Keuangan</label>
                            <input type="number" id="realisasi_keuangan" name="realisasi_keuangan" step="1" min="0"
                                   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"
                                   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="nomor_kontrak" class="block text-sm font-medium text-gray-700 mobile-xs">Nomor Kontrak</label>
                            <input type="text" id="nomor_kontrak" name="nomor_kontrak"
                                   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"
                                   placeholder="Nomor dokumen kontrak">
                        </div>
                        
                        <div>
                            <label for="tanggal_kontrak" class="block text-sm font-medium text-gray-700 mobile-xs">Tanggal Kontrak</label>
                            <input type="date" id="tanggal_kontrak" name="tanggal_kontrak"
                                   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">
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label for="waktu_mulai" class="block text-sm font-medium text-gray-700 mobile-xs">Waktu Mulai</label>
                            <input type="date" id="waktu_mulai" name="waktu_mulai"
                                   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">
                        </div>
                        
                        <div>
                            <label for="waktu_selesai" class="block text-sm font-medium text-gray-700 mobile-xs">Waktu Selesai</label>
                            <input type="date" id="waktu_selesai" name="waktu_selesai"
                                   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">
                        </div>
                        
                        <div>
                            <label for="nilai_kontrak" class="block text-sm font-medium text-gray-700 mobile-xs">Nilai Kontrak</label>
                            <input type="number" id="nilai_kontrak" name="nilai_kontrak" step="1" min="0"
                                   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"
                                   placeholder="0">
                        </div>
                    </div>
                    
                    <div>
                        <label for="status_kontrak" class="block text-sm font-medium text-gray-700 mobile-xs">Status Kontrak</label>
                        <select id="status_kontrak" name="status_kontrak"
                                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="Aktif">Aktif</option>
                            <option value="Selesai">Selesai</option>
                            <option value="Dibatalkan">Dibatalkan</option>
                        </select>
                    </div>
                </div>

                <!-- Period Section -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-t pt-4">
                    <div>
                        <label for="bulan" class="block text-sm font-medium text-gray-700 mobile-xs">Bulan</label>
                        <select id="bulan" name="bulan" 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 Bulan</option>
                            {% 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="tahun" class="block text-sm font-medium text-gray-700 mobile-xs">Tahun</label>
                        <input type="number" id="tahun" name="tahun" min="2020" max="2030" value="2025" 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">
                    </div>
                </div>

                <!-- Notes Section -->
                <div class="space-y-4 border-t pt-4">
                    <div>
                        <label for="permasalahan" class="block text-sm font-medium text-gray-700 mobile-xs">Permasalahan</label>
                        <textarea id="permasalahan" name="permasalahan" rows="2"
                                  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"
                                  placeholder="Jelaskan permasalahan yang dihadapi (opsional)"></textarea>
                    </div>
                    
                    <div>
                        <label for="upaya_penyelesaian" class="block text-sm font-medium text-gray-700 mobile-xs">Upaya Penyelesaian</label>
                        <textarea id="upaya_penyelesaian" name="upaya_penyelesaian" rows="2"
                                  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"
                                  placeholder="Jelaskan upaya penyelesaian yang dilakukan (opsional)"></textarea>
                    </div>
                    
                    <div>
                        <label for="keterangan" class="block text-sm font-medium text-gray-700 mobile-xs">Keterangan</label>
                        <textarea id="keterangan" name="keterangan" rows="2"
                                  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"
                                  placeholder="Keterangan tambahan (opsional)"></textarea>
                    </div>

                    <div>
                        <label for="dokumentasi_url" class="block text-sm font-medium text-gray-700 mobile-xs">Link Dokumentasi</label>
                        <input type="url" id="dokumentasi_url" name="dokumentasi_url"
                               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"
                               placeholder="https://contoh.com/link-dokumentasi.pdf">
                    </div>
                </div>
                
                <div class="flex justify-end space-x-3 pt-6 border-t">
                    <button type="button" onclick="closeModal('addRealisasiModal')" 
                            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 Data
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function loadKegiatan() {
    const programId = document.getElementById('program_id').value;
    const kegiatanSelect = document.getElementById('kegiatan_id');
    const subKegiatanSelect = document.getElementById('sub_kegiatan_id');
    const pekerjaanSelect = document.getElementById('pekerjaan_id');
    
    // Clear existing options
    kegiatanSelect.innerHTML = '<option value="">Pilih Kegiatan</option>';
    subKegiatanSelect.innerHTML = '<option value="">Pilih Sub Kegiatan</option>';
    pekerjaanSelect.innerHTML = '<option value="">Pilih Pekerjaan</option>';
    
    if (programId) {
        kegiatanSelect.innerHTML = '<option value="">Memuat...</option>';
        fetch(`/get_kegiatan/${programId}`)
            .then(response => response.json())
            .then(data => {
                kegiatanSelect.innerHTML = '<option value="">Pilih Kegiatan</option>';
                data.forEach(kegiatan => {
                    const option = document.createElement('option');
                    option.value = kegiatan.id;
                    option.textContent = kegiatan.name;
                    kegiatanSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
}

function loadSubKegiatan() {
    const kegiatanId = document.getElementById('kegiatan_id').value;
    const subKegiatanSelect = document.getElementById('sub_kegiatan_id');
    const pekerjaanSelect = document.getElementById('pekerjaan_id');
    
    // Clear existing options
    subKegiatanSelect.innerHTML = '<option value="">Pilih Sub Kegiatan</option>';
    pekerjaanSelect.innerHTML = '<option value="">Pilih Pekerjaan</option>';
    
    if (kegiatanId) {
        subKegiatanSelect.innerHTML = '<option value="">Memuat...</option>';
        fetch(`/get_sub_kegiatan/${kegiatanId}`)
            .then(response => response.json())
            .then(data => {
                subKegiatanSelect.innerHTML = '<option value="">Pilih Sub Kegiatan</option>';
                data.forEach(subKegiatan => {
                    const option = document.createElement('option');
                    option.value = subKegiatan.id;
                    option.textContent = subKegiatan.name;
                    subKegiatanSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
}

function loadPekerjaan() {
    const subKegiatanId = document.getElementById('sub_kegiatan_id').value;
    const pekerjaanSelect = document.getElementById('pekerjaan_id');

    // Clear existing options
    pekerjaanSelect.innerHTML = '<option value="">Pilih Pekerjaan</option>';
    
    if (subKegiatanId) {
        pekerjaanSelect.innerHTML = '<option value="">Memuat...</option>';
        fetch(`/get_pekerjaan/${subKegiatanId}`)
            .then(response => response.json())
            .then(data => {
                pekerjaanSelect.innerHTML = '<option value="">Pilih Pekerjaan</option>';
                data.forEach(pekerjaan => {
                    const option = document.createElement('option');
                    option.value = pekerjaan.id;
                    option.textContent = pekerjaan.name;
                    pekerjaanSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error:', error));
    }
}

function viewDetail(id) {
    // Implement view detail functionality
    alert('Fitur detail akan segera tersedia');
}

function editRealisasi(id) {
    // Implement edit functionality
    alert('Fitur edit akan segera tersedia');
}
</script>
{% endblock %}