@page "/questionnaire"
@using Otchinslator.Components.Layout
@layout OtchislenieLayout
@using BlazorPageScript
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

<PageTitle>Анкета | Отчислятор 3000</PageTitle>
<PageScript Src="./Components/Pages/Questionnaire.razor.js"/>

<style>
    .knobs, .layer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .button-custom {
        position: relative;
        top: 50%;
        width: 5rem;
        height: 2.6rem;
        margin: -20px auto 0 auto;
        overflow: hidden;
        margin-top: 4px;
    }

    .checkbox-custom {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 3;
    }

    .knobs {
        z-index: 2;
    }

    #button-custom-1 .knobs:before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 2.1rem;
        height: 2.1rem;
        color: #fff;
        text-align: center;
        font-size: 22px;
        padding: 1px 12px 12px 11px;
        background-color: var(--fallback-p, oklch(var(--p)/var(--tw-bg-opacity)));
        border-radius: 50%;
        transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    }

    #button-custom-2 .knobs:before {
        content: '';
        position: absolute;
        top: 4px;
        left: 4px;
        width: 2.1rem;
        height: 2.1rem;
        color: #fff;
        text-align: center;
        font-size: 22px;
        padding: 0 0 1px 1px;
        background-color: var(--fallback-p, oklch(var(--p)/var(--tw-bg-opacity)));
        border-radius: 50%;
        transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    }

    #button-custom-1 .checkbox-custom:checked + .knobs:before {
        content: '$';
        left: 42px;
        background-color: #89E592;
    }

    #button-custom-2 .checkbox-custom:checked + .knobs:before {
        content: '🏠︎';
        left: 40px;
        background-color: pink;
    }
</style>

@* <dialog id="exit_modal" class="modal modal-bottom sm:modal-middle"> *@
@*     <div class="modal-box"> *@
@*         <h3 class="text-lg font-bold">Сервис отчислений</h3> *@
@*         <p class="py-4">Вы уверены что хотите выйти? Прогресс не сохранится</p> *@
@*         <div class="modal-action"> *@
@*             <form method="dialog"> *@
@*                 <button class="btn btn-error">На главную</button> *@
@*                 <button class="btn btn-primary">Закрыть</button> *@
@*             </form> *@
@*         </div> *@
@*     </div> *@
@* </dialog> *@

<dialog id="info_modal" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box">
        <h3 class="text-lg font-bold">Сервис отчислений</h3>
        <p class="py-4">Вам нужно заполнить эти данные для шапки заявления</p>
        <div class="modal-action">
            <form method="dialog">
                <button class="btn">Закрыть</button>
            </form>
        </div>
    </div>
</dialog>

<div class="relative">
    <div
        class="text-center font-bold text-4xl md:text-5xl w-max absolute left-1/2 -top-1/4 transform -translate-x-1/2 italic">
        <br>Кто ты воин?
    </div>
    <div class="flex flex-col space-y-4 w-96">
        <div class="card rounded-badge bg-base-200 p-4">
            <div class="join rounded-full justify-center">
                <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Баклан"/>
                <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Спец"/>
                <input class="join-item btn bg-white w-1/3" type="radio" name="options" aria-label="Маг"/>
            </div>
            <h2 class="text-center text-2xl justify-center my-4">Курс?</h2>
            <div class="join rounded-full justify-center">
                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="1"/>
                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="2"/>
                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="3"/>
                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="4"/>
                <input class="join-item btn bg-white w-1/5" type="radio" name="kurs" aria-label="5"/>
            </div>
            <h2 class="text-center text-2xl justify-center my-4">Направление</h2>
            <select id="speciality" class="select rounded-full justify-center bg-white border-none">
                <option value="0" disabled selected>Выберите направление</option>
            </select>
            <div class="flex justify-center gap-12 items-center">
                <div>
                    <h2 class="text-center text-2xl justify-center my-4">Платник?</h2>
                    <div class="button-custom r" id="button-custom-1">
                        <input type="checkbox" id="paidCheckbox" class="checkbox-custom"/>
                        <div class="knobs"></div>
                        <div class="layer rounded-full" style="background-color: white;"></div>
                    </div>
                </div>
                <div>
                    <h2 class="text-center text-2xl justify-center my-4">Заочник?</h2>
                    <div class="button-custom r" id="button-custom-2">
                        <input type="checkbox" id="ochnoCheckbox" class="checkbox-custom"/>
                        <div class="knobs"></div>
                        <div class="layer rounded-full" style="background-color: white;"></div>
                    </div>
                </div>
            </div>
            <h2 class="text-center text-2xl justify-center my-4">Номер</h2>
            <div class="relative rounded-full justify-center mx-auto">
                <div class="absolute top-2 left-0 flex items-center pl-3">
                    <span class="text-2xl">+7</span>
                    <div class="h-6 border-l-2 border-slate-200 ml-2"></div>
                </div>
                <input
                    type="tel"
                    class="h-12 w-[14rem] bg-white rounded-full placeholder:text-slate-400 text-slate-700 text-2xl pr-3 pl-14 py-2 transition duration-300 focus:outline-none focus:bg-primary"
                    placeholder="999 999 99 99"
                    pattern="[0-9]*"
                    inputmode="numeric"
                    maxlength="12"
                    id="phoneNumberInput"/>
            </div>
        </div>
    </div>

    <div class="join w-full mt-4 flex gap-2">
        <a href="/"
                class="relative btn btn-primary rounded-full flex-grow-0 w-[3rem] h-[3rem]">
            <img class="absolute p-3" src="img/exit.svg" alt=""/>
        </a>
        <a href="/statement" class="btn rounded-full btn-primary flex-grow w-30">Продолжим</a>
        <button onclick="info_modal.showModal()" class="btn btn-primary rounded-full flex-grow-0 w-[3rem]">?</button>
    </div>
</div>
