@extends('website.layouts.master')
@section('title', __('tr.Alumni Registration'))

@section('content')

@include('website.layouts.title', ['simple'=>true])

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<section>
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <br/>
                <br/>
                <form id="apply_form"  autocomplete="off" action="{{ route('verify_alumni_email') }}" method="POST">
                    {{ csrf_field() }}
                    <div class="section-title"> 
                        <h3 class="text-left">@lang('tr.Verify Email Address')</h3>
                    </div>
                    <hr>
                    <div class="form-row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="Email">@lang('tr.Email') <span class="required_field">*</label>
                                <input type="email" placeholder="@lang('tr.Email')" id="email" name="email" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    @if(env('APP_DEBUG') == false)
                    <div class="g-recaptcha" id="recaptcha" data-sitekey="6Lf17rUUAAAAAKR0rgH6aM7g0xjtzmxBK6w2T5j1"></div>
                    <p class="msg-error"></p>
                    @endif
                    <div id='ajax_form_progress_bar' style="background-color: green; width: 0%; height: 2px;"></div>
                    <br/>
                    <button type="submit" id="submit"class="ttm-btn ttm-btn-size-lg ttm-btn-shape-square ttm-btn-style-fill ttm-icon-btn-right ttm-btn-color-dark">@lang('tr.Submit') <i class="ti ti-angle-double-right"></i> <span id="ajax_form_progress_text"></span></button>
                    <br/>
                    <br/>
                </form>
            </div>

    </div>
</section>



@endsection

@section('pagejs')
<script src="/int/js/tether.min.js"></script>
<script src="/int/js/bootstrap.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {

        $('#apply_form').ajaxForm({
                progressBar: $('#ajax_form_progress_bar'),
                progressText: $('#ajax_form_progress_text'),
            },function(response){
                infoBox("@lang('tr.verify_email_message')", function() {
                    window.location.href = "{{$website->langRoot}}";
                });
            }, function(response){
                $('#apply_form').showErrors(response, function() {
                    window.location.href = "/home/graduates/registration";
                    var firstError = $('.form-error:visible:first').first();
                    if(firstError.length==1)
                        $('html, body').animate({scrollTop: ( firstError.offset().top - 140 )}, 1000);
                });
            });

    });
       
</script>

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
@if(env('APP_DEBUG') == false)
    <script>
        $('#submit').click(function(){
          var $captcha = $( '#recaptcha' ),
              response = grecaptcha.getResponse();
          
          if (response.length === 0) {
           alert( "reCAPTCHA is mandatory" );
           return false;
          }
    });
    </script>
@endif


@endsection