@extends($activeTemplate . 'layouts.frontend')
@section('content')
    @php
        $auth = getContent('authentication.content', true);
        $credentials = $general->socialite_credentials;
    @endphp
    <section class="login-section position-relative">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-6 d-flex align-items-center justify-content-start d-none d-xl-block">
                    <div class="thumb--wrap">
                        @if(!empty($auth?->data_values?->auth_image))
                            <img src="{{ getImage(getFilePath('frontend') . '/authentication/' . $auth->data_values->auth_image) }}"
                                alt="@lang('Banner Image')">
                        @else
                            <img src="{{ asset('assets/images/general/default.png') }}" alt="@lang('Default Banner')">
                        @endif
                    </div>
                </div>
                <div class="col-xl-6 col-lg-8 col-md-10 col-md-8">
                    <div class="login-box w--100">
                        <div class="content mb-5">
                            <h4 class="title mb-2">@lang('Sign In to Your Account')</h4>
                            <p class="text-center">@lang('Enter your credentials to access your dashboard.')</p>
                        </div>
                        <div class="form--wrap">
                            <form method="POST" action="{{ route('user.login') }}" class="verify-gcaptcha">
                                @csrf
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-4 form-group">
                                            <label class="mb-2 form--label">@lang('Username or Email')<span
                                                    class="text-danger">*</span></label>
                                            <input class="form--control" name="username" id="username"
                                                value="{{ old('username') }}" placeholder="@lang('Username or Email')"
                                                required>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="mb-4">
                                            <div class="form-group">
                                                <label class="mb-2 form--label">@lang('Password')<span
                                                        class="text-danger">*</span></label>
                                                <div class="input--group position-relative">
                                                    <input type="password" class="form--control" id="password"
                                                        name="password" placeholder="@lang('Password')" required>
                                                    <div class="password-show-hide fas fa-eye-slash toggle-password-change"
                                                        data-target="password"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                            <x-captcha></x-captcha>
                                    </div>
                                </div>
                                <div class="login-meta d-flex justify-content-between align-items-center flex-wrap mb-4 gap-2"
                                    data-wow-delay="0.5s">
                                    <div class="form--check">
                                        <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                                        <label class="ms-2" for="remember">@lang('Remember me')</label>
                                    </div>
                                    <div class="condition-text">
                                        <a href="{{ route('user.password.request') }}">@lang('Forgot Password?')</a>
                                    </div>
                                </div>
                                <button class="btn btn--base btn--lg w-100">@lang('Sign In')</button>
                            </form>
                        </div>
                        @if ($credentials->google->status == 1 || $credentials->facebook->status == 1)
                            <div class="social-option mb-4">
                                <div class="text position-relative d-flex justify-content-center mb-3">
                                    <h6 class="bg--white mb-0">@lang('OR')</h6>
                                </div>
                                <ul class="d-flex justify-content-center align-items-center gap--12">
                                     @if ($credentials->google->status == 1)
                                    <li>
                                        <a href="{{ route('user.social.login', 'google') }}" class="w--100 h--100 d-flex justify-content-center align-items-center">
                                            <i class="fa-brands fa-google text--base"></i>
                                        </a>
                                    </li>
                                    @endif
                                    @if ($credentials->facebook->status == 1)
                                    <li>
                                        <a href="{{ route('user.social.login', 'facebook') }}" class="w--100 h--100 d-flex justify-content-center align-items-center">
                                            <i class="fa-brands fa-facebook text--base"></i>
                                        </a>
                                    </li>
                                    @endif
                                   
                                </ul>
                            </div>
                        @endif
                        <div class="mt-4 text-center">
                            <p>@lang('Don\'t have any account?') <a href="{{ route('user.register') }}" class="text--underline text--base">@lang('Create Account')</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection