@extends('layouts.master')
@section('title', 'Change Password')
@section('content')
    <div class="flex justify-center bg-amber-50 py-12 min-h-screen">
        <div class="w-full max-w-md bg-white rounded-lg shadow-lg p-6">
            <h2 class="text-2xl font-bold text-amber-900 text-center mb-4">
                <i class="fas fa-key mr-2"></i> Change Password
            </h2>
            <p class="text-sm text-amber-500 text-center mb-6">
                Enter your current password and new password to update your account.
            </p>
            <form id="passwordForm" class="space-y-3">
                @csrf

                <!-- Current Password -->
                <div class="relative">
                    <label for="current_password" class="block text-xs font-medium text-amber-900 mb-1">Current Password</label>
                    <input id="current_password" type="password" name="current_password"
                           class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500 pr-10">
                    <button type="button" class="absolute right-2 top-[2.25rem] transform -translate-y-1/2 text-amber-700 toggle-password">
                        <i class="fas fa-eye-slash"></i>
                    </button>
                    <p id="error-current_password" class="mt-2 text-sm font-bold text-red-600 hidden"></p>
                </div>

                <!-- New Password -->
                <div class="relative">
                    <label for="password" class="block text-xs font-medium text-amber-900 mb-1">New Password</label>
                    <input id="password" type="password" name="password"
                           class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500 pr-10">
                    <button type="button" class="absolute right-2 top-[2.25rem] transform -translate-y-1/2 text-amber-700 toggle-password">
                        <i class="fas fa-eye-slash"></i>
                    </button>
                    <p id="error-password" class="mt-2 text-sm font-bold text-red-600 hidden"></p>
                </div>

                <!-- Confirm Password -->
                <div class="relative">
                    <label for="password_confirmation" class="block text-xs font-medium text-amber-900 mb-1">Confirm Password</label>
                    <input id="password_confirmation" type="password" name="password_confirmation"
                           class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500 pr-10">
                    <button type="button" class="absolute right-2 top-[2.25rem] transform -translate-y-1/2 text-amber-700 toggle-password">
                        <i class="fas fa-eye-slash"></i>
                    </button>
                    <p id="error-password_confirmation" class="mt-2 text-sm font-bold text-red-600 hidden"></p>
                </div>

                <!-- Submit Button -->
                <div>
                    <button type="submit" id="passwordBtn"
                            class="w-full bg-amber-700 hover:bg-amber-800 text-white text-sm font-semibold py-1 px-2 rounded transition duration-150 flex items-center justify-center">
                        <svg id="btnSpinner" class="animate-spin h-4 w-4 mr-2 text-white hidden"
                             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor"
                                  d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                        </svg>
                        <span id="btnText">Update Password</span>
                    </button>
                </div>
            </form>

            <p id="successMessage" class="mt-3 text-sm text-green-600 hidden"></p>

            <div class="mt-4 text-center">
                <a href="{{ route('biller.dashboard') }}" class="text-sm text-amber-700 hover:underline">
                    Back to Dashboard
                </a>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Toggle eye button for all password fields
            document.querySelectorAll('.toggle-password').forEach(button => {
                button.addEventListener('click', function() {
                    const input = this.previousElementSibling;
                    const icon = this.querySelector('i');

                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    } else {
                        input.type = 'password';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    }
                });
            });

            // Ajax form submit
            $('#passwordForm').on('submit', function(e){
                e.preventDefault();

                // Clear errors
                $('[id^=error-]').text('').addClass('hidden');

                let $btn = $('#passwordBtn');
                let $spinner = $('#btnSpinner');
                let $btnText = $('#btnText');

                $btn.prop('disabled', true);
                $spinner.removeClass('hidden');
                $btnText.text('Processing…');

                $.ajax({
                    url: "{{ route('password.change') }}",
                    method: "POST",
                    data: $(this).serialize(),
                    success: function(res){
                        if(res.success){
                            $('#successMessage').text(res.message).removeClass('hidden');
                            setTimeout(() => window.location.href = res.redirect_url, 1500);
                        }
                    },
                    error: function(xhr){
                        if(xhr.responseJSON && xhr.responseJSON.errors){
                            let errors = xhr.responseJSON.errors;
                            for (let field in errors) {
                                $('#error-' + field).text(errors[field][0]).removeClass('hidden');
                            }
                        } else if(xhr.responseJSON && xhr.responseJSON.message){
                            $('#error-current_password').text(xhr.responseJSON.message).removeClass('hidden');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
                    },
                    complete: function(){
                        $btn.prop('disabled', false);
                        $spinner.addClass('hidden');
                        $btnText.text('Update Password');
                    }
                });
            });
        });
    </script>
@endpush