{{--
    Account profile modal for every signed-in user, opened from the topbar
    account menu. Both forms save through the shared data-ajax handler.
--}}
@auth
@php
    $profileUser = auth()->user();
    $profileRole = $profileUser->is_admin ? 'Administrator' : ($profileUser->isPrincipal() ? 'Principal' : 'Teacher');
    $profileInitials = collect(preg_split('/\s+/', trim($profileUser->name)))
        ->filter()->take(2)->map(fn ($part) => mb_strtoupper(mb_substr($part, 0, 1)))->implode('') ?: 'U';
@endphp
<div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="profileModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg profile-modal">
            <div class="profile-modal-hero">
                <button type="button" class="btn-close profile-modal-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <span class="account-avatar account-avatar-xl">{{ $profileInitials }}</span>
                <div class="min-w-0">
                    <h5 class="modal-title mb-0 text-truncate" id="profileModalTitle">{{ $profileUser->name }}</h5>
                    <div class="profile-modal-meta">
                        <span class="profile-role-chip">{{ $profileRole }}</span>
                        <span class="text-truncate" id="profileModalUsername">{{ $profileUser->username ? '@' . $profileUser->username : 'No username yet' }}</span>
                    </div>
                </div>
            </div>

            <ul class="nav profile-tabs px-4" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="profileTabAccount" data-bs-toggle="tab" data-bs-target="#profilePaneAccount" type="button" role="tab">
                        <i class="bi bi-person me-1"></i>Account
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profileTabSecurity" data-bs-toggle="tab" data-bs-target="#profilePaneSecurity" type="button" role="tab">
                        <i class="bi bi-shield-lock me-1"></i>Security
                    </button>
                </li>
            </ul>

            <div class="modal-body px-4 pb-4 pt-3">
                <div class="tab-content">
                    <div class="tab-pane fade show active" id="profilePaneAccount" role="tabpanel">
                        <dl class="profile-details">
                            <div>
                                <dt>Full name</dt>
                                <dd>{{ $profileUser->name }}</dd>
                            </div>
                            <div>
                                <dt>Email</dt>
                                <dd class="text-break">{{ $profileUser->email }}</dd>
                            </div>
                        </dl>

                        <form method="POST" action="{{ route('profile.username.update') }}" data-ajax="true" data-reset-on-success="false" novalidate>
                            @csrf
                            @method('PUT')
                            <label class="form-label" for="profileUsername">Username</label>
                            <div class="input-group has-validation">
                                <span class="input-group-text">@</span>
                                <input type="text" name="username" id="profileUsername" class="form-control"
                                       value="{{ $profileUser->username }}" placeholder="e.g. jdelacruz"
                                       autocomplete="username" maxlength="60" required>
                            </div>
                            <div class="d-flex justify-content-end mt-3">
                                <button type="submit" class="btn btn-primary px-4">Save username</button>
                            </div>
                        </form>
                    </div>

                    <div class="tab-pane fade" id="profilePaneSecurity" role="tabpanel">
                        <form method="POST" action="{{ route('profile.password.update') }}" data-ajax="true" id="profilePasswordForm" novalidate>
                            @csrf
                            @method('PUT')

                            <div class="mb-3">
                                <label class="form-label" for="profileCurrentPassword">Current password</label>
                                <div class="password-field">
                                    <input type="password" name="current_password" id="profileCurrentPassword" class="form-control"
                                           autocomplete="current-password" required>
                                    <button type="button" class="password-toggle" aria-label="Show password" tabindex="-1"><i class="bi bi-eye"></i></button>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="profileNewPassword">New password</label>
                                <div class="password-field">
                                    <input type="password" name="password" id="profileNewPassword" class="form-control"
                                           placeholder="8+ chars, upper & lower case, number, symbol"
                                           autocomplete="new-password" required>
                                    <button type="button" class="password-toggle" aria-label="Show password" tabindex="-1"><i class="bi bi-eye"></i></button>
                                </div>
                                <div class="password-strength mt-2" id="profilePasswordStrength" data-score="0" aria-hidden="true">
                                    <span></span><span></span><span></span><span></span>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="profileConfirmPassword">Confirm new password</label>
                                <div class="password-field">
                                    <input type="password" name="password_confirmation" id="profileConfirmPassword" class="form-control"
                                           autocomplete="new-password" required>
                                    <button type="button" class="password-toggle" aria-label="Show password" tabindex="-1"><i class="bi bi-eye"></i></button>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary px-4">Update password</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modalEl = document.getElementById('profileModal');
        if (!modalEl) {
            return;
        }

        document.querySelectorAll('[data-profile-tab]').forEach(function (trigger) {
            trigger.addEventListener('click', function () {
                const tabId = trigger.dataset.profileTab === 'security' ? 'profileTabSecurity' : 'profileTabAccount';
                bootstrap.Tab.getOrCreateInstance(document.getElementById(tabId)).show();
                bootstrap.Modal.getOrCreateInstance(modalEl).show();
            });
        });

        // Mirrors the server rule (Password::defaults): length 8+, mixed case,
        // a number and a symbol. One bar segment per group of rules met.
        const newPassword = document.getElementById('profileNewPassword');
        const strength = document.getElementById('profilePasswordStrength');
        function updateStrength() {
            const value = newPassword.value;
            const score = !value ? 0 : [
                value.length >= 8,
                /[a-z]/.test(value) && /[A-Z]/.test(value),
                /\d/.test(value),
                /[^A-Za-z0-9]/.test(value),
            ].filter(Boolean).length;
            strength.dataset.score = score;
        }
        newPassword.addEventListener('input', updateStrength);

        document.addEventListener('ajax:success', function (event) {
            if (event.detail.form.id === 'profilePasswordForm') {
                updateStrength();
            }
        });

        modalEl.addEventListener('hidden.bs.modal', function () {
            const form = document.getElementById('profilePasswordForm');
            form.reset();
            form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
            form.querySelectorAll('.ajax-invalid-feedback').forEach(el => el.remove());
            updateStrength();
        });
    });
</script>
@endauth