@csrf
<input type="hidden" name="role" value="{{ \App\Models\User::ROLE_GURU }}">
@if(isset($sekolah) && $sekolah)
    <input type="hidden" name="sekolah_binaan_id" value="{{ $sekolah->id }}" />
@endif
<div style="display:flex;flex-direction:column;gap:12px">
    <div style="min-width:260px;max-width:260px">
        <label style="display:block;font-weight:600;margin-bottom:6px">Role</label>
        <input type="text" value="Guru" disabled style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;background:#f8f9fa;cursor:not-allowed;box-sizing:border-box" />
    </div>

    <div style="display:flex;gap:24px;flex-wrap:wrap">
        <div style="flex:2;min-width:320px">
            <label style="display:block;font-weight:600;margin-bottom:6px">Nama</label>
            <input type="text" name="name" value="{{ old('name', $guru->name ?? '') }}" required style="width:100%;max-width:640px;padding:8px;border:1px solid #e6e6e6;border-radius:6px;box-sizing:border-box" />
            @error('name')<div style="color:#b02a37">{{ $message }}</div>@enderror
        </div>

        <div style="width:260px;min-width:180px">
            <label style="display:block;font-weight:600;margin-bottom:6px">Username</label>
            <input type="text" name="username" value="{{ old('username', $guru->username ?? '') }}" required style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;box-sizing:border-box" />
            @error('username')<div style="color:#b02a37">{{ $message }}</div>@enderror
        </div>
    </div>

    <div style="display:flex;gap:24px;flex-wrap:wrap">
        <div style="flex:1;min-width:240px">
            <label style="display:block;font-weight:600;margin-bottom:6px">Email</label>
            <input type="email" name="email" value="{{ old('email', $guru->email ?? '') }}" required style="width:100%;max-width:640px;padding:8px;border:1px solid #e6e6e6;border-radius:6px;box-sizing:border-box" />
            @error('email')<div style="color:#b02a37">{{ $message }}</div>@enderror
        </div>

        <div style="width:220px;min-width:140px">
            <label style="display:block;font-weight:600;margin-bottom:6px">Password</label>
            <input type="password" name="password" style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;box-sizing:border-box" />
            @error('password')<div style="color:#b02a37">{{ $message }}</div>@enderror
        </div>
    </div>

    <div style="margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:center">
        <button type="submit" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">{{ isset($guru) ? 'Simpan Perubahan' : 'Register' }}</button>
    </div>
</div>

<script>
(function(){
    var form = document.getElementById('registerGuruForm') || document.querySelector('.modal-register-form');
    if(!form) return;
    form.addEventListener('submit', function(e){
        e.preventDefault();
        var url = form.getAttribute('action');
        var formData = new FormData(form);
        fetch(url, {
            method: form.getAttribute('method') || 'POST',
            credentials: 'same-origin',
            headers: {'X-Requested-With':'XMLHttpRequest'},
            body: formData
        }).then(function(res){
            if(res.status === 422) {
                return res.json().then(function(data){
                    var msgs = [];
                    if(data && data.errors){
                        for(var k in data.errors) if(data.errors.hasOwnProperty(k)) msgs.push(data.errors[k].join(' '));
                    }
                    alert(msgs.join('\n') || 'Validasi gagal.');
                });
            }
            if(!res.ok) return res.text().then(function(t){ throw new Error(t||'Terjadi kesalahan'); });
            return res.json().then(function(data){
                if(data && data.success){
                    alert(data.message || 'Berhasil');
                    window.location.reload();
                } else {
                    // if response not json, reload
                    window.location.reload();
                }
            }).catch(function(){ window.location.reload(); });
        }).catch(function(err){ alert(err.message || 'Gagal menyimpan.'); });
    });
})();
</script>