<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Login | E-Absensi MTs KH Zumratul Muttaqin</title>

    {{-- PWA --}}
    <link rel="manifest" href="{{ asset('manifest.json') }}">
    <meta name="theme-color" content="#1e3c72">

    {{-- Icon --}}
    <link rel="shortcut icon" href="{{ asset('img/logo.png') }}">
    <link rel="apple-touch-icon" href="{{ asset('img/logo.png') }}">

    {{-- CSS Libraries --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">

    <style>
        /* =====================
           VARIABEL & BASE
        ===================== */
        :root {
            --primary:   #1e3c72;
            --secondary: #2a5298;
            --accent:    #ffb800;
        }

        *,
        *::before,
        *::after { box-sizing: border-box; }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            min-height: 100vh;
            margin: 0;
            padding: 24px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, #1e3c72 0%, #2a5298 60%, #3a6bc4 100%);
            background-attachment: fixed;
        }

        /* Dekorasi lingkaran latar */
        .bg-orb {
            position: fixed;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            z-index: 0;
            pointer-events: none;
        }

        /* =====================
           KARTU LOGIN
        ===================== */
        .login-card {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 420px;
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.97);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.45);
            overflow: hidden;
            animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(24px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Header dalam kartu */
        .login-header {
            text-align: center;
            padding: 40px 32px 24px;
            background: linear-gradient(160deg, #f0f4ff 0%, #fff 100%);
            border-bottom: 1px solid #eef0f7;
        }

        .login-header img {
            width: 80px;
            margin-bottom: 14px;
            filter: drop-shadow(0 4px 10px rgba(30, 60, 114, 0.2));
        }

        .login-header .app-name {
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: 2px;
            color: var(--primary);
            margin: 0 0 4px;
        }

        .login-header .school-name {
            font-size: 0.78rem;
            font-weight: 600;
            color: #94a3b8;
            letter-spacing: 0.5px;
            margin: 0;
        }

        /* Body form */
        .login-body {
            padding: 28px 32px 36px;
        }

        /* =====================
           FORM
        ===================== */
        .form-label {
            font-size: 12.5px;
            font-weight: 700;
            color: #475569;
            margin-bottom: 6px;
            letter-spacing: 0.3px;
        }

        .input-group-text {
            background: #f1f5f9;
            border-color: #e2e8f0;
            border-right: none;
            border-radius: 12px 0 0 12px;
            color: var(--primary);
            padding: 0 14px;
        }

        .form-control {
            background: #f8fafc;
            border-color: #e2e8f0;
            border-left: none;
            border-radius: 0 12px 12px 0;
            padding: 11px 14px;
            font-size: 14px;
            color: #1e293b;
            transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
        }

        .form-control::placeholder { color: #b0bec5; }

        .form-control:focus {
            background: #fff;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(30, 60, 114, 0.1);
        }

        /* Input group sinkron focus */
        .input-group:focus-within .input-group-text {
            border-color: var(--primary);
            background: #eef2ff;
            color: var(--primary);
        }

        /* Tombol toggle password */
        .btn-toggle-pass {
            background: #f1f5f9;
            border-color: #e2e8f0;
            border-left: none;
            border-radius: 0 12px 12px 0;
            color: #94a3b8;
            padding: 0 14px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .btn-toggle-pass:hover { color: var(--primary); }

        /* =====================
           TOMBOL SUBMIT
        ===================== */
        .btn-login {
            width: 100%;
            padding: 13px;
            margin-top: 8px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.5px;
            box-shadow: 0 8px 20px -4px rgba(30, 60, 114, 0.4);
            transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
        }

        .btn-login:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px -4px rgba(30, 60, 114, 0.45);
            filter: brightness(1.08);
            color: #fff;
        }

        .btn-login:active:not(:disabled) {
            transform: scale(0.98);
        }

        .btn-login:disabled {
            opacity: 0.75;
            cursor: not-allowed;
        }

        /* =====================
           TOMBOL INSTALL PWA
        ===================== */
        #installAppContainer {
            display: none;
            margin-top: 18px;
            text-align: center;
            z-index: 1;
            position: relative;
        }

        .btn-install {
            background: rgba(255, 255, 255, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.35);
            color: #fff;
            padding: 9px 22px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 600;
            backdrop-filter: blur(6px);
            transition: background 0.2s, color 0.2s;
        }

        .btn-install:hover {
            background: #fff;
            color: var(--primary);
        }

        /* =====================
           FOOTER
        ===================== */
        .footer-text {
            z-index: 1;
            position: relative;
            margin-top: 22px;
            text-align: center;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.7;
        }

        .footer-text strong { color: rgba(255, 255, 255, 0.85); }
        .footer-text .version { opacity: 0.45; font-size: 11px; }
    </style>
</head>

<body>

    {{-- Dekorasi latar --}}
    <div class="bg-orb" style="width:320px;height:320px;top:-120px;right:-100px;"></div>
    <div class="bg-orb" style="width:220px;height:220px;bottom:-80px;left:-80px;"></div>
    <div class="bg-orb" style="width:140px;height:140px;bottom:120px;right:60px;"></div>

    {{-- Redirect jika sudah login --}}
    @if(auth()->check())
        <script>window.location.href = "/dashboard";</script>
    @endif

    {{-- KARTU LOGIN --}}
    <div class="login-card">

        {{-- Header --}}
        <div class="login-header">
            <img src="{{ asset('img/logo.png') }}" alt="Logo E-Absensi">
            <p class="app-name">E-ABSENSI</p>
            <p class="school-name">MTs KH Zumratul Muttaqin</p>
        </div>

        {{-- Form --}}
        <div class="login-body">
            <form action="{{ route('login.process') }}" method="POST" id="loginForm">
                @csrf

                {{-- Username --}}
                <div class="mb-3">
                    <label class="form-label" for="username">Nama Pengguna</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-person" style="font-size:1rem;"></i>
                        </span>
                        <input type="text" id="username" name="username" class="form-control"
                               placeholder="Masukkan username"
                               value="{{ old('username') }}"
                               autocomplete="username"
                               required autofocus>
                    </div>
                </div>

                {{-- Password --}}
                <div class="mb-4">
                    <label class="form-label" for="password">Kata Sandi</label>
                    <div class="input-group">
                        <span class="input-group-text">
                            <i class="bi bi-lock" style="font-size:1rem;"></i>
                        </span>
                        <input type="password" id="password" name="password" class="form-control"
                               placeholder="••••••••"
                               autocomplete="current-password"
                               required>
                        <button type="button" class="btn-toggle-pass" id="togglePassword" aria-label="Tampilkan password">
                            <i class="bi bi-eye" style="font-size:1rem;"></i>
                        </button>
                    </div>
                </div>

                <button type="submit" class="btn btn-login" id="btnSubmit">
                    Masuk Sekarang
                </button>

            </form>
        </div>
    </div>

    {{-- Tombol Install PWA --}}
    <div id="installAppContainer">
        <button id="btnInstall" class="btn btn-install">
            <i class="bi bi-download me-2"></i> Pasang Aplikasi E-Absensi
        </button>
    </div>

    {{-- Footer --}}
    <div class="footer-text">
        &copy; 2026 <strong>Malle</strong> &mdash; Universitas Perjuangan Tasikmalaya
        <br><span class="version">v2.0.1</span>
    </div>

    {{-- JS Libraries --}}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // ── Notifikasi error login ──────────────────────────────
        @if(session('loginError'))
            Swal.fire({
                icon: 'error',
                title: 'Login Gagal',
                text: "{{ session('loginError') }}",
                confirmButtonColor: '#1e3c72',
                customClass: { popup: 'rounded-4' }
            });
        @endif

        @if($errors->any())
            Swal.fire({
                icon: 'warning',
                title: 'Perhatian',
                text: "{{ $errors->first() }}",
                confirmButtonColor: '#1e3c72',
                customClass: { popup: 'rounded-4' }
            });
        @endif

        // ── Toggle password ─────────────────────────────────────
        document.getElementById('togglePassword').addEventListener('click', function () {
            const input = document.getElementById('password');
            const icon  = this.querySelector('i');
            const isHidden = input.type === 'password';
            input.type = isHidden ? 'text' : 'password';
            icon.classList.toggle('bi-eye',       !isHidden);
            icon.classList.toggle('bi-eye-slash',  isHidden);
        });

        // ── Loading saat submit ─────────────────────────────────
        document.getElementById('loginForm').addEventListener('submit', function () {
            const btn = document.getElementById('btnSubmit');
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Memproses...';
            btn.disabled  = true;
        });

        // ── PWA Install ─────────────────────────────────────────
        let deferredPrompt;
        const installContainer = document.getElementById('installAppContainer');
        const btnInstall       = document.getElementById('btnInstall');

        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            installContainer.style.display = 'block';
        });

        btnInstall.addEventListener('click', async () => {
            if (!deferredPrompt) return;
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            deferredPrompt = null;
            installContainer.style.display = 'none';
        });

        window.addEventListener('appinstalled', () => {
            installContainer.style.display = 'none';
            deferredPrompt = null;
            Swal.fire({
                icon: 'success',
                title: 'Terpasang!',
                text: 'Aplikasi berhasil dipasang di layar utama.',
                timer: 2500,
                showConfirmButton: false
            });
        });

        // ── Service Worker ──────────────────────────────────────
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .catch(err => console.warn('SW gagal didaftarkan:', err));
            });
        }
    </script>

</body>
</html>