@extends('layouts.main-layout')
@section('footer', true)

@section('content')

    <div class="py-6 sm:py-20 px-4 flex-1 flex items-center">
        <div class="max-w-[364px] mx-auto">

            <svg class="mx-auto" width="244" height="120" viewBox="0 0 244 120" fill="none"
                 xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_829_33551)">
                    <g clip-path="url(#clip1_829_33551)">
                        <path d="M0.470703 103.578V105.118H6.5107V119.088H8.2707V105.118H14.3107V103.578H0.470703Z"
                              fill="#292728"/>
                        <path
                            d="M30.8211 103.578V109.978H20.8611V103.578H19.1211V119.088H20.8611V111.508H30.8211V119.088H32.5611V103.578H30.8211Z"
                            fill="#292728"/>
                        <path
                            d="M39.3906 103.578V119.088H51.3106L51.5706 117.568H41.1306V111.678H50.6106V110.158H41.1306V105.108H51.1106V103.578H39.3906Z"
                            fill="#292728"/>
                        <path d="M63.5098 103.778V107.308H68.5598V119.088H73.5398V107.308H78.5598V103.778H63.5098Z"
                              fill="#2E70B3"/>
                        <path d="M87.9002 103.778H82.9102V119.088H87.9002V103.778Z" fill="#2E70B3"/>
                        <path d="M92.1816 103.778V107.308H97.2416V119.088H102.212V107.308H107.242V103.778H92.1816Z"
                              fill="#2E70B3"/>
                        <path
                            d="M116.451 103.778V112.638C116.451 115.078 117.621 115.878 119.261 115.878C120.981 115.878 121.881 114.988 121.881 112.638V103.778H126.871V112.668C126.871 117.118 124.391 119.438 119.141 119.438C113.891 119.438 111.471 117.238 111.471 112.658V103.778H116.451Z"
                            fill="#2E70B3"/>
                        <path
                            d="M135.88 114.478C136.2 115.488 136.99 116.248 138.99 116.248C140.76 116.248 141.31 115.718 141.31 114.948C141.31 114.138 140.82 113.658 137.95 113.158C132.29 112.168 131.48 110.238 131.48 108.218C131.48 105.188 134.33 103.428 138.51 103.428C143.6 103.428 145.65 105.788 145.85 108.048H141.01C140.84 107.368 140.41 106.578 138.51 106.578C137.16 106.578 136.52 107.018 136.52 107.738C136.52 108.458 137.16 108.778 139.53 109.208C145.32 110.248 146.44 112.058 146.44 114.368C146.44 117.288 143.98 119.418 138.78 119.418C133.58 119.418 131.36 117.238 130.9 114.478H135.88Z"
                            fill="#2E70B3"/>
                        <path d="M157.611 103.578V105.118H163.651V119.088H165.421V105.118H171.451V103.578H157.611Z"
                              fill="#292728"/>
                        <path
                            d="M178 110.698H182.9C185.49 110.698 186.79 109.798 186.79 107.798C186.79 105.968 185.49 105.088 183 105.088H178V110.698ZM178 112.208V119.088H176.26V103.578H183.37C186.43 103.578 188.59 104.948 188.59 107.728C188.59 109.568 187.72 110.938 185.72 111.438C186.85 111.728 188.18 112.558 188.18 115.248V115.898C188.18 117.128 188.18 118.458 188.36 119.088H186.58C186.36 118.408 186.4 117.158 186.4 115.958V115.438C186.4 112.948 185.42 112.208 182.58 112.208H178.01H178Z"
                            fill="#292728"/>
                        <path
                            d="M196.15 103.578V112.408C196.15 116.688 198.72 117.888 201.2 117.888C204.27 117.888 206.08 116.408 206.08 112.408V103.578H207.83V112.338C207.83 117.478 205.2 119.418 201.13 119.418C197.06 119.418 194.4 117.378 194.4 112.538V103.588H196.15V103.578Z"
                            fill="#292728"/>
                        <path
                            d="M214.779 114.618C215.379 116.568 216.779 117.958 219.969 117.958C223.159 117.958 224.499 116.648 224.499 115.088C224.499 113.438 223.599 112.398 219.399 111.698C214.939 110.948 213.779 109.568 213.779 107.438C213.779 104.818 216.259 103.268 219.549 103.268C224.509 103.268 225.629 105.878 225.799 107.378H224.019C223.679 106.238 222.979 104.738 219.509 104.738C217.149 104.738 215.569 105.548 215.569 107.258C215.569 108.628 216.199 109.528 219.889 110.138C225.399 111.058 226.299 112.788 226.299 114.898C226.299 117.308 224.369 119.408 219.849 119.408C215.669 119.408 213.469 117.488 212.959 114.618H214.759H214.779Z"
                            fill="#292728"/>
                        <path d="M229.691 103.578V105.118H235.731V119.088H237.491V105.118H243.531V103.578H229.691Z"
                              fill="#292728"/>
                        <path
                            d="M123.41 42.048C120.57 42.408 117.85 42.678 115.24 42.878C115.27 52.468 116.05 63.078 118.58 67.778C122.8 75.618 125.52 79.988 133.86 81.848C139.47 83.098 142.81 82.148 147.11 80.618C158.54 72.578 166.02 59.298 166.02 44.258C166.02 38.208 164.81 32.438 162.62 27.188C161.71 29.248 161.22 30.818 157.18 34.008C151.45 38.528 142.3 39.638 123.4 42.048"
                            fill="#2E70B3"/>
                        <path
                            d="M120.839 10.788C118.279 17.118 117.099 21.368 116.029 28.208C118.329 28.158 120.359 28.078 121.799 27.978C127.429 27.578 136.629 26.668 144.669 24.658C148.949 23.588 155.189 20.218 157.399 17.958C150.499 8.57797 139.999 2.01797 127.939 0.28797C125.679 2.22797 122.639 6.35797 120.849 10.788"
                            fill="#2E70B3"/>
                        <path
                            d="M104.411 10.488C108.231 6.35797 109.401 5.24797 110.981 4.05797C112.651 2.63797 114.401 1.33797 116.231 0.167969C101.161 1.98797 88.4109 11.338 81.8809 24.358C82.5109 24.948 83.6709 25.698 84.5109 26.018C89.0509 27.718 90.3009 27.598 95.1209 27.918C96.4509 23.838 98.2309 19.998 100.391 16.448C101.521 14.158 102.841 12.178 104.401 10.488"
                            fill="#2E70B3"/>
                        <path
                            d="M98.8299 71.708C96.2899 66.228 94.6499 63.088 93.9499 58.498C92.9299 54.268 92.3799 49.828 92.3799 45.258C92.3799 44.368 92.3999 43.498 92.4399 42.618C89.2699 42.238 86.8099 41.748 85.2099 41.258C82.1399 40.308 79.4899 38.258 77.8199 36.718C77.3999 39.178 77.1699 41.698 77.1699 44.268C77.1699 65.718 92.3799 83.608 112.6 87.768C112.13 87.398 111.66 87.028 111.21 86.638C106.63 83.228 101.37 77.168 98.8399 71.708"
                            fill="#2E70B3"/>
                    </g>
                </g>
                <defs>
                    <clipPath id="clip0_829_33551">
                        <rect width="243.06" height="119.27" fill="white" transform="translate(0.470703 0.167969)"/>
                    </clipPath>
                    <clipPath id="clip1_829_33551">
                        <rect width="243.06" height="119.27" fill="white" transform="translate(0.470703 0.167969)"/>
                    </clipPath>
                </defs>
            </svg>

            @if(session()->has('email'))
                <a class="flex w-max mt-8 font-medium gap-4 items-center text-lg text-primary-600" href="{{ route('portal.account.invite') }}">
                    <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.38802 12.7714L1.55469 6.93807L7.38802 1.10474" stroke="#0284C7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    <span>Back</span>
                </a>

                <p class="mt-8 text-center text-2xl text-titus-primary">
                    A code has been emailed to
                    <span class="font-bold">
                        {{ session('email') }}
                    </span>
                </p>

                <form action="{{route('portal.account.login')}}" method="post">
                    @csrf
                    <div class="mt-6">
                        <span class="text-gray-900 text-sm font-medium">Enter code</span>
                        <input hidden type="email" name="email" value="{{ session('email') }}" />
                        <input type="text" name="code" maxlength="6" placeholder="000000"
                               class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                    </div>
                    <x-inputs.error name="code"/>

                    <button type="submit"
                            class="mt-6 w-full text-white bg-titus-primary hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5">
                        Sign in
                    </button>
                </form>
            @else
                <h1 class="text-center mt-8 text-2xl text-titus-primary">Welcome to our portal</h1>

                @if(session()->has('invalid_code_or_expire'))
                    <span class="block text-sm text-red-500 mt-8">{{ session('invalid_code_or_expire') }}</span>
                @endif

                <p class="mt-8 text-titus-primary">To access your user area, please enter your email and follow to receive your code.</p>

                <form action="{{route('portal.account.invite')}}" method="post">
                    @csrf
                    <div class="mt-6">
                        <span class="text-gray-900 text-sm font-medium">Email address</span>
                        <input type="email" name="email"
                               class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                    </div>
                    <x-inputs.error name="email"/>

                    <button type="submit"
                            class="mt-6 w-full text-white bg-titus-primary hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5">
                        Send me a login code
                    </button>
                </form>
            @endif


        </span>
    </div>
@endsection