@extends('layouts.gthemes_auth.layout')

@push('stylesheet')
    <style>
        .dropdown-toggle::after {
            display:none!important;
        }
    </style>
@endpush

@section('content')
<div class="content-login x_row">
    <!-- Content area -->
    <div class="RAYh1e LZgQXe qmmlRd xvelocity-animation">
        <div class="RZBuIb c8DD0" aria-hidden="true">
            <div id="progressbar" role="progressbar" class="sZwd7c B6Vhqe qdulke jK7moc">
                <div class="xcNBHc um3FLe"></div>
                <div jsname="cQwEuf" class="w2zcLc Iq5ZMc"></div>
                <div class="MyvhI TKVRUb" jsname="P1ekSe"><span class="l3q5xe SQxu9c"></span></div>
                <div class="MyvhI sUoeld"><span class="l3q5xe SQxu9c"></span></div>
            </div>
        </div>
        <!-- Login form -->
        <form id="form" name="login-form" class="_login-form" method="POST" action="{{ route('login.action') }}" autocomplete="off">
            @csrf
            <input type='hidden' name='recaptcha_token' id='recaptcha_token'>
            <div class="xcard mb-2">
                <div class="xkfVF py-4 card-body">
                    <div class="text-center mb-3">
                        <a href="{{ url('/') }}">                            
                            <img src="{{ asset('content/logo-pdam.png') }}?v={{ config('custom.app_versi', '@c4k_7ud') }}" _width="60" height="100px" class="max-h-100px" alt="">                            
                            <span class="d-flex text-center">
                            {{--
                            <svg class="d-block mx-auto text-center" viewBox="0 0 160 48" preserveAspectRatio="xMaxYMax meet" width="150px" height="48px">                                
                                <text style="fill:#ffffff; font-weight:500; font-size: 30px;" x="0" y="32">&nbsp</text>
                                <text style="fill:#fbbc05; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="5" y="32">I</text>
                                <text style="fill:#fbbc05; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="25" y="32">T</text>
                                <text style="fill:#ea4335; font-weight:500; font-size: 20px;" x="32" y="32"></text>
                                <text style="fill:#4285f4; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="50" y="32">Support</text>                         
                            </svg> 
                            --}}
                            <svg class="d-block mx-auto text-center" viewBox="0 0 160 48" preserveAspectRatio="xMaxYMax meet" width="150px" height="48px">
                                <text style="fill:#ffffff; font-weight:500; font-size: 30px;" x="0" y="32">&nbsp;</text>
                                <text style="fill:#fbbc05; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="5" y="32">I</text>
                                <text style="fill: #4285f4;font-weight:600;font-size: 30px;font-family: Sedgwick Ave;" x="17.5" y="32">t</text>
                                <text style="fill:#ea4335; font-weight:500; font-size: 20px;" x="32" y="32"></text>
                                <text style="fill:#fbbc05; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="40" y="32">S</text>
                                <text style="fill:#4285f4; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="59" y="32">u</text>
                                <text style="fill:#ea4335; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="77" y="32">pp</text>
                                <text style="fill:#34a853; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="104" y="32">o</text>
                                <text style="fill:#fbbc05; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="120" y="32">r</text>
                                <text style="fill:#4285f4; font-weight:600; font-size: 30px; font-family: Sedgwick Ave;" x="133" y="32">t</text>
                            </svg>
                            </span>
                            <h5 class="text-muted pt-0 mb-3 Y4dIwd">
                                Manajemen Sistem Kelola Kebutuhan IT
                            </h5>
                        </a>
                    </div>
                                         
                    @if($errors->any())
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-custom alert-warning fade show _mb-5" role="alert">
                                <div class="alert-icon"><i class="flaticon-warning"></i></div>
                                <div class="alert-text">{{ $error }}</div>
                            </div>  
                        @endforeach
                    @endif

                    {{-- 
                    @if (count($errors) > 0)
                    <div class="text-center">
                        <div class="alert alert-danger">
                            @foreach ($errors->all() as $error)
                            {{ $error }}
                            @endforeach
                        </div>
                    </div>
                    @endif
                    @if (session()->has('message'))
                    <div class="text-center">
                        <div class="alert alert-success">
                            {{ session('message') }}
                        </div>
                    </div>
                    @endif
                    @if (session()->has('error_message'))
                    <div class="text-center">
                        <div class="alert alert-danger">
                            {{ session('error_message') }}
                        </div>
                    </div>
                    @endif
                    @if($errors->has('recaptcha_token'))
                    {{$errors->first('recaptcha_token')}}
                    @endif
                    --}}

                    <div class="text-field-container mt-4">
                        <div class="mdc-text-field mdc-text-field_email mdc-text-field--outlined col s12 px-0">
                            <input class="mdc-text-field__input validate" id="username" name="username" 
                                value="{{ $nip ?? old('username') }}" role="presentation"  autocomplete="off">
                            <div class="mdc-notched-outline">
                                <div class="mdc-notched-outline__leading"></div>
                                <div class="mdc-notched-outline__notch">
                                <label for="text-field-hero-input" class="mdc-floating-label">NIP / Username</label>
                                </div>
                                <div class="mdc-notched-outline__trailing"></div>
                            </div>
                        </div>
                        <div class="pl-0 mdc-text-field-helper-line">
                            <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg error" id="text-field-outlined-cc1-helper-text"></p>
                        </div>
                    </div>

                    <div class="text-field-container mt-2">
                        <div class="mdc-text-field mdc-text-field_password mdc-text-field--outlined col s12 px-0">
                            <input class="mdc-text-field__input validate" id="password" name="password" type="password" 
                                autocomplete="current-password" spellcheck="false" aria-label="Enter your password"
                                autocapitalize="off" data-initial-value>
                            <div class="mdc-notched-outline">
                                <div class="mdc-notched-outline__leading"></div>
                                <div class="mdc-notched-outline__notch">
                                    <label for="text-field-hero-input" class="mdc-floating-label">Password</label>
                                </div>
                                <div class="mdc-notched-outline__trailing"></div>
                            </div>
                            <i toggle="#password" class="toggle-password material-icons mdc-text-field__icon mdc-text-field__icon--trailing" tabindex="0" role="button">visibility</i>
                        </div>
                        <div class="pl-0 mdc-text-field-helper-line">
                            <p class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent mdc-text-field-helper-text--validation-msg error" id="text-field-outlined-cc2-helper-text"></p>
                        
                        </div>
                    </div>
                    
                    <div class="form-group d-none _d-flex flex-wrap justify-content-between align-items-center px-8">
                        <div class="checkbox-inline">
                            <label class="checkbox checkbox-outline checkbox-white text-white m-0">
                                <input type="checkbox" name="remember" />
                                <span></span>
                                Remember me
                            </label>
                        </div>
                    </div>
                    
                    <div class="input-field row no-gutters p-0 col-sm-12 mt-5">
                        <div class="input-field col-6">
                            <a id="dropdownMenuLink" href="#" data-toggle="dropdown" class="d-none dropdown-toggle mdc-button font-weight-bold text-capitalize text-nowrap _d-none">  
                                <span class="mdc-button__ripple "></span> {{ __('app.Register') }}
                            </a>
                            <div class="d-none dropdown-menu" aria-labelledby="dropdownMenuLink">
                                <a class="dropdown-item" href="#">Untuk Perorangan</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Untuk Perusahaan</a>
                            </div>
                        </div>
                        <div class="input-field col-6 text-right">
                            <button type="submit" class="mdc-button mdc-button--raised">  
                                <span class="mdc-button__ripple"></span> {{ __('Masuk') }}
                            </button>
                        </div>
                    </div>

                </div>
            </div>
        </form>
        <!-- /login form -->

    </div>
    <!-- /content area -->
</div>

    <script>
        const email = mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field_email'));
        const password = mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field_password'));
        email.focus();
        // password.focus();
    </script>
    <script src="https://www.google.com/recaptcha/api.js?render={{ config('custom.public_key', '@c4k_7ud') }}"></script>
    <script>
        grecaptcha.ready(function() {
            grecaptcha.execute('{{ config('custom.public_key', '@c4k_7ud') }}').then(function(token) {
                document.getElementById("recaptcha_token").value = token;
            }); 
        });
    </script>
@endsection

@push('scripts')
    <!-- Theme JS files -->
    <script src="{{ asset('global_assets/js/plugins/velocity/velocity.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/velocity/velocity.ui.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/plugins/forms/styling/uniform.min.js') }}"></script>
    <script src="{{ asset('global_assets/js/app.js') }}"></script>
    <!-- /theme JS files -->

    <script type="text/javascript">
        $(document).ready(function() {
            /**/
            $("form[name='login-form']").validate({
                errorPlacement: function(error, element) {
                    error.appendTo( element.closest('.text-field-container').find('.mdc-text-field-helper-text') );
                },
                rules: {
                    email: {
                        required: true,
                        // email: true
                    },
                    username: {
                        required: true,
                        // email: true
                    },
                    password: {
                        required: true,
                        // minlength: 5
                    }
                },
                messages: {
                    password: {
                        required: "Silahkan masukkan password anda",
                        // minlength: "Your password must be at least 5 characters long"
                    },
                    email: "Silahkan masukkan email / username anda",
                    username: "Silahkan masukkan NIP / username anda"
                },
                submitHandler: function(form) {                    
                    $('[role=progressbar]').removeClass('qdulke jK7moc');
                    $('.preloader').fadeIn('slow').removeClass('d-none');                    
                    setTimeout(function(){
                        form.submit();
                    }, 1000);                    
                }
            });           
            
            $(".toggle-password").click(function() {
                var input = $($(this).attr("toggle"));
                if (input.attr("type") == "password") {
                    // $(this).attr( 'class', "cursor-pointer toggle-password icon-eye-blocked" );
                    input.attr("type", "text");
                    $(this).html("visibility_off");
                } else {
                    // $(this).attr( 'class', "cursor-pointer toggle-password icon-eye" );
                    input.attr("type", "password");
                    $(this).html("visibility");
                }              
            });

            window.setTimeout(() => {
            document
                .querySelectorAll('.mdc-text-field__input:-webkit-autofill')
                .forEach(el => {
                const textField = el.parentNode;
                const label = textField.querySelector('.mdc-floating-label');
                if (label) {
                    label.classList.add('mdc-floating-label--float-above');
                }
                if (textField.MDCTextField) {
                    textField.MDCTextField.foundation_.notchOutline(true);
                }
                });
            }, 300);

            $(".dropdown-item").click(function() {
                $('[role=progressbar]').removeClass('qdulke jK7moc');
                var url = this.href;
                window.location.href= url;
            });
        });
    </script>    
@endpush