@extends('layouts.join')

@section('title', 'Columbus 17 | Join')

@section('content')

<div class="content lg:w-3/5 md:w-4/5 mx-auto">
    <div class="flex flex-row space-x-12">
        <div class="w-1/2 flex flex-col space-y-6 self-center">
            <div class="border-b border-gray-200 dark:border-gray-700">
                <ul class="flex flex-row text-center">
                    <li class="w-1/2 pb-6" :class="{'border-b-2 border-blue-600':is_default_tab}" v-if="is_default_tab">Sign In</li>
                    <li class="w-1/2 pb-6" :class="{'border-b-2 border-blue-600':is_register_tab}" v-if="is_register_tab">Create Account</li>
                    @if(!session('success') && session('success') !== 'correct')
                        <li class="w-1/2 pb-6">Payment Information</li>
                    @else
                        <li class="w-1/2 pb-6 border-b-2 border-blue-600">Payment Information</li>
                    @endif
                </ul>
            </div>
            <div class="flex flex-col">
                @if(!session('success') && session('success') !== 'correct')
                    <div v-if="is_default_tab">
                        <p class="text-2xl font-bold">Sign In to Columbus 17</p>
                        <div class="mt-6">
                            <form action="{{ route('join-authenticate') }}" method="POST">
                                @csrf
                                <div class="mb-6">
                                    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email address</label>
                                    <input type="email" name="email" id="email" class="@error('email') border-2 border-red-500 @enderror 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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="{{ old('email') }}" placeholder="Email address" required/>
                                    @if ($errors->has('email'))
                                        <span class="text-red-500">{{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                                <div class="flex flex-col">
                                    <div class="mb-2">
                                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
                                        <input type="password" name="password" id="password" class="@error('password') border-2 border-red-500 @enderror 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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required/>
                                    </div>
                                    @if ($errors->has('password'))
                                        <span class="text-red-500">{{ $errors->first('password') }}</span>
                                    @endif
                                    <a class="self-end" href="">Forgot Password?</a>
                                </div>
                                <div class="text-sm mb-12">
                                    <p>Not a member yet? <span @click="activeRegisterTab()" class="text-blue-600 font-bold hover:cursor-pointer">Create your account</span></p>
                                </div>
                                <div class="flex justify-between items-center">
                                    <a href="{{ route('prices') }}" class="text-blue-600 font-bold"><i class="fa fa-long-arrow-left text-blue-500 mr-4"></i>Return to Pricing Page</a>
                                    <input type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" value="Continue to Payment">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div v-if="is_register_tab">
                        <p class="text-2xl font-bold">Create Your Account in Columbus 17</p>
                        <div class="mt-6">
                            <form action="{{ route('join-authenticate') }}" method="POST">
                                @csrf
                                <div class="mb-6">
                                    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email address</label>
                                    <input type="email" name="email" id="email" class="@error('email') border-2 border-red-500 @enderror 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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" value="{{ old('email') }}" placeholder="Email address" required/>
                                    @if ($errors->has('email'))
                                        <span class="text-red-500">{{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                                <div class="flex flex-col">
                                    <div class="mb-2">
                                        <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label>
                                        <input type="password" name="password" id="password" class="@error('password') border-2 border-red-500 @enderror 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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required/>
                                    </div>
                                    @if ($errors->has('password'))
                                        <span class="text-red-500">{{ $errors->first('password') }}</span>
                                    @endif
                                    <a class="self-end" href="">Forgot Password?</a>
                                </div>
                                <div class="text-sm mb-12">
                                    <p>Not a member yet? <span class="text-blue-600 font-bold hover:cursor-pointer">Create your account</span></p>
                                </div>
                                <div class="flex justify-between">
                                    <a href="{{ route('prices') }}" class="text-blue-600 font-bold">Return to Pricing Page</a>
                                    <input type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" value="Continue to Payment">
                                </div>
                            </form>
                        </div>
                    </div>
                @else
                <div class="mt-6">
                    @if(Auth::user()->subscribed())
                        <div class="flex flex-col space-y-12">
                            <p class="text-blue-500 font-bold">You are already subscribed to our {{Auth::user()->order->where('status', 'completed')->first()->product_full_name}} plan !</p>
                            <div>
                                <a href="{{ route('login') }}" class="text-blue-500 font-bold"><i class="fa fa-long-arrow-left text-blue-500 mr-4"></i>Return to Dashboard Page</a>
                            </div>
                        </div>
                    @else
                        <form action="{{ route('checkout') }}" method="POST">
                            @csrf
                            <input type="hidden" name="slug" :value="selected_slug">
                            <input type="hidden" name="coupon_promo_id" :value="coupon_promo_id">
                            <div class="flex justify-between">
                                <a href="{{ route('prices') }}" class="text-blue-600 font-bold">Return to Pricing Page</a>
                                <input ref="complete_payment" @click="checkPayment()" type="submit" class="disabled:opacity-75 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" value="Complete Payment" :disabled="is_complete_payment_disabled">
                            </div>
                        </form>
                    @endif
                </div>
                @endif
            </div>
        </div>
        <div class="h-full w-1/2 rounded-md">
            <plan-detail slug={{ $slug }} payment="{{  request()->get('payment')  }}">
        </div>
    </div>
</div>

@endsection