@extends('layout.app')
@section('title', 'admin')
@section('content')

<h1 class="h3 mb-2 text-gray-800">Tambah Siswa</h1>

<!-- Basic Card Example -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Tambah Data Siswa</h6>
    </div>
        <div class="card-body">
        <form action="{{ route('siswa.update', ['id' => $siswa->id]) }}" method="POST">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="form-group col-6">
                    <label class="mt-3">NISN</label>
                        <input type="number" name="nisn" class="form-control" value="{{ $siswa->nisn }}" placeholder="Masukan NISN">
                        @error('nisn')
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                            </div>
                        @enderror

                        <label class="mt-3">NAMA</label>
                        <input type="text" name="nama" class="form-control" value="{{ $siswa->nama }}" placeholder="Masukan Nama">
                        @error('nama')
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                            </div>
                        @enderror

                        <label class="mt-3">KELAS</label>
                        <select name="kelas" id="inputKelas" class="form-control">
                            <option value="" {{ old('kelas', $siswa->kelas ?? '') == '' ? 'selected' : '' }}>Pilih Kelas</option>
                            <option value="Kelas 7" {{ old('kelas', $siswa->kelas ?? '') == 'Kelas 7' ? 'selected' : '' }}>Kelas 7</option>
                            <option value="Kelas 8" {{ old('kelas', $siswa->kelas ?? '') == 'Kelas 8' ? 'selected' : '' }}>Kelas 8</option>
                            <option value="Kelas 9" {{ old('kelas', $siswa->kelas ?? '') == 'Kelas 9' ? 'selected' : '' }}>Kelas 9</option>
                        </select>

                        @error('kelas')
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                            </div>
                        @enderror

                        <label class="mt-3">Alamat</label>
                        <textarea name="alamat" class="form-control" placeholder="Masukan Alamat">{{ $siswa->alamat }}</textarea>
                        @error('alamat')
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="form-group col-6">
                        <label class="mt-3">PENGETAHUAN</label>
                        <input type="number" name="pengetahuan" class="form-control" value="{{ $siswa->pengetahuan }}" placeholder="Input Nilai Siswa">
                        @error('pengetahuan')
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                            </div>
                        @enderror

                        <label class="mt-3">KETERAMPILAN</label>
                        <input type="number" name="keterampilan" class="form-control" value="{{ $siswa->keterampilan }}" placeholder="Input Nilai Siswa">
                        @error('keterampilan')
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                            </div>
                        @enderror

                        <label class="mt-3">SIKAP</label>
                        <input type="number" name="sikap" class="form-control" value="{{ $siswa->sikap }}" placeholder="Input Nilai Siswa">
                        @error('sikap')
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                            </div>
                        @enderror

                        <label class="mt-3">KEHADIRAN</label>
                        <input type="number" name="kehadiran" class="form-control" value="{{ $siswa->kehadiran }}" placeholder="Input Nilai Siswa">
                        @error('kehadiran')
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ $message }}
                            </div>
                        @enderror

                <button type="submit" class="btn btn-outline-warning float-right mr-2 mt-4"><i class="fas fa-save"></i> Simpan</i></button>
                <a type="submit" class="btn btn-outline-danger float-right mr-3 mt-4" href="{{ route('admin') }}"><i class="fas fa-times"></i> Batal</a>
            </div>
        </form>
    </div>
</div>

@endsection

<script>
        document.addEventListener('DOMContentLoaded', (event) => {
            // Select all alert elements
            const alerts = document.querySelectorAll('.alert-dismissible');

            // Iterate through each alert and set a timeout to hide it
            alerts.forEach(alert => {
                setTimeout(() => {
                    alert.classList.remove('show');
                    alert.classList.add('fade');
                    setTimeout(() => {
                        alert.style.display = 'none';
                    }, 500); // Adjust this if you want a longer or shorter fade-out effect
                }, 3000); // ms = s
            });
        });
    </script>