@extends('layout/main')

@section('content')
    <h4 class="fw-bold py-3 mb-4">
        <a class="text-muted fw-light" href="{{ route('siswa.index') }}">Data Siswa /</a>
        {{ $title }}
    </h4>
    <div class="container">
        <div class="card">
            <!-- Basic with Icons -->
            <div class="col-xxl">
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <form method="POST" action="{{ route('siswa.save') }}">
                    @csrf
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">NIS</label>
                            <div class="col-sm-10">
                                <div class="input-group input-group-merge">
                                    <span id="basic-icon-default-fullname2" class="input-group-text">
                                        <i class="bx bx-id-card"></i>
                                    </span>
                                    <input
                                        type="text"
                                        class="form-control @error('number') is-invalid @enderror"
                                        id="basic-icon-default-fullname"
                                        placeholder="0040768**********"
                                        aria-label="0040768**********"
                                        aria-describedby="basic-icon-default-fullname2"
                                        name="number"
                                        required
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label" for="basic-icon-default-fullname">Nama</label>
                            <div class="col-sm-10">
                                <div class="input-group input-group-merge">
                                    <span id="basic-icon-default-fullname2" class="input-group-text">
                                        <i class="bx bx-user"></i>
                                    </span>
                                    <input
                                        type="text"
                                        class="form-control @error('name') is-invalid @enderror"
                                        id="basic-icon-default-fullname"
                                        placeholder="John Doe"
                                        aria-label="John Doe"
                                        aria-describedby="basic-icon-default-fullname2"
                                        name="name"
                                        required
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label" for="basic-icon-default-email">Email</label>
                            <div class="col-sm-10">
                                <div class="input-group input-group-merge">
                                    <span class="input-group-text">
                                        <i class="bx bx-envelope"></i>
                                    </span>
                                    <input
                                        type="text"
                                        class="form-control @error('email') is-invalid @enderror"
                                        id="basic-icon-default-email"
                                        placeholder="example@example.com"
                                        aria-label="example@example.com"
                                        aria-describedby="basic-icon-default-email2"
                                        name="email"
                                        required
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-2 form-label" for="basic-icon-default-phone">Nomor HP</label>
                            <div class="col-sm-10">
                                <div class="input-group input-group-merge">
                                    <span id="basic-icon-default-phone2" class="input-group-text">
                                        <i class="bx bx-phone"></i>
                                    </span>
                                    <input
                                        type="text"
                                        class="form-control @error('no_telp') is-invalid @enderror"
                                        id="basic-icon-default-phone"
                                        placeholder="08**********"
                                        aria-label="08**********"
                                        aria-describedby="basic-icon-default-phone2"
                                        name="no_telp"
                                        required
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label" for="basic-icon-default-id_kelas">Kelas</label>
                            <div class="col-sm-10">
                                <div class="input-group input-group-merge">
                                    <span class="input-group-text">
                                        <i class="bx bx-grid"></i>
                                    </span>
                                    <select class="form-control" id="basic-icon-default-id_kelas" name="id_kelas" required>
                                        @foreach($kelas as $value)
                                            <option value="{{ $value->id }}">{{ $value->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label" for="basic-icon-default-alamat">Alamat</label>
                            <div class="col-sm-10">
                                <div class="input-group input-group-merge">
                                    <span class="input-group-text">
                                        <i class="bx bx-map"></i>
                                    </span>
                                    <textarea
                                        type="text"
                                        class="form-control @error('alamat') is-invalid @enderror"
                                        id="basic-icon-default-alamat"
                                        placeholder="JL. Merpati *****"
                                        aria-label="JL. Merpati *****"
                                        aria-describedby="basic-icon-default-alamat2"
                                        name="alamat"
                                        required
                                    ></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label" for="basic-icon-default-date">Tanggal Lahir</label>
                            <div class="col-sm-10">
                                <div class="input-group input-group-merge">
                                    <span class="input-group-text">
                                        <i class="bx bx-calendar"></i>
                                    </span>
                                    <input
                                        type="date"
                                        class="form-control @error('date') is-invalid @enderror"
                                        id="basic-icon-default-date"
                                        aria-describedby="basic-icon-default-date2"
                                        name="date"
                                        required
                                    />
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-2 col-form-label" for="basic-icon-default-gender">Jenis Kelamin</label>
                            <div class="col-sm-10">
                                <div class="input-group input-group-merge">
                                    <span class="input-group-text">
                                        <i class="bx bx-pin"></i>
                                    </span>
                                    <select class="form-control" id="basic-icon-default-gender" name="gender" required>
                                        <option value="1">Laki - laki</option>
                                        <option value="2">Perempuan</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-end">
                            <div class="col-sm-10">
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection