<?php

namespace OxygenApp\Views\Frontend\Content;
if (!defined('ABSPATH')) exit;

use OxygenApp\Views\IView;
use OxygenApp\Views\BaseView;
use OxygenApp\Utils\FrontendData;
use OxygenApp\Enums\FrontendDataType;
use OxygenApp\Utils\LanguagesHelper;

class ResetPassword extends BaseView implements IView
{
    public function render(): void
    {
        $routes = FrontendData::getInstance()->getDefaultSettings(FrontendDataType::ARRAY)['routes'] ?? [];

        $reset_passw_title = LanguagesHelper::getInstance()->getLangLabel('reset_passw_title');
        $reset_password_about = LanguagesHelper::getInstance()->getLangLabel('reset_password_about');
        $reset_password_btn = LanguagesHelper::getInstance()->getLangLabel('reset_password_btn');
        $back_to_login = LanguagesHelper::getInstance()->getLangLabel('back_to_login');

        $password_restriction = LanguagesHelper::getInstance()->getLangLabel('password_restriction');
        $password_placeholder = LanguagesHelper::getInstance()->getLangLabel('password_placeholder');
        $reset_password_success_complete_info = LanguagesHelper::getInstance()->getLangLabel('reset_password_success_complete_info');
        $login_btn = LanguagesHelper::getInstance()->getLangLabel('login_btn');

        ?>
        <div class="absolute inset-0 w-full h-full top-0 left-0 z-10 flex items-center justify-center p-4 white-popup hidden resetpass-ui">
            <div class="absolute inset-0 w-full h-full top-0 left-0 z-10 bg-black/20 flex items-center justify-center p-4 white-popup pupup-background-ui">
            </div>
            
            <div class="bg-white z-20 rounded-2xl w-full max-w-md md:max-w-lg lg:max-w-md xl:max-w-sm max-h-full shadow-lg flex flex-col opacity-0 transition-opacity duration-150 popup-content">
                <div class="relative flex items-center justify-center px-4 py-3 border-b">
                    <h2 class="text-xl font-semibold text-gray-600"><?php echo esc_html($reset_passw_title) ?></h2>
                    
                    <a href="#" class="text-gray-600 absolute right-6 text-clack text-xl leading-none close-btn">
                        <img class="w-[20px]" src="<?php echo esc_url(OXYLEAF_APP_PUBLIC_URL . '/app/Views/Frontend/assets/img/close-black.svg'); ?>" alt="">
                    </a>
                </div>

                <div class="overflow-y-auto px-6 py-4 text-gray-600" style="max-height: 70vh;">

                    <div class="form-success">
                        <div class="my-4 text-sm text-green-800 mt-8"><?php echo wp_kses_post($reset_password_success_complete_info) ?></div>
                        <div class="flex w-full my-4">
                            <a href="#<?php echo esc_attr($routes['login']['hash'] ?? '') ?>" class="flex-1 colored-bg-button font-semibold text-sm rounded-full px-4 py-2 text-center cursor-pointer">
                                <?php echo esc_html($login_btn) ?>
                            </a>
                        </div>
                    </div>

                    <form class="oxygenapp-form resetpassw-form" action="">

                        <div class="font-bold flex justify-center my-9 mb-2 text-center"><?php echo wp_kses_post($reset_passw_title) ?></div>

                        <div class="w-full my-5 mb-8">
                            <div class="text-center text-sm"><?php echo wp_kses_post($reset_password_about) ?></div>
                        </div>

                        <div class="flex w-full mt-4">
                            <input type="password" name="password" required minlength="7" class="white-input flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2" placeholder="<?php echo esc_attr($password_placeholder) ?>">
                        </div>
                        <p class="mb-4 mt-2 text-sm text-center text-stone-400"><?php echo esc_html($password_restriction) ?></p>

                        <div>
                            <input type="hidden" name="code" value="">
                        </div>

                        <div class="my-4 text-sm text-red-400 form-error hidden"></div>

                        <div class="flex w-full my-4">
                            <input type="submit" value="<?php echo esc_attr($reset_password_btn); ?>" 
                            class="flex-1 colored-bg-button font-semibold text-sm rounded-full px-4 py-2 text-center cursor-pointer">
                        </div>

                        <div class="my-6 flex justify-center items-center text-sm">
                            <strong><a class="app-default-link" href="#<?php echo esc_attr($routes['login']['hash'] ?? '') ?>"><?php echo esc_html($back_to_login) ?></a></strong>
                        </div>
                    </form>

                </div>
                
            </div>

        </div>


        <?php
    }
}