@extends('layouts.customapp')

@section('content')
    <div class="container">
        <div class="row justify-content-center pt-3">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Change Password</div>

                    <div class="card-body">
                        <div id="alert" class="alert d-none"></div>

                        <form id="changePasswordForm" method="POST">
                            @csrf

                            <div class="form-group row pt-2">
                                <label for="new_password" class="col-md-4 col-form-label text-md-right">New Password</label>
                                <div class="col-md-6">
                                    <input id="new_password" type="password" class="form-control" name="password"
                                        minlength="8" maxlength="16" required>
                                </div>
                            </div>

                            <div class="form-group row pt-2">
                                <label for="new_password_confirmation" class="col-md-4 col-form-label text-md-right">Confirm
                                    New Password</label>
                                <div class="col-md-6">
                                    <input id="new_password_confirmation" type="password" class="form-control"
                                        name="new_password_confirmation" minlength="8" maxlength="16" required>
                                </div>
                            </div>

                            <div class="form-group row mb-0 pt-3">
                                <div class="col-md-6 offset-md-4">
                                    <button type="submit" class="btn btn-primary">Change Password</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#changePasswordForm').on('submit', function(e) {
                e.preventDefault();

                var newPassword = $('#new_password').val();
                var newPasswordConfirmation = $('#new_password_confirmation').val();

                if (newPassword !== newPasswordConfirmation) {
                    $('#alert').removeClass('d-none alert-success').addClass('alert-danger')
                        .text('Passwords do not match.');
                    return;
                }

                var form = $(this);
                var formData = form.serialize();

                $.ajax({
                    url: '{{ env('API_URL') }}changepassword', // Ensure this is the correct API endpoint
                    type: 'POST',
                    dataType: 'json',
                    data: formData,
                    headers: {
                        "Authorization": "Bearer " + sessionStorage.getItem('token')
                    },
                    success: function(response) {
                        console.log("AJAX request successful. Response:", response);
                        toastr.success('Password change successful!');
                        window.location.href = "{{ route('login') }}";
                    },
                    error: function(response) {
                        var errorMessage = response.responseJSON.error || 'An error occurred.';
                        $('#alert').removeClass('d-none alert-success').addClass('alert-danger')
                            .text(errorMessage);
                    }
                });
            });
        });
    </script>
@endsection