@php $countries = getCountries(); @endphp
<div class="modal fade historyParaModal" id="register_login_popup" tabindex="-1" aria-labelledby="historyModal" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Sign In To Your Account</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="info-view" id="div_login_popup">
                    <!-- <h3>{{ "Sign In to Meck" }}</h3> -->
                    <p>{{ "Please enter your email address and password to sign in." }}</p>
                    <form class="form login-form" method="POST" action="{!! route('login') !!}" id="frmLoginPopup">
                        @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 text-end">
                                <a class="forgot-pass-link" href="{!! route('password.request') !!}">{!! __('Forgot your password?') !!}</a>
                            </div>
                            <div class="col-md-12 input-btn text-center">
                                <button type="submit" class="btn btn-theme-blue">{{ "Sign In" }}</button>
                            </div>
                            <div class="col-md-12 text-center mt-3">
                                <p class="text-center mb-0"><a href="javascript:void(0)" id="btnOpenRegisterPopup">Don't have an account?</a></p>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="info-view" id="div_register_popup">
                    <!-- <h3>{{ "Sign Up to Meck" }}</h3> -->
                    <p>{{ "Please enter your information below to create an account." }}</p>
                    <form class="form login-form" method="POST" action="{!! route('register') !!}" id="frmRegisterPopup">
                        @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-theme-blue" id="btnValidateEmail">
                                    {{ "Continue" }}
                                </button>
                            </div>
                            <div class="col-md-12 text-center mt-3">
                                <p class="text-center mb-0"><a href="javascript:void(0)" id="btnOpenLoginPopup">Already have an account?</a></p>
                            </div>
                        </div>
                        <div class="row clsStep2">
                            <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-6 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-6 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-6 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-6 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-theme-blue" 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 class="col-md-12 text-center mt-3">
                                <p class="blue text-center mb-0"><a href="javascript:void(0)" id="btnOpenLogin">Already have account?</a></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>