@extends('layouts.app')

@section('content')
<div class="page-shell">
    <div class="card card-body max-w-xl">
        <h4 class="text-muted mb-4">Change Password</h4>
        <div id="password-status" class="mb-3" style="display:none;"></div>
        <form id="change-password-form" class="space-y-4">
            @csrf
            <div>
                <label class="form-label">Current Password</label>
                <input type="password" name="current_password" class="form-control" required>
            </div>
            <div>
                <label class="form-label">New Password</label>
                <input type="password" name="password" class="form-control" required>
                <small class="text-muted">Minimum 8 characters.</small>
            </div>
            <div>
                <label class="form-label">Confirm New Password</label>
                <input type="password" name="password_confirmation" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary mt-3 submit-btn">Update Password</button>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('change-password-form');
    const statusBox = document.getElementById('password-status');
    const submitBtn = form.querySelector('.submit-btn');

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        statusBox.style.display = 'none';
        statusBox.className = '';

        const formData = new FormData(form);
        const newPassword = formData.get('password');
        const confirmPassword = formData.get('password_confirmation');

        if(newPassword.length < 8){
            showError('New password must be at least 8 characters.');
            return;
        }

        if(newPassword !== confirmPassword){
            showError('New password and confirmation do not match.');
            return;
        }

        submitBtn.disabled = true;
        submitBtn.textContent = 'Updating...';

        fetch('{{ route('password.change.update') }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': formData.get('_token'),
                'Accept': 'application/json'
            },
            body: formData
        })
        .then(response => response.json().then(data => ({ status: response.status, body: data })))
        .then(result => {
            if(result.status === 200){
                showSuccess(result.body.message || 'Password updated successfully.');
                form.reset();
            } else {
                const message = result.body.message || 'Something went wrong.';
                showError(message);
            }
        })
        .catch(() => showError('An unexpected error occurred.'))
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.textContent = 'Update Password';
        });
    });

    function showError(message){
        statusBox.textContent = message;
        statusBox.className = 'alert alert-danger';
        statusBox.style.display = 'block';
    }

    function showSuccess(message){
        statusBox.textContent = message;
        statusBox.className = 'alert alert-success';
        statusBox.style.display = 'block';
    }
});
</script>
@endpush
@endsection