@extends('layouts.master', ['layout' => 'modal'])

@push('head_scripts')
<script type="text/javascript">
    function socialLogin(social) {
        if (social === "facebook") {
            var fbwindow = window.open('{{ route('login_social', 'facebook') }}', 'myvanityfairFbLogin', 'location=0,menubar=0,toolbar=0,width=800,height=700', false);
        } else if (social === "twitter") {
            var twwindow = window.open('{{ route('login_social', 'twitter') }}', 'myvanityfairTwitterLogin', 'location=0,menubar=0,toolbar=0,width=600,height=600', false);
        } else if (social === "google") {
            var ggwindow = window.open('{{ route('login_social', 'google') }}', 'myvanityfairGoogleLogin', 'location=0,menubar=0,toolbar=0,width=600,height=700', false);
        }
    }
</script>
@endpush

@section('content')
    <div class="modal-header hidden-xs-min">
        <!-- Nav tabs -->
        <ul class="row nav nav-tabs" role="tablist">
            <li role="presentation" class="col-xs-6 {{ $tab == 'register' ? 'active' : '' }}"><a href="#registrati" aria-controls="registrati" role="tab" data-toggle="tab">Registrati</a></li>
            <li role="presentation" class="col-xs-6 {{ $tab == 'login' ? 'active' : '' }}"><a href="#accedi" aria-controls="accedi" role="tab" data-toggle="tab">Accedi</a></li>
        </ul>
    </div>

    <div class="modal-body full-height-xs text-center">
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Registrati -->
            <div role="tabpanel" class="tab-pane {{ $tab == 'register' ? 'active' : '' }}" id="registrati">
                <div class="container-modal">
                    <h2 class="title text-uppercase">Registrati</h2>
                    <p class="lead lead-big">
                        Crea il tuo profilo Vanity Fair ed entra in un mondo di servizi. <a href="{{ route('home') }}" target="_parent">Scopri di più</a>
                    </p>
                    <div class="spacer"></div>
                    <ul>
                        <li>
                            <button class="btn-login fb" onclick="socialLogin('facebook');"><span class="icon icon-facebook"></span><span class="label">Registrati con Facebook</span></button>
                        </li>
                        <li>
                            <button class="btn-login tw" onclick="socialLogin('twitter');"><span class="icon icon-twitter"></span><span class="label">Registrati con Twitter</span></button>
                        </li>
                        <li>
                            <button class="btn-login g" onclick="socialLogin('google');"><span class="icon icon-google"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span><span class="label">Registrati con Google</span></button>
                        </li>
                    </ul>
                    <form class="js-form" data-form-validation method="post" action="{{ url()->current() }}">
                        {{ csrf_field() }}
                        <input type="hidden" name="action" value="register" />
                        <div class="form-group {{ $errors->has('email') ? 'error' : '' }}">
                            <div class="input-group">
                                <input type="email" name="email" value="{{ old('email') }}" data-rule-required="true" data-msg-required="Scrivi la tua email" placeholder="Email">
                                <button type="submit" class="submit">Registrati</button>
                            </div>
                            @if ($errors->has('email'))
                                @if ($errors->first('email') === 'email_exists')
                                    <p class="error">La tua mail è già presente. Accedi da <a class="tab-link" href="#accedi" aria-controls="accedi" role="tab" data-toggle="tab">qui</a></p>
                                @else
                                    <p class="error">{{ $errors->first('email') }}</p>
                                @endif
                            @endif
                        </div>
                    </form>
                </div>
                <p class="cta fixed-bottom-xs">Hai già un profilo? <a class="tab-link" href="#accedi" aria-controls="accedi" role="tab" data-toggle="tab">Accedi</a></p>
            </div>

            <!-- Accedi -->
            <div role="tabpanel" class="tab-pane {{ $tab == 'login' ? 'active' : '' }}" id="accedi">
                <div class="container-modal">
                    <h2 class="title text-uppercase">Hai già un profilo?</h2>
                    <p class="lead lead-big">
                        Accedi a Vanity Fair
                    </p>
                    <ul>
                        <li>
                            <button class="btn-login fb" onclick="socialLogin('facebook');"><span class="icon icon-facebook"></span><span class="label">Accedi con Facebook</span></button>
                        </li>
                        <li>
                            <button class="btn-login tw" onclick="socialLogin('twitter');"><span class="icon icon-twitter"></span><span class="label">Accedi con Twitter</span></button>
                        </li>
                        <li>
                            <button class="btn-login g" onclick="socialLogin('google');"><span class="icon icon-google"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span></span><span class="label">Accedi con Google</span></button>
                        </li>
                    </ul>
                    <p class="help">Oppure</p>
                    <form class="js-form" data-form-validation method="post" action="{{ url()->full() }}">
                        {{ csrf_field() }}
                        <input type="hidden" name="action" value="login" />
                        <fieldset>
                            <div class="form-group {{ $errors->has('login-error') ? 'error' : '' }}">
                                <input name="email" value="{{ old('email') }}" data-rule-required="true" data-msg-required="Scrivi la tua email" type="email" placeholder="Email" />
                            </div>
                            <div class="form-group {{ $errors->has('login-error') ? 'error' : '' }}">
                                <input name="password" value="{{ old('password') }}" data-rule-required="true" type="password" placeholder="Password" />
                                @if ($errors->has('login-error'))
                                    <p class="error">{{ $errors->first('login-error') }}</p>
                                @endif
                            </div>
                            <button type="submit" class="btn-solid full">Accedi</button>
                            <p class="help"><a href="{{ route('password_recovery') }}">Password dimenticata?</a></p>
                        </fieldset>
                    </form>
                </div>
                <p class="cta fixed-bottom-xs">Non sei ancora registrato? <a class="tab-link" href="#registrati" aria-controls="registrati" role="tab" data-toggle="tab">Registrati</a></p>
            </div>
        </div>

        @if ($errors->has('error'))
            <div class="form-error-summary">{{ $errors->first('error') }}</div>
        @endif
    </div>
@endsection