<!DOCTYPE html>
<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Login - Sistem Gaji Sekolah</title>

    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <style>

        body{
    margin:0;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:'Segoe UI',sans-serif;
    background:linear-gradient(-45deg,#2563eb,#1d4ed8,#4f46e5,#0f172a);
    background-size:400% 400%;
    animation:bgMove 12s ease infinite;
}

@keyframes bgMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

.login-card{
    border:none;
    border-radius:25px;
    overflow:hidden;
    backdrop-filter:blur(15px);
    background:rgba(255,255,255,.96);
    box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.left-panel{
    background:linear-gradient(160deg,#2563eb,#1e3a8a);
    color:#fff;
    padding:60px 50px;
    position:relative;
}

.left-panel::before{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-80px;
    right:-80px;
}

.left-panel::after{
    content:'';
    position:absolute;
    width:180px;
    height:180px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    bottom:-50px;
    left:-50px;
}

.logo{
    width:95px;
    height:95px;
    border-radius:50%;
    background:white;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
}

.logo img{
    width:65px;
}

.right-panel{
    padding:50px;
}

.form-control{
    height:50px;
    border-radius:12px;
}

.input-group-text{
    border-radius:12px 0 0 12px;
    background:#f8fafc;
}

.btn-login{
    height:52px;
    border-radius:12px;
    font-weight:600;
    transition:.3s;
}

.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(37,99,235,.35);
}

.footer-login{
    font-size:13px;
    color:#888;
    margin-top:25px;
    text-align:center;
}

.time-box{
    background:rgba(255,255,255,.12);
    border-radius:15px;
    padding:12px;
    margin-top:35px;
    text-align:center;
}

#clock{
    font-size:30px;
    font-weight:bold;
}

@media(max-width:768px){

.left-panel{
display:none;
}

.right-panel{
padding:35px;
}

}

    </style>

</head>

<body>

<div class="container">

    <div class="row justify-content-center">

        <div class="col-lg-10">

            <div class="card login-card">

                <div class="row g-0">

                    <div class="col-md-6">

                        <div class="left-panel">

                            <div class="logo-circle">
                                <i class="fas fa-graduation-cap"></i>
                            </div>

                            <h2>Sistem Gaji Sekolah</h2>

                            <p class="mt-3">

                                Aplikasi Pengelolaan Absensi,
                                Jadwal Mengajar dan Penggajian Guru.

                            </p>

                            <hr>

                            <p class="mb-0">
                                Login untuk mengakses dashboard.
                            </p>
                            <div class="time-box">
                            <div id="clock"></div>
                            <small id="tanggal"></small>

                        </div>

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="right-panel">

                            <div class="text-center mb-4">

                                <h3 class="fw-bold">
                                    Login
                                </h3>

                                <p class="text-muted">
                                    Masukkan akun Anda
                                </p>

                            </div>

                            @if(session('error'))

                            <div class="alert alert-danger">

                                {{ session('error') }}

                            </div>

                            @endif

                            <form action="/login"
                                  method="POST">

                                @csrf

                                <div class="mb-3">

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

                                    <div class="input-group">

                                        <span class="input-group-text">

                                            <i class="fas fa-envelope"></i>

                                        </span>

                                        <input
                                            type="email"
                                            name="email"
                                            class="form-control"
                                            placeholder="Masukkan email"
                                            required>

                                    </div>

                                </div>

                                <div class="mb-4">

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

                                    <div class="input-group">

                                        <span class="input-group-text">

                                            <i class="fas fa-lock"></i>

                                        </span>

                                        <input
                                            type="password"
                                            id="password"
                                            name="password"
                                            class="form-control"
                                            placeholder="Masukkan password"
                                            required>

                                        <button
                                            class="btn btn-outline-secondary"
                                            type="button"
                                            onclick="showPassword()">

                                            <i class="fas fa-eye" id="eye"></i>

                                        </button>

                                    </div>
                                    <div class="form-check mb-4">

                                        <input
                                            class="form-check-input"
                                            type="checkbox"
                                            name="remember">

                                        <label class="form-check-label">

                                            Ingat Saya

                                        </label>

                                    </div>
                                </div>

                                <button
                                    type="submit"
                                    class="btn btn-primary btn-login w-100">

                                    <i class="fas fa-sign-in-alt"></i>

                                    Login

                                </button>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>
<script>

function showPassword(){

let x=document.getElementById("password");

let eye=document.getElementById("eye");

if(x.type==="password"){

x.type="text";

eye.className="fas fa-eye-slash";

}else{

x.type="password";

eye.className="fas fa-eye";

}

}

function updateClock(){

let now=new Date();

document.getElementById('clock').innerHTML=
now.toLocaleTimeString('id-ID');

document.getElementById('tanggal').innerHTML=
now.toLocaleDateString('id-ID',{
weekday:'long',
day:'numeric',
month:'long',
year:'numeric'
});

}

setInterval(updateClock,1000);

updateClock();

</script>
</body>

</html>