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

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Login - Politeknik Negeri Jember</title>
    <!-- Custom fonts for this template-->
    <link href="{{ asset('vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="{{ asset('css/sb-admin-2.min.css')}}" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: #00A9E0; 
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .login-container {
            width: 100%;
            max-width: 400px;
        }

        .login-box {
            background: #000;
            padding: 40px;
            text-align: center;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            min-height: 500px;
        }

        .logo {
            width: 270px;
            height: auto;
            margin-bottom: 30px;
        }

        h2 {
            color: #fff;
            font-size: 18px;
            margin-bottom: 40px;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            color: #fff;
            text-align: left;
            font-size: 14px;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input {
            padding: 10px;
            border: none;
            border-radius: 20px;
            margin-bottom: 15px;
            outline: none;
            width: 100%;
        }

        .register-link {
            color: #ddd;
            font-size: 14px;
            margin-top: 20px;
        }

        .register-link a {
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }

        .register-link a:hover {
            text-decoration: underline;
        }

        @keyframes slideDown {
            from { top: -50px; opacity: 0; }
            to { top: 20px; opacity: 1; }
        }
        
        .register-alert {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            max-width: 90%;
            animation: slideDown 0.5s ease-out;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>

<body>
    @if(session('register_status'))
    <div class="register-alert alert-{{ session('register_status') }}">
        <i class="fas @if(session('register_status') == 'success') fa-check-circle @else fa-exclamation-circle @endif" 
           style="margin-right: 10px; font-size: 20px;"></i>
        {{ session('register_message') }}
    </div>
    @endif

    <div class="login-container">
        <div class="login-box">
            <img src="{{ asset('images/logo.png') }}" alt="Logo Politeknik Negeri Jember" class="logo">
            <h2>Sistem Penyesuaian UKT</h2>
            
            <form class="user" method="post" action="{{ route('login')}}">
                @csrf
                <div class="form-group text-left">
                    <label for="email" class="ml-2">Email</label>
                    <input id="email" type="email" class="form-control form-control-user @error('email') is-invalid @enderror" 
                           name="email" value="{{ old('email') }}" required autocomplete="email" autofocus 
                           placeholder="Masukan Email">

                    @error('email')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                
                <div class="form-group text-left">
                    <label for="password" class="ml-2">Password</label>
                    <input id="password" type="password" class="form-control form-control-user @error('password') is-invalid @enderror" 
                           name="password" required autocomplete="current-password" placeholder="Masukan Password">

                    @error('password')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                
                <button class="btn btn-danger btn-user btn-block" 
                        style="background-color: #8B0000; border-color: #8B0000; font-size: 14px; font-weight: bold">
                    Login
                </button>
            </form>
            
            <div class="register-link">
                Belum punya akun? <a href="{{ route('register.mahasiswa.form') }}">Daftar</a>
            </div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript-->
    <script src="{{ asset('vendor/jquery/jquery.min.js')}}"></script>
    <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>

    <!-- Core plugin JavaScript-->
    <script src="{{ asset('vendor/jquery-easing/jquery.easing.min.js')}}"></script>

    <!-- Custom scripts for all pages-->
    <script src="{{ asset('js/sb-admin-2.min.js') }}"></script>

    <script>
        // Auto hide alert after 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            const alert = document.querySelector('.register-alert');
            if (alert) {
                setTimeout(() => {
                    alert.style.transition = 'all 0.5s ease';
                    alert.style.opacity = '0';
                    alert.style.top = '-50px';
                    setTimeout(() => alert.remove(), 500);
                }, 5000);
            }
        });
    </script>
</body>
</html>