@extends('layouts.frontend.master')

@section('title', 'Change Password')

@push('css')
    <style>
        input::placeholder {
            color: transparent;
        }

        label {
            line-height: 1;
        }

        input:not(:placeholder-shown) + label {
            top: -8px;
            left: 0.2rem;
            font-size: 1rem;
            transform: translateY(-4px) scale(0.75);
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            color: black;
        }

        .custom-hover:hover {
            background-color: black !important;
        }

        .password-input-wrapper {
            position: relative;
            margin-bottom: 1.5rem;
        }

        .password-toggle {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #718096;
        }

        .password-toggle:hover {
            color: #4A5568;
        }
    </style>
@endpush

@section('content')
    <div class="flex flex-col items-center justify-center min-h-screen bg-white">
        <div class="mb-4">
            <img src="{{ asset('frontend/logo/bau-logo.png') }}" alt="Logo" class="w-12 h-12">
        </div>

        <div class="w-full max-w-md p-8 bg-white rounded-xl shadow-sm border border-gray-100">
            <h3 class="text-[#009245] text-2xl font-semibold mb-2">Change Password</h3>

            <p class="text-gray-600 text-sm mb-8">
                Set a strong password to secure account. Remember password should be more than 8 characters
            </p>

            <form method="POST" action="{{ route('change.password') }}" id="changePasswordForm">
                @csrf

                <div class="password-input-wrapper">
                    <input type="password"
                           name="change_password"
                           id="change_password"
                           class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400 peer"
                           placeholder=" "/>
                    <label for="change_password"
                           class="absolute text-sm text-gray-500 duration-300 transform scale-75 -translate-y-4 bg-white px-2 peer-placeholder-shown:px-0 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-gray-900 left-1 top-2 origin-[0] cursor-text">
                        Password
                    </label>
                    <span class="password-toggle" onclick="togglePassword('change_password', this)">
                        <i class="far fa-eye"></i>
                    </span>
                </div>

                <div class="password-input-wrapper">
                    <input type="password"
                           name="change_confirm_password"
                           id="change_confirm_password"
                           class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400 peer"
                           placeholder=" "/>
                    <label for="change_confirm_password"
                           class="absolute text-sm text-gray-500 duration-300 transform scale-75 -translate-y-4 bg-white px-2 peer-placeholder-shown:px-0 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-gray-900 left-1 top-2 origin-[0] cursor-text">
                        Confirm Password
                    </label>
                    <span class="password-toggle" onclick="togglePassword('change_confirm_password', this)">
                        <i class="far fa-eye"></i>
                    </span>
                </div>

                <button type="submit" class="w-full py-3 text-white bg-green-600 rounded-lg custom-hover">
                    Confirm
                </button>
            </form>
        </div>
    </div>
@endsection

@push('js')
    <x-generic-validation-error-toastr/>
    <script>
        function togglePassword(inputId, element) {
            const input = document.getElementById(inputId);
            const icon = element.querySelector('i');

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

        $(document).ready(function () {
            $("#changePasswordForm").validate({
                rules: {
                    change_password: {
                        required: true,
                        minlength: 8,
                        maxlength: 32,
                    },
                    change_confirm_password: {
                        required: true,
                        minlength: 8,
                        maxlength: 32,
                        equalTo: "#change_password"
                    },
                },
                messages: {
                    change_password: {
                        required: "Password is required",
                        minlength: "Password must be at least 8 characters",
                        maxlength: "Password cannot exceed 32 characters"
                    },
                    change_confirm_password: {
                        required: "Confirm Password is required",
                        minlength: "Confirm Password must be at least 8 characters",
                        maxlength: "Confirm Password cannot exceed 32 characters",
                        equalTo: "Passwords do not match"
                    },
                },
                errorElement: 'p',
                errorClass: 'mt-1 text-sm text-red-500',
                errorPlacement: function (error, element) {
                    error.insertAfter(element.parent());
                },
                highlight: function (element) {
                    $(element)
                        .addClass("border-red-500")
                        .removeClass("border-gray-300")
                        .siblings('label')
                        .addClass("text-red-500")
                        .removeClass("text-gray-500");
                },
                unhighlight: function (element) {
                    $(element)
                        .removeClass("border-red-500")
                        .addClass("border-gray-300")
                        .siblings('label')
                        .removeClass("text-red-500")
                        .addClass("text-gray-500");
                },
                submitHandler: function (form) {
                    const submitBtn = $("button[type='submit']");
                    submitBtn.prop("disabled", true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');

                    $.ajax({
                        url: $(form).attr('action'),
                        type: 'POST',
                        data: $(form).serialize(),
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                if (response.redirectTo) {
                                    window.location.href = response.redirectTo;
                                }
                            } else {
                                toastr.error(response.message || 'Failed to change password');
                                submitBtn.prop("disabled", false).html('Confirm');
                            }
                        },
                        error: function(xhr) {
                            const response = xhr.responseJSON;

                            if (response.errors) {
                                Object.keys(response.errors).forEach(function(key) {
                                    toastr.error(response.errors[key][0]);
                                });
                            } else if (response.message) {
                                toastr.error(response.message);
                            } else {
                                toastr.error('Failed to change password. Please try again.');
                            }

                            submitBtn.prop("disabled", false).html('Confirm');
                        },
                        complete: function() {
                            submitBtn.prop("disabled", false).html('Confirm');
                        }
                    });

                    return false;
                }
            });
        });
    </script>
@endpush