<?php
session_start();

if (isset($_SESSION['adm_accountId']) && isset($_SESSION['adm_accessToken'])) {
    header('Location: admin/home');
    exit();
} else if (isset($_SESSION['usr_email']) && isset($_SESSION['usr_accessToken']) && isset($_SESSION['usr_accountId']) && (!empty($_SESSION['usr_accountId']))) {
    header('Location: user/account');
    exit();
}

$referral_code = $_GET['ref'] ?? "";
?>

<!DOCTYPE html>
<html lang="zxx" dir="ltr">

<head>
    
    <!-- Standard Meta -->
    <meta charset="utf-8">
    <title>Create Account - Rocketta</title>
    <meta name="keywords" content="sign in, create account, sign up, auth, dashboard, trade">
    <meta name="description"
        content="Create your account for a dashboard and overview the activities of your trading bot. ">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap-select-country.min.css" />
    <link rel="stylesheet" href="build/css/intlTelInput.css">
    <style type="text/css">
    .iti {
        position: relative;
        display: block !important;
    }

    #countryName {
        width: 100% !important;
        display: block;
        width: 100%;
        height: calc(2.25rem + 2px);
        padding: .375rem .75rem;
        font-size: 1rem;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }
    </style>
    
      <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <!-- Include jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <?php require_once("header2.php"); ?>

    <main>
        <!-- section content begin -->
        <div class="uk-section uk-padding-remove-vertical" style="background-color: #f7f7f7;">
            <div class="uk-container uk-container-expand">
                <div class="uk-grid">
                    <div class="uk-width-3-5@m">
                        <div class="uk-margin-large-top uk-width-4-5@m">
                            <span class="uk-label uk-label-warning in-margin-bottom20@s">Explore the product</span>
                            <h1 class="uk-margin-top">Introduction to <span class="in-highlight">Rocketta</span>
                            </h1>
                            <p class="uk-text-lead uk-text-muted">Join us for an interactive, introductory Rocketta
                                experience. We'll show you how to create Rockets, connect your exchange, copy pro
                                traders and build AIs.</p>
                            <div class="uk-container uk-margin-large-top uk-margin-large-bottom">
                                <div class="uk-grid uk-grid-large uk-flex uk-flex-middle" data-uk-grid>
                                    <div class="uk-width-1-2@m">
                                        <div class="in-equity-video">
                                            <img class="uk-border-rounded uk-width-1-1" src="img/in-lazy.gif"
                                                data-src="img/login-bg.jpg" alt="sample-images" width="533" height="355"
                                                data-uk-img>
                                            <div class="uk-position-center">
                                                <a href="#link" data-uk-toggle>
                                                    <div class="in-play-button"></div>
                                                    <i class="fas fa-play"></i>
                                                </a>
                                            </div>
                                            <div class="uk-flex-top" data-uk-modal>
                                                <div
                                                    class="uk-modal-dialog uk-width-auto uk-margin-auto-vertical in-iframe">
                                                    <button class="uk-modal-close-outside" type="button"
                                                        data-uk-close></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="uk-width-expand@m">
                                        <span class="uk-label uk-label-warning in-margin-bottom20@s">Can't wait</span>
                                        <p class="uk-text-lead uk-text-muted">Watch a quick demo</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="uk-width-expand@m uk-flex uk-flex-middle">
                        <div class="uk-grid uk-flex-center">
                            <div class="uk-text-center"
                                style="margin: 40px auto 0px;position: relative;box-sizing: border-box;padding-bottom: 50px;">
                                <div style="top: 120px;">
                                    <div
                                        style="max-width: 450px;border-radius: 40px;box-shadow: rgb(0 128 143 / 25%) 0px 8px 12px 0px;background-color: rgb(255, 255, 255);padding-left: 24px;padding-right: 24px;padding-top: 32px;padding-bottom: 32px;">

                                        <!-- logo begin -->
                                        <a class="uk-logo" href="index">
                                            <h4>Create your account</h4>
                                        </a>
                                        <!-- logo end -->
                                        <p class="uk-text-small uk-margin-small-top uk-margin-medium-bottom">Kindly
                                            enter
                                            your details below to create your Rocketta account.</p>
                                        <!-- login form begin -->
                                        
                                        <div style="display: none;" id="feedbackPrompt"></div>
                                        <div class="uk-grid uk-form">
                                            <div class="uk-margin-small uk-width-1-2 uk-inline">
                                                <span class="uk-form-icon uk-form-icon-flip fas fa-user fa-sm"></span>
                                                <input class="uk-input uk-border-rounded" id="fname" value=""
                                                    type="text" placeholder="First name">
                                            </div>
                                            <div class="uk-margin-small uk-width-1-2 uk-inline" style="margin-top: 0px !important;">
                                                <span class="uk-form-icon uk-form-icon-flip fas fa-user fa-sm"></span>
                                                <input class="uk-input uk-border-rounded" id="lname" value=""
                                                    type="text" placeholder="Last name">
                                            </div>

                                            <div class="invalid-feedback fname_feedback">First name is required</div>
                                            <div class="invalid-feedback lname_feedback">Last name is required</div>

                                            <div class="uk-margin-small uk-width-1-1 uk-inline">
                                                <span
                                                    class="uk-form-icon uk-form-icon-flip fas fa-envelope fa-sm"></span>
                                                <input class="uk-input uk-border-rounded" id="email" value=""
                                                    type="email" placeholder="Email">
                                                <div class="invalid-feedback email_feedback">Email is required</div>
                                            </div>
                                            <div class="uk-margin-small uk-width-1-1 uk-inline">
                                                <select id="countryName" class="selectpicker countrypicker"></select>
                                            </div>
                                            <div class="uk-margin-small uk-width-1-1 uk-inline">
                                                <span class="uk-form-icon uk-form-icon-flip fas fa-lock1 fa-sm" style="pointer-events:unset;cursor:pointer;">
                                                    <i class="far fa-eye" id="togglePassword"></i>
                                                </span>
                                                <input class="uk-input uk-border-rounded" id="password" value="" type="password" placeholder="Password">
                                                <div class="invalid-feedback password_feedback">Password is required</div>
                                            </div>
                                            <div class="uk-margin-small uk-width-1-1 uk-inline">
                                                <input type="tel" class="form-control" id="phone_number">
                                                <div class="invalid-feedback phone_number_feedback">Phone number cannot
                                                    be empty.</div>
                                            </div>
                                            <div class="uk-margin-small uk-width-1-1 uk-inline">
                                                <input type="text" class="form-control" id="referral_code" placeholder="Referral code (optional)" value="<?= $referral_code; ?>" <?= !empty($referral_code) ? "readonly" : "";?>>
                                            </div>
                                                 <div class="g-recaptcha" data-sitekey="6LdYt34pAAAAAJEAHScRQ_nUdgNBEn2QpW8sOJxW"></div>
                                       
                                          
                                            <div class="uk-margin-small uk-width-1-1">
                                                <button id="create-account"
                                                    class="uk-button uk-width-1-1 uk-button-primary uk-border-rounded uk-float-left"
                                                    type="submit">Register <span style="display: none;"
                                                        class="button_spinner spinner-border spinner-border-sm"
                                                        role="status" aria-hidden="false"></span></button>
                                            </div>
                                        </div>
                                        <span class="uk-text-small">Already have an account? <a
                                                class="uk-button uk-button-text" href="login">Log in
                                                here</a></span>
                                                
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- section content end -->
    </main>
    <?php require_once("footer.php"); ?>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <!-- javascript -->
    <script src="js/vendors/uikit.min.js"></script>
    <script src="js/vendors/utilities.min.js"></script>
    <script src="js/config-theme.js"></script>
    <script src="build/js/intlTelInput.min.js"></script>
    <script src="build/js/intlTelInput-jquery.min.js"></script>
    <script src="js/bootstrap-select-country.min.js"></script>
    <script src="js/create-account.js"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    </body>

</html>