@extends('layouts.app')

@section('meta-title', 'Connectez-vous à votre espace | Pipcke')
@section('body-class', 'auth-page login-page bg-light')

@section('meta')

    <meta property="og:url" content="{{ request()->url() }}" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Connectez-vous à votre espace | Pipcke" />
    <meta property="og:description"
        content="Connectez-vous à votre espace personnel pour profiter pleinement de nos services de décoration." />
    <meta name="description"
        content="Connectez-vous à votre espace personnel pour profiter pleinement de nos services de décoration." />
    <meta property="fb:app_id" content="730800570418065">

@endsection

@section('content')
    <div class="text-center mt-60">
        <a href="{{ route('home') }}">
            <img width="150" src="{{ asset('img/logo-black.svg') }}" alt="Pipcke">
        </a>
    </div>

    <div class="row justify-content-center mt-10">
        <div class="login">
            <div>
                <h1 style="letter-spacing: 2px"
                    class="font-size-20 text-uppercase font-weight-bold text-white text-center mb-4">{!! lang('Connexion') !!}
                </h1>
                <div class="panel-body">
                    <div>
                        <a href="{{ route('auth.facebook') }}" class="btn btn-sm btn_facebook">
                            {!! lang('Utiliser un compte Facebook') !!}
                        </a>
                    </div>
                    <div>
                        <a href="{{ route('auth.google') }}" class="btn btn-sm btn_google">
                            {!! lang('Utiliser un compte Google') !!}
                        </a>
                    </div>
                    <div class="divider"><span>Ou</span></div>
                    <form class="form-horizontal" method="POST" action="{{ route('login') }}" id="login-form">
                        @if (request('redirectTo'))
                            <input type="hidden" name="redirectTo" value="{{ request('redirectTo') }}">
                        @endif
                        {{ csrf_field() }}
                        <div class="form-group mb-0 {{ $errors->has('email') ? ' has-error' : '' }}">
                            <div class="">
                                <input id="email" type="email" placeholder="Adresse email" class="form-control"
                                    tabindex="1" name="email" value="{{ old('email') }}" required autofocus>
                                @if ($errors->has('email'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('email') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="text-right mt-1 mb-1">
                            <a class="btn-link text-underline" rel="nofollow" href="{{ route('password.request') }}">
                                {!! lang('J\'ai oublié mon mot de passe') !!}
                            </a>
                        </div>
                        <div class="form-group {{ $errors->has('password') ? ' has-error' : '' }}">
                            <div style="position: relative;">
                                <input id="password" type="password" placeholder="Mot de passe" class="form-control"
                                    tabindex="2" name="password" required>

                                <i id="togglePassword" class="fa fa-eye"
                                    style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%);cursor: pointer; color: #000000;"></i>

                                @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                        <div class="form-group text-left mt-3">
                            <div class="checkbox">
                                <label class="font-size-14">
                                    <input type="checkbox" name="remember" tabindex="3"
                                        {{ old('remember') ? 'checked' : '' }}>
                                    {!! lang('Rester connecté') !!}
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" tabindex="4" class="btn btn-sm btn2 rounded w-100">
                                {!! lang('Se connecter') !!}
                            </button>
                        </div>

                        <div class="text-login font-size-14">
                            {!! lang('Vous n\'avez pas encore de compte ?') !!}
                            <a class="btn-link text-underline" href="{{ route('register') }}">
                                {!! lang('inscrivez-vous!') !!}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection