@extends('front.layouts.app')
@section('content')
<div class="login-sec">
    <div class="row mx-auto w-100 g-md-0">
        <div class="col-xl-4 col-md-5 lgin-col-left bg-white">
            <div class="login-container">
                <a href="{!! route('home') !!}" class="fav-icon">
                    <img src="{!! asset('assets/frontend/images/favicon-blue.png') !!}" class="fav-icon-img" alt="favicon-blue"/>
                </a>
                <h3>{{ $metaArr['content_title'] ?? "Sign Up to Meck" }}</h3>
                <p>{{ $metaArr['content_subtitle'] ?? "Please enter your information in fields below." }}</p>
                <p class="blue"><a href="{!! route('login') !!}">Already have account?</a></p>
                <form class="form login-form" method="POST" action="{!! route('register') !!}" id="frmRegister">
                    @csrf
                    <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">
                    <input type="hidden" name="elexio_group_id" value="{!! config('constants.REGISTRATION_SOURCE.registration') !!}">
                    @if($errors->any())
                        {!! implode('', $errors->all('<span class="error" role="alert">:message</span>')) !!}
                    @endif
                    <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 input-grp">
                            <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-btn text-center">
                            <button type="button" class="btn btn-theme-blue" id="btnValidateEmail">
                                {{ $metaArr['content_btn1_caption'] ?? "Continue" }}
                            </button>
                        </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-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">
                            {!! 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">
                                {{ $metaArr['content_btn2_caption'] ?? "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>
                @if(@$metaArr['content_bottom_text'])
                <p class="lgin-footer-line">
                    {!! @$metaArr['content_bottom_text'] !!}
                </p>
                @endif
            </div>
        </div>
        <div class="col-xl-8 col-md-7 lgin-col-right" @if(@$metaArr['main_banner_img_type'] == "image") style="background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),  url({!! getCmsFileUrl(@$metaArr['main_banner_img']) !!});" @endif>
            <div class="lgin-video-sec">
                <strong>{!! @$metaArr['main_banner_subtitle'] !!}</strong>
                <h3>{!! @$metaArr['main_banner_title'] !!}</h3>
                <p>{!! @$metaArr['main_banner_description'] !!}</p>
            </div>
            @if(@$metaArr['main_banner_img_type'] == "video")
            <div class="video-wrap">
                <video autoplay loop muted playsinline>
                    <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/mp4">
                    <source src="{!! getCmsFileUrl(@$metaArr['main_banner_img']) !!}" type="video/ogg">
                    Your browser does not support the video tag.
                </video>
            </div>
            @endif
        </div>
    </div>
</div>
@includeIf('front.includes.faq')
@section('js')
<script src="{!! asset('assets/frontend/js/pages/auth.js') !!}?v=2"></script>
<script>
$(document).ready(function () {
    function updateCountryId()
    {
        var phone_code = $("#country_id option:selected").attr("data-phone_code");
        $('#phone_code').val(phone_code);
    }
    updateCountryId();
    $(document).on('change', "#country_id", function(){
        updateCountryId();
    });
})
</script>
@stop
@endsection