@extends('layouts.app', ['class' => 'bg-white'])

@section('content')
{{-- @include('layouts.headers.guest') --}}

<div class="user-login-5 ">
    <div class="row h-100 w-100 d-flex justify-content-center mx-auto">
        <div class="col-md-6 col-xl-6">
            <div class="container text-center mt-7">
                <img class="login-logo login-6" src="{{ asset('argon') }}/login/logo_arrahn_baru.png">
                <div class="container mt-5">

                    @if (session('status'))
                    {{-- <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                </div> --}}
                <script>
                    var status = "{{ session('status') }}";
                    $.notify({
                        icon: 'far fa-check-circle fa-2x',
                        newest_on_top: true,
                        message: "<strong class='text-center' style='font-size:15px;'>" + status + "</strong>"
                    }, {
                        type: 'success',
                        allow_dismiss: false,
                        placement: {
                            align: 'center',
                            from: 'bottom'
                        },
                        animate: {
                            enter: 'animate__animated animate__bounce',

                            exit: 'animate__animated animate__bounceOutDown'
                        }
                    });
                </script>
                @endif

                @if (session('info'))
                {{-- <div class="alert alert-info" role="alert">
                                {{ session('info') }}
            </div> --}}
            <script>
                var status = "{{ session('info') }}";
                $.notify({
                    icon: 'fas fa-info fa-2x',
                    newest_on_top: true,
                    message: "<strong style='font-size:15px;'>" + status + "</strong>"
                }, {
                    type: 'info',
                    allow_dismiss: false,
                    placement: {
                        align: 'center',
                        from: 'bottom'
                    },
                    animate: {
                        enter: 'animate__animated animate__bounce',

                        exit: 'animate__animated animate__bounceOutDown'
                    }
                });
            </script>
            @endif

            <form role="form" method="POST" action="{{ route('password.email') }}">
                @csrf
                <div class="row d-flex justify-content-center">
                    <div class="col-xs-5 col-xl-5 ">
                        <div class="form-group {{ $errors->has('email') ? ' has-danger' : '' }}">
                            <input placeholder="Emel" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" placeholder="{{ __('Email') }}" type="email" name="email" value="{{ old('email') }}" id="login-username" required autofocus aria-required="true">
                        </div>
                        @if ($errors->has('email'))
                        <span class="invalid-feedback" style="display: block;margin-top:-10px !important;" role="alert">
                            <strong>{{ $errors->first('email') }}</strong>
                        </span>
                        @endif
                    </div>
                </div>

                <div class="text-center">
                    <button type="submit" class="btn btn-success my-4">{{ __('Tetap Semula Katalaluan') }}</button>
                </div>

                <br>
                <div class="row">
                    <div class="col-sm-12 col-xs-12 forgetpassword">
                        <center>
                            <div class="forgot-password">
                                <a href="{{ route('auth.registerfirst') }}" class="text-light">
                                    <font color="#3598dc">Pertama Kali</font>
                                </a> |@if (Route::has('password.request')) <a href="#" class="text-light">
                                    <font color="#3598dc">Lupa Katalaluan</font>
                                </a>@endif
                                {{-- <a href="{{ route('auth.registerfirst') }}" class="text-light"><font color="#3598dc">Pertama Kali</font></a> |@if (Route::has('password.request')) <a href="{{ route('password.request') }}" class="text-light">
                                    <font color="#3598dc">Lupa Katalaluan</font>
                                </a>@endif --}}
                            </div>
                            <div style="font-size: 10px;"><br><br>Paparan terbaik menggunakan Mozilla Firefox, Google Chrome & Internet Explorer 9.0 ke atas dengan resolusi 1920 x 1080</div>
                        </center>
                    </div>

                </div>
            </form>

        </div>
    </div>


    <br>
</div>
<div class="col-md-6 col-xl-6 py-0 px-0">

    @include('auth.slides.slidespage')

</div>
</div>
</div>

<script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
            slideIndex = 1
        }
        slides[slideIndex - 1].style.display = "block";
        setTimeout(showSlides, 10000); // Change image every 2 seconds
    }
</script>
@endsection