@include('layouts.paces-topbar')

<div class="modal fade" id="updateDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Update Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="updateDetailsForm">
                    <div class="mb-3">
                        <label class="form-label" for="update_fname">Name</label>
                        <input type="text" class="form-control" id="update_fname" value="{{ Auth::user()->fname }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="update_email">Email</label>
                        <input type="email" class="form-control" id="update_email" value="{{ Auth::user()->email }}">
                    </div>
                    <button type="submit" class="btn btn-primary w-100" id="updateDetailsBtn">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="changePasswordModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Change Password</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="changePasswordForm">
                    <div class="mb-3">
                        <label class="form-label" for="current_password">Current Password</label>
                        <input type="password" class="form-control" id="current_password">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="new_password">New Password</label>
                        <input type="password" class="form-control" id="new_password">
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="new_password_confirmation">Confirm New Password</label>
                        <input type="password" class="form-control" id="new_password_confirmation">
                    </div>
                    <button type="submit" class="btn btn-primary w-100" id="changePasswordBtn">Update Password</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var detailsForm = document.getElementById('updateDetailsForm');
    if (detailsForm) {
        detailsForm.addEventListener('submit', function (e) {
            e.preventDefault();
            var btn = document.getElementById('updateDetailsBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Saving...';
            $.ajax({
                url: "{{ route('admin_update_profile') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    fname: $('#update_fname').val(),
                    email: $('#update_email').val()
                },
                success: function (res) {
                    btn.disabled = false;
                    btn.innerHTML = 'Save Changes';
                    Swal.fire({icon: 'success', title: res.message || 'Profile updated successfully'});
                    $('#updateDetailsModal').modal('hide');
                },
                error: function (xhr) {
                    btn.disabled = false;
                    btn.innerHTML = 'Save Changes';
                    Swal.fire({icon: 'error', title: xhr.responseJSON?.message || 'Something went wrong'});
                }
            });
        });
    }

    var passwordForm = document.getElementById('changePasswordForm');
    if (passwordForm) {
        passwordForm.addEventListener('submit', function (e) {
            e.preventDefault();
            var newPass = $('#new_password').val();
            var confirmPass = $('#new_password_confirmation').val();
            if (newPass !== confirmPass) {
                Swal.fire({icon: 'error', title: 'Passwords do not match'});
                return;
            }
            var btn = document.getElementById('changePasswordBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Updating...';
            $.ajax({
                url: "{{ route('admin_update_password') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    current_password: $('#current_password').val(),
                    password: newPass,
                    password_confirmation: confirmPass
                },
                success: function (res) {
                    btn.disabled = false;
                    btn.innerHTML = 'Update Password';
                    Swal.fire({icon: 'success', title: res.message || 'Password updated successfully'});
                    $('#changePasswordModal').modal('hide');
                    passwordForm.reset();
                },
                error: function (xhr) {
                    btn.disabled = false;
                    btn.innerHTML = 'Update Password';
                    Swal.fire({icon: 'error', title: xhr.responseJSON?.message || 'Something went wrong'});
                }
            });
        });
    }
});
</script>