@extends('layouts.app')

@section('content')

<section class="py-5" style="background:#f5f7fa;min-height:100vh;">

<div class="container">

    <!-- Judul -->

    <div class="text-center mb-5" data-aos="fade-down">

        <h1 class="fw-bold text-primary">

            Pendaftaran Peserta Didik Baru

        </h1>

        <h4>

            SD Negeri 200105 Padangsidimpuan

        </h4>

        <p class="text-muted">

            Silakan isi formulir di bawah ini dengan benar.

        </p>

    </div>

    <!-- Alert -->

    @if(session('success'))

    <div class="alert alert-success alert-dismissible fade show">

        <h5>

            <i class="bi bi-check-circle-fill"></i>

            {{ session('success') }}

        </h5>

        <hr>

        <strong>

            Nomor Pendaftaran :

        </strong>

        {{ session('nomor') }}

        <button class="btn-close" data-bs-dismiss="alert"></button>

    </div>

    @endif

    <!-- Error -->

    @if ($errors->any())

    <div class="alert alert-danger">

        <strong>

            Terjadi kesalahan.

        </strong>

        <ul class="mb-0 mt-2">

            @foreach($errors->all() as $error)

            <li>{{ $error }}</li>

            @endforeach

        </ul>

    </div>

    @endif

    <div class="card shadow-lg border-0 rounded-4">

        <div class="card-header bg-primary text-white py-3">

            <h4 class="mb-0">

                <i class="bi bi-person-plus-fill"></i>

                Formulir Pendaftaran

            </h4>

        </div>

        <div class="card-body p-4">

            <form action="{{ route('pendaftar.store') }}"

                  method="POST"

                  enctype="multipart/form-data">

                @csrf

                <!-- ====================== -->

                <!-- DATA CALON SISWA -->

                <!-- ====================== -->

                <h4 class="text-primary mb-4">

                    <i class="bi bi-person-fill"></i>

                    Data Calon Siswa

                </h4>

                <div class="row">

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            NIK

                        </label>

                        <input

                            type="text"

                            name="nik"

                            class="form-control"

                            value="{{ old('nik') }}"

                            placeholder="Masukkan NIK"

                            required>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            NISN

                        </label>

                        <input

                            type="text"

                            name="nisn"

                            class="form-control"

                            value="{{ old('nisn') }}"

                            placeholder="Masukkan NISN"

                            required>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Nama Lengkap

                        </label>

                        <input

                            type="text"

                            name="nama"

                            class="form-control"

                            value="{{ old('nama') }}"

                            placeholder="Nama Lengkap"

                            required>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Tempat Lahir

                        </label>

                        <input

                            type="text"

                            name="tempat_lahir"

                            class="form-control"

                            value="{{ old('tempat_lahir') }}"

                            placeholder="Tempat Lahir"

                            required>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Tanggal Lahir

                        </label>

                        <input

                            type="date"

                            name="tanggal_lahir"

                            class="form-control"

                            value="{{ old('tanggal_lahir') }}"

                            required>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Jenis Kelamin

                        </label>

                        <select

                            name="jenis_kelamin"

                            class="form-select"

                            required>

                            <option value="">

                                -- Pilih --

                            </option>

                            <option value="Laki-laki"

                            {{ old('jenis_kelamin')=='Laki-laki'?'selected':'' }}>

                                Laki-laki

                            </option>

                            <option value="Perempuan"

                            {{ old('jenis_kelamin')=='Perempuan'?'selected':'' }}>

                                Perempuan

                            </option>

                        </select>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Agama

                        </label>

                        <select

                            name="agama"

                            class="form-select"

                            required>

                            <option value="">-- Pilih Agama --</option>

                            <option>Islam</option>

                            <option>Kristen</option>

                            <option>Katolik</option>

                            <option>Hindu</option>

                            <option>Buddha</option>

                            <option>Konghucu</option>

                        </select>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">

                            Asal TK / PAUD

                        </label>

                        <input

                            type="text"

                            name="asal_tk"

                            class="form-control"

                            value="{{ old('asal_tk') }}"

                            placeholder="Contoh : TK Harapan Bangsa"

                            required>

                    </div>

                    <div class="col-12 mb-4">

                        <label class="form-label">

                            Alamat Lengkap

                        </label>

                        <textarea

                            name="alamat"

                            rows="4"

                            class="form-control"

                            placeholder="Masukkan alamat lengkap"

                            required>{{ old('alamat') }}</textarea>

                    </div>

                </div>

                <hr class="my-5">

                <!-- DATA ORANG TUA -->
                                 <h4 class="text-primary mb-4">
                    <i class="bi bi-people-fill"></i>
                    Data Orang Tua / Wali
                </h4>

                <div class="row">

                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            Nama Ayah
                        </label>

                        <input
                            type="text"
                            name="nama_ayah"
                            class="form-control"
                            value="{{ old('nama_ayah') }}"
                            placeholder="Masukkan Nama Ayah"
                            required>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            Nama Ibu
                        </label>

                        <input
                            type="text"
                            name="nama_ibu"
                            class="form-control"
                            value="{{ old('nama_ibu') }}"
                            placeholder="Masukkan Nama Ibu"
                            required>

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            Nomor HP Orang Tua
                        </label>

                        <input
                            type="text"
                            name="no_hp"
                            class="form-control"
                            value="{{ old('no_hp') }}"
                            placeholder="08xxxxxxxxxx"
                            required>

                    </div>

                </div>

                <hr class="my-5">

                <h4 class="text-primary mb-4">
                    <i class="bi bi-cloud-arrow-up-fill"></i>
                    Upload Berkas
                </h4>

                <div class="row">

                    <div class="col-md-4 mb-4">

                        <label class="form-label">
                            Kartu Keluarga (PDF/JPG/PNG)
                        </label>

                        <input
                            type="file"
                            name="kk"
                            class="form-control"
                            accept=".pdf,.jpg,.jpeg,.png"
                            required>

                    </div>

                    <div class="col-md-4 mb-4">

                        <label class="form-label">
                            Akta Kelahiran (PDF/JPG/PNG)
                        </label>

                        <input
                            type="file"
                            name="akta"
                            class="form-control"
                            accept=".pdf,.jpg,.jpeg,.png"
                            required>

                    </div>

                    <div class="col-md-4 mb-4">

                        <label class="form-label">
                            Pas Foto 3x4 (JPG/PNG)
                        </label>

                        <input
                            type="file"
                            name="foto"
                            id="foto"
                            class="form-control"
                            accept=".jpg,.jpeg,.png"
                            onchange="previewFoto(event)"
                            required>

                    </div>

                </div>

                <div class="text-center mb-4">

                    <img
                        id="preview"
                        src="https://placehold.co/180x220?text=Preview+Foto"
                        class="img-thumbnail shadow"
                        style="max-height:220px;">

                </div>

                <hr>

                <div class="d-flex justify-content-center gap-3">

                    <button
                        type="reset"
                        class="btn btn-secondary btn-lg">

                        <i class="bi bi-arrow-clockwise"></i>

                        Reset

                    </button>

                    <button
                        type="submit"
                        class="btn btn-primary btn-lg">

                        <i class="bi bi-check-circle-fill"></i>

                        Daftar Sekarang

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>

</section>

<script>

function previewFoto(event){

    let reader = new FileReader();

    reader.onload = function(){

        document.getElementById('preview').src = reader.result;

    }

    reader.readAsDataURL(event.target.files[0]);

}

</script>

@endsection