@if( ! Request::ajax() )
@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{!! __('Register') !!}</div>

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

                                <div class="text-center mb-3">
                                    {!! __('registerModal.description') !!}
                                </div>
                                
                                <form method="POST" action="{{ route('register', app()->getLocale()) }}">
                                    @csrf
                                    <input type="hidden" name="type" value="{{ strpos(URL::current(), 'player') ? 'player' : 'voter' }}">

                                    {!! RecaptchaV3::field('register') !!}
                                    
                                    @if(!$only_social_login)

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

                                    <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">
                                            <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="new-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="detail-row mb-3">
                                        <div class="form-outline">
                                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                            <label for="password-confirm" class="form-label">{!! __('form.confirmPassword.title') !!}</label>
                                        </div>
                                    </div>
                                    @endif

                                    <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');">
                                            {!! __('Register') !!}
                                            <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">vagy</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>
                                        
                                </form>

                                <div class="mt-3 text-center">
                                    {!! __('registerModal.login.text') !!}
                                    <a style="padding: 0px !important;" href="javascript:void(0);" onclick="formModalNew({
                                            'url': '{{ route('login_player', app()->getLocale()) }}',
                                            'title': '{!! __('link.login') !!}',
                                            'button': '{!! __('button.go') !!}',
                                            'modalFooterVisible': false,
                                            'sendButtonClass': '',
                                            'leftBgImage': '',
                                            'leftContent': false,
                                        },function () { $('.modal').modal('hide'); }, function () {}, function () { window.location='{{ route('home', app()->getLocale())}}'; } );">{!! __('registerModal.login.link') !!}</a>
                                </div>

                                <script>
                                $(document).ready(function() {
                                    $('.selectSearch').select2({
                                        dropdownParent: $('.modal')
                                    });

                                    @if($only_social_login)
                                    $('.modal-footer').find('.btn.btn-primary').addClass('d-none');
                                    @endif
                                });
                                </script>

                            </div>
                        </div>
                    </div>

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


@endsection

@endif