{% extends 'layout.twig' %}

{% block body %}
    {% include 'nav.twig' %}

    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h4 class="mb-3 text-center">Change Password</h4>
                        <form id="changePasswordForm">
                            <div class="form-group">
                                <label for="current_password">Current Password</label>
                                <input type="password" id="current_password" name="current_password" class="form-control" placeholder="Enter current password" required>
                            </div>
                            <div class="form-group">
                                <label for="new_password">New Password</label>
                                <input type="password" id="new_password" name="new_password" class="form-control" placeholder="Enter new password" required>
                            </div>
                            <div class="form-group">
                                <label for="confirm_password">Confirm New Password</label>
                                <input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="Confirm new password" required>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary">Change Password</button>
                            </div>
                        </form>
                        <div id="message" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
            e.preventDefault();

            let currentPassword = document.getElementById('current_password').value;
            let newPassword = document.getElementById('new_password').value;
            let confirmPassword = document.getElementById('confirm_password').value;

            if (newPassword !== confirmPassword) {
                document.getElementById('message').innerHTML = "<div class='alert alert-danger'>Passwords do not match.</div>";
                return;
            }

            fetch('change_password.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `current_password=${currentPassword}&new_password=${newPassword}&confirm_password=${confirmPassword}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    document.getElementById('message').innerHTML = "<div class='alert alert-success'>Password changed successfully!</div>";
                } else {
                    document.getElementById('message').innerHTML = `<div class='alert alert-danger'>${data.message}</div>`;
                }
            })
            .catch(error => console.error('Error:', error));
        });
    </script>
{% endblock %}