<?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 Signup extends BaseView implements IView
{
    public function render(): void
    {
        $routes = FrontendData::getInstance()->getDefaultSettings(FrontendDataType::ARRAY)['routes'] ?? [];

        $signup_popup_title = LanguagesHelper::getInstance()->getLangLabel('signup_popup_title');
        $signup_google_btn = LanguagesHelper::getInstance()->getLangLabel('signup_google_btn');
        $signup_email = LanguagesHelper::getInstance()->getLangLabel('signup_email');
        $email_placeholder = LanguagesHelper::getInstance()->getLangLabel('email_placeholder');
        $password_placeholder = LanguagesHelper::getInstance()->getLangLabel('password_placeholder');
        $signup_login_terms_agreement = LanguagesHelper::getInstance()->getLangLabel('signup_login_terms_agreement');
        $sign_up_form_btn = LanguagesHelper::getInstance()->getLangLabel('sign_up_form_btn');
        $already_registered = LanguagesHelper::getInstance()->getLangLabel('already_registered');
        $login_link_label = LanguagesHelper::getInstance()->getLangLabel('login_link_label');
        $password_restriction = LanguagesHelper::getInstance()->getLangLabel('password_restriction');
        $signup_success_info = LanguagesHelper::getInstance()->getLangLabel('signup_success_info');
        $resend_activation_btn = LanguagesHelper::getInstance()->getLangLabel('resend_activation_btn');
        $resend_activation_info = LanguagesHelper::getInstance()->getLangLabel('resend_activation_info');
        ?>
        <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 signup-ui" data-recaptcha="true">
            <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($signup_popup_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="hidden form-success">
                        <div class="my-4 text-sm text-green-800 mt-8"><?php echo wp_kses_post($signup_success_info) ?></div>
                        <div class="flex w-full my-4">
                            <a href="#" class="flex-1 colored-bg-button font-semibold text-sm rounded-full px-4 py-2 text-center cursor-pointer resend_activation_btn">
                                <?php echo esc_html($resend_activation_btn) ?>
                            </a>
                        </div>
                        <div class="mt-4 text-sm text-green-800 text-center hidden re-send-info"><?php echo wp_kses_post($resend_activation_info) ?></div>
                    </div>

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

                        <?php if (FrontendData::isGoogleSignInActive()): ?>
                        <div class="flex w-full my-4">
                            <a href="#" class="relative w-full flex items-center justify-center hallow-bg-button font-semibold text-sm rounded-full px-4 py-2 text-center signin_google_btn">
                                <svg class="absolute left-4 w-4 h-4 text-gray-500 rtl:right-4 ltr:left-4" enable-background="new 0 0 24 24" id="Layer_1" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M12,5c1.6167603,0,3.1012573,0.5535278,4.2863159,1.4740601l3.637146-3.4699707   C17.8087769,1.1399536,15.0406494,0,12,0C7.392395,0,3.3966675,2.5999146,1.3858032,6.4098511l4.0444336,3.1929321   C6.4099731,6.9193726,8.977478,5,12,5z" fill="#F44336"/><path d="M23.8960571,13.5018311C23.9585571,13.0101929,24,12.508667,24,12   c0-0.8578491-0.093689-1.6931763-0.2647705-2.5H12v5h6.4862061c-0.5247192,1.3637695-1.4589844,2.5177612-2.6481934,3.319458   l4.0594482,3.204834C22.0493774,19.135437,23.5219727,16.4903564,23.8960571,13.5018311z" fill="#2196F3"/><path d="M5,12c0-0.8434448,0.1568604-1.6483765,0.4302368-2.3972168L1.3858032,6.4098511   C0.5043335,8.0800171,0,9.9801636,0,12c0,1.9972534,0.4950562,3.8763428,1.3582153,5.532959l4.0495605-3.1970215   C5.1484375,13.6044312,5,12.8204346,5,12z" fill="#FFC107"/><path d="M12,19c-3.0455322,0-5.6295776-1.9484863-6.5922241-4.6640625L1.3582153,17.532959   C3.3592529,21.3734741,7.369812,24,12,24c3.027771,0,5.7887573-1.1248169,7.8974609-2.975708l-4.0594482-3.204834   C14.7412109,18.5588989,13.4284058,19,12,19z" fill="#00B060"/><path d="M12,23.75c-3.5316772,0-6.7072754-1.4571533-8.9524536-3.7786865C5.2453613,22.4378052,8.4364624,24,12,24   c3.5305786,0,6.6952515-1.5313721,8.8881226-3.9592285C18.6495972,22.324646,15.4981079,23.75,12,23.75z" opacity="0.1"/><polygon opacity="0.1" points="12,14.25 12,14.5 18.4862061,14.5 18.587492,14.25  "/><path d="M23.9944458,12.1470337C23.9952393,12.0977783,24,12.0493774,24,12   c0-0.0139771-0.0021973-0.0274658-0.0022583-0.0414429C23.9970703,12.0215454,23.9938965,12.0838013,23.9944458,12.1470337z" fill="#E6E6E6"/><path d="M12,9.5v0.25h11.7855721c-0.0157471-0.0825195-0.0329475-0.1680908-0.0503426-0.25H12z" fill="#FFFFFF" opacity="0.2"/><linearGradient gradientUnits="userSpaceOnUse" id="SVGID_1_" x1="0" x2="24" y1="12" y2="12"><stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/><stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/></linearGradient><path d="M23.7352295,9.5H12v5h6.4862061C17.4775391,17.121582,14.9771729,19,12,19   c-3.8659668,0-7-3.1340332-7-7c0-3.8660278,3.1340332-7,7-7c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686   c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374l3.637146-3.4699707L19.8414307,2.940979   C17.7369385,1.1170654,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12c0,6.6273804,5.3725586,12,12,12   c6.1176758,0,11.1554565-4.5812378,11.8960571-10.4981689C23.9585571,13.0101929,24,12.508667,24,12   C24,11.1421509,23.906311,10.3068237,23.7352295,9.5z" fill="url(#SVGID_1_)"/><path d="M15.7885132,5.890686C14.6939087,5.1806641,13.4018555,4.75,12,4.75c-3.8659668,0-7,3.1339722-7,7   c0,0.0421753,0.0005674,0.0751343,0.0012999,0.1171875C5.0687437,8.0595093,8.1762085,5,12,5   c1.4018555,0,2.6939087,0.4306641,3.7885132,1.140686c0.1675415,0.1088867,0.3403931,0.2111206,0.4978027,0.333374   l3.637146-3.4699707l-3.637146,3.2199707C16.1289062,6.1018066,15.9560547,5.9995728,15.7885132,5.890686z" opacity="0.1"/><path d="M12,0.25c2.9750366,0,5.6829224,1.0983887,7.7792969,2.8916016l0.144165-0.1375122   l-0.110014-0.0958166C17.7089558,1.0843592,15.00354,0,12,0C5.3725586,0,0,5.3725586,0,12   c0,0.0421753,0.0058594,0.0828857,0.0062866,0.125C0.0740356,5.5558472,5.4147339,0.25,12,0.25z" fill="#FFFFFF" opacity="0.2"/></g><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/><g/></svg>
                                <span class="text-center"><?php echo esc_html($signup_google_btn) ?></span>
                            </a>
                        </div>
                        <?php endif; ?>
                        
                        <?php if (FrontendData::isGoogleSignInActive()): ?>
                        <div class="w-full my-5">
                            <div class="text-center"><?php echo esc_html($signup_email) ?></div>
                        </div>
                        <?php endif; ?>

                        <div class="flex w-full my-4">
                            <input value="" type="email" name="email" required class="white-input flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2" placeholder="<?php echo esc_attr($email_placeholder) ?>">
                        </div>

                        <div class="flex w-full mt-4">
                            <input value="" 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 class="my-6">
                            <label class="app-checkbox">
                                <input checked type="checkbox" name="terms" value="on" required>
                                <span class="text-sm checkbox-text"><?php echo wp_kses_post($signup_login_terms_agreement) ?></span>
                                <span class="checkmark"></span>
                            </label>
                        </div>

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

                        <div class="mb-2 turnstile-ui">
                            
                        </div>

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


                        <div class="my-8 flex justify-center items-center text-sm">
                            <span class="mr-2 rtl:ml-2"><?php echo esc_html($already_registered) ?></span> <strong><a class="app-default-link" href="#<?php echo esc_attr($routes['login']['hash'] ?? '') ?>"><?php echo esc_html($login_link_label) ?></a></strong>
                        </div>
                    </form>
                </div>
            </div>

        </div>


        <?php
    }
}