@extends('layouts.app')

@section('title', 'Profil Siswa')

@section('content')
<div class="mx-auto max-w-5xl space-y-6">
    <header class="pkbm-dashboard__heading">
        <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="pkbm-dashboard__breadcrumb">
                    <a href="{{ route('student.dashboard') }}" class="hover:text-blue-700 no-underline">Ruang Belajar</a>
                    <i class="bi bi-chevron-right" aria-hidden="true"></i>
                    Profil Siswa
                </p>
                <h1 class="pkbm-dashboard__title">Profil Saya</h1>
                <p class="pkbm-dashboard__subtitle">
                    Informasi identitas pribadi, kontak, dan biodata peserta didik
                </p>
            </div>
            <div class="flex items-center gap-2 rounded-xl bg-white/90 px-3.5 py-2 shadow-sm backdrop-blur">
                <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-100 text-blue-700">
                    <i class="bi bi-person-badge"></i>
                </div>
                <div class="text-xs">
                    <span class="block text-[10px] uppercase font-bold text-slate-400">Kelas</span>
                    <span class="font-bold text-slate-800">{{ $student['nama_kelas'] ?? '-' }}</span>
                </div>
            </div>
        </div>
    </header>

    @if (session('success'))
        <div role="status" class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800 flex items-center gap-2">
            <i class="bi bi-check-circle-fill text-emerald-600"></i>
            <span>{{ session('success') }}</span>
        </div>
    @endif

    @if ($errors->any())
        <div role="alert" class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
            <p class="font-bold mb-1">Terjadi kesalahan pada data yang Anda kirim:</p>
            <ul class="list-disc list-inside text-xs space-y-0.5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('student.profil.update') }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
            {{-- Kolom Kiri: Foto Profil & Info Utama --}}
            <div class="md:col-span-4 space-y-5">
                <div class="sp-card p-5 text-center">
                    <div class="mx-auto flex h-28 w-28 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-600 to-indigo-700 font-bold text-4xl text-white shadow-md overflow-hidden relative">
                        @if(!empty($dataSiswa->foto))
                            <img src="{{ route('student.photo') }}" alt="Foto {{ $student['nama'] }}" class="h-full w-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                            <span class="hidden">{{ strtoupper(substr($student['nama'], 0, 2)) }}</span>
                        @else
                            {{ strtoupper(substr($student['nama'], 0, 2)) }}
                        @endif
                    </div>

                    <h2 class="mt-3 text-base font-bold text-slate-900">{{ $student['nama'] }}</h2>
                    <p class="text-xs text-slate-500">NISN: {{ $dataSiswa->nisn ?? '-' }}</p>

                    <div class="mt-4 pt-3 border-t border-slate-100 text-left">
                        <label for="foto-input" class="sp-form-label mb-1">Ganti Foto Profil</label>
                        <input type="file" id="foto-input" name="foto" accept="image/png,image/jpeg,image/jpg" class="sp-form-control text-xs file:mr-2 file:py-1 file:px-2.5 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        <p class="text-[10px] text-slate-400 mt-1">Format: JPG, PNG. Maksimal 2MB.</p>
                    </div>
                </div>

                {{-- Status Akademik Card --}}
                <div class="sp-card p-4 space-y-2 text-xs">
                    <h3 class="font-bold text-slate-700 text-xs uppercase tracking-wider mb-2">Data Registrasi</h3>
                    <div class="flex justify-between py-1 border-b border-slate-100">
                        <span class="text-slate-500">Status Siswa</span>
                        <span class="font-bold text-emerald-700">Aktif</span>
                    </div>
                    <div class="flex justify-between py-1 border-b border-slate-100">
                        <span class="text-slate-500">Kelas</span>
                        <span class="font-semibold text-slate-800">{{ $student['nama_kelas'] ?? '-' }}</span>
                    </div>
                    <div class="flex justify-between py-1 border-b border-slate-100">
                        <span class="text-slate-500">NIK</span>
                        <span class="font-mono text-slate-700">{{ $dataSiswa->nik ?? '-' }}</span>
                    </div>
                    <div class="flex justify-between py-1">
                        <span class="text-slate-500">Jenis Kelamin</span>
                        <span class="font-semibold text-slate-800">{{ $dataSiswa->jenis_kelamin ?? '-' }}</span>
                    </div>
                </div>
            </div>

            {{-- Kolom Kanan: Form Data Lengkap --}}
            <div class="md:col-span-8 space-y-6">
                {{-- Data Pribadi --}}
                <div class="sp-card p-6 space-y-4">
                    <h2 class="sp-section-title text-base border-b border-slate-100 pb-3">Informasi Biodata</h2>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="sp-form-label mb-1">Nama Lengkap (Sesuai Dapodik)</label>
                            <input type="text" value="{{ $dataSiswa->nama_siswa ?? $student['nama'] }}" disabled class="sp-form-control bg-slate-100 text-slate-500 cursor-not-allowed">
                            <span class="text-[10px] text-slate-400">Nama resmi tidak dapat diubah sendiri.</span>
                        </div>

                        <div>
                            <label class="sp-form-label mb-1">NISN</label>
                            <input type="text" value="{{ $dataSiswa->nisn ?? '-' }}" disabled class="sp-form-control bg-slate-100 text-slate-500 cursor-not-allowed">
                        </div>

                        <div>
                            <label for="tempat_lahir" class="sp-form-label mb-1">Tempat Lahir</label>
                            <input type="text" id="tempat_lahir" name="tempat_lahir" value="{{ old('tempat_lahir', $dataSiswa->tempat_lahir ?? '') }}" class="sp-form-control" placeholder="Kota kelahiran">
                        </div>

                        <div>
                            <label for="tanggal_lahir" class="sp-form-label mb-1">Tanggal Lahir</label>
                            <input type="date" id="tanggal_lahir" name="tanggal_lahir" value="{{ old('tanggal_lahir', $dataSiswa->tanggal_lahir ?? '') }}" class="sp-form-control">
                        </div>

                        <div>
                            <label for="agama" class="sp-form-label mb-1">Agama</label>
                            <select id="agama" name="agama" class="sp-form-control">
                                <option value="">-- Pilih Agama --</option>
                                @foreach(['Islam', 'Kristen', 'Katolik', 'Hindu', 'Buddha', 'Khonghucu'] as $agm)
                                    <option value="{{ $agm }}" @selected(old('agama', $dataSiswa->agama ?? '') === $agm)>{{ $agm }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label for="hp" class="sp-form-label mb-1">No. Handphone / WhatsApp</label>
                            <input type="text" id="hp" name="hp" value="{{ old('hp', $dataSiswa->hp ?? '') }}" class="sp-form-control" placeholder="08xxxxxxxxxx">
                        </div>
                    </div>

                    <div>
                        <label for="alamat" class="sp-form-label mb-1">Alamat Domisili</label>
                        <textarea id="alamat" name="alamat" rows="2" class="sp-form-control" placeholder="Nama jalan, RT/RW, Dusun/Kelurahan">{{ old('alamat', $dataSiswa->alamat ?? '') }}</textarea>
                    </div>
                </div>

                {{-- Data Orang Tua --}}
                <div class="sp-card p-6 space-y-4">
                    <h2 class="sp-section-title text-base border-b border-slate-100 pb-3">Data Orang Tua / Wali</h2>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label for="nama_ayah" class="sp-form-label mb-1">Nama Ayah Kandung</label>
                            <input type="text" id="nama_ayah" name="nama_ayah" value="{{ old('nama_ayah', $dataSiswa->nama_ayah ?? '') }}" class="sp-form-control" placeholder="Nama lengkap ayah">
                        </div>

                        <div>
                            <label for="nama_ibu" class="sp-form-label mb-1">Nama Ibu Kandung</label>
                            <input type="text" id="nama_ibu" name="nama_ibu" value="{{ old('nama_ibu', $dataSiswa->nama_ibu ?? '') }}" class="sp-form-control" placeholder="Nama lengkap ibu">
                        </div>
                    </div>
                </div>

                <div class="flex justify-end gap-3">
                    <a href="{{ route('student.dashboard') }}" class="sp-btn-secondary">
                        Batal
                    </a>
                    <button type="submit" class="sp-btn-primary">
                        <i class="bi bi-floppy"></i>
                        <span>Simpan Perubahan</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection