@php $countries = getCountries(); @endphp
<div class="tab-pane fade event-details show active" id="pills-register" role="tabpanel" aria-labelledby="register-tab">
    <div class="info-view" id="div_login">
        <h3 class="fw-bold text-white">{{ "Sign In To Your Account" }}</h3>
        <p>{{ "Please enter your email address and password to sign in." }}</p>
        <p><a href="javascript:void(0)" id="btnOpenRegister">Don't have an account?</a></p>
        <form class="form login-form mt-4" method="POST" action="{!! route('login') !!}" id="frmLogin">
            @csrf
            <input type="hidden" name="redirect_url" value="{!! request()->url() !!}">
            <div class="row">
                <div class="col-md-12 input-grp">
                    <label for="email" class="form-label">Email Address</label>
                    <input type="text" class="form-control" name="email" placeholder="sample@mail.com" value="{!! old('email') !!}" autocomplete="new-email">
                    @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>
                <div class="col-md-12 input-grp mb-3">
                    <label for="password" class="form-label">Password</label>
                    <div class="pass-input">
                        <input type="password" class="form-control" id="password" name="password" placeholder="Enter password here" autocomplete="new-password">
                        <a href="javascript:void(0)" class="pass-btn">
                            <i toggle="#password" class="bi bi-eye-fill toggle-password"></i>
                        </a>
                    </div>
                    @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>
                <div class="col-md-12 input-grp text-end">
                    <a class="forgot-pass-link text-white" href="{!! route('password.request') !!}">{!! __('Forgot your password?') !!}</a>
                </div>
                <div class="col-md-12 input-btn text-center">
                    <button type="submit" class="btn btn-white w-100 rounded-3">{{ "Sign In" }}</button>
                </div>
            </div>
        </form>
    </div>
    <div class="info-view" id="div_register">
        <h3>{{ "Create an Account" }}</h3>
        <p>{{ "Please enter your information below to create an account." }}</p>
        <p class="blue"><a href="javascript:void(0)" id="btnOpenLogin">Already have account?</a></p>
        <form class="form login-form" method="POST" action="{!! route('register') !!}" id="frmRegister">
            @csrf
            <input type="hidden" name="redirect_url" value="{!! request()->url() !!}">
            <input type="hidden" name="phone_code" value="" id="phone_code">
            <input type="hidden" name="elexio_uid" value="" id="elexio_uid">
            <input type="hidden" name="source" value="{!! @$registration_source !!}">
            <input type="hidden" name="elexio_group_id" value="{!! @$registration_source_elexio_group_id !!}">
            <div class="row clsStep1">
                <div class="col-md-12 input-grp">
                    <label for="email" class="form-label">Email Address</label>
                    <input type="text" class="form-control" id="email" name="email" placeholder="sample@mail.com" value="{!! old('email') !!}" autocomplete="new-email">
                    @error('email')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>
                <div class="col-md-12 mb-3 input-grp">
                    <label for="regpassword" class="form-label">Password</label>
                    <div class="pass-input">
                        <input type="password" class="form-control" id="regpassword" name="password" placeholder="Enter password here" autocomplete="new-password">
                        <a href="javascript:void(0)" class="pass-btn">
                            <i toggle="#regpassword" class="bi bi-eye-fill toggle-password"></i>
                        </a>
                    </div>
                    @error('password')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>
                <div class="col-md-12 input-btn text-center">
                    <button type="button" class="btn btn-white" id="btnValidateEmail">
                        {{ "Continue" }}
                    </button>
                </div>
            </div>
            <div class="row clsStep2 d-none">
                <div class="col-md-12 input-grp">
                    <button type="button" class="btn back-btn" id="btnBack"> <i class="bi bi-arrow-left"></i> Back</button>
                </div>
                <div class="col-md-6 input-grp">
                    <label for="first_name" class="form-label">First Name</label>
                    <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name" value="{!! old('first_name') !!}" autocomplete="off">
                    @error('first_name')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>
                <div class="col-md-6 input-grp">
                    <label for="last_name" class="form-label">Last Name</label>
                    <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name" value="{!! old('last_name') !!}">
                    @error('last_name')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>

                <div class="col-md-12 input-grp">
                    <label for="phone" class="form-label">Phone</label>
                    <div class="country-input-row">
                        <select name="country_id" id="country_id" class="form-control">
                            @if($countries->count() > 0)
                            @foreach($countries as $country)
                            <option value="{!! $country->id !!}" data-label="{!! $country->emoji !!} ({!! $country->phone_code !!})" data-phone_code="{!! $country->phone_code !!}" @if($country->id == "233") selected @endif>{!! $country->emoji !!} {!! $country->name !!} ({!! $country->phone_code !!})</option>
                            @endforeach
                            @endif
                        </select>
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="000-000-0000" value="{!! old('phone') !!}" autocomplete="off">
                    </div>
                    @error('phone')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>

                <div class="col-md-12 input-grp">
                    <label for="verification_code" class="form-label">Verification Code</label>
                    <input type="text" class="form-control" id="verification_code" name="verification_code" placeholder="1234">
                    <p>Please check your email provided.</p>
                    @error('verification_code')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>

                <div class="col-md-12 input-grp" id="divAttendMeck">
                    <label for="attend_meck" class="form-label">Do you attend Meck?</label>
                    <div class="radiobox radio-wrap">
                        <div class="radiobtn">
                            <input type="radio" id="attend_meck_yes" class="form-control checkboxinput" name="attend_meck" value="1" checked>Yes
                            <h1></h1>
                        </div>
                        <div class="radiobtn">
                            <input type="radio" id="attend_meck_no" class="form-control checkboxinput" name="attend_meck" value="0">No
                            <h1></h1>
                        </div>
                    </div>
                    @error('attend_meck')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>

                <div class="col-md-12 input-grp" id="divChurchName">
                    <label for="church_attend" class="form-label">Do you attend a different church? If so, what church do you attend?</label>
                    <input type="text" class="form-control" id="church_attend" name="church_attend" placeholder="Church Name" value="{!! old('church_attend') !!}">
                    @error('church_attend')
                    <span class="invalid-feedback" role="alert">
                        <strong>{!! $message !!}</strong>
                    </span>
                    @enderror
                </div>

                <div class="col-md-12 input-grp mb-3">
                    {!! NoCaptcha::renderJs() !!}
                    {!! app('captcha')->display() !!}
                    <input type="text" class="form-control hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha" style="visibility: hidden;height: 0;padding: 0;">
                    @error('g-recaptcha-response')
                    <label class="error">{{ $message }}</label>
                    @enderror
                </div>
                <div class="col-md-12 input-btn text-center">
                    <button type="button" class="btn btn-white" id="btnVerifyCode">
                        {{ "Create Account" }}
                    </button>
                    <button type="button" class="btn resend-btn btnResendVerification"><i class="bi bi-arrow-clockwise"></i> Resend Verification Code</button>
                </div>
            </div>
        </form>
    </div>
</div>