@extends('layouts.app')

@section('content')

@if( ! Request::ajax() )
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{!! __('link.login') !!}</div>

                <div class="card-body">
@endif
                <div class="container">
                    <div class="row">
                        <div class="col">

                            <div class="text-center mb-3">
                                {!! __('loginModal.description') !!}
                            </div>
                            
                            <form method="POST" action="{{ route('login', app()->getLocale()) }}">
                                @csrf

                                <div class="detail-row mb-3">
                                    <div class="form-outline">
                                        <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                                        <label for="email" class="form-label">{!! __('form.email.title') !!}</label>
                                    </div>
                                    
                                    @if( Request::ajax() )
                                        <span class="invalid-feedback" role="alert">
                                            <strong></strong>
                                        </span>
                                    @else
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                        @enderror
                                    @endif
                                </div>

                                <div class="detail-row mb-3">
                                    <div class="form-outline">
                                        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                                        <label for="password" class="form-label">{!! __('form.password.title') !!}</label>
                                    </div>
                                    
                                    @if( Request::ajax() )
                                        <span class="invalid-feedback" role="alert">
                                            <strong></strong>
                                        </span>
                                    @else
                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{!! $message !!}</strong>
                                            </span>
                                        @enderror
                                    @endif
                                </div>

                                <div class="container mb-3 p-0">
                                    <div class="row">
                                        <div class="col">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
            
                                                <label class="form-check-label" for="remember">
                                                    {!! __('form.remember.title') !!}
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="text-end">
                                                @if (Route::has('password.request'))
                                                    <a class="font-size-small" href="javascript:void(0);" onclick="formModal( '{{ route('password.request', app()->getLocale()) }}', '{!! __('resetPassword.title') !!}', '{!! __('button.go') !!}', function () { $('.modal').modal('hide'); } );">
                                                        {!! __('link.forgotPassword') !!}
                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="w-100 mb-3">
                                    <button type="submit" class="btn btn-primary w-100" onclick="event.preventDefault();$('.modal-footer .btn-primary' ).trigger('click');$(this).find('span').removeClass('d-none');">
                                        {!! __('link.login') !!}
                                        <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                                    </button>
                                </div>

                                <div class="row">
                                    <div class="col-5"><hr></div>
                                    <div class="col-2 text-center">{!! __('or') !!}</div>
                                    <div class="col-5"><hr></div>
                                </div>

                                {{-- Social login --}}
                                @php $user_type = (strpos(URL::current(), 'player')) ? 'player' : 'voter'; @endphp
                                    {{-- Google sign in --}}
                                    <div class="m-2">
                                        <a href="{{ route('login.provider', ['locale' => app()->getLocale(), 'driver' => 'google', 'user_type' => $user_type]) }}" class="btn btn-raised btn-secondary google-login-button"><img src="{{ asset('/images/google_icon.png') }}"> {{ __('Google Sign in') }}</a>
                                    </div>
                                    {{-- Facebook sign in --}}
                                    <div class="m-2">
                                        <a href="{{ route('login.provider', ['locale' => app()->getLocale(), 'driver' => 'facebook', 'user_type' => $user_type]) }}" class="btn btn-raised btn-secondary facebook-login-button"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
                                            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
                                        </svg> {{ __('Facebook Sign in') }}</a>
                                    </div>
                                    {{-- Tiktok sign in --}}
                                    <div class="m-2">
                                        <a href="{{ route('login.provider', ['locale' => app()->getLocale(), 'driver' => 'tiktok', 'user_type' => $user_type]) }}" class="btn btn-raised btn-secondary tiktok-login-button"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tiktok" viewBox="0 0 16 16">
                                            <path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"/>
                                        </svg> {{ __('Tiktok Sign in') }}</a>
                                    </div>
                                    {{-- Apple sign in --}}
                                    <div class="m-2">
                                        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
                                        <script> $( document ).ready(function() { $("meta[name='appleid-signin-state']").attr('content', '{{ $user_type }}'); }); </script> {{-- Metaban beállítom a user_type-ot az apple loginhoz --}}
                                        <div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign-in"></div>
                                    </div>
                                    {{-- Twitter sign in --}}
                                    {{-- <div class="m-2">
                                        <a href="{{ route('login.provider', ['locale' => app()->getLocale(), 'driver' => 'twitter', 'user_type' => $user_type]) }}" class="btn btn-raised btn-secondary twitter-login-button">{{ __('Twitter Sign in') }}</a>
                                    </div> --}}
                            </form>
                            <div class="mt-3 text-center">
                                {!! __('loginModal.register.text') !!}
                                <a style="padding: 0px !important;" href="javascript:void(0);" 
                                    onclick="formModalNew({
                                        'url': '{{ route('register_player', app()->getLocale()) }}',
                                        'title': '{!! __('link.register') !!}',
                                        'button': '{!! __('button.go') !!}',
                                        'modalFooterVisible': false,
                                        'sendButtonClass': '',
                                        'leftBgImage': '',
                                        'leftContent': false,
                                        },function () { $('.modal').modal('hide'); }, function () {}, function () { window.location='{{ route('home', app()->getLocale())}}'; } );">{!! __('loginModal.register.link') !!}</a>
                            </div>
                        </div>
                    </div>
                </div>

@if( ! Request::ajax() )
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@endif