<div class="modal fade" id="tambahModal" tabindex="-1" aria-labelledby="tambahModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="tambahModalLabel">TAMBAH DATA</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('pengaduan.store') }}" enctype="multipart/form-data">
                    @csrf

                    <p class="fw-bold mb-3">KELOLA DATA PENGADUAN SISWA</p>

                    <div class="mb-3">
                        <x-input-label for="judul_pengaduan" value="JUDUL PENGADUAN" />
                        <x-text-input id="judul_pengaduan" type="text" name="judul_pengaduan"
                            class="mt-1 block w-full rounded-md" value="{{ old('judul_pengaduan') }}" required />
                        <x-input-error class="mt-2" :messages="$errors->get('judul_pengaduan')" />
                    </div>

                    <div class="row">
                        <div class="col mb-3">
                            <x-input-label for="metode" value="METODE BK" />
                            <x-select-input id="metode" name="metode" class="mt-1 block w-full" required>
                                <option value="">Pilih Metode Bimbingan Konseling</option>
                                <option value="Individu">Individu</option>
                                <option value="Kelompok">Kelompok</option>
                            </x-select-input>
                            <x-input-error class="mt-2" :messages="$errors->get('judul_pengaduan')" />
                        </div>

                        <div class="col mb-3">
                            <x-input-label for="jenis_pengaduan" value="JENIS PENGADUAN BK" />
                            <x-select-input id="jenis_pengaduan" name="jenis_pengaduan" class="mt-1 block w-full"
                                required>
                                <option value="">Pilih Jenis Bimbingan Konseling</option>
                                <option value="Pribadi">Pribadi</option>
                                <option value="Sosial">Sosial</option>
                                <option value="Karier">Karier</option>
                                <option value="Belajar">Belajar</option>
                            </x-select-input>
                            <x-input-error class="mt-2" :messages="$errors->get('jenis_pengaduan')" />
                        </div>
                    </div>

                    <div class="mb-3">
                        <x-input-label for="isi_keluhan" value="ISI KELUHAN / PERMASALAHAN" />
                        <textarea id="isi_keluhan" rows="4" type="text" name="isi_keluhan" class="mt-1 block w-full rounded-md"
                            value="{{ old('isi_keluhan') }}" required></textarea>
                        <x-input-error class="mt-2" :messages="$errors->get('isi_keluhan')" />
                    </div>

                    <div class="col-12">
                        <x-input-label for="dokumentasi" class="form-lable font-bold">DOKUMENTASI</x-input-label>
                        <x-file-input id="dokumentasi" name="dokumentasi" type="file" class="form-control-file" />
                        <small>
                            <span class="text-danger">
                                *Lampirkan dokumentasi jika diperlukan dalam kasus kenakalan remaja di lingkungan
                                sekolah. <br>
                                <strong>Silakan unggah di sini</strong>!
                            </span>
                        </small>
                        <x-input-error class="mt-2" :messages="$errors->get('dokumentasi')" />
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn px-4 py-2 border border-dark"
                            style="background-color: rgba(87, 7, 65, 1); color: white;">
                            KIRIM
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
