@extends('layouts.frontend.master_auth')
@section('title', 'Set 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;
            z-index: 10;
            background: white;
            padding: 0.25rem;
            border-radius: 0.25rem;
        }

        .password-toggle:hover {
            color: #4A5568;
        }
        
        .password-input-wrapper input {
            padding-right: 3rem;
        }
    </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>

        <h2 class="text-2xl font-semibold text-gray-900 mb-8">Register a new account</h2>

        <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">Set 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('set.password') }}" id="setPasswordForm">
                @csrf
                <input type="hidden" name="registration_token" value="{{ $user->registration_token }}">
                <input type="hidden" name="isForgetPassword" value="{{$forgetPassword}}">

                <div class="password-input-wrapper">
                    <input type="password"
                           name="set_password"
                           id="set_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="set_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('set_password', this)">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" id="eye-icon-password">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 hidden" id="eye-slash-icon-password">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                        </svg>
                    </span>
                </div>

                <div class="password-input-wrapper">
                    <input type="password"
                           name="set_confirm_password"
                           id="set_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="set_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('set_confirm_password', this)">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" id="eye-icon-confirm">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        </svg>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 hidden" id="eye-slash-icon-confirm">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                        </svg>
                    </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 eyeIcon = element.querySelector('#eye-icon-' + (inputId === 'set_password' ? 'password' : 'confirm'));
            const eyeSlashIcon = element.querySelector('#eye-slash-icon-' + (inputId === 'set_password' ? 'password' : 'confirm'));

            if (input.type === 'password') {
                input.type = 'text';
                eyeIcon.classList.add('hidden');
                eyeSlashIcon.classList.remove('hidden');
            } else {
                input.type = 'password';
                eyeIcon.classList.remove('hidden');
                eyeSlashIcon.classList.add('hidden');
            }
        }

        $(document).ready(function () {
            $("#setPasswordForm").validate({
                rules: {
                    set_password: {
                        required: true,
                        minlength: 8,
                        maxlength: 32,
                    },
                    set_confirm_password: {
                        required: true,
                        minlength: 8,
                        maxlength: 32,
                        equalTo: "#set_password"
                    },
                },
                messages: {
                    set_password: {
                        required: "Password is required",
                        minlength: "Password must be at least 8 characters",
                        maxlength: "Password cannot exceed 32 characters"
                    },
                    set_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 set 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 set password. Please try again.');
                            }

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

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