@extends('layouts.guru')
@section('title', 'Profil Saya')

@section('topbar')
<div class="gr-topbar-inner">
    <div>
        <div class="gr-page-back">
            <a href="{{ route('guru.dashboard') }}">← Dashboard</a>
        </div>
        <div class="gr-greeting-name">Profil Saya</div>
        <div class="gr-greeting-sub">Kelola informasi akun dan keamanan login Anda.</div>
    </div>
</div>
@endsection

@section('content')

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

    {{-- Informasi Akun --}}
    <div class="al-card" style="margin-bottom:14px">
        <div class="al-card-head">
            <span class="al-card-title">Informasi Akun</span>
        </div>
        <div class="al-card-body">

            {{-- Avatar besar --}}
            <div style="display:flex; align-items:center; gap:16px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid #f3f4f6">
                <div id="avatarCircle" style="width:60px; height:60px; border-radius:50%; background:#ede9fe; color:#7c3aed; font-size:22px; 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:700; color:#111827">{{ $user->name }}</div>
                    <div style="font-size:13px; color:#6b7280; margin-top:2px">Guru · MathAssess SD</div>
                </div>
            </div>

            <form id="formProfil" action="{{ route('guru.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 btn-purple" id="btnSimpan">Simpan Perubahan</button>
            </form>
        </div>
    </div>

    {{-- Ganti Password --}}
    <div class="al-card">
        <div class="al-card-head">
            <span class="al-card-title">Ganti Password</span>
            <span style="font-size:12px; color:#9ca3af">Kosongkan jika tidak ingin mengganti</span>
        </div>
        <div class="al-card-body">
            <form id="formPassword" action="{{ route('guru.profil.update') }}" method="POST">
                @csrf
                {{-- Kirim nama & email juga agar validasi tidak error (field required di controller) --}}
                <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">Password Baru</label>
                    <input type="password" name="password" class="al-input" id="inputPassword" placeholder="Minimal 8 karakter">
                    <div class="al-field-error" id="errPassword"></div>
                </div>
                <div style="margin-bottom:20px">
                    <label class="al-label">Konfirmasi Password</label>
                    <input type="password" name="password_confirmation" class="al-input" placeholder="Ulangi password 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 btn-purple" id="btnGantiPass">Ganti Password</button>
            </form>
        </div>
    </div>

</div>

@endsection

@section('scripts')
<script>
function submitAjax(formEl, toastEl, btnEl, onSuccess) {
    formEl.addEventListener('submit', function (e) {
        e.preventDefault();

        // Reset error
        formEl.querySelectorAll('.al-field-error').forEach(el => el.textContent = '');
        toastEl.style.display = 'none';

        btnEl.disabled = true;
        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 {
                // Validation errors (422)
                if (data.errors) {
                    Object.entries(data.errors).forEach(([field, msgs]) => {
                        const el = formEl.querySelector('#err' + field.charAt(0).toUpperCase() + field.slice(1).replace('_', ''));
                        if (el) el.textContent = msgs[0];
                    });
                }
                toastEl.className = 'al-toast al-toast--err';
                toastEl.textContent = data.message || 'Periksa kembali isian Anda.';
                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 = btnEl.dataset.label;
        });
    });
}

// Simpan label awal tombol
document.getElementById('btnSimpan').dataset.label   = 'Simpan Perubahan';
document.getElementById('btnGantiPass').dataset.label = 'Ganti Password';

submitAjax(
    document.getElementById('formProfil'),
    document.getElementById('toastProfil'),
    document.getElementById('btnSimpan'),
    function (data) {
        // Update avatar + nama di sidebar & header secara live
        const nama = document.getElementById('inputName').value.trim();
        const inisial = nama.charAt(0).toUpperCase();
        document.getElementById('avatarName').textContent  = nama;
        document.getElementById('avatarCircle').textContent = inisial;
        document.getElementById('hiddenName').value = nama;
        // Sidebar user name (al-user-name) jika ada
        const sidebarName = document.querySelector('.al-user-name');
        if (sidebarName) sidebarName.textContent = nama;
        const sidebarAvatar = document.querySelector('.al-avatar');
        if (sidebarAvatar) sidebarAvatar.textContent = inisial;
    }
);

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