@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" 
        x-data="{
            usa: 0,
            uk: 0,
            init(){
                let that = this;
                let interval = setInterval(function(){
                    if (typeof window.geotargetly_country_code === 'function') {
                        that.usa = geotargetly_country_code() == 'US' ? 1 : 0;
                        that.uk = geotargetly_country_name() == 'United Kingdom' ? 1 : 0;
                        clearInterval(interval);
                    }
                }, 100);
            }
        }">
        <div class="prose-container max-w-lg py-20 prose px-8 md:px-0">
            <h3 x-text="uk ? 
                'Join Premier Plus NOW' :
                'Join Premier Plus'">
            </h3>
            <p class="lead" x-show="uk">
                Register and get FREE access to the best Christian podcasts, radio, sermons and music and get email updates from Premier, including the Premier Plus weekly newsletter
            </p>
            <p class="lead" x-show="!uk">
                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 or a message 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">

                        <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')"
                                >
                                    <span x-show="uk">YES, I'd like Premier to email me exclusive faith-building content and offers from trusted Christian partners.</span>
                                    <span x-show="!uk">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.</span>
                                </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>