@props([
    'ministry',
])

<div class="bg-purple-dark pb-16 shadow-none">
    <div 
        class="space-y-10 sm:max-w-[840px] mx-auto text-white" 
        x-data="{
            active: '',
            ministry: @js($ministry),
            activeStyles: 'bg-pink-light btn focus:ring-white/30 md:px-12 py-5 rounded-none font-barlow font-bold text-lg md:text-xl',
            inactiveStyles: 'btn md:px-12 py-5 cursor-default font-barlow font-bold text-lg md:text-xl flex-1 md:flex-none',
            form:{
                first_name: @js(auth()->user()->first_name),
                email: @js(auth()->user()->email),
                message: '',
                form_type: '',
                ministry_id: @js($ministry->id)
            },
            success: {},
            setActive(tab) {
                this.active = tab;
            },
            validate() {

                if ($refs.firstName.checkValidity() && $refs.email.checkValidity()) {
                    return true;
                }
                
                $refs.firstName.reportValidity();
                $refs.email.reportValidity();


                return false;
            },
            submitMinitryInteraction(){
                if(this.validate()){
                    axios.post(@js(route('ministry.interaction.store')),{...this.form, nature:this.active}).then((data) => {
                        this.success = {
                            title: this.ministry[this.active].success_message_title ??
                                    'Success! Thanks for response',
                            message: this.ministry[this.active].success_message ??
                                    'Your request has been registered'
                        };
                        this.active = 'submitted';
                        return;
                    }).catch( (e) => {
                        if( e.response.status === 401 )
                            this.$dispatch('showsignupmodal')
                        if( e.response.status === 422 ){
                            $refs.firstName.reportValidity();
                            $refs.email.reportValidity();
                        }
                        
                    })
                }
            },
            init(){
                this.active = this.ministry.sign_up_form ? 'sign_up_form'
                            : this.ministry.story_form ? 'story_form'
                            : this.ministry.ebook_form ? 'ebook_form'
                            : ''
                this.form.form_type = this.active;

                this.$watch('active', value => {
                    this.form.form_type = value;
                });
            }
        }"
    >
        <div class="flex items-center justify-center">
            <template x-if="ministry.sign_up_form">
                <button
                    href="#" 
                    class="focus:ring-0"
                    :class="active === 'sign_up_form' ? inactiveStyles : activeStyles"  
                    x-on:click="setActive('sign_up_form')">
                    Signup
                </button>
            </template>

            <template x-if="ministry.story_form">
                <button
                    href="#" 
                    class="focus:ring-0"
                    :class="active === 'story_form' ? inactiveStyles : activeStyles" 
                    x-on:click="setActive('story_form')">
                    Share your story
                </button>
            </template>

            <template x-if="ministry.ebook_form">
                <button
                    href="#" 
                    class="focus:ring-0"
                    :class="active === 'ebook_form' ? inactiveStyles : activeStyles" 
                    x-on:click="setActive('ebook_form')">
                    New e-book
                </button>
            </template>
        </div>
        <template x-if="active === 'sign_up_form'">
            <div class="px-5 md:px-0 space-y-10">
                <h3 class="text-2xl font-semibold font-barlow" x-text="ministry.sign_up_form.intro_text"></h3>
                <div class="flex flex-col md:flex-row justify-between">
                    <div class="flex flex-col flex-1 md:pr-5 pb-5">
                        <x-form.input 
                            label="First name" 
                            label-class="font-bold text-lg pb-2 text-white"
                            class="text-base p-5 text-black placeholder:text-grey-600 w-full" 
                            name="first_name" 
                            type="text" 
                            placeholder="Type your first name here..." 
                            x-model="form.first_name" 
                            x-ref="firstName"
                            required 
                        />
                    </div>
                    <div class="flex flex-col flex-1 md:pl-5">
                        <x-form.input 
                            label="Email address" 
                            label-class="font-bold text-lg pb-2 text-white"
                            class="text-base p-5 text-black placeholder:text-grey-600 w-full" 
                            name="email" 
                            type="text" 
                            placeholder="Type your email address here..." 
                            x-model="form.email" 
                            x-ref="email"
                            required 
                        />
                    </div>
                </div>
                <div class="flex justify-between flex-col md:flex-row">
                    <span class="font-semibold text-white" x-html="marked.parse(ministry.sign_up_form.privacy_policy_text)"></span>
                    <button class="btn-bright-pink font-semibold py-4 md:py-3" @click="submitMinitryInteraction()">Sign Up</button>
                </div>
            </div>
        </template>
        

        <template x-if="active === 'story_form'">
            <div class="px-5 md:px-0 space-y-10" x-show="active === 'story_form'">
                <h3 class="text-2xl font-semibold font-barlow" x-text="ministry.story_form.intro_text"></h3>
                <p class="!mt-6" x-text="ministry.story_form.intro_desc ?? 'If this content has helped you in anyway, we would love to hear about it:'"></p>
                <div class="flex flex-col flex-1 md:pr-5 pb-5">
                    <label for="first_name" class="font-bold text-lg pb-2">Message</label>
                        <x-form.textarea 
                            placeholder="Type your message here..." 
                            x-model="form.message"
                            class="font-open font-semibold text-base p-5 text-black placeholder:text-grey-600"
                            rows="6"
                        />    
                </div>
                <div class="flex flex-col md:flex-row justify-between">
                    <div class="flex flex-col flex-1 md:pr-5 pb-5">
                        <x-form.input 
                            label="First name" 
                            label-class="font-bold text-lg pb-2 text-white"
                            class="text-base p-5 text-black placeholder:text-grey-600 w-full" 
                            name="first_name" 
                            type="text" 
                            placeholder="Type your first name here..." 
                            x-model="form.first_name" 
                            x-ref="firstName"
                            required 
                        />
                    </div>
                    <div class="flex flex-col flex-1 md:pl-5">
                        <x-form.input 
                            label="Email address" 
                            label-class="font-bold text-lg pb-2 text-white"
                            class="text-base p-5 text-black placeholder:text-grey-600 w-full" 
                            name="email" 
                            type="text" 
                            placeholder="Type your email address here..." 
                            x-model="form.email" 
                            x-ref="email"
                            required 
                        />
                    </div>
                </div>
                <div class="flex justify-between flex-col md:flex-row">
                    <span class="font-semibold text-white" x-html="marked.parse(ministry.sign_up_form.privacy_policy_text)"></span>
                    <button class="btn-bright-pink font-semibold py-4 md:py-3" @click="submitMinitryInteraction()">Sign Up</button>
                </div>
            </div>
        </template>

        <template x-if="active === 'ebook_form'">
            <div class="px-5 md:px-0 space-y-10">
                <h3 class="text-2xl font-semibold font-barlow" x-text="ministry.ebook_form.intro_text"></h3>
                <div class="flex flex-col md:flex-row justify-between">
                    <div class="flex flex-col flex-1 md:pr-5 pb-5">
                        <x-form.input 
                            label="First name" 
                            label-class="font-bold text-lg pb-2 text-white"
                            class="text-base p-5 text-black placeholder:text-grey-600 w-full" 
                            name="first_name" 
                            type="text" 
                            placeholder="Type your first name here..." 
                            x-model="form.first_name" 
                            x-ref="firstName"
                            required
                        />
                    </div>
                    <div class="flex flex-col flex-1 md:pl-5">
                        <x-form.input 
                            label="Email address" 
                            label-class="font-bold text-lg pb-2 text-white"
                            class="text-base p-5 text-black placeholder:text-grey-600 w-full" 
                            name="email" 
                            type="text" 
                            placeholder="Type your email address here..." 
                            x-model="form.email" 
                            x-ref="email"
                            required
                        />
                    </div>
                </div>
                <div class="flex justify-between flex-col md:flex-row">
                    <span class="font-semibold text-white" x-html="marked.parse(ministry.sign_up_form.privacy_policy_text)"></span>
                    <button class="btn-bright-pink font-semibold py-4 md:py-3" @click="submitMinitryInteraction()">Access my free e-book</button>
                </div>
            </div>
        </template>
        
        <template x-if="active === 'submitted'">
            <div class="px-5 md:px-0 text-center py-8" >
                <x-icon name="check-circle" class="mx-auto mb-6"/>
                <h3 class="text-3xl font-bold font-barlow mb-3" x-text="success.title"></h3>
                <p x-text="success.message"></p>
            </div>
        </template>
        
        
    </div>
</div>

@push('body.bottom')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.3/axios.min.js" integrity="sha512-wS6VWtjvRcylhyoArkahZUkzZFeKB7ch/MHukprGSh1XIidNvHG1rxPhyFnL73M0FC1YXPIXLRDAoOyRJNni/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@endpush