{% extends "base.html" %}

{% block page_title %}Master Data{% 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-database text-ocean-600 mr-2"></i>
                Master Data
            </h1>
            <p class="text-gray-600 mt-1 mobile-xs">Kelola data master sistem SIRIPIKAN</p>
        </div>
    </div>

    <!-- Tabs Navigation -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8 px-6 overflow-x-auto" aria-label="Tabs">
                <button onclick="showTab('programs')" id="tab-programs" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm mobile-xs tab-button active-tab">
                    <i class="fas fa-tasks mr-2"></i>Program
                </button>
                <button onclick="showTab('kegiatan')" id="tab-kegiatan" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm mobile-xs tab-button">
                    <i class="fas fa-clipboard-list mr-2"></i>Kegiatan
                </button>
                <button onclick="showTab('sub-kegiatan')" id="tab-sub-kegiatan" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm mobile-xs tab-button">
                    <i class="fas fa-stream mr-2"></i>Sub Kegiatan
                </button>
                <button onclick="showTab('pekerjaan')" id="tab-pekerjaan" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm mobile-xs tab-button">
                    <i class="fas fa-hammer mr-2"></i>Pekerjaan
                </button>
                <button onclick="showTab('sumber-dana')" id="tab-sumber-dana" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm mobile-xs tab-button">
                    <i class="fas fa-money-bill mr-2"></i>Sumber Dana
                </button>
                <button onclick="showTab('lokasi')" id="tab-lokasi" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm mobile-xs tab-button">
                    <i class="fas fa-map-marker-alt mr-2"></i>Lokasi
                </button>
                <button onclick="showTab('pihak-ketiga')" id="tab-pihak-ketiga" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm mobile-xs tab-button">
                    <i class="fas fa-building mr-2"></i>Pihak Ketiga
                </button>
            </nav>
        </div>

        <!-- Programs Tab -->
        <div id="programs-content" class="tab-content p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900 mobile-small">Data Program</h3>
                <button onclick="openModal('addProgramModal')" 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 Program</span>
                </button>
            </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">Kode</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Nama Program</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Tahun Anggaran</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 program in programs %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 mobile-xs">{{ program.code or '-' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">{{ program.name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">{{ program.tahun_anggaran or '-' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button onclick="alert('Fitur edit akan segera tersedia')" class="text-indigo-600 hover:text-indigo-900 mr-3 mobile-xs">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="/delete_program/{{ program.id }}" 
                                   onclick="return confirm('Apakah Anda yakin ingin menghapus program {{ program.name }}? Semua kegiatan dan sub kegiatan terkait akan ikut terhapus!')"
                                   class="text-red-600 hover:text-red-900 mobile-xs">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                
                {% if not programs %}
                <div class="text-center py-8">
                    <i class="fas fa-tasks text-gray-300 text-3xl mb-2"></i>
                    <p class="text-gray-500 mobile-small">Belum ada data program</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Kegiatan Tab -->
        <div id="kegiatan-content" class="tab-content p-6 hidden">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900 mobile-small">Data Kegiatan</h3>
                <button onclick="openModal('addKegiatanModal')" 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 Kegiatan</span>
                </button>
            </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 Induk</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Kode Kegiatan</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Nama Kegiatan</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 keg in kegiatan %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">{{ keg.program_name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 mobile-xs">{{ keg.code or '-' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">{{ keg.name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button onclick="alert('Fitur edit akan segera tersedia')" class="text-indigo-600 hover:text-indigo-900 mr-3 mobile-xs">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="/delete_kegiatan/{{ keg.id }}" 
                                   onclick="return confirm('Apakah Anda yakin ingin menghapus kegiatan {{ keg.name }}?')"
                                   class="text-red-600 hover:text-red-900 mobile-xs">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% if not kegiatan %}
                <div class="text-center py-8">
                    <i class="fas fa-clipboard-list text-gray-300 text-3xl mb-2"></i>
                    <p class="text-gray-500 mobile-small">Belum ada data kegiatan</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Sub Kegiatan Tab -->
        <div id="sub-kegiatan-content" class="tab-content p-6 hidden">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900 mobile-small">Data Sub Kegiatan</h3>
                <button onclick="openModal('addSubKegiatanModal')" 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 Sub Kegiatan</span>
                </button>
            </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">Kegiatan Induk</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Kode Sub Kegiatan</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Nama Sub Kegiatan</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 sub in sub_kegiatan %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">{{ sub.kegiatan_name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 mobile-xs">{{ sub.code or '-' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">{{ sub.name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button onclick="alert('Fitur edit akan segera tersedia')" class="text-indigo-600 hover:text-indigo-900 mr-3 mobile-xs">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="/delete_sub_kegiatan/{{ sub.id }}" 
                                   onclick="return confirm('Apakah Anda yakin ingin menghapus sub kegiatan {{ sub.name }}?')"
                                   class="text-red-600 hover:text-red-900 mobile-xs">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% if not sub_kegiatan %}
                <div class="text-center py-8">
                    <i class="fas fa-stream text-gray-300 text-3xl mb-2"></i>
                    <p class="text-gray-500 mobile-small">Belum ada data sub kegiatan</p>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Pekerjaan Tab -->
        <div id="pekerjaan-content" class="tab-content p-6 hidden">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900 mobile-small">Data Pekerjaan</h3>
                <button onclick="openModal('addPekerjaanModal')" 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 Pekerjaan</span>
                </button>
            </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">Sub Kegiatan Induk</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Kode Pekerjaan</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Nama Pekerjaan</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 p in pekerjaan %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">
                                <div>{{ p.sub_kegiatan_name }}</div>
                                <div class="text-xs text-gray-400">{{ p.kegiatan_name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 mobile-xs">{{ p.code or '-' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">{{ p.name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button onclick="alert('Fitur edit akan segera tersedia')" class="text-indigo-600 hover:text-indigo-900 mr-3 mobile-xs">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="/delete_pekerjaan/{{ p.id }}" 
                                   onclick="return confirm('Apakah Anda yakin ingin menghapus pekerjaan {{ p.name }}?')"
                                   class="text-red-600 hover:text-red-900 mobile-xs">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% if not pekerjaan %}
                <div class="text-center py-8">
                    <i class="fas fa-hammer text-gray-300 text-3xl mb-2"></i>
                    <p class="text-gray-500 mobile-small">Belum ada data pekerjaan</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Sumber Dana Tab -->
        <div id="sumber-dana-content" class="tab-content p-6 hidden">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900 mobile-small">Data Sumber Dana</h3>
                <button onclick="openModal('addSumberDanaModal')" 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 Sumber Dana</span>
                </button>
            </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">Kode</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Nama Sumber Dana</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 sumber in sumber_dana %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 mobile-xs">{{ sumber.code }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">{{ sumber.name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button onclick="alert('Fitur edit akan segera tersedia')" class="text-indigo-600 hover:text-indigo-900 mr-3 mobile-xs">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="/delete_sumber_dana/{{ sumber.id }}" 
                                   onclick="return confirm('Apakah Anda yakin ingin menghapus sumber dana {{ sumber.name }}?')"
                                   class="text-red-600 hover:text-red-900 mobile-xs">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                
                {% if not sumber_dana %}
                <div class="text-center py-8">
                    <i class="fas fa-money-bill text-gray-300 text-3xl mb-2"></i>
                    <p class="text-gray-500 mobile-small">Belum ada data sumber dana</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Lokasi Tab -->
        <div id="lokasi-content" class="tab-content p-6 hidden">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900 mobile-small">Data Lokasi</h3>
                <button onclick="openModal('addLokasiModal')" 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 Lokasi</span>
                </button>
            </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">Kecamatan</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Desa</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 loc in lokasi %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">{{ loc.kecamatan }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">{{ loc.desa }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button onclick="alert('Fitur edit akan segera tersedia')" class="text-indigo-600 hover:text-indigo-900 mr-3 mobile-xs">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="/delete_lokasi/{{ loc.id }}" 
                                   onclick="return confirm('Apakah Anda yakin ingin menghapus lokasi {{ loc.kecamatan }} - {{ loc.desa }}?')"
                                   class="text-red-600 hover:text-red-900 mobile-xs">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                
                {% if not lokasi %}
                <div class="text-center py-8">
                    <i class="fas fa-map-marker-alt text-gray-300 text-3xl mb-2"></i>
                    <p class="text-gray-500 mobile-small">Belum ada data lokasi</p>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- Pihak Ketiga Tab -->
        <div id="pihak-ketiga-content" class="tab-content p-6 hidden">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900 mobile-small">Data Pihak Ketiga</h3>
                <button onclick="openModal('addPihakKetigaModal')" 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 Pihak Ketiga</span>
                </button>
            </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">Nama</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Alamat</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider mobile-xs">Kontak</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 pihak in pihak_ketiga %}
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 mobile-xs">{{ pihak.name }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">{{ pihak.alamat or '-' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 mobile-xs">{{ pihak.kontak or '-' }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button onclick="alert('Fitur edit akan segera tersedia')" class="text-indigo-600 hover:text-indigo-900 mr-3 mobile-xs">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <a href="/delete_pihak_ketiga/{{ pihak.id }}" 
                                   onclick="return confirm('Apakah Anda yakin ingin menghapus pihak ketiga {{ pihak.name }}?')"
                                   class="text-red-600 hover:text-red-900 mobile-xs">
                                    <i class="fas fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                
                {% if not pihak_ketiga %}
                <div class="text-center py-8">
                    <i class="fas fa-building text-gray-300 text-3xl mb-2"></i>
                    <p class="text-gray-500 mobile-small">Belum ada data pihak ketiga</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Modals -->

<!-- Add Program Modal -->
<div id="addProgramModal" 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-20 mx-auto p-5 border w-96 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-tasks text-ocean-600 mr-2"></i>
                    Tambah Program
                </h3>
                <button onclick="closeModal('addProgramModal')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form method="POST" action="/add_program" class="space-y-4">
                <div>
                    <label for="program_name" class="block text-sm font-medium text-gray-700 mobile-xs">Nama Program</label>
                    <input type="text" id="program_name" name="program_name" 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"
                           placeholder="Masukkan nama program">
                </div>
                
                <div>
                    <label for="program_code" class="block text-sm font-medium text-gray-700 mobile-xs">Kode Program</label>
                    <input type="text" id="program_code" name="program_code" 
                           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="Masukkan kode program">
                </div>
                
                <div>
                    <label for="tahun_anggaran" class="block text-sm font-medium text-gray-700 mobile-xs">Tahun Anggaran</label>
                    <input type="number" id="tahun_anggaran" name="tahun_anggaran" min="2020" max="2030" value="2025"
                           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 class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeModal('addProgramModal')" 
                            class="px-4 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-4 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>

<!-- Add Kegiatan Modal -->
<div id="addKegiatanModal" 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-20 mx-auto p-5 border w-96 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-clipboard-list text-ocean-600 mr-2"></i>
                    Tambah Kegiatan
                </h3>
                <button onclick="closeModal('addKegiatanModal')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form method="POST" action="/add_kegiatan" class="space-y-4">
                <div>
                    <label for="program_id" class="block text-sm font-medium text-gray-700 mobile-xs">Program Induk</label>
                    <select id="program_id" name="program_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 Program</option>
                        {% for program in programs %}
                        <option value="{{ program.id }}">{{ program.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label for="kegiatan_name" class="block text-sm font-medium text-gray-700 mobile-xs">Nama Kegiatan</label>
                    <input type="text" id="kegiatan_name" name="kegiatan_name" 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" placeholder="Masukkan nama kegiatan">
                </div>
                <div>
                    <label for="kegiatan_code" class="block text-sm font-medium text-gray-700 mobile-xs">Kode Kegiatan</label>
                    <input type="text" id="kegiatan_code" name="kegiatan_code" 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="Masukkan kode kegiatan (opsional)">
                </div>
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeModal('addKegiatanModal')" class="px-4 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-4 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>

<!-- Add Sub Kegiatan Modal -->
<div id="addSubKegiatanModal" 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-20 mx-auto p-5 border w-96 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-stream text-ocean-600 mr-2"></i>
                    Tambah Sub Kegiatan
                </h3>
                <button onclick="closeModal('addSubKegiatanModal')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form method="POST" action="/add_sub_kegiatan" class="space-y-4">
                <div>
                    <label for="modal_program_id_sub" class="block text-sm font-medium text-gray-700 mobile-xs">Program Induk</label>
                    <select id="modal_program_id_sub" name="modal_program_id_sub" required onchange="loadKegiatanForModal('sub')" 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 Dulu</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 Induk</label>
                    <select id="kegiatan_id_sub" name="kegiatan_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 Kegiatan</option>
                    </select>
                </div>
                <div>
                    <label for="sub_kegiatan_name" class="block text-sm font-medium text-gray-700 mobile-xs">Nama Sub Kegiatan</label>
                    <input type="text" id="sub_kegiatan_name" name="sub_kegiatan_name" 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" placeholder="Masukkan nama sub kegiatan">
                </div>
                <div>
                    <label for="sub_kegiatan_code" class="block text-sm font-medium text-gray-700 mobile-xs">Kode Sub Kegiatan</label>
                    <input type="text" id="sub_kegiatan_code" name="sub_kegiatan_code" 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="Masukkan kode sub kegiatan (opsional)">
                </div>
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeModal('addSubKegiatanModal')" class="px-4 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-4 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>

<!-- Add Pekerjaan Modal -->
<div id="addPekerjaanModal" 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-20 mx-auto p-5 border w-96 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-hammer text-ocean-600 mr-2"></i>
                    Tambah Pekerjaan
                </h3>
                <button onclick="closeModal('addPekerjaanModal')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form method="POST" action="/add_pekerjaan" class="space-y-4">
                <div>
                    <label for="modal_program_id_pek" class="block text-sm font-medium text-gray-700 mobile-xs">Program Induk</label>
                    <select id="modal_program_id_pek" name="modal_program_id_pek" required onchange="loadKegiatanForModal('pek')" 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_pek" class="block text-sm font-medium text-gray-700 mobile-xs">Kegiatan Induk</label>
                    <select id="kegiatan_id_pek" name="kegiatan_id_pek" required onchange="loadSubKegiatanForModal('pek')" 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_for_pekerjaan" class="block text-sm font-medium text-gray-700 mobile-xs">Sub Kegiatan Induk</label>
                    <select id="sub_kegiatan_id_pek" name="sub_kegiatan_id_for_pekerjaan" 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 Sub Kegiatan</option>
                    </select>
                </div>
                <div>
                    <label for="pekerjaan_name" class="block text-sm font-medium text-gray-700 mobile-xs">Nama Pekerjaan</label>
                    <input type="text" id="pekerjaan_name" name="pekerjaan_name" 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" placeholder="Masukkan nama pekerjaan">
                </div>
                <div>
                    <label for="pekerjaan_code" class="block text-sm font-medium text-gray-700 mobile-xs">Kode Pekerjaan</label>
                    <input type="text" id="pekerjaan_code" name="pekerjaan_code" 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="Masukkan kode (opsional)">
                </div>
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeModal('addPekerjaanModal')" class="px-4 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-4 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>

<!-- Add Sumber Dana Modal -->
<div id="addSumberDanaModal" 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-20 mx-auto p-5 border w-96 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-money-bill text-ocean-600 mr-2"></i>
                    Tambah Sumber Dana
                </h3>
                <button onclick="closeModal('addSumberDanaModal')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form method="POST" action="/add_sumber_dana" class="space-y-4">
                <div>
                    <label for="sumber_dana_name" class="block text-sm font-medium text-gray-700 mobile-xs">Nama Sumber Dana</label>
                    <input type="text" id="sumber_dana_name" name="sumber_dana_name" 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"
                           placeholder="Masukkan nama sumber dana">
                </div>
                
                <div>
                    <label for="sumber_dana_code" class="block text-sm font-medium text-gray-700 mobile-xs">Kode Sumber Dana</label>
                    <input type="text" id="sumber_dana_code" name="sumber_dana_code" 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"
                           placeholder="Masukkan kode sumber dana">
                </div>
                
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeModal('addSumberDanaModal')" 
                            class="px-4 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-4 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>

<!-- Add Lokasi Modal -->
<div id="addLokasiModal" 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-20 mx-auto p-5 border w-96 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-map-marker-alt text-ocean-600 mr-2"></i>
                    Tambah Lokasi
                </h3>
                <button onclick="closeModal('addLokasiModal')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form method="POST" action="/add_lokasi" class="space-y-4">
                <div>
                    <label for="kecamatan" class="block text-sm font-medium text-gray-700 mobile-xs">Kecamatan</label>
                    <input type="text" id="kecamatan" name="kecamatan" 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"
                           placeholder="Masukkan nama kecamatan">
                </div>
                
                <div>
                    <label for="desa" class="block text-sm font-medium text-gray-700 mobile-xs">Desa</label>
                    <input type="text" id="desa" name="desa" 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"
                           placeholder="Masukkan nama desa">
                </div>
                
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeModal('addLokasiModal')" 
                            class="px-4 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-4 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>

<!-- Add Pihak Ketiga Modal -->
<div id="addPihakKetigaModal" 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-20 mx-auto p-5 border w-96 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-building text-ocean-600 mr-2"></i>
                    Tambah Pihak Ketiga
                </h3>
                <button onclick="closeModal('addPihakKetigaModal')" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form method="POST" action="/add_pihak_ketiga" class="space-y-4">
                <div>
                    <label for="pihak_ketiga_name" class="block text-sm font-medium text-gray-700 mobile-xs">Nama Pihak Ketiga</label>
                    <input type="text" id="pihak_ketiga_name" name="pihak_ketiga_name" 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"
                           placeholder="Masukkan nama pihak ketiga">
                </div>
                
                <div>
                    <label for="alamat" class="block text-sm font-medium text-gray-700 mobile-xs">Alamat</label>
                    <textarea id="alamat" name="alamat" 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="Masukkan alamat"></textarea>
                </div>
                
                <div>
                    <label for="kontak" class="block text-sm font-medium text-gray-700 mobile-xs">Kontak</label>
                    <input type="text" id="kontak" name="kontak"
                           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="Masukkan nomor telepon/email">
                </div>
                
                <div class="flex justify-end space-x-3 pt-4">
                    <button type="button" onclick="closeModal('addPihakKetigaModal')" 
                            class="px-4 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-4 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>

<style>
.tab-button {
    transition: all 0.3s ease;
}

.active-tab {
    border-color: #0ea5e9 !important;
    color: #0ea5e9 !important;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}
</style>

<script>
function showTab(tabName) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
        content.classList.add('hidden');
    });
    
    // Remove active class from all tabs
    document.querySelectorAll('.tab-button').forEach(button => {
        button.classList.remove('active-tab');
    });
    
    // Show selected tab content
    const selectedContent = document.getElementById(tabName + '-content');
    if (selectedContent) {
        selectedContent.classList.remove('hidden');
        selectedContent.classList.add('active');
    }
    
    // Add active class to selected tab
    const selectedTab = document.getElementById('tab-' + tabName);
    if (selectedTab) {
        selectedTab.classList.add('active-tab');
    }
}

function loadKegiatanForModal(type) {
    const programId = document.getElementById(`modal_program_id_${type}`).value;
    const kegiatanSelect = document.getElementById(`kegiatan_id_${type}`);
    
    kegiatanSelect.innerHTML = '<option value="">Memuat...</option>';
    
    if (programId) {
        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);
                kegiatanSelect.innerHTML = '<option value="">Gagal memuat</option>';
            });
    } else {
        kegiatanSelect.innerHTML = '<option value="">Pilih Program Dulu</option>';
    }

    if (type === 'pek') {
        document.getElementById('sub_kegiatan_id_pek').innerHTML = '<option value="">Pilih Kegiatan Dulu</option>';
    }
}

function loadSubKegiatanForModal(type) {
    const kegiatanId = document.getElementById(`kegiatan_id_${type}`).value;
    const subKegiatanSelect = document.getElementById(`sub_kegiatan_id_${type}`);

    subKegiatanSelect.innerHTML = '<option value="">Memuat...</option>';

    if(kegiatanId) {
        fetch(`/get_sub_kegiatan/${kegiatanId}`)
            .then(response => response.json())
            .then(data => {
                subKegiatanSelect.innerHTML = '<option value="">Pilih Sub Kegiatan</option>';
                data.forEach(sub => {
                    const option = document.createElement('option');
                    option.value = sub.id;
                    option.textContent = sub.name;
                    subKegiatanSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error:', error);
                subKegiatanSelect.innerHTML = '<option value="">Gagal memuat</option>';
            });
    } else {
        subKegiatanSelect.innerHTML = '<option value="">Pilih Kegiatan Dulu</option>';
    }
}


// Initialize first tab as active
document.addEventListener('DOMContentLoaded', function() {
    // Check for a URL hash and activate the corresponding tab
    const hash = window.location.hash.replace('#', '');
    const validTabs = ['programs', 'kegiatan', 'sub-kegiatan', 'pekerjaan', 'sumber-dana', 'lokasi', 'pihak-ketiga'];
    if (hash && validTabs.includes(hash)) {
        showTab(hash);
    } else {
        showTab('programs');
    }

    // Update URL hash when a tab is clicked
    document.querySelectorAll('.tab-button').forEach(button => {
        button.addEventListener('click', function() {
            const tabId = this.id.replace('tab-', '');
            // Use history.pushState to avoid page jump
            history.pushState(null, null, '#' + tabId);
        });
    });
});
</script>
{% endblock %}