<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Orang Tua FMHS</title>

    <!-- BOOTSTRAP -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- GOOGLE FONT -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <!-- FEATHER ICON -->
    <script src="https://unpkg.com/feather-icons"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;

            min-height: 100vh;

            background:
                linear-gradient(rgba(255, 255, 255, 0.10),
                    rgba(255, 255, 255, 0.10)),
                linear-gradient(to right, #4e73df, #6FCF97);

            display: flex;
            justify-content: center;
            align-items: center;

            overflow: hidden;
            position: relative;
        }

        /* BACKGROUND EFFECT */
        .circle1 {
            position: absolute;
            width: 400px;
            height: 400px;
            background: rgba(255, 255, 255, 0.12);
            border-radius: 50%;
            top: -120px;
            left: -120px;
        }

        .circle2 {
            position: absolute;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.10);
            border-radius: 50%;
            bottom: -100px;
            right: -80px;
        }

        /* LOGIN BOX */
        .login-box {
            width: 100%;
            max-width: 420px;

            background: rgba(255, 255, 255, 0.95);

            backdrop-filter: blur(10px);

            border-radius: 30px;

            padding: 40px;

            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

            position: relative;
            z-index: 2;

            animation: fadeIn 0.7s ease;
        }

        /* LOGO */
        .logo-wrapper {
            width: 90px;
            height: 90px;

            background: white;

            border-radius: 25px;

            display: flex;
            justify-content: center;
            align-items: center;

            margin: auto auto 25px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        .logo-wrapper img {
            width: 60px;
        }

        /* TITLE */
        .login-title {
            text-align: center;
            font-weight: 700;
            color: #222;
            margin-bottom: 8px;
        }

        .login-subtitle {
            text-align: center;
            color: #777;
            margin-bottom: 35px;
            font-size: 14px;
        }

        /* INPUT */
        .input-group-custom {
            position: relative;
            margin-bottom: 20px;
        }

        .input-group-custom i {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
            width: 18px;
            height: 18px;
        }

        .form-control {
            height: 55px;

            border-radius: 16px;

            border: none;

            background: #f5f7fb;

            padding-left: 50px;

            font-size: 15px;
        }

        .form-control:focus {
            box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.15);
            background: white;
        }

        /* BUTTON */
        .btn-login {
            width: 100%;

            height: 55px;

            border: none;

            border-radius: 16px;

            background: linear-gradient(to right, #4e73df, #36b9cc);

            color: white;

            font-weight: 600;

            font-size: 16px;

            transition: 0.3s;

            box-shadow: 0 10px 25px rgba(78, 115, 223, 0.25);
        }

        .btn-login:hover {
            transform: translateY(-2px);
            color: white;
        }

        /* ALERT */
        .alert {
            border-radius: 15px;
            font-size: 14px;
        }

        /* FOOTER */
        .login-footer {
            text-align: center;
            margin-top: 25px;
            color: #888;
            font-size: 13px;
        }

        /* ANIMATION */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* RESPONSIVE */
        @media(max-width:576px) {

            .login-box {
                margin: 20px;
                padding: 30px 25px;
            }

            .login-title {
                font-size: 24px;
            }

        }
    </style>
</head>

<body>

    <!-- BACKGROUND -->
    <div class="circle1"></div>
    <div class="circle2"></div>

    <!-- LOGIN BOX -->
    <div class="login-box">

        <!-- LOGO -->
        <div class="logo-wrapper">
            <img src="{{ asset('logo.png') }}">
        </div>

        <!-- TITLE -->
        <h2 class="login-title">
            Login Orang Tua
        </h2>

        <div class="login-subtitle">
            Selamat Datang di SINAPS FMHS
        </div>

        <!-- ERROR -->
        @if(session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
        @endif

        <!-- FORM -->
        <form method="POST" action="/ortu/login">

            @csrf

            <!-- NIM -->
            <div class="input-group-custom">

                <i data-feather="user"></i>

                <input type="text" name="nim" class="form-control" placeholder="Masukkan NIM Mahasiswa" required>

            </div>

            <!-- PASSWORD -->
            <div class="input-group-custom">

                <i data-feather="lock"></i>

                <input type="password" name="password" class="form-control" placeholder="Masukkan password" required>

            </div>

            <!-- BUTTON -->
            <button class="btn-login">
                Login Sekarang
            </button>

        </form>

        <!-- FOOTER -->
        <div class="login-footer">
            © {{ date('Y') }} FMHS Universitas Muhammadiyah Makassar
        </div>

    </div>

    <!-- FEATHER -->
    <script>
        feather.replace();
    </script>

</body>

</html>
