@extends('layouts.auth-master')

@section('content')
<style>
    .social-btn {
        width: 2.5rem;
        height: 2.5rem;
        border: none;
        border-radius: 0.75rem; /* rounded square */
        transition: border 0.2s ease-in-out;
    }

    .social-btn:hover {
        border: 1px solid #ccc; /* light gray */
    }

    .icon-center {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
</style>
<div id="registerForm" class="mt-0"> 
    
    <div class="mb-3 col-sm-12  mx-auto">
        <input type="hidden" name="_token" value="{{ csrf_token() }}" />
        @csrf
                
        <h1 class="h3 mb-3 fw-normal">{{ __('menu.loginmessage')}}</h1>
    </div>
    <div class="mb-3 col-sm-10 col-md-10 col-xl-8 mx-auto">
        @include('layouts.partials.messages')
              
        <div class="bg-blue rounded-4 p-2 d-flex justify-content-center gap-3">
                <!-- h1 class="h3 mb-3 fw-normal">{{ __('menu.socialmedialogin')}}</h1 -->
                <a class="btn   social-btn" href="{{ route('social.redirect', 'facebook')}}" style=" background-color: #1877F2;" id="btn-fblogin">
                    <div class="icon-center ">
                        <i class="fab fa-facebook-f text-white fs-3"></i>
                    </div>
                </a>
      
               
                <a class="  btn  social-btn" href="{{ route('social.redirect', 'instagram') }}" style="  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); " id="btn-fblogin">
                <div class="icon-center"><i class="fab fa-instagram text-white fs-3"></i>   </div>
                </a>
 
                <a class=" btn   social-btn" href="{{ route('social.redirect', 'tiktok') }}" style="  background-color: #000000;" id="btn-fblogin">
                <div class="icon-center"><i class="fab fa-tiktok text-white fs-3"></i>   </div>
                </a>
        </div>
        <div class="mb-3 mt-4 col-sm-12  mx-auto">                
        <h1 class="h3 mb-3 fw-normal">{{ __('menu.loginlocal')}}</h1>
    </div>
        <div class="mt-4 ">
            <form method="post" action="{{ route('login.perform') }}" class="d-inline ">

            
                <div class="form-group   mb-0">
                
                      
                    <input type="hidden" name="redirect" value="{{ (request('redirect') !== null) ? (request('redirect').'/'.(request('id'))) : '' }}">
                    <input type="text" class="form-control item " name="username" value="" placeholder="Email" required="required" autofocus  >
                    <label for="username"> </label>
                    @if ($errors->has('username'))
                        <span class="text-danger text-left">{{ $errors->first('username') }}</span>
                    @endif
                </div>
            
                <div class="form-group  mb-0">
                    <input type="password" class="form-control item " name="password" value="" placeholder="Password" required="required"  >
                    <label for="floatingPassword"> </label>
                    @if ($errors->has('password'))
                        <span class="text-danger text-left">{{ $errors->first('password') }}</span>
                    @endif
                </div>
                <div class="flex text-end">
                    <a href="{{ route('password.request') }}"><span class="text-info mb-3 fw-normal">{{ __('menu.forgotpwassword')}}</span></a>
                </div>
                <button class="w-100 btn   btn-primary" type="submit" >Login</button>
               <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
            </form>
        </div>   
        
        <div class="flex items-center justify-end mt-0 pt-4">               
                <span class="text  mb-3 fw-normal">{{ __('applabels.notregisteredyet')}}</span><a href="/register"><span class="text  mb-3 fw-normal">{{ __('applabels.createaccount')}}</span></a>
        </div>

    </div>
 
     
    
</div>
@endsection

@push('scripts')

<script src="https://www.google.com/recaptcha/api.js?render={{ env('RECAPTCHA_SITE_KEY') }}"></script>
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {action: 'register'}).then(function(token) {
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
</script>

@endpush