@extends('domains.common.layouts.layout-empty')

@section("header")
<style>
    body * {
        box-sizing: border-box;
        font-family: 'Noto Sans KR', sans-serif !important;
    }

    .content-page {
        margin: 0;
        padding: 0;
        width: auto;
    }

    .loading-spinner-wrapper {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        z-index: 2000;
        display: none;
        color: white;
    }

    .loading-spinner {
        position: absolute;
        left: 47%;
        top: 42%;
        font-weight: 500;
        text-align: center;
    }

    .loader {
        transform: translate(-50%, -50%);
        width: 3.5rem;
        height: 3.5rem;
        border: 8px solid #414141;
        border-bottom-color: #ffffff;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
        margin-bottom: 0.5rem;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
    body {
        user-select: none;
        overflow-y: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #dde5f4;
        height: 100vh;
    }
    .screen-1 {
        background: #f1f7fe;
        padding: 2em;
        display: flex;
        flex-direction: column;
        border-radius: 30px;
        box-shadow: 0 0 2em #e6e9f9;
        gap: 2em;
    }
    .screen-1 .logo {
        margin-top: -3em;
    }
    .screen-1 input {
        padding: 0.3em;
        outline: none;
        border: none;
        width: 90%;
        margin-left: 0.2em;
        border-radius: 0.3em;
        border: solid 1px rgb(232, 240, 254);
    }
    .screen-1 input::placeholder {
        color: gray;
        font-size: 0.9em;
    }
    .screen-1 input:focus {
        border-color: #4b55a3;
    }
    .screen-1 .email {
        background: white;
        box-shadow: 0 0 2em #e6e9f9;
        padding: 1em;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        border-radius: 20px;
        color: #4d4d4d;
        margin-top: -3em;
    }
    .screen-1 .email ion-icon {
        color: #4d4d4d;
        margin-bottom: -0.2em;
    }
    .screen-1 .password {
        background: white;
        box-shadow: 0 0 2em #e6e9f9;
        padding: 1em;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        border-radius: 20px;
        color: #4d4d4d;
    }
    .screen-1 .password ion-icon {
        color: #4d4d4d;
        margin-bottom: -0.2em;
    }
    .screen-1 .login {
        padding: 1em;
        background: #3e4684;
        color: white;
        border: none;
        border-radius: 30px;
        font-weight: 600;
    }
    .screen-1 .footer {
        display: flex;
        font-size: 0.7em;
        color: #5e5e5e;
        gap: 14em;
        padding-bottom: 10em;
    }
    .screen-1 .footer span {
        cursor: pointer;
    }
    button {
        cursor: pointer;
    }
</style>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
@endsection

@section('main-content')
<div class="container">
    <form method="POST" action="{{ route('user.sign-up-process') }}">
        <div class="screen-1">
            @csrf
            <input type="hidden" id="back-url" name="back_url" value="{{ session('backUrl', null) ?? '' }}">
            <img src="{{ Vite::asset('resources/images/edmclass_logo_admin.svg') }}" alt="{{ \Config::get('app.name') }}" width="300" height="200" class="logo">

            <div class="email"><label for="edm_id">EDM ID</label>
                <div class="sec-2">
                    <ion-icon name="id-card-outline"></ion-icon>
                    <input id="edm_id" class="login-input" name="edm_id" placeholder="Enter your ID" />
                </div>
            </div>

            <div class="password"><label for="name">Name</label>
                <div class="sec-2">
                    <ion-icon name="person-outline"></ion-icon>
                    <input id="name" class="login-input" name="name" placeholder="Enter your name" />
                </div>
            </div>

            <div class="password"><label for="email">Email Address</label>
                <div class="sec-2">
                    <ion-icon name="mail-outline"></ion-icon>
                    <input id="email" class="login-input" name="email" placeholder="Enter your email" />
                </div>
            </div>

            <div class="password"><label for="phone">Phone</label>
                <div class="sec-2">
                    <ion-icon name="phone-portrait-outline"></ion-icon>
                    <input id="phone" class="login-input" name="phone" placeholder="Enter your phone number" />
                </div>
            </div>

            <div class="password"><label for="password">Password</label>
                <div class="sec-2">
                    <ion-icon id="password-toggle" name="eye-off-outline" onclick="passwordToggle(this)"></ion-icon>
                    {{-- <ion-icon name="lock-closed-outline"></ion-icon> --}}
                    <input id="password" class="login-input" type="password" name="password" placeholder="Enter your password" />
                    {{-- <ion-icon class="show-hide" name="eye-off-outline"></ion-icon> --}}
                </div>
            </div>

            <button class="login" type="submit">Confirm</button>
            <button class="login" type="button" onclick="location.href='{{ route('user.sign-in') }}'" style="background-color: darkgray; margin-top: -25px;">Back</button>
            {{-- <button class="login" type="button" onclick="history.back()" style="background-color: darkgray; margin-top: -25px;">Back</button> --}}
        </div>
    </form>
</div>
@endsection

@push("script")
    <script>
        const isSignInAgain = {{ session()->pull("isSignInAgain", 0) }};
        const isSignInFailed = {{ session("isSignInFailed", 0) }};

        window.addEventListener("load", () => {
            if (isSignInAgain)
                alertify.alert("알림", "로그인 후 다시 시도해주세요.");

            if (isSignInFailed)
                alertify.alert("Error", "로그인에 실패했습니다.");

            const targetUrlElem = document.getElementById("back-url");
            if (targetUrlElem.value == null || targetUrlElem.value == '')
                targetUrlElem.value = document.referrer;
        });

        function passwordToggle(elem) {
            if (elem != null) {
                const passwordElem = document.getElementById("password");
                if (elem.name == "eye-outline") {
                    elem.name = "eye-off-outline";
                    passwordElem.setAttribute("type", "password");
                } else {
                    elem.name = "eye-outline";
                    passwordElem.setAttribute("type", "text");
                }
            }
        }

    </script>
@endpush