@push('head.bottom')
    {!! htmlScriptTagJsApi() !!}
@endpush

<x-layouts.master>

    <x-sections.header-generic-page>
        <x-slot name="title">
            <h1 class="h2 text-white">Register</h1>
        </x-slot>
    </x-sections.header-generic-page>

    <div class="bg-gradient-to-b from-grey-200 to-grey-100">
        <div class="prose-container max-w-lg py-20 prose px-8 md:px-0">
            <h3>Join Premier Plus</h3>
            <p class="lead">
                Register now and get FREE access and updates via email to the best Christian podcasts, radio, sermons and music!
            </p>

            <x-alert
                class="mb-4"
                type="error"
                :message="session('error')"
            />


            <form method="POST" 
                x-data="{
                    loginInProcess: false,
                    checkValidity(){
                        if( $refs.firstName.checkValidity() && $refs.lastName.checkValidity() && $refs.email.checkValidity() && $refs.password.checkValidity() ){
                            this.loginInProcess = true;
                        }
                    }
                }"
            >
                @csrf

                <div class="flex flex-col gap-4">

                    <x-form.input
                        class="w-full"
                        label="First name"
                        name="first_name"
                        value="{{ old('first_name') }}"
                        error="true"
                        required
                        autocomplete="first_name"
                        autofocus
                        x-ref="firstName"
                    />

                    <x-form.input
                        class="w-full"
                        label="Last name"
                        name="last_name"
                        value="{{ old('last_name') }}"
                        error="true"
                        required
                        autocomplete="last_name"
                        x-ref="lastName"

                    />

                    <x-form.input
                        class="w-full"
                        label="Phone"
                        name="phone"
                        type="number"
                        error="true"
                        value="{{ old('phone') }}"
                        autocomplete="phone"
                    >
                        <div class="my-2 italic text-grey-600">Please provide your number if you wouldn't mind getting a call from us.</div>
                    </x-form.input>

                    <x-form.input
                        class="w-full"
                        label="Email"
                        name="email"
                        type="email"
                        error="true"
                        value="{{ old('email') }}"
                        required
                        autocomplete="email"
                        autofocus
                        x-ref="email"

                    />

                    <x-form.input
                        class="w-full"
                        label="Password"
                        name="password"
                        type="password"
                        error="true"
                        value="{{ old('password') }}"
                        required
                        autocomplete="new-password"
                        x-ref="password"

                    >
                        <div class="my-2 italic text-grey-600">Please use eight or more characters</div>
                    </x-form.input>

                    <x-form.input
                        class="w-full"
                        label="Confirm Password"
                        name="password_confirmation"
                        type="password"
                        error="true"
                        value="{{ old('password_confirmation') }}"
                        required
                        autocomplete="new-password"
                        x-ref="confirmPassword"

                    />

                    <div class="my-2" x-data="{
                        usa: 0,
                        init(){
                            let that = this;
                            let interval = setInterval(function(){
                                if (typeof window.geotargetly_country_code === 'function') {
                                    that.usa = geotargetly_country_code() == 'US' ? 1 : 0;
                                    clearInterval(interval);
                                }
                            }, 100);
                        }
                    }">

                        <input type="hidden" name="is_usa_based" :value="usa" >

                        <template x-if="usa">
                            <div>
                                Important! When you submit this form, your data will be held in the USA by Premier
                                Insight, a 501 (c)(3) charity registered at 6111 W Plano Pkwy 2200, Plano, TX 75093,
                                USA and in the United Kingdom by Premier Christian Communications Ltd, registered at
                                Unit 6 April Court, Sybron Way, Crowborough, TN6 3DZ, United Kingdom. Please do not
                                submit this form if you are not happy with this.
                            </div>
                        </template>

                        <template x-if="!usa">
                            <div>
                                <x-form.checkbox
                                    name="gdpr_confirm"
                                    :checked="old('gdpr_confirm')"
                                >
                                    Yes, I want content that helps me live out my faith and grow in my relationship with
                                    God. I’m keen to get this from Premier and others, receive unique offers and hear
                                    about ways I can support by email.
                                </x-form.checkbox>

                                <div class="my-2 italic text-grey-600">
                                    You can stop receiving content anytime and will be able to choose specific lists to
                                    receive or not as you prefer. Learn more about how we safeguard your data and the
                                    types of organisations we work with in our <a href="https://premier.org.uk/privacy">Privacy Policy</a>.
                                </div>
                            </div>
                        </template>

                        <template x-if="appRequest">
                            <input type="hidden" name="app_request" :value="true">
                        </template>

                    </div>

                    {!! htmlFormSnippet() !!}
                    <x-form.error class="block my-1" name="g-recaptcha-response" />

                    <button
                        class="btn-purple w-full mt-6"
                        type="submit"
                        @click="checkValidity"
                    >
                        <span :class="loginInProcess && 'spinner'" x-text="loginInProcess ? '' : 'Register'"></span>

                    </button>
                </div>
            </form>

        </div>
    </div>


     <template x-if="!appRequest">
        <x-sections.footer></x-sections.footer>
    </template>
    <script>
        (function(g,e,o,t,a,r,ge,tl,y){
            t=g.getElementsByTagName(e)[0];y=g.createElement(e);y.async=true;
            y.src='https://{{ config('services.geotargetly.domain') }}/gl?id={{ config('services.geotargetly.id') }}&refurl='+g.referrer+'&winurl='+encodeURIComponent(window.location);
            t.parentNode.insertBefore(y,t);
        })(document,'script');
    </script>

</x-layouts.master>