@extends('operator.layout')

@section('title','Register Guru')

@section('content')
    <div style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04);max-width:720px;margin:0 auto">
        <div style="padding:12px 16px;border-bottom:1px solid #f1f1f1;font-weight:700;background:#fafafa;display:flex;align-items:center;gap:8px">
            <i class="bi bi-person-plus" style="font-size:16px;color:var(--header-bg);margin-right:8px"></i>
            <span class="card-title">Register Guru</span>
        </div>
        <div class="card-body" style="padding:16px">
            <!-- Notification (top-right) -->
            <div id="notify" style="display:none;position:fixed;right:20px;top:20px;z-index:10000;padding:12px;border-radius:8px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08)"></div>

            <!-- Success Modal -->
            <div id="registerSuccessModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:9999">
                <div style="background:#fff;border-radius:8px;max-width:420px;width:100%;padding:18px;position:relative;box-shadow:0 8px 24px rgba(0,0,0,0.12)">
                    <button id="closeRegisterSuccess" style="position:absolute;right:12px;top:8px;border:none;background:transparent;font-size:18px;cursor:pointer;color:#666">&times;</button>
                    <h3 style="margin-top:0;margin-bottom:8px">Berhasil</h3>
                    <div id="registerSuccessMessage" style="color:#333"></div>
                    <div style="margin-top:12px;text-align:right">
                        <button id="okRegisterSuccess" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">OK</button>
                    </div>
                </div>
            </div>

            <form id="registerGuruForm" method="POST" action="{{ route('operator.register.guru.store') }}">
                @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 }}" />
                    <div style="margin-bottom:8px">
                        <label style="display:block;font-weight:600;margin-bottom:6px">Sekolah (akan otomatis dipasang ke data guru)</label>
                        <input type="text" value="{{ $sekolah->nama_sekolah }}" readonly style="width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px;background:#f8f9fa" />
                    </div>
                @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') }}" 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') }}" 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') }}" 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" required 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">
                        <button type="submit" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">Register</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
        <script>
            (function () {
                var notify = document.getElementById('notify');
                var successModal = document.getElementById('registerSuccessModal');
                var successMsg = document.getElementById('registerSuccessMessage');
                var closeBtn = document.getElementById('closeRegisterSuccess');
                var okBtn = document.getElementById('okRegisterSuccess');
                var form = document.getElementById('registerGuruForm');

                function showNotify(message, bg) {
                    if (!notify) return;
                    notify.textContent = message;
                    notify.style.background = bg || '#d9534f';
                    notify.style.display = 'block';
                    setTimeout(function () { notify.style.display = 'none'; }, 5000);
                }

                function openSuccess(message) {
                    if (!successModal || !successMsg) return;
                    successMsg.textContent = message || 'Berhasil';
                    successModal.style.display = 'flex';
                }

                // If server flashed status (non-AJAX), still show modal
                @if(session('status'))
                    openSuccess("{{ session('status') }}");
                @endif

                // If there are server-side errors rendered after redirect, show toast
                @if(session('error'))
                    showNotify("{{ session('error') }}", '#d9534f');
                @elseif($errors->any())
                    showNotify('Registrasi gagal. Periksa kembali input.', '#d9534f');
                @endif

                if (closeBtn) closeBtn.addEventListener('click', function () { if (successModal) successModal.style.display = 'none'; });
                if (okBtn) okBtn.addEventListener('click', function () { if (successModal) successModal.style.display = 'none'; window.location.reload(); });
                if (successModal) successModal.addEventListener('click', function (e) { if (e.target === successModal) successModal.style.display = 'none'; });

                if (form) {
                    form.addEventListener('submit', function (e) {
                        e.preventDefault();
                        var url = form.getAttribute('action');
                        var formData = new FormData(form);

                        fetch(url, {
                            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(' '));
                                        }
                                    }
                                    showNotify(msgs.join(' ') || 'Validasi gagal.', '#d9534f');
                                });
                            }

                            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) {
                                    openSuccess(data.message || 'Guru berhasil didaftarkan.');
                                    form.reset();
                                } else {
                                    showNotify((data && data.message) ? data.message : 'Gagal menyimpan data.', '#d9534f');
                                }
                            }).catch(function () {
                                // if response is not json (e.g., redirect), try reloading
                                window.location.reload();
                            });
                        }).catch(function (err) {
                            showNotify(err.message || 'Gagal menyimpan data.', '#d9534f');
                        });
                    });
                }
            })();
        </script>

@endsection