@extends('theme::layout')

@section('title', 'Connexion')

@section('content')
    <div class="connect floating grid">
        <div class="head-bloc"></div>
        <section class="main--bloc container">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if (session('success'))
                <div class="alert alert-success">
                    <p>{!! session('success') !!}</p>
                </div>
            @endif
            <div class="mobile-menu flex">
                <div class="signup--bloc flex">
                    <div class="btn-connect flex">
                        <a href="{{ route('fo.inscription') }}">
                            <h1>Je m'inscris</h1>
                        </a>
                    </div>
                    <p>Pour participer et tenter votre chance, <br>inscrivez-vous&nbsp;!</p>
                </div>
                <div class="connect--bloc flex">
                    <div class="btn-connect flex">
                        <a class="fancybox" id="inline" data-fancybox href="#connect_edit">
                            <h2>Je me connecte</h2>
                        </a>
                        <div style="display:none">
                            <div class="flex" id="connect_edit">
                                <form class="flex" method="POST" action="{{ route('fo.authenticate') }}">
                                    @csrf
                                    <div class="edit--blocs flex">
                                        <input id="" name="email" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
                                            placeholder="Email*" required>
                                        <input id="" name="password" type="password" placeholder="Mot de passe*" required>
                                        <a href="{{ route('fo.forgot-password') }}">
                                            <h2>Mot de passe oublié ?</h2>
                                        </a>
                                        <span>* Champs obligatoires</span>
                                    </div>
                                    <input class="btn" type="submit" value="Connexion">
                                </form>
                            </div>
                        </div>
                    </div>
                    <p>Si vous possédez déjà un compte Club Le Gaulois, vous pouvez utiliser les mêmes identifiants.</p>
                </div>
            </div>
            <div class="desktop-menu flex">
                <div class="signup--bloc">
                    <h1 class="post-title raleway">Je m'inscris</h1>
                    <p>Pour participer et tenter votre chance, <br>inscrivez-vous&nbsp;!</p>
                    <div class="btn-connect flex">
                        <a href="{{ route('fo.inscription') }}">Inscription</a>
                    </div>
                </div>
                <div class="connect--bloc">
                    <h2 class="post-chapter raleway">Je me connecte</h2>
                    <p>Si vous possédez déjà un compte Club Le Gaulois, vous pouvez utiliser les mêmes identifiants.</p>
                    <form class="flex" id="connect--form" method="POST" action="{{ route('fo.authenticate') }}">
                        @csrf
                        <div class="edit--blocs flex">
                            <input id="" name="email" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
                                placeholder="Email*" required>
                            <input id="" name="password" type="password" placeholder="Mot de passe*" required>
                            <a href="{{ route('fo.forgot-password') }}">
                                <h2>Mot de passe oublié ?</h2>
                            </a>
                            <span>* Champs obligatoires</span>
                        </div>
                        <input class="btn" type="submit" value="Connexion">
                    </form>
                </div>
            </div>
        </section>

    </div>
@endsection