@extends('layouts.app')

@section('title', $student ? 'Perbaiki Data Siswa' : 'Tambah Siswa')

@section('content')
<div class="pkbm-master-page mx-auto max-w-5xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div class="min-w-0">
            <p class="pkbm-dashboard__breadcrumb"><a href="{{ route('pkbm.master.index', 'siswa') }}" class="text-white/80 hover:text-white">Data Master</a><i class="bi bi-chevron-right" aria-hidden="true"></i>Data Siswa<i class="bi bi-chevron-right" aria-hidden="true"></i>{{ $student ? 'Perbaiki' : 'Tambah' }}</p>
            <h1 class="pkbm-dashboard__title">{{ $student ? 'Perbaiki data siswa' : 'Tambah siswa baru' }}</h1>
            <p class="pkbm-dashboard__subtitle">Lengkapi identitas peserta didik dan informasi keluarga.</p>
        </div>
    </header>

    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error">
            <i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i>
            <div>
                <p class="font-semibold">Periksa kembali data yang diisi.</p>
                <ul class="mt-1 list-inside list-disc">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        </div>
    @endif

    <section class="sp-card overflow-hidden">
        <div class="border-b border-slate-100 px-5 py-4">
            <h2 class="sp-section-title">Informasi peserta didik</h2>
            <p class="mt-1 text-xs text-slate-500">Kolom bertanda <span class="text-rose-500">*</span> wajib diisi.</p>
        </div>
        <form method="POST"
              action="{{ $student ? route('pkbm.master.update', ['siswa', $student->id]) : route('pkbm.master.store', 'siswa') }}"
              enctype="multipart/form-data" class="space-y-5 p-5 sm:p-6">
            @csrf
            @if ($student)
                @method('PUT')
            @endif

            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($formFields as $field)
                    @php
                        $fieldValue = old($field['name'], $student ? ($student->{$field['name']} ?? '') : '');
                        $wide = $field['wide'] ?? false;
                    @endphp
                    <div @class(['sm:col-span-2 lg:col-span-3' => $wide])>
                        <label for="{{ $field['name'] }}" class="sp-form-label">
                            {{ $field['label'] }} @if ($field['required'] ?? false)<span class="text-rose-500">*</span>@endif
                        </label>
                        @if ($field['type'] === 'select')
                            <select id="{{ $field['name'] }}" name="{{ $field['name'] }}" @required($field['required'] ?? false) class="sp-form-control w-full px-3 py-2.5 text-sm">
                                <option value="">Pilih jenis kelamin</option>
                                @foreach ($field['options'] as $value => $label)
                                    <option value="{{ $value }}" @selected((string) $fieldValue === (string) $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        @elseif ($field['type'] === 'textarea')
                            <textarea id="{{ $field['name'] }}" name="{{ $field['name'] }}" rows="3" class="sp-form-control w-full px-3 py-2.5 text-sm">{{ $fieldValue }}</textarea>
                        @else
                            <input id="{{ $field['name'] }}" type="{{ $field['type'] }}" name="{{ $field['name'] }}" value="{{ $fieldValue }}"
                                   @required($field['required'] ?? false) class="sp-form-control w-full px-3 py-2.5 text-sm">
                        @endif
                        @error($field['name'])<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                    </div>
                @endforeach

                <div class="sm:col-span-2 lg:col-span-3">
                    <label for="foto" class="sp-form-label">{{ $student ? 'Ganti foto profil' : 'Foto profil' }} <span class="font-normal text-slate-400">(opsional)</span></label>
                    <input id="foto" type="file" name="foto" accept="image/jpeg,image/png,image/webp" class="sp-form-control w-full px-3 py-2 text-sm">
                    <p class="mt-1 text-xs text-slate-500">JPG, PNG, atau WEBP. Maksimal 2 MB.</p>
                    @if ($student?->foto)
                        <img src="{{ route('pkbm.siswa.photo', $student->id) }}" alt="Foto {{ $student->nama_siswa }}" class="mt-3 size-20 rounded-xl border border-slate-200 object-cover">
                    @endif
                    @error('foto')<p class="mt-1 text-xs text-rose-700">{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="flex flex-wrap gap-2 border-t border-slate-100 pt-4">
                <button type="submit" class="sp-btn-primary">
                    <i class="bi bi-check2-circle" aria-hidden="true"></i>{{ $student ? 'Simpan perubahan' : 'Simpan data' }}
                </button>
                <a href="{{ route('pkbm.master.index', 'siswa') }}" class="sp-btn-secondary">Kembali</a>
            </div>
        </form>
    </section>
</div>
@endsection