@extends('layouts.app')

@section('title', 'Edit Siswa | PELANGI BERSINAR')
@section('page-title', 'Edit Siswa')

@push('styles')

<style>

.form-page {
    --ungu: #8D1878;
    --magenta: #B52293;
    --merah: #EF233C;

    --text: #351D34;
    --muted: #857783;
    --border: #EEE4EC;
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 16px;

    margin-bottom: 22px;

    flex-wrap: wrap;
}

.form-header h1 {
    margin: 0;

    color: var(--ungu);

    font-size: 25px;
    font-weight: 900;
}

.form-header p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    text-decoration: none;

    border:
        1px solid
        var(--border);

    background: white;

    color: var(--ungu);

    padding: 11px 16px;

    border-radius: 11px;

    font-weight: 700;
}

.form-card {
    background: white;

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 7px 24px rgba(46,31,47,.05);
}

.form-card-header {
    padding: 20px 22px;

    border-bottom:
        1px solid
        var(--border);

    background:
        linear-gradient(
            90deg,
            #FFF9FD,
            #FFFFFF
        );
}

.form-card-header h2 {
    margin: 0 0 5px;

    color: var(--ungu);

    font-size: 18px;
}

.form-card-header p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}

.alert-error {
    margin: 20px 22px 0;

    padding: 14px 16px;

    border-radius: 12px;

    background: #FDE7EA;

    color: #A61E31;

    font-size: 13px;
}

.alert-error ul {
    margin: 8px 0 0;

    padding-left: 20px;
}

.form-body {
    padding: 22px;
}

.section-title {
    margin: 4px 0 15px;

    color: var(--ungu);

    font-size: 14px;
    font-weight: 900;
}

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 17px;
}

.form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-label {
    font-size: 13px;

    color: #49334A;

    font-weight: 800;
}

.required {
    color: var(--merah);
}

.form-control {
    width: 100%;

    min-height: 46px;

    border:
        1px solid
        #E5DAE4;

    border-radius: 11px;

    padding: 11px 13px;

    outline: none;

    background: white;

    color: var(--text);

    font-size: 14px;

    transition: .2s ease;
}

.form-control:focus {
    border-color: var(--magenta);

    box-shadow:
        0 0 0 4px rgba(181,34,147,.08);
}

textarea.form-control {
    min-height: 100px;

    resize: vertical;
}

.status-box {
    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 46px;

    padding: 10px 13px;

    border:
        1px solid
        #E5DAE4;

    border-radius: 11px;

    background: #FCFAFC;
}

.status-box input {
    width: 18px;
    height: 18px;

    accent-color: var(--ungu);
}

.form-divider {
    height: 1px;

    background:
        var(--border);

    margin: 24px 0;
}

.form-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    padding: 18px 22px;

    border-top:
        1px solid
        var(--border);

    background: #FFFCFE;
}

.btn-cancel {
    text-decoration: none;

    border:
        1px solid
        var(--border);

    background: white;

    color: var(--text);

    padding: 11px 18px;

    border-radius: 11px;

    font-weight: 700;
}

.btn-save {
    border: 0;

    cursor: pointer;

    color: white;

    padding: 11px 20px;

    border-radius: 11px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            var(--ungu),
            var(--magenta)
        );

    box-shadow:
        0 8px 20px rgba(141,24,120,.18);
}

@media(max-width:760px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full {
        grid-column: auto;
    }

    .form-actions {
        flex-direction: column-reverse;
    }

    .btn-cancel,
    .btn-save {
        width: 100%;

        text-align: center;
    }

}

</style>

@endpush


@section('content')

<div class="form-page">

    <div class="form-header">

        <div>

            <h1>
                Edit Siswa
            </h1>

            <p>
                Perbarui data peserta didik PELANGI BERSINAR
            </p>

        </div>


        <a
            href="{{ route('siswa.show', $siswa) }}"
            class="btn-back"
        >
            ← Kembali
        </a>

    </div>


    <div class="form-card">

        <div class="form-card-header">

            <h2>
                Form Edit Data Siswa
            </h2>

            <p>
                Kolom dengan tanda * wajib diisi.
            </p>

        </div>


        @if($errors->any())

            <div class="alert-error">

                <strong>
                    Data belum dapat disimpan.
                </strong>

                <ul>

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

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

                    @endforeach

                </ul>

            </div>

        @endif


        <form
            method="POST"
            action="{{ route('siswa.update', $siswa) }}"
        >

            @csrf
            @method('PUT')


            <div class="form-body">

                <div class="section-title">
                    Identitas Peserta Didik
                </div>


                <div class="form-grid">


                    <div class="form-group">

                        <label class="form-label">
                            NISN
                            <span class="required">*</span>
                        </label>

                        <input
                            type="text"
                            name="nisn"
                            value="{{ old('nisn', $siswa->nisn) }}"
                            class="form-control"
                            maxlength="20"
                            required
                        >

                    </div>


                    <div class="form-group">

                        <label class="form-label">
                            Nomor Induk
                        </label>

                        <input
                            type="text"
                            name="no_induk"
                            value="{{ old('no_induk', $siswa->no_induk) }}"
                            class="form-control"
                            maxlength="30"
                        >

                    </div>


                    <div class="form-group full">

                        <label class="form-label">
                            Nama Lengkap
                            <span class="required">*</span>
                        </label>

                        <input
                            type="text"
                            name="nama"
                            value="{{ old('nama', $siswa->nama) }}"
                            class="form-control"
                            maxlength="150"
                            required
                        >

                    </div>


                    <div class="form-group">

                        <label class="form-label">
                            Jenis Kelamin
                            <span class="required">*</span>
                        </label>

                        <select
                            name="jenis_kelamin"
                            class="form-control"
                            required
                        >

                            <option value="">
                                Pilih Jenis Kelamin
                            </option>

                            <option
                                value="L"
                                {{
                                    old(
                                        'jenis_kelamin',
                                        $siswa->jenis_kelamin
                                    ) === 'L'
                                        ? 'selected'
                                        : ''
                                }}
                            >
                                Laki-laki
                            </option>

                            <option
                                value="P"
                                {{
                                    old(
                                        'jenis_kelamin',
                                        $siswa->jenis_kelamin
                                    ) === 'P'
                                        ? 'selected'
                                        : ''
                                }}
                            >
                                Perempuan
                            </option>

                        </select>

                    </div>


                    <div class="form-group">

                        <label class="form-label">
                            Kelas
                            <span class="required">*</span>
                        </label>

                        <input
                            type="text"
                            name="kelas"
                            value="{{ old('kelas', $siswa->kelas) }}"
                            class="form-control"
                            maxlength="20"
                            required
                        >

                    </div>


                    <div class="form-group">

                        <label class="form-label">
                            Tempat Lahir
                        </label>

                        <input
                            type="text"
                            name="tempat_lahir"
                            value="{{ old('tempat_lahir', $siswa->tempat_lahir) }}"
                            class="form-control"
                            maxlength="100"
                        >

                    </div>


                    <div class="form-group">

                        <label class="form-label">
                            Tanggal Lahir
                        </label>

                        <input
                            type="date"
                            name="tanggal_lahir"
                            value="{{
                                old(
                                    'tanggal_lahir',
                                    $siswa->tanggal_lahir
                                        ? $siswa->tanggal_lahir->format('Y-m-d')
                                        : ''
                                )
                            }}"
                            class="form-control"
                        >

                    </div>

                </div>


                <div class="form-divider"></div>


                <div class="section-title">
                    Data Orang Tua / Wali
                </div>


                <div class="form-grid">


                    <div class="form-group">

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

                        <input
                            type="text"
                            name="nama_ayah"
                            value="{{ old('nama_ayah', $siswa->nama_ayah) }}"
                            class="form-control"
                            maxlength="150"
                        >

                    </div>


                    <div class="form-group">

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

                        <input
                            type="text"
                            name="nama_ibu"
                            value="{{ old('nama_ibu', $siswa->nama_ibu) }}"
                            class="form-control"
                            maxlength="150"
                        >

                    </div>


                    <div class="form-group">

                        <label class="form-label">
                            No. HP / WhatsApp Wali
                        </label>

                        <input
                            type="text"
                            name="no_hp_wali"
                            value="{{ old('no_hp_wali', $siswa->no_hp_wali) }}"
                            class="form-control"
                            maxlength="25"
                        >

                    </div>


                    <div class="form-group">

                        <label class="form-label">
                            Status Siswa
                        </label>

                        <div class="status-box">

                            <input
                                type="checkbox"
                                name="is_active"
                                value="1"
                                {{
                                    old(
                                        'is_active',
                                        $siswa->is_active
                                    )
                                        ? 'checked'
                                        : ''
                                }}
                            >

                            <span>
                                Aktif
                            </span>

                        </div>

                    </div>


                    <div class="form-group full">

                        <label class="form-label">
                            Alamat
                        </label>

                        <textarea
                            name="alamat"
                            class="form-control"
                        >{{ old('alamat', $siswa->alamat) }}</textarea>

                    </div>

                </div>

            </div>


            <div class="form-actions">

                <a
                    href="{{ route('siswa.show', $siswa) }}"
                    class="btn-cancel"
                >
                    Batal
                </a>

                <button
                    type="submit"
                    class="btn-save"
                >
                    Simpan Perubahan
                </button>

            </div>

        </form>

    </div>

</div>

@endsection