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

@php
    $title = getPlanById(jsdecode_userdata($plan_id))->plan_type == 'host' ? 'host' : 'member';
@endphp


@section('back_button')
    @if($title == 'member')
        @inject('events' , 'App\Models\Event')
        @php
           $event = null;
           if(request()->route('event_id')){
               $event = $events->where('id' , jsdecode_userdata(request()->route('event_id')))->first();
           }
        @endphp
        <a href="{{  route('signup.showPlans', ['type' => jsencode_userdata('member') , 'event' => $event , 'event_id' => $event ? jsencode_userdata($event->id) : null  , 'plan' => $plan_id , 'back' => request()->back]) }}" class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @else
        {{-- <a href="{{  route('signup.showPlans', ['type' => jsencode_userdata('host') , 'plan' => $plan_id]) }}" class="back-btn-back">
            <i class="fa-solid fa-chevron-left"></i>
        </a> --}}
        <a href="{{ url()->previous() }}"> <i class="fa-solid fa-chevron-left"></i></a>
    @endif
    {{-- <a href="{{ url()->previous() }}" class="back-btn-back">
        <i class="fa-solid fa-chevron-left"></i>
    </a> --}}
@endsection

@section('content')
    <section class="main-sec member-sec email-otp-view">
        <div class="container">
            <div class="signup-wrapper">
                <div class="sec-heading email-header-title">
                    <h2>Enter email to continue</h2>
                </div>
                <div class="email-form-box">
                    <form method='post' id='registerEmail'>
                        @csrf
                        {{-- @dd($event_id  , $plan_id) --}}
                        <input type="hidden" name='plan_id' value="{{ request()->route('plan_id') }}">
                        <input type="hidden" name='event_id' value="{{ $event_id }}">
                        <input type="hidden" name='member_type' value="">

                        <div class="form-group">
                            <label for="email">Enter your email</label>
                            <div class="form-field">
                                <input type="text" class="form-control @error('email') error-message @enderror"
                                    name="email" id='email' placeholder="Enter your email" value="@if(auth()->user()){{ auth()->user()->email }} @endif">
                                <span class="form-icon">
                                    <img src="{{ asset('images/mail-icon.svg') }}" alt="">
                                </span>
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <button type='submit' class="button  primary-btn full-btn send @if(auth()->check()) d-none @endif" id='create-email' >Continue <div
                                class="spinner-border d-none" role="status">
                                <span class="sr-only">Loading...</span>
                            </div></button>
                    </form>
                    
                    @if(auth()->check())
                        <a href="@if(auth()->user()->hasRole('Member')){{ route('member.become.host' , ['plan_id' => request()->route('plan_id') , 'event_id' => request()->route('event_id')]) }} @else {{ route('host.become.member' , ['plan_id'=>request()->route('plan_id') , 'event_id' => request()->route('event_id')]) }}@endif" class="button primary-btn show-anchor-disable" id='skip-password'>
                                Skip
                                <div
                                    class="spinner-border d-none" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                        </a>
                    @endif
                    {{-- <a href="#" class="button primary-btn full-btn send">Continue</a> --}}
                </div>
            </div>
        </div>
    </section>
@endsection
@push('scripts')
    <script src="{{ asset('custom-js/signup.js') }}"></script>
    @include('validations.signup.js_email')

    {{-- set input member type value from localstorage --}}
    <script>
        jQuery(document).ready(function() {
            let memberType = localStorage.getItem('member_type');
            jQuery('#registerEmail').find('input[name=member_type]').val(memberType);
        })
    </script>

    @auth
        <script>
            jQuery(document).ready(function(){
                    /*************************************************************************************************
                MEMBER BECOME HOST STARTS**********/

                let userEmail = "{{ auth()->check() ? auth()->user()->email : null }}";
                let inputEmail = jQuery('input[name="email"]').val();

                userEmail = jQuery.trim(userEmail);
                inputEmail = jQuery.trim(inputEmail);


                if(userEmail === inputEmail){
                     jQuery('#create-email').addClass('d-none');
                }else{
                     jQuery('#create-email').removeClass('d-none');
                }


                jQuery('input[name="email"]').bind('keyup , keydown' ,function(e){
                      if(userEmail === jQuery(this).val()){
                         jQuery('#create-email').addClass('d-none');
                      }else{
                         jQuery('#create-email').removeClass('d-none');
                      }
                });

                 /*************************************************************************************************
                MEMBER BECOME HOST ENDS**********/
            });
        </script>
    @endauth
@endpush