@extends('layouts.app')


@section('content')
    <div class="container" style="margin-top:170px">
        <div id="authContainer">
            <div class="card m-5 p-5" id="loginForm">
                <div class="container">
                    <div class="col">
                        <div class="row align-items-center justify-content-center">
                            <h3 class="text-center">Bună ziua</h3>
                        </div>
                        <div class="row text-center">
                            <small>Pentru programări intră în cont</small>
                        </div>
                    </div>
                </div>
                <form method="POST" action="/login">
                    @csrf
                    <div class="form-group mt-3">
                        <div class="col d-flex justify-content-center m-2">
                            <input style="width: 400px" type="email" class="form-control @error('email') is-invalid @enderror" name="email" placeholder="Email" required>
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col d-flex justify-content-center m-2">
                            <input style="width: 400px" type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Parola" required>
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col text-center">

                                    <a href='/auth/google'>
                                        <img src="/assets/google-icon.svg" alt="google" width="20px">
                                    </a>

                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="row">
                            <span class="text-center">
                                Nu ai cont?
                                <a href="#" id="switchToRegister" style="color: black; text-decoration: none;">
                                    <b>Crează</b>
                                </a>
                            </span>
                        </div>
                    </div>
                    <div class="container" style="display: flex; justify-content: center; align-items: center;">
                        <div class="row">
                            <small>
                                <a href="/reset-password" style="text-decoration: none; color:black">Ai uitat parola?</a>
                            </small>
                        </div>
                    </div>
                    <div class="mt-2 d-flex justify-content-center">
                        <button type="submit" class="btn" style="background-color: #70A462; color: white;">Login</button>
                    </div>
                </form>
            </div>

            <div class="card m-5 p-5" id="registerForm" style="display: none;">
                <div class="container">
                    <div class="col">
                        <div class="row align-items-center justify-content-center">
                            <h3 class="text-center">Înregistrează-te</h3>
                        </div>
                        <div class="row text-center">
                            <small>Informațiile tale sunt in siguranță</small>
                        </div>
                    </div>
                </div>
                <form method="POST" action="{{ '/register' }}">
                    @csrf
                    <div class="form-group mt-3">
                        <div class="col d-flex justify-content-center m-2">
                            <input style="width: 400px" type="text" class="form-control" name="name" placeholder="Nume utilizator" required>
                        </div>
                        <div class="col d-flex justify-content-center m-2">
                            <input style="width: 400px" type="email" class="form-control" name="email" placeholder="Email" required>
                        </div>
                        <div class="col d-flex justify-content-center m-2">
                            <input style="width: 400px" type="password" class="form-control" name="password" placeholder="Parola" required>
                        </div>
                    </div>

                    <div class="container">
                        <div class="row">
                            <span class="text-center">
                                Ai deja cont?
                                <a href="#" id="switchToLogin" style="color: black; text-decoration: none;">
                                    <b>Autentificare</b>
                                </a>
                            </span>
                        </div>
                    </div>
                    <div class="mt-2 d-flex justify-content-center">
                        <button type="submit" class="btn" style="background-color: #70A462; color: white;">Înregistrează-te</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const registerForm = document.getElementById('registerForm');
    const switchToRegister = document.getElementById('switchToRegister');
    const switchToLogin = document.getElementById('switchToLogin');

    switchToRegister.addEventListener('click', function(e) {
        e.preventDefault();
        loginForm.style.display = 'none';
        registerForm.style.display = 'block';
    });

    switchToLogin.addEventListener('click', function(e) {
        e.preventDefault();
        registerForm.style.display = 'none';
        loginForm.style.display = 'block';
    });
});
</script>
@endsection