<!DOCTYPE html>
<html lang="en" itemscope="" itemtype="http://schema.org/WebPage">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="{{ asset('img/icon_pkb.png') }}">

    <title>arOS v2.2</title>

    <style>
        @keyframes slide {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-100%);
            }
        }

        .logos {
            overflow: hidden;
            padding: 25px 0;
            white-space: nowrap;
            position: relative;
        }

        .logos-slide {
            display: inline-block;
            animation: 120s slide infinite linear;
        }

        .logos-slide img {
            height: 75px;
            margin: 0 75px;
        }
    </style>

    <script src="{{ asset('js/jquery.min.js') }}"></script>

    <link id="pagestyle" href="{{ asset('css/login-v2.css') }}" rel="stylesheet">

</head>

<body class="sign-in-cover">

    <div class="container position-sticky z-index-sticky top-0">
        <div class="row">
            <div class="col-12">
                <nav class="navbar navbar-expand-lg  blur blur-rounded top-0  z-index-3 shadow position-absolute my-3 py-2 start-0 end-0 mx-4">
                    <div class="container-fluid px-0">
                        <a class="navbar-brand font-weight-bolder ms-sm-3" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
                            ar-rahn Online System
                        </a>
                        <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
                            <ul class="navbar-nav navbar-nav-hover" style="margin-left: auto">
                                <li class="nav-item dropdown dropdown-hover mx-2">
                                    <a href="https://www.pkb.net.my/" target="_blank">pkb.net.my</a>
                                </li>
                                <li class="nav-item dropdown dropdown-hover mx-2">
                                    <a href="https://arrahn.com.my/" target="_blank">arrahn.com.my</a>
                                </li>
                                <li class="nav-item dropdown dropdown-hover mx-2">
                                    <a href="https://www.koppkb.com/" target="_blank">koppkb.com</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>

            </div>
        </div>
    </div>
    <section>
        <div class="page-header min-vh-75">
            <div class="container">
                <div class="row">
                    <div class="col-xl-4 col-lg-5 col-md-6 d-flex flex-column mx-auto">
                        <div class="card card-plain mt-8">
                            <div class="card-header pb-0 text-left">
                                <div style="display: flex; justify-content:space-between; align-items:center">
                                    <h1 class="font-weight-bolder text-info text-gradient">arOS v2.2</h1>
                                    <img src="{{ asset('img/icon_pkb.png') }}" alt="logo-arrahn" style="width: 85px">
                                </div>
                                <p class="mb-0">Adil . Telus . Mudah</p>
                            </div>
                            <div class="card-body">
                                <form method="POST" action="{{ route('login') }}">
                                    @csrf
                                    @if (Session::has('error'))
                                    <div class="text-danger" class="alert alert-warning" role="alert" style="white-space: nowrap; font-weight:bolder">Opps! Tidak berjaya
                                        disahkan. Sila semak semula e-mel/kata laluan.
                                    </div>
                                    @endif
                                    <label>E-mel</label>
                                    <div class="mb-3">
                                        <input type="email" class="form-control" placeholder="Sila isi e-mel anda ..." aria-label="Email" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                                    </div>
                                    <label>Kata Laluan</label>
                                    <div class="mb-3">
                                        <input type="password" class="form-control" placeholder="Sila isi kata laluan ..." aria-label="Password" name="password" id="password" value="{{ old('password') }}" required autocomplete="current-password">
                                        <div class="d-flex mt-2 align-items-center">
                                            <input type="checkbox" id="check">
                                            <label class="mb-0 text-muted" for="check" style="cursor: pointer;">Papar Kata Laluan</label>
                                        </div>
                                    </div>
                                    <div class="text-center">
                                        <button type="submit" class="btn bg-gradient-info w-100 mt-4 mb-0">Log
                                            Masuk</button>
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer text-center pt-0 px-lg-2 px-1">
                                <p class="mb-4 text-sm mx-auto">
                                    Masalah untuk log masuk?
                                    <a class="text-info text-gradient font-weight-bold">Hubungi
                                        iT</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="oblique position-absolute top-0 h-100 d-md-block d-none me-n8">
                            <div class="oblique-image bg-cover position-absolute fixed-top ms-auto h-100 z-index-0 ms-n6" style="background-image:url({{ asset('img/dark-blue-monterey.jpg') }}); transform: rotate(180deg);">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer min-vh-25" style="display: flex; align-items:center">
            <div class="container-fluid" style="padding: 0 !important">
                <div class="logos">
                    <div class="logos-slide">
                        <img src="{{ asset('img/logo-pkb-grey.webp') }}" alt="logo">
                        <img src="{{ asset('img/logo-kopkb-grey.webp') }}" alt="logo">
                    </div>
                </div>
                <script>
                    $(document).ready(function() {
                        for (let i = 0; i < 20; i++) {
                            var copy = document.querySelector(".logos-slide").cloneNode(true);
                            document.querySelector(".logos").appendChild(copy);
                        }

                        $('#check').click(function() {
                            $(this).is(':checked') ? $('#password').attr('type', 'text') : $('#password').attr('type', 'password');
                        });
                    });
                </script>
            </div>
        </footer>
    </section>

</body>

</html>