@extends('layouts.app', ['header' => true, 'close_button' => true])

@section('content')
    @php
        if (!isset($title)) {
            $title = true;
        }
    @endphp
    <section class="main-sec member-sec">
        <div class="container">
            <div class="member-wrapper">
                <div class="sec-heading">
                    @if ($title == true)
                        @if ('member' == jsdecode_userdata($type))
                            <h2>Become a Ready-Aim-Fire Leaderboard Member</h2>
                            <p>Join the Ready-Aim-Fire Leaderboard community and see where your shooting skills rank you as
                                you compete on weekly on-line challenges.</p>
                        @else
                            <h2>Become a HOST</h2>
                            <p>Host your own private group challenge with all the same functionality provided within the
                                Ready-Aim-Fire Leaderboard platform. </p>
                        @endif
                    @endif
                </div>
            </div>

            @if ($title == false)
                <div class='signup-flow-host'>
                    {{--  new raf member plans --}}
                    @include('include.member-plans', ['event' => $event, 'plans' => $plan])
                </div>
            @else
                {{--  current raf member plans --}}
                <div class='signup-flow-member new-raf-member'>
                    {{-- @foreach ($plans as $plan) --}}
                    <div class="memeber-price-box select-plan">
                        <label for="memeber-price-card{{ $plan->id }}" class='select-plan'>
                            <div class="memeber-price-details-outer">
                                @if ($event)
                                    <div class="memeber-price-details d-flex w-100 justify-content-between pb-3">
                                        <p>Host's Entry Fee / (one time)
                                        </p>
                                        <h3>${{ $event->event_fee }}<span>
                                            </span></h3>
                                    </div>
                                @endif
                                <div class="memeber-price-details">
                                    <p>{{ strtoupper($plan->name) }}
                                    </p>
                                    <h3>${{ $plan->price }}<span>/
                                            {{ $type == jsencode_userdata('member') ? ucfirst($plan->time_type) : 'event' }}
                                        </span></h3>
                                </div>
                                <input class='plan-select-checkbox d-none' id="memeber-price-card{{ $plan->id }}"
                                    type="checkbox"
                                    data-url="{{ route('signup.email', ['plan_id' => jsencode_userdata($plan->id), 'event_id' => $event ? jsencode_userdata($event->id) : null]) }}"
                                    name="selectedPlan"> 
                            </div>
                        </label>
                        {{-- <a href="#" class="text-center uderline-text">Cancel at any time</a> --}}
                    </div>
                    {{-- @endforeach --}}
                    <div class="right-side-btn-box">
                        <a href="#" class="cancel-plan-btn">Cancel at any time</a>
                    </div>
                </div>
            @endif

            @if (jsdecode_userdata($type) == 'member')
                <div class="memeber-benifit-box mb-3">
                    <h3>Member Benefits</h3>
                    <ul class="memeber-benifit-list">
                        <li>Receive 5 free Official RAF Challenge targets / month delivered directly to your home - a
                            <span>$9.99</span>
                            retail value (current USA members only)</li>
                        <li>Determine how your skills compare to your peers on the RAF Leaderboard</li>
                        <li>Grow your brand and promote yourself through the use of your Bio and video uploads</li>
                        <li>Collaborate with other 2A supporters and help each other improve their shooting skills through
                            video reviews and direct commenting</li>
                    </ul>
                </div>
            @else
                <div class="memeber-benifit-box mb-3">
                    <h3>Benefits to Hosting</h3>
                    <ul class="memeber-benifit-list">
                        <li>You create the event including setting the rules, choosing the target, and determining who is
                            invited </li>
                        <li>You determine the event fee and keep 100% of the event fee proceeds (minus a 3% payment processing fee)*</li>
                        <li>You will receive 20% of any NEW RAF member subscription revenue that your event brings to the
                            platform for as long as they remain an active member</li>
                        <li>You can get reach a larger audiance unobtainablewith in-person events</li>
                    </ul>
                </div>
            @endif


            @if ($title == false)
                <a class="button primary-btn full-btn new-raf-subscribe show-anchor-disable">
                    Continue
                    <div class="spinner-border d-none" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </a>
            @else
                <a class="button primary-btn full-btn subscribe-attempt show-anchor-disable">
                    Continue
                    <div class="spinner-border d-none" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </a>
            @endif
            {{-- <a  class="button primary-btn full-btn subscribe-attempt">{{ ($type == jsencode_userdata('member')) ? 'Subscribe' : 'Continue' }}</a> --}}

        </div>
    </section>
@endsection


@if ($title == false)
    @push('scripts')
        <script>
            //on plan select
            jQuery(document).ready(function() {
                //show checked first checkbox
                jQuery('.member-price-card:first').find('input[type="checkbox"]').attr('checked', true);

                //on selected checkbox
                jQuery('.select-member-plan').change(function() {

                    jQuery('.select-member-plan').prop('checked', false);

                    jQuery(this).prop('checked', true);

                })

                jQuery('.new-raf-subscribe').click(function(e) {
                    e.preventDefault();

                    let selectedPlan = jQuery('.select-member-plan:checked');
                    let url = selectedPlan.attr('url');
                    setTimeout(() => {
                        window.location.href = url;
                    }, 1000);
                });
            });
        </script>
    @endpush
@endif