{{-- @extends('layouts.layouts')

@section('content')
    <section style="margin-top: 100px">
    <div class="container py-5 col-xxl-6">
        <h3 class="fw-bold mb-3">Halaman Login Admin</h3>

        <form action="/login" method="POST">
            @csrf
            <div class="form-group mb-3">
                <label for="">Masukan Email</label>
                <input type="email" name="email" class="form-control">
            </div>
            
            <div class="form-group mb-3">
                <label for="">Masukan Password</label>
                <input type="password" name="password" class="form-control">
            </div>

            <button type="submit" class="btn btn-primary">Login</button>
        </form>
    </div>
    </section>
@endsection --}}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Admin | Website Sekolah</title>

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

    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        body {
            min-height: 100vh;
            background:
                linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
                url('{{ asset('assets/images/taman.jpeg') }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .login-card {
            backdrop-filter: blur(6px);
            background: rgba(255, 255, 255, 0.92);
        }
    </style>
</head>

<body>

    <div class="container min-vh-100 d-flex align-items-center justify-content-center">
        <div class="col-md-6 col-lg-4">

            <div class="card login-card shadow-lg border-0 rounded-4">
                <div class="card-body p-4 p-md-5">

                    <!-- Header -->
                    <div class="text-center mb-4">
                        <img src="{{ asset('assets/images/logo-smanda.png') }}" width="70" class="mb-2"
                            alt="Logo Sekolah">
                        <h4 class="fw-bold">Login Admin</h4>
                        <p class="text-muted small">Sistem Informasi Sekolah</p>
                    </div>

                    <!-- Form -->
                    <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="bi bi-envelope"></i>
                                </span>
                                <input type="email" name="email" class="form-control"
                                    placeholder="admin@sekolah.sch.id" required>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Password</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-lock"></i>
                                </span>

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

                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword()">
                                    <i class="bi bi-eye" id="iconPassword"></i>
                                </button>
                            </div>
                        </div>


                        <button type="submit" class="btn btn-primary w-100 py-2 rounded-3">
                            <i class="bi bi-box-arrow-in-right me-1"></i> Login
                        </button>
                    </form>

                    <!-- Footer -->
                    <div class="text-center mt-4">
                        <small class="text-muted">
                            © {{ date('Y') }} Website Sekolah
                        </small>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <script>
        function togglePassword() {
            const password = document.getElementById("password");
            const icon = document.getElementById("iconPassword");

            if (password.type === "password") {
                password.type = "text";
                icon.classList.remove("bi-eye");
                icon.classList.add("bi-eye-slash");
            } else {
                password.type = "password";
                icon.classList.remove("bi-eye-slash");
                icon.classList.add("bi-eye");
            }
        }
    </script>

</body>

</html>
