<!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>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const categorySelect = document.getElementById('jenis_penawaran');
            const trainingFields = document.getElementById('pelatihan_fields');
            const fundingFields = document.getElementById('pendanaan_fields');
            const researchFields = document.getElementById('riset_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');

                // Show additional fields based on selected category
                switch (selectedCategory) {
                    case 'pelatihan':
                        trainingFields.classList.remove('hidden');
                        break;
                    case 'pendanaan':
                        fundingFields.classList.remove('hidden');
                        break;
                    case 'riset':
                        researchFields.classList.remove('hidden');
                        break;
                    default:
                        break;
                }
            });
        });

        $(document).ready(function() {
            $('#deskripsi_project, #audiens, #benefit, #metodologi')
                .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

                // Ambil konten dari Summernote untuk setiap elemen
                $('#deskripsi_project').val($('#deskripsi_project').summernote('code'));
                $('#audiens').val($('#audiens').summernote('code'));
                $('#benefit').val($('#benefit').summernote('code'));
                $('#metodologi').val($('#metodologi').summernote('code'));

                // Kirim formulir
                this.submit();
            });
        });
    </script>
</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('penawaranprojects.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 Penawaran 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('penawaranprojects.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">
                    {{-- <label for="sub_sektor" class="form-label">Preferensi Sub Sektor</label> --}}
                    {{-- <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> --}}

                    <div id="bidang_sub_sektor_ekonomi_kreatif">
                        @php
                            // Tidak ada nilai lama untuk form create, kita buat array kosong
                            $selectedBidang = old('bidang_sub_sektor_ekonomi_kreatif', []);
                        @endphp

                        <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"
                                {{ in_array('Aplikasi dan permainan', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Arsitektur', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Desain', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Film video dan animasi', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Fotografi', $selectedBidang) ? 'checked' : '' }}>
                            <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" {{ in_array('Kriya', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Kuliner', $selectedBidang) ? 'checked' : '' }}>
                            <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" {{ in_array('Mode', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Musik', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Penerbitan', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Periklanan', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Permainan rakyat', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Radio dan televisi', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Riset dan pengembangan', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Seni pertunjukan', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Seni rupa', $selectedBidang) ? 'checked' : '' }}>
                            <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"
                                {{ in_array('Software', $selectedBidang) ? 'checked' : '' }}>
                            <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="deskripsi_project" class="text-sm font-semibold text-gray-700">Deskripsi Project<span
                        style="color: red;">*</span></label>
                <textarea id="deskripsi_project" name="deskripsi_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="deskripsi_project" class="text-sm font-semibold text-gray-700">Deskripsi Project<span
                        class="text-red-500">*</span></label>
                <textarea id="deskripsi_project" name="deskripsi_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"
                    placeholder="Masukkan deskripsi proyek Anda di sini...">{{ old('deskripsi_project') }}</textarea>
                @error('deskripsi_project')
                    <span class="text-red-500 text-xs">{{ $message }}</span>
                @enderror
            </div>

            {{-- <div class="flex flex-col space-y-2">
                <label for="jenis_penawaran" class="text-sm font-semibold text-gray-700">Jenis Penawaran<span
                        style="color: red;">*</span></label>
                <select id="jenis_penawaran" name="jenis_penawaran" 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 Jenis Penawaran</option>
                    <option value="pelatihan">Pelatihan</option>
                    <option value="pendanaan">Pendanaan</option>
                    <option value="riset">Riset</option>
                </select>
            </div> --}}

            <div class="flex flex-col space-y-2">
                <label for="jenis_penawaran" class="text-sm font-semibold text-gray-700">Jenis Penawaran<span
                        class="text-red-500">*</span></label>
                <select id="jenis_penawaran" name="jenis_penawaran" 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 Jenis Penawaran</option>
                    <option value="pelatihan" {{ old('jenis_penawaran') == 'pelatihan' ? 'selected' : '' }}>Pelatihan
                    </option>
                    <option value="pendanaan" {{ old('jenis_penawaran') == 'pendanaan' ? 'selected' : '' }}>Pendanaan
                    </option>
                    <option value="riset" {{ old('jenis_penawaran') == 'riset' ? 'selected' : '' }}>Riset</option>
                </select>
                @error('jenis_penawaran')
                    <span class="text-red-500 text-xs">{{ $message }}</span>
                @enderror
            </div>

            {{-- <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" 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="audiens" class="text-sm font-semibold text-gray-700">Audiens<span
                        class="text-red-500">*</span></label>
                <textarea id="audiens" name="audiens" rows="4" required
                    class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
                    placeholder="Masukkan audiens target di sini...">{{ old('audiens') }}</textarea>
                @error('audiens')
                    <span class="text-red-500 text-xs">{{ $message }}</span>
                @enderror
            </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">
            </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 class="text-red-500">*</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') }}">
                @error('batas_terima_tawaran')
                    <span class="text-red-500 text-xs">{{ $message }}</span>
                @enderror
            </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" maxlength="255" 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">
                <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="kontak" class="text-sm font-semibold text-gray-700">Kontak<span
                        style="color: red;">*</span></label>
                <input type="text" id="kontak" name="kontak" maxlength="255" 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="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="image/*"
                    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 yang diizinkan: JPEG,PNG,JPG</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" 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)">

                <!-- Tempat pratinjau gambar -->
                <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>



            {{-- <div class="flex flex-col space-y-2">
                <label for="status" class="text-sm font-semibold text-gray-700">Status<span
                        style="color: red;">*</span></label>
                <select id="status" name="status"
                    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" class="text-sm font-semibold text-gray-700">Status<span
                        style="color: red;">*</span></label>
                <select id="status" name="status" 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
                        {{ old('status', $project->status ?? '') === '' ? 'selected' : '' }}>Pilih Status</option>
                    <option value="Coming Soon"
                        {{ old('status', $project->status ?? '') === 'Coming Soon' ? 'selected' : '' }}>Coming Soon
                    </option>
                    <option value="Berjalan"
                        {{ old('status', $project->status ?? '') === 'Berjalan' ? 'selected' : '' }}>Berjalan</option>
                    <option value="Selesai"
                        {{ old('status', $project->status ?? '') === 'Selesai' ? 'selected' : '' }}>Selesai</option>
                </select>
            </div>

            {{-- 
            <div class="flex flex-col space-y-2">
                <label for="benefit" class="text-sm font-semibold text-gray-700">Benefit<span
                        style="color: red;">*</span></label>
                <textarea id="benefit" name="benefit" 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="benefit" class="text-sm font-semibold text-gray-700">Benefit<span
                        style="color: red;">*</span></label>
                <textarea id="benefit" name="benefit" 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('benefit') }}</textarea>
            </div>


            <div id="pelatihan_fields" class="hidden">
                <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"alue="{{ old('lokasi_pelatihan') }}>
                </div>

                <div class="flex flex-col space-y-2">
                    <label for="durasi_pelatihan" class="text-sm font-semibold text-gray-700">Durasi Pelatihan
                        (jam)<span style="color: red;">*</span></label>
                    <input type="number" id="durasi_pelatihan" name="durasi_pelatihan"
                        class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" value="{{ old('durasi_pelatihan') }}">
                </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>

            <div id="pendanaan_fields" class="hidden">
                <div class="flex flex-col space-y-2">
                    <label for="jumlah_dana" class="text-sm font-semibold text-gray-700">Jumlah Pendanaan<span
                            style="color: red;">*</span></label>
                    <input type="number" id="jumlah_dana" name="jumlah_dana"
                        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>

            <div id="riset_fields" class="hidden">
                <div class="flex flex-col space-y-2">
                    <label for="institusi_penelitian" class="text-sm font-semibold text-gray-700">Institusi
                        Riset<span style="color: red;">*</span></label>
                    <input type="text" id="institusi_penelitian" name="institusi_penelitian" 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('institusi_penelitian') }}">
                </div>
                <div class="flex flex-col space-y-2">
                    <label for="bidang_penelitian" class="text-sm font-semibold text-gray-700">Bidang Riset<span
                            style="color: red;">*</span></label>
                    <input type="text" id="bidang_penelitian" name="bidang_penelitian"
                        class="p-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" value="{{ old('bidang_penelitian') }}">
                </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 Riset<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>

            <button type="submit"
                class="w-full p-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500">Simpan
                Program</button>

        </form>
    </div>
</body>

</html>
