@extends('layouts.login')
@section('content')
<style>
    .password, #captcha_generate, #remember {
        cursor: pointer
    }
    .form-group.input-group.captcha_1.has-error {
        border: 0px !important;
    }
    form#my-form {
        width: 100%;
        margin: auto;
    }
    span#username-error, span#password-error{
        position: absolute;
        margin-top: -25px;
    }
    span#captcha-error {
        position: absolute;
        margin-top: -20px;
    }
    .input-group.mb-3 {
        margin-bottom: 25px !important;
    }
    #remember {
        font-size: 15px;
        font-weight: 200;
        top: 0px;
        display: inline-block;
        position: absolute;
        left: 28px;
    }
	input[type=checkbox], input[type=radio]{
    transform: scale(1.2);}
    .error-help-block {
        color: #ff0000;
        font-size: 13px;
        margin-left: 4px;
    }
</style>
<div class="col-full">
    <div class="">
        <div class="login-box">
            <div class="login-logo">
                <div class="version_1">v1.0.0</div>
            </div>
            @if (!empty($message))
            <div class="alert alert-danger" id="error">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <span>{{ $message }}</span>
            </div>
            @endif

            <div class="card">
                <div class="card-body login-card-body">
                   

<form action="{{ route('login') }}" method="post" id="my-form" autocomplete="off">
    @csrf
    <div class="input-group mb-3">
        <input id="username" type="text" maxlength="20" class="form-control{{ $errors->has('username') ? ' is-invalid' : '' }}" name="username" value="{{ $username }}" required autofocus placeholder="{{ trans('layout.username') }}">
        <span class="fa fa-user input-group-text"></span>
    </div>
    @if ($errors->has('username'))
    <span id="username-error" class="help-block error-help-block">{{ $errors->first('username') }}</span>
    @endif

    <div class="input-group mb-3">
        <input id="password" type="password" maxlength="20" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="{{ trans('layout.Password')  }}" value="{{ $password }}" required>
        <span toggle="#password" class="fa fa-eye-slash input-group-text password"></span>
    </div>
    @if ($errors->has('password'))
    <span id="password-error" class="help-block error-help-block">{{ $errors->first('password') }}</span>
    @endif
    <div class="row">
        <!-- /.col -->
        <div class="col-4"></div>
        <div id='submit-button' class="col-4">
            <button id="submit" type="submit" class="btn btn-primary btn-block btn-flat">{{trans('layout.login')}}</button>
        </div>
        <div id="loader" style="display:none"></div>
        <div class="col-4"></div>
        <!-- /.col -->
    </div>
    <input type="hidden" name="captcha_type" value="{{$captcha}}" required />
</form>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="col-half desktop_cont">
        <div>
            <p class="login_txt">{{ trans('layout.Heading') }} </p>
            <hr>
            <p class="login_txt1">{{ trans('layout.About B2B') }}</p>
        </div>
    </div> -->
</div>
<!-- /.login-box -->
@endsection
@section('javascript')
<script src="{{ asset('dist/plugins/jquery/jquery.min.js')}}"></script>
<script src="{{ asset('dist/plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
{!! $validator->selector('#my-form') !!}

@if($captcha == 'Google')
<script>

</script>
@endif
<script>
    $(document).on('click', '#captcha_generate', function() {
        $('div.form-group.input-group.captcha_1 > img').trigger('click');
    });

    $(document).on('click', '#submit', function() {
        setTimeout(function() {
            var form = $('#my-form').data();
            var error = form.validator.errorList;
            if (error.length == 0) {
                $('#submit-button').hide();
                $('#loader').show();
            }
        }, 300);
    });

    $(".input-group-text.password").click(function() {
        $(this).toggleClass("fa-eye fa-eye-slash");
        var input = $($(this).attr("toggle"));
        if (input.attr("type") == "password") {
            input.attr("type", "text");
        } else {
            input.attr("type", "password");
        }
    });
    
    setTimeout(function(){
        $('.error-help-block').remove();
    }, 5000);
</script>
@stop