<?= $this->extend(config('Auth')->views['layout']) ?>

<?= $this->section('title') ?><?= lang('Auth.register') ?> <?= $this->endSection() ?>

<?= $this->section('main') ?>

<!-- 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/safekat/login/auth-login-illustration-light.png') ?>"
                        alt="auth-register-cover"
                        class="img-fluid my-5 auth-illustration"
                />

                <img
                        src="<?= site_url('themes/vuexy/img/illustrations/bg-shape-image-light.png'); ?>"
                        alt="auth-register-cover"
                        class="platform-bg"
                />
            </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/safekat/logos/sk-logo.png') ?>"
                </span>
                    </a>
                </div>
                <!-- /Logo -->
                <h3 class="mb-1 fw-bold"><?= lang('Auth.register') ?></h3>

                <?php if (session('error') !== null) : ?>
                    <div class="alert alert-danger" role="alert"><?= session('error') ?></div>
                <?php elseif (session('errors') !== null) : ?>
                    <div class="alert alert-danger" role="alert">
                        <?php if (is_array(session('errors'))) : ?>
                            <?php foreach (session('errors') as $error) : ?>
                                <?= $error ?>
                                <br>
                            <?php endforeach ?>
                        <?php else : ?>
                            <?= session('errors') ?>
                        <?php endif ?>
                    </div>
                <?php endif ?>

                <form id="sendForm" class="mb-3" action="<?= url_to('register') ?>" method="POST">
                    <?= csrf_field() ?>

                    <!-- Email -->
                    <div class="mb-3">
                        <label for="floatingEmailInput" class="form-label"><?= lang('Auth.email') ?></label>
                        <input
                                type="email"
                                class="form-control"
                                id="floatingEmailInput"
                                name="email"
                                inputmode="email"
                                autocomplete="email"
                                placeholder="<?= lang('Auth.email') ?>"
                                value="<?= old('email') ?>"
                                required
                        />
                    </div>

                    <!-- Username -->
                    <div class="mb-3">
                        <label for="floatingUsernameInput" class="form-label"><?= lang('Auth.username') ?></label>
                        <input
                                type="text"
                                class="form-control"
                                id="floatingUsernameInput"
                                name="username"
                                inputmode="text"
                                autocomplete="username"
                                placeholder=<?= lang('Auth.username') ?>
                                value="<?= old('username') ?>"
                                required
                        />
                    </div>


                    <!-- Password -->
                    <div class="mb-3 form-password-toggle">
                        <label class="form-label" for="floatingPasswordInput"><?= lang('Auth.password') ?></label>
                        <div class="input-group input-group-merge">
                            <input
                                    type="password"
                                    class="form-control"
                                    id="floatingPasswordInput"
                                    name="password"
                                    inputmode="text"
                                    autocomplete="new-password"
                                    placeholder="<?= lang('Auth.password') ?>"
                                    onclick="pass()"
                                    required
                            />
                            <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                        </div>
                    </div>

                    <!-- Password (Again) -->
                    <div class="mb-3 form-password-toggle">
                        <label class="form-label" for="floatingPasswordConfirmInput"><?= lang('Auth.passwordConfirm') ?></label>
                        <div class="input-group input-group-merge">
                            <input
                                    type="password"
                                    class="form-control"
                                    id="floatingPasswordConfirmInput"
                                    name="password_confirm"
                                    inputmode="text"
                                    autocomplete="new-password"
                                    placeholder="<?= lang('Auth.passwordConfirm') ?>"
                                    onclick="pass()"
                                    required
                            />
                            <span class="input-group-text cursor-pointer"><i class="ti ti-eye-off"></i></span>
                        </div>
                    </div>
                    <button class="btn btn-primary d-grid w-100"><?= lang('Auth.register') ?></button>
                </form>

                <p class="text-center"><?= lang('Auth.haveAccount') ?>
                    <a href="<?= url_to('login') ?>">
                        <span><?= lang('Auth.login') ?></span>
                    </a>
                </p>

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

<?= $this->endSection() ?>
