<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create 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>

    <style>
        .note-editor .note-editable {
            /* Customize the Summernote editor to avoid conflicts */
            background-color: white;
            color: black;
            padding: 1rem;
        }
    </style>


</head>

<body class="bg-gray-100">
    <div class="max-w-3xl mx-auto p-8 bg-white rounded-lg shadow-lg mt-10">

        <!-- Back Button -->
        <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">Buat Permohonan Program Baru</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.store') }}" method="POST" enctype="multipart/form-data"
            class="space-y-6">
            @csrf

            <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" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    value="{{ old('judul_project') }}">
            </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">Aplikasi dan permainan</option>
                    <option value="Arsitektur">Arsitektur</option>
                    <option value="Desain">Desain</option>
                    <option value="Film, video, dan animasi">Film, video, dan animasi</option>
                    <option value="Fotografi">Fotografi</option>
                    <option value="Kriya">Kriya</option>
                    <option value="Kuliner">Kuliner</option>
                    <option value="Mode">Mode</option>
                    <option value="Musik">Musik</option>
                    <option value="Penerbitan">Penerbitan</option>
                    <option value="Periklanan">Periklanan</option>
                    <option value="Permainan rakyat">Permainan rakyat</option>
                    <option value="Radio dan televisi">Radio dan televisi</option>
                    <option value="Riset dan pengembangan">Riset dan pengembangan</option>
                    <option value="Seni pertunjukan">Seni pertunjukan</option>
                    <option value="Seni rupa">Seni rupa</option>
                    <option value="Software">Software</option>
                </select>
            </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>
                <div class="form-group">
                    <div id="bidang_sub_sektor_ekonomi_kreatif">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="bidang_sub_sektor_ekonomi_kreatif[]"
                                value="Aplikasi dan permainan" id="Aplikasi_dan_permainan">
                            <label class="form-check-label" for="Aplikasi_dan_permainan">
                                Aplikasi dan permainan
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="bidang_sub_sektor_ekonomi_kreatif[]"
                                value="Arsitektur" id="Arsitektur">
                            <label class="form-check-label" for="Arsitektur">
                                Arsitektur
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="bidang_sub_sektor_ekonomi_kreatif[]"
                                value="Desain" id="Desain">
                            <label class="form-check-label" for="Desain">
                                Desain
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="bidang_sub_sektor_ekonomi_kreatif[]"
                                value="Film video dan animasi" id="Film_video_dan_animasi">
                            <label class="form-check-label" for="Film_video_dan_animasi">
                                Film, video, dan animasi
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="bidang_sub_sektor_ekonomi_kreatif[]"
                                value="Fotografi" id="Fotografi">
                            <label class="form-check-label" for="Fotografi">
                                Fotografi
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="bidang_sub_sektor_ekonomi_kreatif[]"
                                value="Kriya" id="Kriya">
                            <label class="form-check-label" for="Kriya">
                                Kriya
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="bidang_sub_sektor_ekonomi_kreatif[]"
                                value="Kuliner" id="Kuliner">
                            <label class="form-check-label" for="Kuliner">
                                Kuliner
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="bidang_sub_sektor_ekonomi_kreatif[]"
                                value="Mode" id="Mode">
                            <label class="form-check-label" for="Mode">
                                Mode
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="bidang_sub_sektor_ekonomi_kreatif[]" value="Musik" id="Musik">
                            <label class="form-check-label" for="Musik">
                                Musik
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="bidang_sub_sektor_ekonomi_kreatif[]" value="Penerbitan" id="Penerbitan">
                            <label class="form-check-label" for="Penerbitan">
                                Penerbitan
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="bidang_sub_sektor_ekonomi_kreatif[]" value="Periklanan" id="Periklanan">
                            <label class="form-check-label" for="Periklanan">
                                Periklanan
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="bidang_sub_sektor_ekonomi_kreatif[]" value="Permainan rakyat"
                                id="Permainan_rakyat">
                            <label class="form-check-label" for="Permainan_rakyat">
                                Permainan rakyat
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="bidang_sub_sektor_ekonomi_kreatif[]" value="Radio dan televisi"
                                id="Radio_dan_televisi">
                            <label class="form-check-label" for="Radio_dan_televisi">
                                Radio dan televisi
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="bidang_sub_sektor_ekonomi_kreatif[]" value="Riset dan pengembangan"
                                id="Riset_dan_pengembangan">
                            <label class="form-check-label" for="Riset_dan_pengembangan">
                                Riset dan pengembangan
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="bidang_sub_sektor_ekonomi_kreatif[]" value="Seni pertunjukan"
                                id="Seni_pertunjukan">
                            <label class="form-check-label" for="Seni_pertunjukan">
                                Seni pertunjukan
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="bidang_sub_sektor_ekonomi_kreatif[]" value="Seni rupa" id="Seni_rupa">
                            <label class="form-check-label" for="Seni_rupa">
                                Seni rupa
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                name="bidang_sub_sektor_ekonomi_kreatif[]" value="Software" id="Software">
                            <label class="form-check-label" for="Software">
                                Software
                            </label>
                        </div>
                    </div>
                    @error('bidang_sub_sektor_ekonomi_kreatif')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </div>
            </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>
                <div id="bidang_sub_sektor_ekonomi_kreatif">
                    @php
                        $bidangOptions = [
                            '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',
                        ];
                    @endphp

                    @foreach ($bidangOptions as $bidang)
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="bidang_sub_sektor_ekonomi_kreatif[]"
                                value="{{ $bidang }}" id="{{ str_replace(' ', '_', $bidang) }}"
                                {{ is_array(old('bidang_sub_sektor_ekonomi_kreatif')) && in_array($bidang, old('bidang_sub_sektor_ekonomi_kreatif')) ? 'checked' : '' }}>
                            <label class="form-check-label" for="{{ str_replace(' ', '_', $bidang) }}">
                                {{ $bidang }}
                            </label>
                        </div>
                    @endforeach
                </div>

                @error('bidang_sub_sektor_ekonomi_kreatif')
                    <span class="text-red-500 text-xs italic">{{ $message }}</span>
                @enderror
            </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') }}</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') }}</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') }}</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') }}</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') }}</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') }}</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" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    value="{{ old('kata_kunci') }}">
            </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" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    value="{{ old('batas_terima_tawaran') }}">
            </div>

            <!-- Tanggal Mulai -->
            <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" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    value="{{ old('tanggal_mulai') }}">
            </div>

            <!-- Tanggal Berakhir -->
            <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" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    value="{{ old('tanggal_berakhir') }}">
            </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">
                    <option value="">Pilih Kategori</option>
                    <option value="Pelatihan">Pelatihan</option>
                    <option value="Pendanaan">Pendanaan</option>
                    <option value="Project Investor">Project</option>
                    <option value="Riset">Riset</option>
                </select>
            </div> --}}

            <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">
                    <option value="">Pilih Kategori</option>
                    <option value="Pelatihan" {{ old('kategori') == 'Pelatihan' ? 'selected' : '' }}>Pelatihan
                    </option>
                    <option value="Pendanaan" {{ old('kategori') == 'Pendanaan' ? 'selected' : '' }}>Pendanaan
                    </option>
                    <option value="Project Investor" {{ old('kategori') == 'Project Investor' ? 'selected' : '' }}>
                        Project</option>
                    <option value="Riset" {{ old('kategori') == 'Riset' ? 'selected' : '' }}>Riset</option>
                </select>
                @error('kategori')
                    <span class="text-red-500 text-sm">{{ $message }}</span>
                @enderror
            </div>


            <!-- Kontak -->
            <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" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    placeholder="Masukkan email atau nomor telepon" value="{{ old('kontak') }}">
                <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" accept=".pdf, .doc, .docx"
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    onchange="previewFile(event)">

                <!-- Tempat untuk pratinjau PDF -->
                <div id="pdfPreview" class="mt-4 hidden">
                    <p class="text-sm text-gray-500">Pratinjau Dokumen:</p>
                    <iframe id="pdfViewer" class="w-full h-64 border" style="border: 1px solid #ccc;"></iframe>
                </div>

                <p class="text-sm text-gray-500">Format yang diizinkan: PDF, DOC, DOCX</p>
            </div>

            <script>
                function previewFile(event) {
                    const file = event.target.files[0];
                    const pdfViewer = document.getElementById('pdfViewer');
                    const pdfPreview = document.getElementById('pdfPreview');

                    if (file && file.type === "application/pdf") {
                        const fileURL = URL.createObjectURL(file);
                        pdfViewer.src = fileURL;
                        pdfPreview.classList.remove('hidden'); // Menampilkan pratinjau
                    } else {
                        pdfPreview.classList.add('hidden'); // Menyembunyikan pratinjau jika bukan PDF
                    }
                }
            </script>


            <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" accept=".jpg, .jpeg, .png"
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    onchange="previewImage(event)">

                <!-- Pratinjau gambar yang dipilih -->
                <div id="imagePreview" class="mt-2">
                    <p class="text-sm text-gray-500">Pratinjau gambar akan ditampilkan di sini.</p>
                </div>

                <p class="text-sm text-gray-500">Format yang diizinkan: JPEG, PNG, JPG</p>
            </div>

            <script>
                function previewImage(event) {
                    const file = event.target.files[0];
                    const preview = document.getElementById('imagePreview');

                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            // Hapus konten sebelumnya di div imagePreview
                            preview.innerHTML = '';

                            // Tambahkan pratinjau gambar
                            const imgElement = document.createElement('img');
                            imgElement.src = e.target.result;
                            imgElement.alt = 'Pratinjau Foto';
                            imgElement.classList.add('w-32', 'h-32', 'object-cover', 'rounded-md');

                            preview.appendChild(imgElement);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            </script>

            <!-- 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">
                    <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">
                    <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 hidden">
                <!-- 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') }}</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') }}">
                    </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') }}">
                    </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') }}</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') }}">
                    </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>
                        <select 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">
                            <option value="" disabled selected>Pilih Status</option> <!-- Placeholder option -->
                            <option value="Coming Soon">Coming Soon</option>
                            <option value="Berjalan">Berjalan</option>
                            <option value="Selesai">Selesai</option>
                        </select>
                    </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>
                        <select id="status_pelatihan" name="status_pelatihan" required
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="" disabled>Pilih Status</option> <!-- Placeholder option -->
                            <option value="Coming Soon"
                                {{ old('status_pelatihan') == 'Coming Soon' ? 'selected' : '' }}>Coming Soon</option>
                            <option value="Berjalan" {{ old('status_pelatihan') == 'Berjalan' ? 'selected' : '' }}>
                                Berjalan</option>
                            <option value="Selesai" {{ old('status_pelatihan') == 'Selesai' ? 'selected' : '' }}>
                                Selesai</option>
                        </select>
                    </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') }}">
                    </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') }}">
                    </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') }}</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>
                        <select 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">
                            <option value="" disabled selected>Pilih Status</option> <!-- Placeholder option -->
                            <option value="Coming Soon">Coming Soon</option>
                            <option value="Berjalan">Berjalan</option>
                            <option value="Selesai">Selesai</option>
                        </select>
                    </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>
                        <select id="status_pendanaan" name="status_pendanaan" required
                            class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <option value="" disabled>Pilih Status</option> <!-- Placeholder option -->
                            <option value="Coming Soon"
                                {{ old('status_pendanaan') == 'Coming Soon' ? 'selected' : '' }}>Coming Soon</option>
                            <option value="Berjalan" {{ old('status_pendanaan') == 'Berjalan' ? 'selected' : '' }}>
                                Berjalan</option>
                            <option value="Selesai" {{ old('status_pendanaan') == 'Selesai' ? 'selected' : '' }}>
                                Selesai</option>
                        </select>
                    </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') }}</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') }}">
                    </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') }}">
                    </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') }}</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') }}">
                    </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>
                        <select 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">
                            <option value="" disabled selected>Pilih Status</option> <!-- Placeholder option -->
                            <option value="Coming Soon">Coming Soon</option>
                            <option value="Berjalan">Berjalan</option>
                            <option value="Selesai">Selesai</option>
                        </select>
                    </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>
                        <select 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">
                            <option value="" disabled>Pilih Status</option> <!-- Placeholder option -->
                            <option value="Coming Soon" {{ old('status_riset') == 'Coming Soon' ? 'selected' : '' }}>
                                Coming Soon</option>
                            <option value="Berjalan" {{ old('status_riset') == 'Berjalan' ? 'selected' : '' }}>
                                Berjalan</option>
                            <option value="Selesai" {{ old('status_riset') == 'Selesai' ? 'selected' : '' }}>Selesai
                            </option>
                        </select>
                    </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') }}</textarea>
                    </div>
                </div>

                <!-- Project Investor Details 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="number" id="nominal" name="nominal" step="0.01"
                            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="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"></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>
                        <select 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">
                            <option value="" disabled selected>Pilih Status</option> <!-- Placeholder option -->
                            <option value="Coming Soon">Coming Soon</option>
                            <option value="Berjalan">Berjalan</option>
                            <option value="Selesai">Selesai</option>
                        </select>
                    </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">
                    </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"></textarea>
                    </div>
                </div>


                <div>
                    <button type="submit"
                        class="px-4 py-2 bg-indigo-600 text-white rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Simpan
                        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');

                categorySelect.addEventListener('change', (event) => {
                    const selectedCategory = event.target.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;
                    }
                });
            });

            $(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);

                    // // Submit the form
                    // this.submit();

                    // 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'));

                    // Kirim formulir
                    this.submit();
                });
            });


            var userRole = "{{ auth()->user()->role }}";
            var kategoriSelect = document.getElementById('kategori');

            // Clear existing options
            kategoriSelect.innerHTML = '<option value="">Pilih Kategori</option>';

            // Conditional logic based on user role
            if (userRole === 'umkm' || userRole === 'komunitas') {
                kategoriSelect.innerHTML += '<option value="Pelatihan">Pelatihan</option>';
                kategoriSelect.innerHTML += '<option value="Pendanaan">Pendanaan</option>';
                kategoriSelect.innerHTML += '<option value="Riset">Riset</option>';
            } else if (userRole === 'akademisi') {
                kategoriSelect.innerHTML += '<option value="Pendanaan">Pendanaan</option>';
            }
        </script>

    </div>
</body>

</html>


{{-- <!DOCTYPE html>
<html lang="en">

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

<body class="bg-gray-100">
    <div class="max-w-3xl mx-auto p-8 bg-white rounded-lg shadow-lg mt-10">
        <h1 class="text-3xl font-bold mb-8 text-gray-800">Create a New Project</h1>

        <form action="{{ route('projects.store') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <!-- Common Fields -->
            <div class="flex flex-col space-y-2">
                <label for="judul_project" class="text-sm font-semibold text-gray-700">Judul Project</label>
                <input type="text" id="judul_project" name="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</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">Aplikasi dan permainan</option>
                    <option value="Arsitektur">Arsitektur</option>
                    <option value="Desain">Desain</option>
                    <option value="Film, video, dan animasi">Film, video, dan animasi</option>
                    <option value="Fotografi">Fotografi</option>
                    <option value="Kriya">Kriya</option>
                    <option value="Kuliner">Kuliner</option>
                    <option value="Mode">Mode</option>
                    <option value="Musik">Musik</option>
                    <option value="Penerbitan">Penerbitan</option>
                    <option value="Periklanan">Periklanan</option>
                    <option value="Permainan rakyat">Permainan rakyat</option>
                    <option value="Radio dan televisi">Radio dan televisi</option>
                    <option value="Riset dan pengembangan">Riset dan pengembangan</option>
                    <option value="Seni pertunjukan">Seni pertunjukan</option>
                    <option value="Seni rupa">Seni rupa</option>
                    <option value="Software">Software</option>
                </select>
            </div>

            <div class="flex flex-col space-y-2">
                <label for="kategori" class="text-sm font-semibold text-gray-700">Kategori</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">
                    <option value="">Pilih Kategori</option>
                    <option value="Pelatihan">Pelatihan</option>
                    <option value="Pendanaan">Pendanaan</option>
                    <option value="Project">Project</option>
                    <option value="Riset">Riset</option>
                </select>
            </div>

            <!-- Common Fields for All Categories -->
            <div id="common-fields" class="space-y-6">
                <div class="flex flex-col space-y-2">
                    <label for="latar_belakang" class="text-sm font-semibold text-gray-700">Latar Belakang</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"></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</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"></textarea>
                </div>

                <div class="flex flex-col space-y-2">
                    <label for="solusi_project" class="text-sm font-semibold text-gray-700">Solusi Project</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"></textarea>
                </div>

                <div class="flex flex-col space-y-2">
                    <label for="parameter_kesuksesan" class="text-sm font-semibold text-gray-700">Parameter
                        Kesuksesan</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"></textarea>
                </div>

                <div class="flex flex-col space-y-2">
                    <label for="rincian_kebutuhan" class="text-sm font-semibold text-gray-700">Rincian Kebutuhan</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"></textarea>
                </div>

                <div class="flex flex-col space-y-2">
                    <label for="deskripsi_kolaborasi" class="text-sm font-semibold text-gray-700">Deskripsi
                        Kolaborasi</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"></textarea>
                </div>

                <div class="flex flex-col space-y-2">
                    <label for="kata_kunci" class="text-sm font-semibold text-gray-700">Kata Kunci</label>
                    <input type="text" id="kata_kunci" name="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</label>
                    <input type="date" id="batas_terima_tawaran" name="batas_terima_tawaran" 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</label>
                    <input type="date" id="tanggal_mulai" name="tanggal_mulai" 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</label>
                    <input type="date" id="tanggal_berakhir" name="tanggal_berakhir" 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="nominal_kebutuhan" class="text-sm font-semibold text-gray-700">Nominal
                        Kebutuhan</label>
                    <input type="number" id="nominal_kebutuhan" name="nominal_kebutuhan" step="0.01" 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="kontak" class="text-sm font-semibold text-gray-700">Kontak</label>
                    <input type="text" id="kontak" name="kontak" required
                        class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
            </div>

            <!-- Conditional Fields Based on Category -->
            <div id="additional-fields" class="space-y-6 hidden">
                <!-- 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</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"></textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="biaya" class="text-sm font-semibold text-gray-700">Biaya</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">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="jumlah_peserta" class="text-sm font-semibold text-gray-700">Jumlah Peserta</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">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="benefit_pelatihan" class="text-sm font-semibold text-gray-700">Benefit
                            Pelatihan</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"></textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="lokasi_pelatihan" class="text-sm font-semibold text-gray-700">Lokasi
                            Pelatihan</label>
                        <input type="text" id="lokasi_pelatihan" name="lokasi_pelatihan"
                            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="status_pelatihan" class="text-sm font-semibold text-gray-700">Status
                            Pelatihan</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">
                    </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</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">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="lokasi_pendanaan" class="text-sm font-semibold text-gray-700">Lokasi
                            Pendanaan</label>
                        <input type="text" id="lokasi_pendanaan" name="lokasi_pendanaan"
                            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="rencana_penggunaan_dana" class="text-sm font-semibold text-gray-700">Rencana
                            Penggunaan Dana</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"></textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="status_pendanaan" class="text-sm font-semibold text-gray-700">Status
                            Pendanaan</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">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="benefit_pendanaan" class="text-sm font-semibold text-gray-700">Benefit
                            Pendanaan</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"></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</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">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="lokasi_riset" class="text-sm font-semibold text-gray-700">Lokasi Riset</label>
                        <input type="text" id="lokasi_riset" name="lokasi_riset"
                            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="metodologi" class="text-sm font-semibold text-gray-700">Metodologi</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"></textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="hasil" class="text-sm font-semibold text-gray-700">Hasil</label>
                        <input type="date" id="hasil" name="hasil"
                            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="status_riset" class="text-sm font-semibold text-gray-700">Status Riset</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">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="benefit_riset" class="text-sm font-semibold text-gray-700">Benefit Riset</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"></textarea>
                    </div>
                </div>

                <!-- Project Investor Details 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</label>
                        <input type="number" id="nominal" name="nominal" step="0.01"
                            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="rencana_implementasi" class="text-sm font-semibold text-gray-700">Rencana
                            Implementasi</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"></textarea>
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="status_project" class="text-sm font-semibold text-gray-700">Status Project</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">
                    </div>

                    <div class="flex flex-col space-y-2">
                        <label for="benefit_project" class="text-sm font-semibold text-gray-700">Benefit
                            Project</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"></textarea>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end mt-4">
                <button type="submit"
                    class="px-4 py-2 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">Submit</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');

                categorySelect.addEventListener('change', (event) => {
                    const selectedCategory = event.target.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':
                            additionalFields.classList.remove('hidden');
                            projectFields.classList.remove('hidden');
                            break;
                        default:
                            additionalFields.classList.add('hidden');
                            break;
                    }
                });
            });
        </script>
    </div>
</body>

</html> --}}
