@extends('layouts.siswa')
@section('title', 'Profil Saya')
@section('total-poin', $totalPoin)

@section('topbar')
<div class="si-topbar-left">
    <a href="{{ route('siswa.dashboard') }}" style="font-size:13px; color:#9ca3af; text-decoration:none">← Beranda</a>
    <div class="si-page-title">Profil Saya 👤</div>
    <div class="si-page-sub">Kelola nama dan kata sandi akunmu.</div>
</div>
<div class="si-topbar-right">
    <div class="si-poin-chip">⭐ {{ $totalPoin }} Poin</div>
</div>
@endsection

@section('content')

<div style="max-width:520px">

    {{-- Informasi Akun --}}
    <div style="background:#fff; border-radius:14px; padding:22px; margin-bottom:14px; border:1px solid #f3f4f6">
        <div style="display:flex; align-items:center; gap:16px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid #f3f4f6">
            <div id="avatarCircle" style="width:56px; height:56px; border-radius:50%; background:#ede9fe; color:#7c3aed; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0">
                {{ strtoupper(substr($user->name, 0, 1)) }}
            </div>
            <div>
                <div id="avatarName" style="font-size:16px; font-weight:800; color:#111827">{{ $user->name }}</div>
                <div style="font-size:13px; color:#9ca3af; margin-top:2px">Siswa · MathAssess SD</div>
                <div style="font-size:12px; color:#fbbf24; margin-top:2px">⭐ {{ $totalPoin }} Poin</div>
            </div>
        </div>
        <form id="formProfil" action="{{ route('siswa.profil.update') }}" method="POST">
            @csrf
            <div style="margin-bottom:14px">
                <label class="al-label">Nama Lengkap</label>
                <input type="text" name="name" id="inputName" class="al-input" value="{{ $user->name }}" required>
                <div class="al-field-error" id="errName"></div>
            </div>
            <div style="margin-bottom:20px">
                <label class="al-label">Email</label>
                <input type="email" name="email" class="al-input" value="{{ $user->email }}" required>
                <div class="al-field-error" id="errEmail"></div>
            </div>
            <div id="toastProfil" class="al-toast" style="display:none"></div>
            <button type="submit" class="btn-purple-sm" id="btnSimpan" style="padding:10px 20px">Simpan Perubahan</button>
        </form>
    </div>

    {{-- Ganti Password --}}
    <div style="background:#fff; border-radius:14px; padding:22px; border:1px solid #f3f4f6">
        <div style="font-size:15px; font-weight:800; color:#111827; margin-bottom:16px">🔒 Ganti Kata Sandi</div>
        <form id="formPassword" action="{{ route('siswa.profil.update') }}" method="POST">
            @csrf
            <input type="hidden" name="name" id="hiddenName" value="{{ $user->name }}">
            <input type="hidden" name="email" value="{{ $user->email }}">
            <div style="margin-bottom:14px">
                <label class="al-label">Kata Sandi Baru</label>
                <input type="password" name="password" id="inputPassword" class="al-input" placeholder="Minimal 8 karakter">
                <div class="al-field-error" id="errPassword"></div>
            </div>
            <div style="margin-bottom:20px">
                <label class="al-label">Ulangi Kata Sandi</label>
                <input type="password" name="password_confirmation" class="al-input" placeholder="Ulangi kata sandi baru">
                <div class="al-field-error" id="errPasswordConf"></div>
            </div>
            <div id="toastPassword" class="al-toast" style="display:none"></div>
            <button type="submit" class="btn-purple-sm" id="btnGantiPass" style="padding:10px 20px">Ganti Kata Sandi</button>
        </form>
    </div>

</div>

@endsection

@section('scripts')
<script>
function submitAjax(formEl, toastEl, btnEl, onSuccess) {
    formEl.addEventListener('submit', function (e) {
        e.preventDefault();
        formEl.querySelectorAll('.al-field-error').forEach(el => el.textContent = '');
        toastEl.style.display = 'none';
        btnEl.disabled = true;
        const label = btnEl.textContent;
        btnEl.textContent = 'Menyimpan…';
        fetch(formEl.action, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
            body: new FormData(formEl),
        })
        .then(res => res.json().then(data => ({ ok: res.ok, data })))
        .then(({ ok, data }) => {
            if (ok) {
                toastEl.className = 'al-toast al-toast--ok';
                toastEl.textContent = data.message || 'Berhasil disimpan.';
                toastEl.style.display = 'block';
                if (onSuccess) onSuccess(data);
            } else {
                if (data.errors) {
                    Object.entries(data.errors).forEach(([field, msgs]) => {
                        const key = field.charAt(0).toUpperCase() + field.slice(1).replace('_','');
                        const el  = formEl.querySelector('#err' + key);
                        if (el) el.textContent = msgs[0];
                    });
                }
                toastEl.className = 'al-toast al-toast--err';
                toastEl.textContent = data.message || 'Periksa kembali isian kamu.';
                toastEl.style.display = 'block';
            }
        })
        .catch(() => {
            toastEl.className = 'al-toast al-toast--err';
            toastEl.textContent = 'Terjadi kesalahan. Coba lagi.';
            toastEl.style.display = 'block';
        })
        .finally(() => { btnEl.disabled = false; btnEl.textContent = label; });
    });
}

submitAjax(
    document.getElementById('formProfil'),
    document.getElementById('toastProfil'),
    document.getElementById('btnSimpan'),
    () => {
        const nama = document.getElementById('inputName').value.trim();
        document.getElementById('avatarName').textContent   = nama;
        document.getElementById('avatarCircle').textContent = nama.charAt(0).toUpperCase();
        document.getElementById('hiddenName').value = nama;
        const sidebarN = document.querySelector('.si-user-name');
        const sidebarA = document.querySelector('.si-user-avatar');
        if (sidebarN) sidebarN.textContent = 'Halo, ' + nama.split(' ')[0] + '!';
        if (sidebarA) sidebarA.textContent = nama.charAt(0).toUpperCase();
    }
);

submitAjax(
    document.getElementById('formPassword'),
    document.getElementById('toastPassword'),
    document.getElementById('btnGantiPass'),
    () => {
        document.getElementById('inputPassword').value = '';
        document.querySelector('[name=password_confirmation]').value = '';
    }
);
</script>
@endsection