@extends('auth.layouts.auth')

@section('meta')
    @php
        $data = metaData('login');
    @endphp
@endsection

@section('description')
    {{ $data->description }}
@endsection

@section('title')
    {{ __('login') }}
@endsection

@section('og:image')
    {{ asset($data->image) }}
@endsection

@section('content')
    <div class="row mt-5">
        <div class="full-height col-12 order-1 order-lg-0">
            <div class="container">
                <div class="row full-height align-items-center">
                    <div class="col-xl-5 col-lg-6 col-md-12">
                        <div class="auth-box2">
                            <form action="{{ route('login') }}" method="POST" class="rt-form" id="login_form">
                                @csrf
                                <span class="mb-0 fs-1">👋</span>
                                <h4 class="rt-mb-20">{{ __('log_in') }}</h4>
                                <span class="d-block body-font-3 text-gray-600 rt-mb-32">
                                    {{ __('dont_have_account') }}
                                    {{-- <span>
                                        <a href="{{ route('register') }}">{{ __('create_account') }}
                                        </a>
                                    </span> --}}
                                </span>
                                <div class="mb-4">
                                    <div class="input-group input-group-lg">
                                        <span class="input-group-text bg-light rounded-start border-0 text-secondary px-3"><i class="ph-envelope"></i></span>
                                        <input type="email" name="email" id="email" class="form-control border-0 bg-light rounded-end ps-1 @error('email') is-invalid @enderror" value="{{ old('email') }}" placeholder="{{ __('email_address') }}">
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">{{ __($message) }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mb-4">
                                    <div class="input-group input-group-lg ">
                                        <span class="input-group-text bg-light rounded-start border-0 text-secondary px-3"><i class="ph-lock"></i></span>
                                        <input name="password" id="password" value="" class="form-control border-0 bg-light rounded-end ps-1 @error('password') is-invalid @enderror" type="password" placeholder="{{ __('password') }}">
                                        {{-- <div class="d-flex fromGroup">
                                            <input name="password" id="password" value=""
                                                class="form-control border-0 bg-light rounded-end ps-1 @error('password') is-invalid @enderror" type="password"
                                                placeholder="{{ __('password') }}">
                                            <div onclick="passToText('password','eyeIcon')" id="eyeIcon" class="has-badge">
                                                <i class="ph-eye @error('password') m-3 @enderror"></i>
                                            </div>
                                        </div> --}}
                                        @error('password')
                                            <span class="text-danger" role="alert">{{ __($message) }}</span>
                                        @enderror
                                    </div>
                                    <div id="passwordHelpBlock" class="form-text"> Your password must be 8 characters at least </div>
                                </div>
                                @if (config('captcha.active'))
                                    <div class="rt-mb-15">
                                        <div class="g-custom-css">
                                            {!! NoCaptcha::display() !!}
                                        </div>
                                        @if ($errors->has('g-recaptcha-response'))
                                            <span class="text-danger text-sm">
                                                <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                            </span>
                                        @endif
                                    </div>
                                @endif
                                <div class="d-flex flex-wrap rt-mb-30">
                                    <div class="flex-grow-1">
                                        <div class="form-check from-chekbox-custom">
                                            <input name="remember" id="remember" class="form-check-input" type="checkbox"
                                                value="1">
                                            <label class="form-check-label pointer text-gray-700 f-size-14" for="remember">
                                                {{ __('keep_me_logged') }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="flex-grow-0">
                                        <span class="body-font-4">
                                            <a href="{{ route('password.request') }}" class="text-primary-500">
                                                {{ __('forget_password') }}
                                            </a>
                                        </span>
                                    </div>
                                </div>
                                <button id="submitButton" type="submit" class="btn btn-primary d-block rt-mb-15">
                                    <span class="button-content-wrapper ">
                                        <span class="button-icon align-icon-right">
                                            <x-svg.rightarrow-icon />
                                        </span>
                                        <span class="button-text">
                                            {{ __('log_in_button') }}
                                        </span>
                                    </span>
                                </button>
                            </form>
                            <div class="row">
								<!-- Divider with text -->
								<div class="position-relative my-4">
									<hr>
									<p class="small position-absolute top-50 start-50 translate-middle bg-body px-4">Or</p>
								</div>
                                <div class="col-xl-6">
                                    <a href="#" class="btn bg-google text-white d-block" style="background-color: #3672d9;">
                                        <svg class="me-2" width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M14.2969 8.05078C14.2578 10.1602 13.6133 11.8594 12.3633 13.1484C11.0938 14.4375 9.39453 15.1016 7.26562 15.1406C5.91797 15.1211 4.69727 14.7891 3.60352 14.1445C2.50977 13.5 1.64062 12.6309 0.996094 11.5371C0.351562 10.4434 0.0195313 9.22266 0 7.875C0.0195313 6.52734 0.351562 5.30664 0.996094 4.21289C1.64062 3.11914 2.50977 2.25 3.60352 1.60547C4.69727 0.960938 5.91797 0.628906 7.26562 0.609375C9.23828 0.648437 10.8594 1.2832 12.1289 2.51367L10.166 4.41797C9.24805 3.59766 8.22266 3.22656 7.08984 3.30469C5.95703 3.36328 4.96094 3.79297 4.10156 4.59375C3.26172 5.41406 2.8125 6.50781 2.75391 7.875C2.79297 9.18359 3.23242 10.2676 4.07227 11.127C4.93164 11.9863 5.99609 12.4355 7.26562 12.4746C8.22266 12.4551 8.99414 12.2598 9.58008 11.8887C10.166 11.5176 10.6055 11.0977 10.8984 10.6289C11.1719 10.1406 11.3379 9.71094 11.3965 9.33984H7.26562V6.82031H14.1797C14.2578 7.17188 14.2969 7.58203 14.2969 8.05078Z" fill="white"/>
                                        </svg>
                                            
                                        {{-- <i class="ph-google-logo-bold text-white me-2 align-middle"></i> --}}
                                        Login with Google
                                    </a>                                    
                                </div>
                                <div class="col-xl-6">
                                    <a href="#" class="btn bg-facebook text-white d-block" style="background-color: #5d82d1;">
                                        <svg class="me-2" width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M8.17383 8.8125L8.58398 6.08789H5.97656V4.33008C5.97656 3.93945 6.09375 3.60742 6.32812 3.33398C6.54297 3.04102 6.94336 2.88477 7.5293 2.86523H8.70117V0.550781C8.68164 0.550781 8.45703 0.521484 8.02734 0.462891C7.61719 0.404297 7.13867 0.375 6.5918 0.375C5.51758 0.375 4.6582 0.6875 4.01367 1.3125C3.38867 1.9375 3.06641 2.8457 3.04688 4.03711V6.08789H0.673828V8.8125H3.04688V15.375H5.97656V8.8125H8.17383Z" fill="white"/>
                                        </svg>                                            
                                        {{-- <i class="ph-facebook-logo-bold text-white me-2 align-middle"></i> --}}
                                        Login with Facebook</a>                                    
                                </div>
							</div>
                            <div class="mt-4 text-center">
								<span>Don't have an account? <a href="{{ route('register') }}">{{ __('create_account') }}</a></span>
							</div>
                            @php
                                $google = config('zakirsoft.google_active') && config('zakirsoft.google_id') && config('zakirsoft.google_secret');
                                $facebook = config('zakirsoft.facebook_active') && config('zakirsoft.facebook_id') && config('zakirsoft.facebook_secret');
                                $twitter = config('zakirsoft.twitter_active') && config('zakirsoft.twitter_id') && config('zakirsoft.twitter_secret');
                                $linkedin = config('zakirsoft.linkedin_active') && config('zakirsoft.linkedin_id') && config('zakirsoft.linkedin_secret');
                                $github = config('zakirsoft.github_active') && config('zakirsoft.github_id') && config('zakirsoft.github_secret');
                            @endphp
                            <div>
                                @if ($google || $facebook || $twitter || $linkedin || $github)
                                    <p class="or text-center">{{ __('or') }}</p>
                                @endif
                                <div class="row">
                                    @if ($google)
                                        <div class="justify-content-center col-12 rt-mb-15">
                                            <a href="{{ route('social.login', 'google') }}"
                                                class="btn btn-outline-plain d-block custom-padding me-3 rt-mb-xs-10 ">
                                                <span class="button-content-wrapper">
                                                    <span class="button-icon align-icon-left">
                                                        <x-svg.google-icon />
                                                    </span>
                                                    <span class="button-text">
                                                        {{ __('login_with_google') }}
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    @endif
                                    @if ($facebook)
                                        <div class="justify-content-center col-12 rt-mb-15">
                                            <a href="{{ route('social.login', 'facebook') }}"
                                                class="btn btn-outline-plain d-block custom-padding me-3 rt-mb-xs-10 ">
                                                <span class="button-content-wrapper ">
                                                    <span class="button-icon align-icon-left">
                                                        <x-svg.facebook-icon />
                                                    </span>
                                                    <span class="button-text">
                                                        {{ __('login_with_facebook') }}
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    @endif
                                    @if ($twitter)
                                        <div class="justify-content-center col-12 rt-mb-15">
                                            <a href="{{ route('social.login', 'twitter') }}"
                                                class="btn btn-outline-plain d-block custom-padding me-3 rt-mb-xs-10 ">
                                                <span class="button-content-wrapper ">
                                                    <span class="button-icon align-icon-left">
                                                        <x-svg.twitter-icon fill="#007ad9" />
                                                    </span>
                                                    <span class="button-text">
                                                        {{ __('login_with_twitter') }}
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    @endif
                                    @if ($linkedin)
                                        <div class="justify-content-center col-12 rt-mb-15">
                                            <a href="{{ route('social.login', 'linkedin') }}"
                                                class="btn btn-outline-plain d-block custom-padding me-3 rt-mb-xs-10 ">
                                                <span class="button-content-wrapper ">
                                                    <span class="button-icon align-icon-left">
                                                        <x-svg.linkedin-icon />
                                                    </span>
                                                    <span class="button-text">
                                                        {{ __('login_with_linkedin') }}
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    @endif
                                    @if ($github)
                                        <div class="justify-content-center col-12 rt-mb-15">
                                            <a href="{{ route('social.login', 'github') }}"
                                                class="btn btn-outline-plain d-block custom-padding me-3 rt-mb-xs-10 ">
                                                <span class="button-content-wrapper ">
                                                    <span class="button-icon align-icon-left">
                                                        <x-svg.github-icon />
                                                    </span>
                                                    <span class="button-text">
                                                        {{ __('login_with_github') }}
                                                    </span>
                                                </span>
                                            </a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="auth-right-sidebar r-z order-lg-1 order-0">
            <div class="sidebar-bg" style="background-image: url({{ asset($cms_setting->login_page_image) }})">
                <div class="sidebar-content">
                    <h4 class="text-gray-10 rt-mb-50">{{ __('login_cources_waiting_for_you') }}</h4>
                    <div class="d-flex">
                        <div class="flex-grow-1 rt-mb-24">
                            <div class="card jobcardStyle1 counterbox4">
                                <div class="card-body">
                                    <div class="rt-single-icon-box icon-center2">
                                        <div class="icon-thumb">
                                            <div class="icon-64">
                                                <i class="ph-graduation-cap"></i>
                                            </div>
                                        </div>
                                        <div class="iconbox-content">
                                            <div class="f-size-20 ft-wt-5"><span
                                                    class="counter">1500</span></div>
                                            <span class=" f-size-14">{{ __('Students') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1  rt-mb-24">
                            <div class="card jobcardStyle1 counterbox4">
                                <div class="card-body">
                                    <div class="rt-single-icon-box icon-center2">
                                        <div class="icon-thumb">
                                            <div class="icon-64">
                                                <i class="ph-bank"></i>
                                            </div>
                                        </div>
                                        <div class="iconbox-content">
                                            <div class="f-size-20 ft-wt-5"><span
                                                    class="counter">700</span></div>
                                            <span class=" f-size-14">{{ __('universities') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-grow-1 rt-mb-24">
                            <div class="card jobcardStyle1 counterbox4">
                                <div class="card-body">
                                    <div class="rt-single-icon-box icon-center2">
                                        <div class="icon-thumb">
                                            <div class="icon-64">
                                                <i class="ph-money"></i>
                                            </div>
                                        </div>
                                        <div class="iconbox-content">
                                            <div class="f-size-20 ft-wt-5"><span>8 Cr</span></div>
                                            <span class=" f-size-14">{{ __('Scholarships') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- The Modal -->
    <div id="ModalBtn" class="modal">
        <div class="row justify-content-center m-2 mt-5 pt-5">
            <div class="col-sm-12 col-lg-4">
                <div class="rt-rounded-12">
                    <div class="card border border-gray-500">
                        <div class="card-header bg-primary text-white font-size-25">
                            {{ __('select_one') }}
                        </div>
                        <form class="d-inline justify-content-center" method="POST" action="{{ route('social.register') }}">
                            @csrf
                            @if (session()->has('warning'))
                                <div class="alert alert-warning m-3" role="alert">
                                    {{ __('we_couldnot_find_any_accounts_please_continue_to_register_as_a_candidate_or_employer') }}
                                </div>
                            @endif
                            <div class="card-body">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-label"
                                            for="experience">{{ __('employer_or_candidate') }}</label>
                                        <select name="user" class="form-controll rounded" id="">
                                            <option value="candidate">{{ __('candidate') }}</option>
                                            <option value="company">{{ __('employer') }}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer d-flex justify-content-between">
                                <a href="{{ route('login') }}" class="close btn btn-danger">
                                    <div class="button-content-wrapper ">
                                        <span class="button-text">
                                            {{ __('cancel') }}
                                        </span>
                                    </div>
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <div class="button-content-wrapper ">
                                        <span class="button-text">
                                            {{ __('register_now') }}
                                        </span>
                                    </div>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script>
        $(document).ready(function() {
            Validate();
            $('#email, #password').keyup(Validate);
        });

        function Validate() {
            if (
                $('#email').val().length > 0 &&
                $('#password').val().length > 0) {
                $('#submitButton').prop('disabled', false);
            } else {
                $('#submitButton').prop('disabled', true);
            }
        }

        function passToText(id, icon) {
            var input = $('#' + id);
            var eyeIcon = $('#' + icon);
            if (input.is('input[type="password"]')) {
                eyeIcon.html('<i class="ph-eye-slash @error('password') m-3 @enderror"></i>');
                input.attr('type', 'text');
            } else {
                eyeIcon.html('<i class="ph-eye @error('password') m-3 @enderror"></i>');
                input.attr('type', 'password');
            }
        }

        function loginCredentials(type) {
            if (type == 'candidate') {
                $('#email').val('candidate@mail.com')
                $('#password').val('password')
            } else {
                $('#email').val('company@mail.com')
                $('#password').val('password')
            }

            $('#login_form').submit();
        }

        if ({{ request('social_register') ?? 0 }} == 1) {
            LoginService();
        }

        function LoginService() {
            $("#ModalBtn").css("display", "block");
        }
    </script>
@endsection