@include('htmlpage.frontent.layout.app')

<!-- Banner Section Start -->
<div class="page--header pt--60 pb--60 text-center bg--img" data-overlay="0.85"
    style="background-image: url('images/member2.png');" data-rjs="2">
    <div class="container">
        <div class="title">
            <h2 class="h1 text-white">Login Now</h2>
        </div>

        <ul class="breadcrumb text-gray ff--primary">
            <li><a href="/" class="btn-link">Home</a></li>
            <li class="active"><span class="text-primary">Login Now</span></li>
        </ul>
    </div>
</div>

<section class="page--wrapper pt--80 pb--20 resource">
    <div class="contact--section pt--80 pb--20">
        <div class="container">
            <div class="row">
                <div class="col-md-2"></div>
                {{-- loginform --}}
                <div class="col-md-4">
                    <div class="logincard">
                        <div class="text-center">
                            <span class="text-warning"><img src="images/eventlogin.png" alt=""></span>
                        </div>
                        <h3 class="text-center font-weight-bold text-primary">LOGIN NOW</h3>
                        @if (session('message'))
                            <div id="message" class="alert alert-danger" role="alert">
                                {{ session('message') }}
                            </div>
                        @endif
                        <form method="POST" action="{{ route('login') }}" class="login-form" id="loginForm">
                            @csrf
                            <div class="form-group">
                                <input type="email" name="email" class="form-control" id="email"
                                    value="{{ old('email') }}" placeholder="Enter Email">
                                @if ($errors->has('email'))
                                    <p class="alert alert-danger">{{ $errors->first('email') }}</p>
                                @endif
                            </div>
                            <div class="form-group">
                                <input type="password" name="password" id="password" class="form-control"
                                    placeholder="Enter Password">
                                @if ($errors->has('password'))
                                    <div class="alert alert-danger">{{ $errors->first('password') }}</div>
                                @endif
                            </div>
                            <button type="submit" class="btn1 btn-primary btn-block mb-3 rounded-pill">Login</button>
                        </form>
                        <p class="mt-15">
                            <a href="#" id="createAccountLink">Create Account</a>
                            <a href="#" id="forgotPasswordLink" class="text-rght">Forgot Password?</a>
                        </p>
                        <!-- Hidden forgot password form initially -->
                        <form method="POST" action="{{ route('password.email') }}" class="forgot-password-form"
                            id="forgotPasswordForm" style="display: none;">
                            @csrf
                            <div class="form-group">
                                <input type="email" name="reset_email" class="form-control" id="forgotPasswordEmail"
                                    placeholder="Enter your email" required>
                                @if ($errors->has('email'))
                                    <p class="alert alert-danger">{{ $errors->first('email') }}</p>
                                @endif
                            </div>
                            <button type="submit" class="btn1 btn-primary btn-block mb-3 rounded-pill">Reset
                                Password</button>
                        </form>

                        <!-- Hidden registration options initially -->
                        <div id="registrationOptions" style="display: none;">
                            <div class="row">
                                <div class="col-md-4 col-sm-6 registr">
                                    <a href="/sponsor-registration">
                                        <p><img src="{{ asset('images/sponsor.png') }}">Sponsor</p>
                                    </a>
                                </div>
                                <div class="col-md-4 col-sm-6 registr">
                                    <a href="/memberships">
                                        <p><img src="{{ asset('images/member.png') }}">Member</p>
                                    </a>
                                </div>
                                <div class="col-md-4 col-sm-6 registr">
                                    <a href="/institution-registration">
                                        <p>
                                            <img src="{{ asset('images/institutionicon.png') }}">Institution
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        var createAccountLink = document.getElementById('createAccountLink');
                        var forgotPasswordLink = document.getElementById('forgotPasswordLink');
                        var forgotPasswordForm = document.getElementById('forgotPasswordForm');
                        var registrationOptions = document.getElementById('registrationOptions');

                        createAccountLink.addEventListener('click', function(e) {
                            e.preventDefault();
                            // Toggle registrationOptions visibility
                            forgotPasswordForm.style.display = 'none';
                            registrationOptions.style.display = registrationOptions.style.display === 'none' ? 'block' :
                                'none';
                        });

                        forgotPasswordLink.addEventListener('click', function(e) {
                            e.preventDefault();
                            // Hide registrationOptions if it's visible
                            registrationOptions.style.display = 'none';
                            // Toggle forgotPasswordForm visibility
                            forgotPasswordForm.style.display = forgotPasswordForm.style.display === 'none' ? 'block' :
                                'none';
                        });
                    });
                </script>
                {{-- loginend --}}

                {{-- col-m-4 --}}
                <div class="col-md-4">
                    <img src="images/VirtualEvent-Gif.gif">
                    <div class="row mt--15">
                        <div class="col-md-6">
                            <div class="card-container">
                                <div class="card">
                                        <div class="card-content">
                                            <i class="fa fa-lock"></i>
                                            <h3 class="card-title">Under Verification</h3>
                                            <p class="card-description">Lorem ipsum dolor sit amet, consectetur
                                                adipiscing elit.</p>
                                        </div>
                                 
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card-container">
                                <div class="card">
                                        <div class="card-content">
                                            <i class="fa fa-address-card-o" aria-hidden="true"></i>
                                            <h3 class="card-title">User Login Area</h3>
                                            <p class="card-description">Lorem ipsum dolor sit amet, consectetur
                                                adipiscing elit.</p>
                                        </div>
                                 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- end --}}

            </div>
        </div>
    </div>
</section>
<!-- Page Wrapper End -->

@include('htmlpage.frontent.layout.footer')

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get the login form
        const loginForm = document.getElementById('loginForm');

        // Add event listener for form submission
        loginForm.addEventListener('submit', function(event) {
            event.preventDefault(); // Prevent form submission

            // Get the entered email value
            const email = document.getElementById('email').value;

            // Store the email in localStorage
            localStorage.setItem('userEmail', email);

            // Submit the form (optional: you can use AJAX instead)
            loginForm.submit();
        });
    });
</script>