@foreach ($sp as $data)
    <div class="modal fade" id="exampleModal_{{ $data->id_sp }}" tabindex="-1"
        aria-labelledby="exampleModalLabel_{{ $data->id_sp }}" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5 font-bold" id="exampleModalLabel_{{ $data->id_sp }}">EDIT DATA TINDAK
                        LANJUT SP</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('tindak-lanjut.sp.update', $data->id_sp) }}"
                        enctype="multipart/form-data" class="mt-6 space-y-6">
                        @csrf
                        @method('PATCH')

                        @php
                            $siswas = App\Models\Siswa::all();
                        @endphp

                        <select id="id_siswa" name="id_siswa" class="mt-1 block w-full rounded-md" required>
                            <option value="">Pilih Siswa</option>
                            @foreach ($siswas as $siswa)
                                <option value="{{ $siswa->id_siswa }}"
                                    {{ old('id_siswa', $data->id_siswa) == $siswa->id_siswa ? 'selected' : '' }}>
                                    {{ $siswa->nama_siswa }}
                                </option>
                            @endforeach
                        </select>
                        <x-input-error class="mt-2" :messages="$errors->get('id_siswa')" />

                        <div class="row">
                            <div class="max-w-xl col">
                                <x-input-label for="hari" value="HARI" />
                                <x-select-input id="hari" name="hari" class="mt-1 block w-full" required>
                                    <option value="">Pilih Hari</option>
                                    <option value="Senin" {{ old('hari', $data->hari) === 'Senin' ? 'selected' : '' }}>
                                        Senin
                                    </option>
                                    <option value="Selasa"
                                        {{ old('hari', $data->hari) === 'Selasa' ? 'selected' : '' }}>Selasa
                                    </option>
                                    <option value="Rabu" {{ old('hari', $data->hari) === 'Rabu' ? 'selected' : '' }}>
                                        Rabu</option>
                                    <option value="Kamis"
                                        {{ old('hari', $data->hari) === 'Kamis' ? 'selected' : '' }}>
                                        Kamis
                                    </option>
                                    <option value="Jumat"
                                        {{ old('hari', $data->hari) === 'Jumat' ? 'selected' : '' }}>Jumat
                                    </option>
                                </x-select-input>
                            </div>

                            <div class="max-w-xl col">
                                <x-input-label for="tanggal" value="TANGGAL" />
                                <x-text-input id="tanggal" type="date" name="tanggal" class="mt-1 block w-full"
                                    value="{{ old('tanggal', $data->tanggal) }}" required />
                                <x-input-error class="mt-2" :messages="$errors->get('tanggal')" />
                            </div>

                            <div class="max-w-xl col">
                                <x-input-label for="waktu" value="WAKTU" />
                                <x-text-input id="waktu" type="time" name="waktu" class="mt-1 block w-full"
                                    value="{{ old('waktu', $data->waktu) }}" required />
                                <x-input-error class="mt-2" :messages="$errors->get('waktu')" />
                            </div>
                        </div>

                        <div class="max-w-xl">
                            <x-input-label for="jenis_sp" value=" JENIS SP" />
                            <x-select-input id="jenis_sp" name="jenis_sp" class="mt-1 block w-full" required>
                                <option value="">Pilih Jenis SP Siswa</option>
                                <option value="SP1"
                                    {{ old('jenis_sp', $data->jenis_sp) === 'SP1' ? 'selected' : '' }}>SP1</option>
                                <option value="SP2"
                                    {{ old('jenis_sp', $data->jenis_sp) === 'SP2' ? 'selected' : '' }}>SP2</option>
                                <option value="SP3"
                                    {{ old('jenis_sp', $data->jenis_sp) === 'SP3' ? 'selected' : '' }}>SP3</option>
                            </x-select-input>
                        </div>

                        <div class="max-w-xl col">
                            <x-input-label for="permasalahan" value="PERMASALAHAN" />
                            <textarea id="permasalahan" type="text" name="permasalahan" class="mt-1 block w-full" required>{{ old('permasalahan', $data->permasalahan) }}</textarea>
                            <x-input-error class="mt-2" :messages="$errors->get('permasalahan')" />
                        </div>

                        <div class="modal-footer">
                            <x-secondary-button tag="a" data-bs-dismiss="modal">Batal</x-secondary-button>
                            <x-primary-button name="save" value="true">Simpan</x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endforeach
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
@endsection