@extends('layouts.login')

@section('content')
	
<div class="ajaxLoading"></div>

<div class="form-signin">

    <!-- AJAX Message -->
    <p
        class="message alert alert-danger"
        style="display: none;">
    </p>


    <!-- Session Message -->
    @if(Session::has('status'))

        @if(session('status') == 'success')

            <div class="alert alert-success">
                <i class="fa-solid fa-circle-check"></i>
                {!! Session::get('message') !!}
            </div>

        @else

            <div class="alert alert-danger">
                <i class="fa-solid fa-circle-exclamation"></i>
                {!! Session::get('message') !!}
            </div>

        @endif

    @endif


    <!-- Validation Errors -->
    @if($errors->any())

        <div class="alert alert-danger">

            <ul class="mb-0 pl-3">

                @foreach($errors->all() as $error)

                    <li>
                        {{ $error }}
                    </li>

                @endforeach

            </ul>

        </div>

    @endif


    <div
        id="tab-sign-in"
        class="authentication-form">


        {!! Form::open([
            'url' => 'signin',
            'class' => 'form-horizontal',
            'id' => 'LoginAjax',
            'parsley-validate' => '',
            'novalidate' => ''
        ]) !!}


        <!-- Email -->
        <div class="form-group-modern">

            <label class="form-label-modern">
                Email
            </label>

            <div class="input-wrapper">

                <i class="fa-solid fa-envelope input-icon"></i>

                <input
                    type="email"
                    id="inputEmail"
                    name="email"
                    class="input-modern"
                    placeholder="Masukkan email Anda"
                    required
                    autofocus>

            </div>

        </div>


        <!-- Password -->
        <div class="form-group-modern">

            <label class="form-label-modern">
                Password
            </label>

            <div class="input-wrapper">

                <i class="fa-solid fa-lock input-icon"></i>

                <input
                    type="password"
                    id="inputPassword"
                    name="password"
                    class="input-modern"
                    placeholder="Masukkan password"
                    required>

                <span
                    class="password-toggle"
                    id="togglePassword">

                    <i class="fa-solid fa-eye"></i>

                </span>

            </div>

        </div>


        <!-- Tahun Tanam -->
        <div class="form-group-modern">

            <label class="form-label-modern">
                Tahun Tanam
            </label>

            <div class="input-wrapper">

                <i class="fa-solid fa-calendar-days input-icon"></i>

                <select
                    id="inputKebun"
                    name="thntnm"
                    class="input-modern select-modern">

                    @foreach(explode(',', env('ARRAY_DB_DATABASES')) as $db_database)
                        <option value="{{ $db_database }}" {{ env('DEFAULT_DB_DATABASE') == $db_database ? 'selected' : '' }}>
                            {{ $db_database }}
                        </option>
                    @endforeach
                </select>

                <span
                    class="password-toggle"
                    style="pointer-events: none;">

                    <i class="fa-solid fa-chevron-down"></i>

                </span>

            </div>

        </div>


        <!-- Remember -->
       <div class="remember-wrapper">

			<label class="remember-label">

				<input
					type="checkbox"
					id="remember"
					name="remember"
					value="1"
					class="remember-checkbox">

				<span class="remember-checkmark">
					<i class="fa-solid fa-check"></i>
				</span>

				<span class="remember-text">
					Ingat saya
				</span>

			</label>

		</div>


        <!-- Login Button -->
        <button
            type="submit"
            id="loginButton"
            class="g-recaptcha btn-login-modern"
            data-sitekey="6LedqLsrAAAAAJqYm5ALmCKbVL12UZx7nCK_zJXB"
            data-callback="onSubmit"
            data-action="submit">

            <span id="loginButtonText">
                Masuk ke Sistem
            </span>

            <i class="fa-solid fa-arrow-right ml-2"></i>

        </button>


        {!! Form::close() !!}

    </div>

</div>


<script>
$(document).ready(function () {

    const form = $('#LoginAjax');

    form.parsley();


    // Toggle Password
    $('#togglePassword').on('click', function () {

        const password = $('#inputPassword');
        const icon = $(this).find('i');

        if (password.attr('type') === 'password') {

            password.attr('type', 'text');

            icon
                .removeClass('fa-eye')
                .addClass('fa-eye-slash');

        } else {

            password.attr('type', 'password');

            icon
                .removeClass('fa-eye-slash')
                .addClass('fa-eye');

        }

    });


    // Submit Form
    form.submit(function () {

        if (!form.parsley().isValid()) {
            return false;
        }

        const options = {
            dataType: 'json',
            beforeSubmit: showRequest,
            success: showResponse
        };

        $(this).ajaxSubmit(options);

        return false;

    });

});


function showRequest() {

    $('.ajaxLoading').show();

    $('#loginButtonText')
        .text('Sedang masuk...');

    $('#loginButton')
        .prop('disabled', true);

}


function showResponse(data) {

    if (data.status === 'success') {

        $('#loginButtonText')
            .text('Login berhasil');

        window.location.href = data.url;

        return;

    }


    $('.ajaxLoading').hide();

    $('#loginButtonText')
        .text('Masuk ke Sistem');

    $('#loginButton')
        .prop('disabled', false);

    $('.message')
        .html(
            '<i class="fa-solid fa-circle-exclamation"></i> ' +
            data.message
        )
        .fadeIn();


    setTimeout(function () {

        $('.message').fadeOut();

    }, 5000);

}


function onSubmit(token) {

    document
        .getElementById('LoginAjax')
        .submit();

}
</script>

@stop