@extends('layouts.app')
@section('content')
<section class="main-sec member-sec">
    <div class="container">
        <div class="signup-wrapper">
            <div class="welcome-login-main">
                <div class="welcome-login-box">
                    <div class="welcome-login-inner">

                        <h3>Welcome to your event and we are glad to have you as part of the RAF Leaderboard community. </h3>
                        <p>To join your event, log in with your Email, Password, and Host Code to join their event. To participate in any of the weekly RAF Leaderboard challenges, log in without the event code to be taken to the the RAF Leaderboard community</p>
                        <div class="login-event-code">
                            <h3>Your event code </h3>
                            <div class="host-code-box">
                                <div class="formfield verify-no">
                                    <div class="host-code-inner"><input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control" name="verify-no" placeholder="7"></div>
                                    <div class="host-code-inner"><input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control" name="verify-no" placeholder="8"></div>
                                    <div class="host-code-inner"><input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control" name="verify-no" placeholder="9"></div>
                                    <div class="host-code-inner"><input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="form-control" name="verify-no" placeholder="3"></div>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('login')}}" class="button primary-btn full-btn">Login</a>
                    </div>
                </div>
                <div class="handshake-icon-main">
                    <img src=" {{ asset('images/handshake-icon.svg')}}" alt="handshake" class="handshake-icon" width="80" height="80">
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {
        // Define the value to fill in
        var value = `{{ $event['event_code']}}`;

        // Iterate over each input and set its value
        $('.formfield input').each(function(index) {
            $(this).val(value[index]);
        });
    });
</script>
@endpush