@extends('layouts.auth')

@section('content')
<div class="col-sm-8 col-md-6 col-xl-9">
    <form id="loginform" action="{{ route('login') }}" method="POST">
        {{ csrf_field() }}
        <h2 class="mb-3 fs-7 fw-bolder">{{ config('app.name') == 'FlowyTeam' ? __('app.welcomeToFlowyTeam') : __('app.welcomeToOKRI') }}</h2>
        <p class=" mb-9">{{ config('app.name') == 'FlowyTeam' ? __('auth.authTitleFlowyTeam') : __('auth.authTitleOKRI') }}</p>
        <div class="row">
            <div class="col-6 mb-2 mb-sm-0">
                <a href="{{route('auth.social','google')}}" class="btn btn-white text-dark border fw-normal d-flex align-items-center justify-content-center rounded-2 py-8" role="button">
                    <img src="{{ asset('/assets/v2/images/svgs/google-icon.svg') }}" alt="" class="img-fluid me-2" width="18" height="18">
                    <span class="d-none d-md-block fs-2">@lang('app.connectUsingGoogle')</span>
                </a>
            </div>
            <div class="col-6">
                <a href="{{route('auth.microsoft')}}" class="btn btn-white text-dark border fw-normal d-flex align-items-center justify-content-center rounded-2 py-8" role="button">
                    <img src="{{ asset('/assets/v2/images/svgs/microsoft-icon.png') }}" alt=""
                        class="img-fluid me-2" width="18" height="18">
                    <span class="d-none d-md-block fs-2">@lang('app.connectUsingMicrosoft')</span>
                </a>
            </div>
        </div>
        <div class="position-relative text-center my-4">
            <p class="mb-0 fs-4 px-3 d-inline-block bg-white text-dark z-index-5 position-relative">
                @lang('app.or')</p>
            <span class="border-top w-100 position-absolute top-50 start-50 translate-middle"></span>
        </div>
        @if (session('message'))
            <div class="alert alert-danger">
                {{ session('message') }}
            </div>
        @elseif(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if ($err)

        <div class="alert alert-danger m-t-10">
            @if($err == 'error')
            @lang('app.errGoogleAuthenticationFailed')
            @elseif($err == 'error-microsoft')
            @lang('app.errMicrosoftAuthenticationFailed')
            @endif
            @if($err == 'no-user')
            @lang('app.errGoogleUserNotFound')
            @elseif($err == 'no-user-microsoft')
            @lang('app.errMicrosoftUserNotFound')
            @endif
            @if($err == 'user-not-exist')
            @lang('app.errGoogleUserNotExist')
            @elseif($err == 'user-not-exist-microsoft')
            @lang('app.errMicrosoftUserNotExist')
            @endif
        </div>
        @endif

        @if(!empty($messsage) && !empty($class))
            <div class="alert alert-{{$class}} m-t-10">
                {!! $messsage !!}
            </div>
        @endif
        
        <div class="mb-3">
            <label for="email" class="form-label">@lang('app.email')</label>
            <input type="email" class="form-control {{ $errors->has('email') ? 'is-invalid' : '' }}" id="email" value="{{ old('email') }}" name="email" required aria-describedby="emailHelp" placeholder="" autofocus>
            @if ($errors->has('email'))
            <div class="invalid-feedback">
                {{ $errors->first('email') }}
            </div>
            @endif
        </div>
        <div class="mb-4">
            <label for="password" class="form-label">@lang('app.password')</label>
            <input class="form-control" id="password" type="password" name="password" required="" placeholder="">
            <span toggle="#password" class="ti ti-eye-closed field-icon toggle-password"></span>
            @if ($errors->has('password'))
            <div class="help-block with-errors">{{ $errors->first('password') }}</div>
            @endif
        </div>
        <div class="d-flex align-items-center justify-content-between mb-4">
            <div class="form-check">
                <input id="checkbox-signup" class="form-check-input primary" type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
                <label for="checkbox-signup" class="form-check-label text-dark"> @lang('app.rememberMe') </label>
            </div>
            <a class="text-primary fw-medium" href="{{ route('password.request') }}">@lang('app.forgotPassword')?</a>
        </div>
        <button id="save-form" class="btn btn-gradient w-100 py-8 mb-4 rounded-2"
        type="submit">@lang('app.login')</button>
        <div class="d-flex align-items-center justify-content-between">
            <p class="mb-0 fw-medium">@lang('app.dontHaveAnAccount')?<a class="text-primary fw-medium ms-2" href="{{ route('front.signup.index') }}" class="text-primary m-l-5">@lang('app.signup')</a></p>
            <p class="mb-0">
                                @if($displayLanguages)
                    <span class="pull-right">
                        {{__('app.language')}}:
                        <a href="{{ route('front.change-language','en') }}" data-toggle="tooltip" data-placement="bottom" data-original-title="English">EN</a> 
                        @foreach($languageSettings as $language)
                        <a href="{{ route('front.change-language',$language->language_code) }}" data-toggle="tooltip" data-placement="bottom" data-original-title="{{$language->language_name}}">{{$language->language_display}}</a>
                        @endforeach                                       
                    </span>  
                @endif 
            </p> 
        </div>
    </form>
</div>
@endsection ?>