@foreach ($pengaduans as $item)
    <div class="modal fade" id="exampleModal_{{ $item->id_pengaduan_bk }}" tabindex="-1"
        aria-labelledby="exampleModalLabel_{{ $item->id_pengaduan_bk }}" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel_{{ $item->id_pengaduan_bk }}">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.update', $item->id_pengaduan_bk) }}"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PATCH')

                        <p class="fw-bold mb-3">EDIT 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', $item->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="Kelompok"
                                        {{ old('metode', $item->metode) === 'Kelompok' ? 'selected' : '' }}>
                                        Kelompok</option>
                                    <option value="Individu"
                                        {{ old('metode', $item->metode) === 'Individu' ? 'selected' : '' }}>
                                        Individu</option>
                                </x-select-input>
                            </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"
                                        {{ old('jenis_pengaduan', $item->jenis_pengaduan ?? '') === 'Pribadi' ? 'selected' : '' }}>
                                        Pribadi</option>
                                    <option value="Sosial"
                                        {{ old('jenis_pengaduan', $item->jenis_pengaduan ?? '') === 'Sosial' ? 'selected' : '' }}>
                                        Sosial</option>
                                    <option value="Karier"
                                        {{ old('jenis_pengaduan', $item->jenis_pengaduan ?? '') === 'Karier' ? 'selected' : '' }}>
                                        Karier</option>
                                    <option value="Belajar"
                                        {{ old('jenis_pengaduan', $item->jenis_pengaduan ?? '') === 'Belajar' ? 'selected' : '' }}>
                                        Belajar</option>
                                </x-select-input>
                            </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>{{ $item->isi_keluhan }}</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">
                                    *Dokumentasi ini diisi opsional, jika ada dokumentasi tentang siswa/i
                                    dalam kasus kenakalan remaja <br> di lingkungan sekolah,
                                    <strong>silakan unggah di sini</strong>.
                                </span>
                            </small>
                            @if ($item->dokumentasi)
                                <p class="mt-2">Dokumentasi saat ini:</p>
                                <img src="{{ asset('storage/dokumentasi/' . $item->dokumentasi) }}" width="150"
                                    alt="dokumentasi KK">
                            @endif
                            <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>
@endforeach