{{-- resources/views/project/edit.blade.php --}}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edit Project</title>
    <!-- Link Tailwind CSS -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
    </script>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
</head>

<body class="bg-gray-100">
    <div class="max-w-3xl mx-auto p-8 bg-white rounded-lg shadow-lg mt-10">
        <a href="{{ route('permohonanprojects.index') }}"
            class="inline-block mb-4 text-blue-500 hover:text-blue-700 font-semibold">
            &larr; Kembali
        </a>
        <h1 class="text-3xl font-bold mb-8 text-gray-800">Edit Program</h1>


        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-8" role="alert">
                <strong class="font-bold">Whoops!</strong>
                <span class="block sm:inline">There were some problems with your input.</span>
                <ul class="mt-3 list-disc list-inside text-sm text-red-600">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('permohonanprojects.update', $project->id) }}" method="POST"
            enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="flex flex-col space-y-2">
                <label for="judul_project" class="text-sm font-semibold text-gray-700">Judul Program<span
                        style="color: red;">*</span></label>
                <input type="text" id="judul_project" name="judul_project"
                    value="{{ old('judul_project', $project->judul_project) }}" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            {{-- <div class="flex flex-col space-y-2">
                <label for="bidang_sub_sektor_ekonomi_kreatif" class="text-sm font-semibold text-gray-700">Bidang Sub
                    Sektor Ekonomi Kreatif<span style="color: red;">*</span></label>
                <select id="bidang_sub_sektor_ekonomi_kreatif" name="bidang_sub_sektor_ekonomi_kreatif" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                    <option value="">Pilih Sub Sektor</option>
                    <option value="Aplikasi dan permainan"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Aplikasi dan permainan' ? 'selected' : '' }}>
                        Aplikasi dan permainan</option>
                    <option value="Arsitektur"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Arsitektur' ? 'selected' : '' }}>
                        Arsitektur</option>
                    <option value="Desain"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Desain' ? 'selected' : '' }}>
                        Desain</option>
                    <option value="Film, video, dan animasi"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Film, video, dan animasi' ? 'selected' : '' }}>
                        Film, video, dan animasi</option>
                    <option value="Fotografi"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Fotografi' ? 'selected' : '' }}>
                        Fotografi</option>
                    <option value="Kriya"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Kriya' ? 'selected' : '' }}>
                        Kriya</option>
                    <option value="Kuliner"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Kuliner' ? 'selected' : '' }}>
                        Kuliner</option>
                    <option value="Mode"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Mode' ? 'selected' : '' }}>
                        Mode</option>
                    <option value="Musik"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Musik' ? 'selected' : '' }}>
                        Musik</option>
                    <option value="Penerbitan"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Penerbitan' ? 'selected' : '' }}>
                        Penerbitan</option>
                    <option value="Periklanan"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Periklanan' ? 'selected' : '' }}>
                        Periklanan</option>
                    <option value="Permainan rakyat"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Permainan rakyat' ? 'selected' : '' }}>
                        Permainan rakyat</option>
                    <option value="Radio dan televisi"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Radio dan televisi' ? 'selected' : '' }}>
                        Radio dan televisi</option>
                    <option value="Riset dan pengembangan"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Riset dan pengembangan' ? 'selected' : '' }}>
                        Riset dan pengembangan</option>
                    <option value="Seni pertunjukan"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Seni pertunjukan' ? 'selected' : '' }}>
                        Seni pertunjukan</option>
                    <option value="Seni rupa"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Seni rupa' ? 'selected' : '' }}>
                        Seni rupa</option>
                    <option value="Software"
                        {{ old('bidang_sub_sektor_ekonomi_kreatif', $project->bidang_sub_sektor_ekonomi_kreatif) == 'Software' ? 'selected' : '' }}>
                        Software</option>
                </select>
            </div> --}}

            <!-- Blade Template -->
            <div class="col-lg-6">
                <div class="form-group">
                    <label for="bidang_sub_sektor_ekonomi_kreatif" class="form-label">Preferensi Sub Sektor</label>
                    <div id="bidang_sub_sektor_ekonomi_kreatif">
                        @php
                            $subSectors = [
                                'Aplikasi dan permainan',
                                'Arsitektur',
                                'Desain',
                                'Film video dan animasi',
                                'Fotografi',
                                'Kriya',
                                'Kuliner',
                                'Mode',
                                'Musik',
                                'Penerbitan',
                                'Periklanan',
                                'Permainan rakyat',
                                'Radio dan televisi',
                                'Riset dan pengembangan',
                                'Seni pertunjukan',
                                'Seni rupa',
                                'Software',
                            ];

                            // Mengambil data dari database
                            // Mengambil data dari database
                            $selectedSubSectors = array_filter(
                                explode(',', $project->bidang_sub_sektor_ekonomi_kreatif ?? ''),
                            );

                        @endphp

                        @foreach ($subSectors as $subSector)
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                    name="bidang_sub_sektor_ekonomi_kreatif[]" value="{{ $subSector }}"
                                    id="{{ str_replace(' ', '_', $subSector) }}"
                                    {{ in_array($subSector, $selectedSubSectors) ? 'checked' : '' }}>
                                <label class="form-check-label" for="{{ str_replace(' ', '_', $subSector) }}">
                                    {{ $subSector }}
                                </label>
                            </div>
                        @endforeach
                    </div>
                    @error('bidang_sub_sektor_ekonomi_kreatif')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>


            <div class="flex flex-col space-y-2">
                <label for="latar_belakang" class="text-sm font-semibold text-gray-700">Latar Belakang<span
                        style="color: red;">*</span></label>
                <textarea id="latar_belakang" name="latar_belakang" rows="4" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('latar_belakang', $project->latar_belakang) }}</textarea>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="penerima_manfaat_pengguna_project" class="text-sm font-semibold text-gray-700">Penerima
                    Manfaat/Pengguna Project<span style="color: red;">*</span></label>
                <textarea id="penerima_manfaat_pengguna_project" name="penerima_manfaat_pengguna_project" rows="4" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('penerima_manfaat_pengguna_project', $project->penerima_manfaat_pengguna_project) }}</textarea>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="solusi_project" class="text-sm font-semibold text-gray-700">Solusi Project<span
                        style="color: red;">*</span></label>
                <textarea id="solusi_project" name="solusi_project" rows="4" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('solusi_project', $project->solusi_project) }}</textarea>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="parameter_kesuksesan" class="text-sm font-semibold text-gray-700">Parameter
                    Kesuksesan<span style="color: red;">*</span></label>
                <textarea id="parameter_kesuksesan" name="parameter_kesuksesan" rows="4" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('parameter_kesuksesan', $project->parameter_kesuksesan) }}</textarea>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="rincian_kebutuhan" class="text-sm font-semibold text-gray-700">Rincian Kebutuhan<span
                        style="color: red;">*</span></label>
                <textarea id="rincian_kebutuhan" name="rincian_kebutuhan" rows="4" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('rincian_kebutuhan', $project->rincian_kebutuhan) }}</textarea>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="deskripsi_kolaborasi" class="text-sm font-semibold text-gray-700">Deskripsi
                    Kolaborasi<span style="color: red;">*</span></label>
                <textarea id="deskripsi_kolaborasi" name="deskripsi_kolaborasi" rows="4" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('deskripsi_kolaborasi', $project->deskripsi_kolaborasi) }}</textarea>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="kata_kunci" class="text-sm font-semibold text-gray-700">Kata Kunci<span
                        style="color: red;">*</span></label>
                <input type="text" id="kata_kunci" name="kata_kunci" maxlength="255"
                    value="{{ old('kata_kunci', $project->kata_kunci) }}" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>
            <div class="flex flex-col space-y-2">
                <label for="batas_terima_tawaran" class="text-sm font-semibold text-gray-700">Batas Terima
                    Tawaran<span style="color: red;">*</span></label>
                <input type="date" id="batas_terima_tawaran" name="batas_terima_tawaran"
                    value="{{ old('batas_terima_tawaran', $project->batas_terima_tawaran->format('Y-m-d')) }}"
                    required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <div class="flex flex-col space-y-2">
                <label for="tanggal_mulai" class="text-sm font-semibold text-gray-700">Tanggal Mulai<span
                        style="color: red;">*</span></label>
                <input type="date" id="tanggal_mulai" name="tanggal_mulai"
                    value="{{ old('tanggal_mulai', $project->tanggal_mulai->format('Y-m-d')) }}" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <div class="flex flex-col space-y-2">
                <label for="tanggal_berakhir" class="text-sm font-semibold text-gray-700">Tanggal Berakhir<span
                        style="color: red;">*</span></label>
                <input type="date" id="tanggal_berakhir" name="tanggal_berakhir"
                    value="{{ old('tanggal_berakhir', $project->tanggal_berakhir->format('Y-m-d')) }}" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
            </div>

            <!-- Kategori -->
            <div class="flex flex-col space-y-2">
                <label for="kategori" class="text-sm font-semibold text-gray-700">Kategori<span
                        style="color: red;">*</span></label>
                <select id="kategori" name="kategori" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    disabled>
                    <option value="">Pilih Kategori</option>
                    <option value="Pelatihan"
                        {{ old('kategori', $project->kategori) == 'Pelatihan' ? 'selected' : '' }}>Pelatihan</option>
                    <option value="Pendanaan"
                        {{ old('kategori', $project->kategori) == 'Pendanaan' ? 'selected' : '' }}>Pendanaan</option>
                    <option value="Project Investor"
                        {{ old('kategori', $project->kategori) == 'Project Investor' ? 'selected' : '' }}>
                        Project</option>
                    <option value="Riset" {{ old('kategori', $project->kategori) == 'Riset' ? 'selected' : '' }}>
                        Riset</option>
                </select>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="kontak" class="text-sm font-semibold text-gray-700">Kontak<span
                        style="color: red;">*</span></label>
                <input type="text" id="kontak" name="kontak" value="{{ old('kontak', $project->kontak) }}"
                    required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                <p class="text-sm text-gray-500">Format: email@example.com atau 08123456789</p>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="dokumen_pendukung" class="text-sm font-semibold text-gray-700">Dokumen Pendukung</label>
                <input type="file" id="dokumen_pendukung" name="dokumen_pendukung"
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                @if ($project->dokumen_pendukung)
                    <a href="{{ asset('storage/' . $project->dokumen_pendukung) }}"
                        download="{{ basename($project->dokumen_pendukung) }}"
                        class="text-indigo-600 hover:underline mt-2">
                        Unduh Dokumen Pendukung
                    </a>
                @else
                    <p class="text-gray-500 mt-2">Dokumen pendukung tidak tersedia.</p>
                @endif
                <p class="text-sm text-gray-500">Format yang diizinkan: PDF, DOC, DOCX</p>
            </div>


            <div class="flex flex-col space-y-2">
                <label for="foto_proyek" class="text-sm font-semibold text-gray-700">Foto Proyek<span
                        style="color: red;">*</span></label>
                <input type="file" id="foto_proyek" name="foto_proyek"
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                @if ($project->foto_proyek)
                    <img src="{{ asset('storage/' . $project->foto_proyek) }}" alt="Foto Proyek"
                        class="mt-2 max-w-xs rounded-md shadow-md">
                @endif
                <p class="text-sm text-gray-500">Format yang diizinkan: JPEG,PNG,JPG</p>
            </div>

            <!-- Deskripsi Komitmen -->
            <div class="bg-gray-50 p-4 border border-gray-300 rounded-lg">
                <h2 class="text-lg font-semibold text-gray-800 mb-2">Deskripsi Komitmen<span
                        style="color: red;">*</span></h2>
                <p class="text-gray-600">
                    Dengan mengisi dan mengirimkan formulir ini, Anda menyatakan komitmen penuh terhadap proyek yang
                    diajukan. Komitmen ini mencakup tanggung jawab untuk menyelesaikan semua tahapan proyek sesuai
                    dengan jadwal dan spesifikasi yang telah ditetapkan.
                </p>
                <div class="flex items-center space-x-4 mt-4">
                    <input type="checkbox" id="checklist_komitmen" name="checklist_komitmen"
                        class="h-5 w-5 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                        {{ $project->checklist_komitmen ? 'checked' : '' }}>
                    <label for="checklist_komitmen" class="text-sm font-medium text-gray-700">Saya setuju dengan
                        deskripsi komitmen di atas</label>
                </div>
            </div>

            <!-- Deskripsi Persetujuan -->
            <div class="bg-gray-50 p-4 border border-gray-300 rounded-lg mt-6">
                <h2 class="text-lg font-semibold text-gray-800 mb-2">Deskripsi Persetujuan<span
                        style="color: red;">*</span></h2>
                <p class="text-gray-600">
                    Dengan menandai checkbox di bawah ini, Anda menyetujui semua syarat dan ketentuan yang berlaku untuk
                    proyek ini. Pastikan Anda telah membaca dan memahami seluruh ketentuan sebelum memberikan
                    persetujuan.
                </p>
                <div class="flex items-center space-x-4 mt-4">
                    <input type="checkbox" id="checklist_persetujuan" name="checklist_persetujuan"
                        class="h-5 w-5 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                        {{ $project->checklist_persetujuan ? 'checked' : '' }}>
                    <label for="checklist_persetujuan" class="text-sm font-medium text-gray-700">Saya setuju dengan
                        syarat dan ketentuan yang berlaku</label>
                </div>
            </div>

            <!-- Conditional Fields Based on Category -->
            <div id="additional-fields" class="space-y-6">
                <!-- Pelatihan Fields -->
                <div id="training-fields" class="hidden">
                    <div class="flex flex-col space-y-2">
                        <label for="audiens" class="text-sm font-semibold text-gray-700">Audiens<span
                                style="color: red;">*</span></label>
                        <textarea id="audiens" name="audiens" rows="4"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('audiens', $relatedData->audiens) }}</textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="biaya" class="text-sm font-semibold text-gray-700">Biaya<span
                                style="color: red;">*</span></label>
                        <input type="number" id="biaya" name="biaya" step="0.01"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('biaya', $relatedData->biaya) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="jumlah_peserta" class="text-sm font-semibold text-gray-700">Jumlah Peserta<span
                                style="color: red;">*</span></label>
                        <input type="number" id="jumlah_peserta" name="jumlah_peserta"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('jumlah_peserta', $relatedData->jumlah_peserta) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="benefit_pelatihan" class="text-sm font-semibold text-gray-700">Benefit
                            Pelatihan<span style="color: red;">*</span></label>
                        <textarea id="benefit_pelatihan" name="benefit_pelatihan" rows="4"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('benefit_pelatihan', $relatedData->benefit_pelatihan) }}</textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="lokasi_pelatihan" class="text-sm font-semibold text-gray-700">Lokasi
                            Pelatihan<span style="color: red;">*</span></label>
                        <input type="text" id="lokasi_pelatihan" name="lokasi_pelatihan" maxlength="255"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('lokasi_pelatihan', $relatedData->lokasi_pelatihan) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="status_pelatihan" class="text-sm font-semibold text-gray-700">Status
                            Pelatihan<span style="color: red;">*</span></label>
                        <input type="text" id="status_pelatihan" name="status_pelatihan"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('status_pelatihan', $relatedData->status_pelatihan) }}">
                    </div>
                </div>

                <!-- Pendanaan Fields -->
                <div id="funding-fields" class="hidden">
                    <div class="flex flex-col space-y-2">
                        <label for="jumlah_dana" class="text-sm font-semibold text-gray-700">Jumlah Dana<span
                                style="color: red;">*</span></label>
                        <input type="number" id="jumlah_dana" name="jumlah_dana" step="0.01"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('jumlah_dana', $relatedData->jumlah_dana) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="lokasi_pendanaan" class="text-sm font-semibold text-gray-700">Lokasi
                            Pendanaan<span style="color: red;">*</span></label>
                        <input type="text" id="lokasi_pendanaan" name="lokasi_pendanaan" maxlength="255"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('lokasi_pendanaan', $relatedData->lokasi_pendanaan) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="rencana_penggunaan_dana" class="text-sm font-semibold text-gray-700">Rencana
                            Penggunaan Dana<span style="color: red;">*</span></label>
                        <textarea id="rencana_penggunaan_dana" name="rencana_penggunaan_dana" rows="4"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('rencana_penggunaan_dana', $relatedData->rencana_penggunaan_dana) }}</textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="status_pendanaan" class="text-sm font-semibold text-gray-700">Status
                            Pendanaan<span style="color: red;">*</span></label>
                        <input type="text" id="status_pendanaan" name="status_pendanaan"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('status_pendanaan', $relatedData->status_pendanaan) }}">
                    </div>

                    {{-- <div class="flex flex-col space-y-2">
                        <label for="lokasi_project" class="text-sm font-semibold text-gray-700">Lokasi
                            Proyek<span style="color: red;">*</span></label>
                        <input type="text" id="lokasi_project" name="lokasi_project" maxlength="255"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('lokasi_project', $relatedData->lokasi_project) }}">
                    </div> --}}

                    <div class="flex flex-col space-y-2">
                        <label for="benefit_pendanaan" class="text-sm font-semibold text-gray-700">Benefit
                            Pendanaan<span style="color: red;">*</span></label>
                        <textarea id="benefit_pendanaan" name="benefit_pendanaan" rows="4"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('benefit_pendanaan', $relatedData->benefit_pendanaan) }}</textarea>
                    </div>
                </div>

                <!-- Riset Fields -->
                <div id="research-fields" class="hidden">
                    <div class="flex flex-col space-y-2">
                        <label for="anggaran" class="text-sm font-semibold text-gray-700">Anggaran<span
                                style="color: red;">*</span></label>
                        <input type="number" id="anggaran" name="anggaran" step="0.01"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('anggaran', $relatedData->anggaran) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="lokasi_riset" class="text-sm font-semibold text-gray-700">Lokasi Riset<span
                                style="color: red;">*</span></label>
                        <input type="text" id="lokasi_riset" name="lokasi_riset" maxlength="255"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('lokasi_riset', $relatedData->lokasi_riset) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="metodologi" class="text-sm font-semibold text-gray-700">Metodologi<span
                                style="color: red;">*</span></label>
                        <textarea id="metodologi" name="metodologi" rows="4"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('metodologi', $relatedData->metodologi) }}</textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="hasil" class="text-sm font-semibold text-gray-700">Hasil<span
                                style="color: red;">*</span></label>
                        <input type="text" id="hasil" name="hasil" maxlength="255"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('hasil', $relatedData->hasil) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="status_riset" class="text-sm font-semibold text-gray-700">Status Riset<span
                                style="color: red;">*</span></label>
                        <input type="text" id="status_riset" name="status_riset"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('status_riset', $relatedData->status_riset) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="benefit_riset" class="text-sm font-semibold text-gray-700">Benefit Riset<span
                                style="color: red;">*</span></label>
                        <textarea id="benefit_riset" name="benefit_riset" rows="4"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('benefit_riset', $relatedData->benefit_riset) }}</textarea>
                    </div>
                </div>

                <!-- Project Investor Fields -->
                <div id="project-fields" class="hidden">
                    <div class="flex flex-col space-y-2">
                        <label for="nominal" class="text-sm font-semibold text-gray-700">Nominal<span
                                style="color: red;">*</span></label>
                        <input type="text" id="nominal" name="nominal"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('nominal', $relatedData->nominal) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="rencana_implementasi" class="text-sm font-semibold text-gray-700">Rencana
                            Implementasi<span style="color: red;">*</span></label>
                        <textarea id="rencana_implementasi" name="rencana_implementasi" rows="4"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('rencana_implementasi', $relatedData->rencana_implementasi) }}</textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="status_project" class="text-sm font-semibold text-gray-700">Status Project<span
                                style="color: red;">*</span></label>
                        <input type="text" id="status_project" name="status_project"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                            value="{{ old('status_project', $relatedData->status_project) }}">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="benefit_project" class="text-sm font-semibold text-gray-700">Benefit
                            Project<span style="color: red;">*</span></label>
                        <textarea id="benefit_project" name="benefit_project" rows="4"
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">{{ old('benefit_project', $relatedData->benefit_project) }}</textarea>
                    </div>
                </div>
            </div>


            <div class="flex justify-end">
                <button type="submit"
                    class="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow-lg hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">Perbarui Program</button>
            </div>
        </form>

        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const categorySelect = document.getElementById('kategori');
                const additionalFields = document.getElementById('additional-fields');
                const trainingFields = document.getElementById('training-fields');
                const fundingFields = document.getElementById('funding-fields');
                const researchFields = document.getElementById('research-fields');
                const projectFields = document.getElementById('project-fields');

                // Function to display fields based on selected category
                const showFields = () => {
                    const selectedCategory = categorySelect.value;

                    // Hide all additional fields
                    trainingFields.classList.add('hidden');
                    fundingFields.classList.add('hidden');
                    researchFields.classList.add('hidden');
                    projectFields.classList.add('hidden');
                    additionalFields.classList.add('hidden');

                    // Show additional fields based on selected category
                    switch (selectedCategory) {
                        case 'Pelatihan':
                            additionalFields.classList.remove('hidden');
                            trainingFields.classList.remove('hidden');
                            break;
                        case 'Pendanaan':
                            additionalFields.classList.remove('hidden');
                            fundingFields.classList.remove('hidden');
                            break;
                        case 'Riset':
                            additionalFields.classList.remove('hidden');
                            researchFields.classList.remove('hidden');
                            break;
                        case 'Project Investor':
                            additionalFields.classList.remove('hidden');
                            projectFields.classList.remove('hidden');
                            break;
                        default:
                            additionalFields.classList.add('hidden');
                            break;
                    }
                };

                // Set initial state based on the current value
                showFields();

                // Add event listener for changes in category selection
                categorySelect.addEventListener('change', showFields);
            });


            $(document).ready(function() {
                $('#parameter_kesuksesan, #rincian_kebutuhan, #penerima_manfaat_pengguna_project, #solusi_project, #deskripsi_kolaborasi, #benefit_pelatihan, #audiens, #rencana_penggunaan_dana, #benefit_pendanaan, #metodologi, #benefit_riset, #rencana_implementasi, #benefit_project')
                    .summernote({
                        placeholder: 'Masukkan teks di sini...',
                        tabsize: 2,
                        height: 120,
                        toolbar: [
                            ['font', ['bold', 'italic', 'underline']],
                            ['fontname', ['fontname']],
                            ['color', ['color']],
                            ['para', ['ul', 'ol', 'paragraph']],
                        ],
                        callbacks: {
                            onInit: function() {
                                $('.note-editable').addClass('prose');
                            },
                            onChange: function(contents) {
                                $('.note-editable ul').addClass('list-disc list-inside');
                                $('.note-editable ol').addClass('list-decimal list-inside');
                            }
                        }
                    });

                // Handle form submission
                $('#myForm').on('submit', function(e) {
                    e.preventDefault(); // Prevent the default form submission

                    // // Get content from Summernote
                    // var parameterKesuksesan = $('#parameter_kesuksesan').summernote('code');
                    // var rincianKebutuhan = $('#rincian_kebutuhan').summernote('code');

                    // // Set the content back to hidden input fields to send with the form
                    // $('#parameter_kesuksesan').val(parameterKesuksesan);
                    // $('#rincian_kebutuhan').val(rincianKebutuhan);

                    // Ambil konten dari Summernote untuk setiap elemen
                    $('#parameter_kesuksesan').val($('#parameter_kesuksesan').summernote('code'));
                    $('#rincian_kebutuhan').val($('#rincian_kebutuhan').summernote('code'));
                    $('#penerima_manfaat_pengguna_project').val($('#penerima_manfaat_pengguna_project')
                        .summernote('code'));
                    $('#solusi_project').val($('#solusi_project').summernote('code'));
                    $('#deskripsi_kolaborasi').val($('#deskripsi_kolaborasi').summernote('code'));
                    $('#benefit_pelatihan').val($('#benefit_pelatihan').summernote('code'));
                    $('#audiens').val($('#audiens').summernote('code'));
                    $('#rencana_penggunaan_dana').val($('#rencana_penggunaan_dana').summernote('code'));
                    $('#benefit_pendanaan').val($('#benefit_pendanaan').summernote('code'));
                    $('#metodologi').val($('#metodologi').summernote('code'));
                    $('#benefit_riset').val($('#benefit_riset').summernote('code'));
                    $('#rencana_implementasi').val($('#rencana_implementasi').summernote('code'));
                    $('#benefit_project').val($('#benefit_project').summernote('code'));

                    // Submit the form
                    this.submit();
                });
            });
        </script>


    </div>
</body>

</html>
