@if(auth()->user()->isDefaultPassword == 1)
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- <script src="{{ URL::asset('build/js/pages/sweetAlert.js') }}"></script> -->
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet">
    <style>
        .swal2-input {
            margin: 5px 0;
        }
        .swal2-confirm{
            background-color: var(--vz-primary) !important;
            padding: 0.5rem 0.25rem  !important;
            font-size: .875rem  !important;
            --vz-btn-border-radius: var(--vz-border-radius-sm);
            font-weight: 500 !important
        }
        .swal2-cancel{
            background-color:#f3f6f9 !important;
            padding: 0.5rem 0.25rem  !important;
            font-size: .875rem  !important;
            color: #343a40  !important;
            --vz-btn-border-radius: var(--vz-border-radius-sm);
            font-weight: 500 !important
        }
        .swal2-actions{
            margin: 0 !important;
        }
        .swal2-title{
            padding: 20px 20px 0 !important;
            font-size: 16px !important;
            font-weight: 500 !important;
            text-align:left !important;
        }
        .swal2-html-container{
            margin: 1em 1em 0em 1em !important;
        }
        .subt{
            font-size: 12px !important;
            font-weight: 500 !important;
            text-align:left !important;
            color: #919da9
        }
        .errormsgchangepwd{
            text-align:left !important;
            font-size:13px !important;
            color:red !important;
        }
        .swal2-popup{
            padding-bottom: 10px !important;
        }
        div:where(.swal2-container) div:where(.swal2-actions){
            /* justify-content: flex-end !important; */
            
        }
        .swal2-actions{
            margin: 1em 1em 1em 1em !important;
        }
    </style>
<script>
    Swal.fire({
                title: 'Change Password<br><span class="subt">First time login change password to safeguard your access.</span>',
                html: `
                <div class="mb-3" style="text-align:left; font-size:14px">
                    <label for="name" class="form-label abc" style="margin-bottom: 0 !important">New Password*</label>
                    <input id="newPassword" type="password" class="swal2-input form-control" placeholder="">
                </div>
                <div style="text-align:left; font-size:14px">
                    <label for="name" class="form-label" style="margin-bottom: 0 !important">Confirm Password*</label>
                    <input id="confirmPassword" type="password" class="swal2-input form-control" placeholder="">
                </div>
                <span class="errormsgchangepwd" id="newpassword-error-1" style="display:none;">error</span>
                `,
                confirmButtonText: 'Confirm',
                showCancelButton: true,
                cancelButtonText: 'Cancel',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showCancelButton: false,
                showCloseButton: false,
                preConfirm: () => {
                    const newPassword = Swal.getPopup().querySelector('#newPassword').value;
                    const confirmPassword = Swal.getPopup().querySelector('#confirmPassword').value;
                    const newpassword_error_1 = document.getElementById('mynewpassword-error-1Paragraph');

                    if (!newPassword || !confirmPassword) {
                        document.getElementById('newpassword-error-1').innerHTML = '*All fields are required';
                        document.getElementById('newpassword-error-1').style.display = 'block';
                        // Swal.showValidationMessage('Both fields are required');
                        return false; // Returning false prevents the modal from closing
                    }

                    if (newPassword !== confirmPassword) {
                        document.getElementById('newpassword-error-1').innerHTML = 'Passwords do not match';
                        document.getElementById('newpassword-error-1').style.display = 'block';
                        // Swal.showValidationMessage('Passwords do not match');
                        return false; // Returning false prevents the modal from closing
                    }

                    if (newPassword.length < 8 || confirmPassword.length < 8) {
                        document.getElementById('newpassword-error-1').innerHTML = 'Must be more than 8 characters';
                        document.getElementById('newpassword-error-1').style.display = 'block';
                        // Swal.showValidationMessage('Passwords do not match');
                        return false; // Returning false prevents the modal from closing
                    }

                    // If passwords match, return the new password
                    return newPassword;
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    const newPassword = result.value;
                    var formData = {
                        id: "{{ auth()->user()->id }}",
                        newPassword: result.value,
                        _token: "{{ csrf_token() }}" // Add CSRF token for security
                    };

                    $.ajax({
                        url: "/users/profile/ajax-update-password",
                        type: 'POST',
                        data: formData,
                        success: function(response) {
                            if(response.status == 'error') {
                                Swal.fire('Error', response.message, 'error');
                                return;
                            }else if(response.status == 'success') {
                                Swal.fire('', 'Password has been updated!', 'success');
                            }
 
                        },
                        error: function(xhr) {
                            Swal.fire('Error', 'There was an error submitting the data.', 'error');
                        }
                    });

                    // Swal.fire('Success', 'Password changed successfully!', 'success');
                }
            });
</script>
@endif