@extends('layouts.app')
@section('content')
<div class="body-content-first">
                <p class="intro-text">{{__("Tired of driving around in circles looking for a parking spot?")}} </p>
                <p class="intro-text-sub">{{__("Our service allows you to reserve a parking spot in advance, so you can park with confidence and convenience. Whether you need a spot for a few hours, a month, or even a year, we've got you covered.")}}</p>
                <div class="info-wrapper">
                    <div class="info-container">
                        <p class="text-header-2">{{__("Why use this service?")}}</p>
                        <ul>
                            <li>{{__("Convenience: Reserve your spot from anywhere, anytime.")}}</li>
                            <li>{{__("Peace of Mind: Know exactly where you'll park before you leave home.")}}</li>
                            <li>{{__("Flexible Plans: Choose hourly, monthly, or yearly plans to fit your needs.")}}</li>
                            <li>{{__("Secure Locations: Park in safe, monitored areas.")}}.</li>
                        </ul>
                    </div>
                    <div class="info-container">
                        <p class="text-header-2">{{__("How does it work?")}}</p>
                        <ul>
                            <li>{{__("Search: Enter your destination and desired time.")}}</li>
                            <li>{{__("Select: Choose from available spots and plans.")}}</li>
                            <li>{{__("Reserve: Secure your spot with just a few clicks.")}}</li>
                            <li>{{__("Enjoy hassle-free parking when you arrive.")}}</li>
                        </ul>
                    </div>
                </div>
                <button class="simple_btn_yellow">{{__("Reserve a parking spot")}}</button>
            </div>
            <div class="login-case" id="logincase">
                <button class="close-btn" onclick="closeDiv()">X</button>
                <form action="{{ route('login') }}" method="post">
                @csrf
                    <h1 style="text-align:center;">{{__("Login")}}</h1>
                    <div class="form-group">
                        <h3>{{__("Email adress")}}</h3>
                        <input type="text" id="usernameText" name="email"  class="input-text" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <h3>{{__("Password")}}</h3>
                        <input type="password" id="password" name="password" class="input-text" autocomplete="off">
                    </div>
                    <a href="#">{{__("Forgotten password?")}}</a>

                    <button type="submit" class="submit-button">{{ __('Login') }}</button>
                    <div class="plus_text">
                        {{ __('Not a member yet?')}}
                        <a href="#" onclick="openRegister(event)">
                            {{__("Sign up")}}
                        </a>
                    </div>
                </form>
            </div>

            <div class="login-case" id="signupcase">
                <button class="close-btn" onclick="closeRegisterDiv()">X</button>
                <form action="{{ route('user.register') }}" method="POST">
                @csrf
                    <h1 style="text-align:center;">{{__("Sign Up")}}</h1>
                    <div class="form-group">
                        <h3>{{__("First Name")}}</h3>
                        <input type="text" id="fnameText" name="fname" class="input-text" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <h3>{{__("Name")}}</h3>
                        <input type="text" id="nameText"  name="name" class="input-text" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <h3>{{__("ID / Passport number")}}</h3>
                        <input type="text" id="cinText" name="idnumber" class="input-text" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <h3>{{__("Phone Number")}}</h3>
                        <input type="text" id="phonenumber" name="phone_number" class="input-text" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <h3>{{__("Email adress")}}</h3>
                        <input type="text" id="emailText" name="email" class="input-text" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <h3>{{__("Username")}}</h3>
                        <input type="text" id="userText" name="username" class="input-text" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <h3>{{__("Password")}}</h3>
                        <input type="password" id="passText" name="password" class="input-text" autocomplete="off">
                    </div>
                    

                    <button type="submit" class="submit-button">{{ __('Create an account') }}</button>
                    <div class="plus_text">
                        {{ __('Already have an account?')}}
                        <a href onclick=reopenLogin(event)>
                            {{__("Login")}}
                        </a>
                    </div>
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </form>
            </div>            
@endsection