<!-- Content -->

<div class="authentication-wrapper authentication-cover authentication-bg">
    <div class="authentication-inner row">
        <!-- /Left Text -->
        <div class="d-none d-lg-flex col-lg-7 p-0">
            <div class="auth-cover-bg auth-cover-bg-color d-flex justify-content-center align-items-center">
                <img
                        src="<?=site_url('themes/vuexy/img/illustrations/auth-register-illustration-light.png'); ?>"
                        alt="auth-register-cover"
                        class="img-fluid my-5 auth-illustration"
                        data-app-light-img="illustrations/auth-register-illustration-light.png"
                        data-app-dark-img="illustrations/auth-register-illustration-dark.png"
                />

                <img
                        src="<?=site_url('themes/vuexy/img/illustrations/bg-shape-image-light.png'); ?>"
                        alt="auth-register-cover"
                        class="platform-bg"
                        data-app-light-img="illustrations/bg-shape-image-light.png"
                        data-app-dark-img="illustrations/bg-shape-image-dark.png"
                />
            </div>
        </div>
        <!-- /Left Text -->

        <!-- Register -->
        <div class="d-flex col-12 col-lg-5 align-items-center p-sm-5 p-4">
            <div class="w-px-400 mx-auto">
                <!-- Logo -->
                <div class="app-brand mb-4">
                    <a href="index.html" class="app-brand-link gap-2">
                 <span class="app-brand-logo">
                  <img src="<?=site_url('themes/vuexy/img/branding/logo.png')?>"
                </span>
                    </a>
                </div>
                <!-- /Logo -->
                <h3 class="mb-1 fw-bold"><?= lang("App.login_title_signup") ?> 🚀</h3>
                <p class="mb-4">Make your app management easy and fun!</p>

                <?= formAlert() ?>
                <form id="sendForm" class="mb-3" action="<?=site_url("login/store")?>" method="POST">
                    <?= csrf_field() ?>
                    <div class="mb-3">
                        <label for="first_name" class="form-label"><?= lang("App.login_first_name") ?></label>
                        <input
                                type="text"
                                class="form-control"
                                id="first_name"
                                name="first_name"
                                placeholder=<?= lang("App.login_first_name_ph") ?>
                                autofocus
                        />
                    </div>
                    <div class="mb-3">
                        <label for="last_name" class="form-label"><?= lang("App.login_last_name") ?></label>
                        <input
                                type="text"
                                class="form-control"
                                id="last_name"
                                name="last_name"
                                placeholder=<?= lang("App.login_last_name_ph") ?>
                                autofocus
                        />
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label"><?= lang("App.login_email") ?></label>
                        <input type="text" class="form-control" id="email" name="email" placeholder="<?= lang("App.login_email_ph") ?>" />
                    </div>
                    <div class="mb-3 form-password-toggle">
                        <label class="form-label" for="password"><?= lang("App.login_password") ?></label>
                        <div class="input-group input-group-merge">
                            <input
                                    type="password"
                                    id="btn_pass"
                                    class="form-control"
                                    name="password"
                                    placeholder="<?= lang("App.login_password_ph") ?>"
                                    aria-describedby="password"
                                    onclick="pass()"
                            />
                            <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                        </div>
                    </div>

                    <?php if($settings['terms_conditions']??false): ?>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="accept" name="accept" <?= set_value('accept')=='on'?'checked':''?> />
                            <label class="form-check-label" for="accept">
                                I agree to
                                <a href="javascript:void(0);"><?= lang("App.login_accept_terms") ?></a>
                            </label>
                        </div>
                    </div>
                    <?php endif; ?>
                    <button class="btn btn-primary d-grid w-100" onclick="validate()"><?= lang("App.login_register") ?></button>
                </form>

                <p class="text-center">
                    <a href="<?=site_url("login")?>">
                        <span><?= lang("App.login_come_back") ?></span>
                    </a>
                </p>

            </div>
        </div>
        <!-- /Register -->
    </div>
</div>

<!-- / Content -->

<script>
    "use strict";
    function validate(){
        if(<?= $settings['terms_conditions']??0 ?> === 1){
            if(document.getElementById('accept').checked === true){
               load();
            }else{
                toastr.error('<?= lang("App.login_alert_terms") ?>','<?= lang("App.login_alert") ?>!',{positionClass: 'toast-top-center'})
            }
        }else{
            load();
        }
    }
</script>
