<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - SIS-LAJAR</title>
    <link rel="icon" type="image/png" href="{{ asset('images/logo-skansa.png') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        :root {
            /* Perubahan Tema Warna Biru (Antara Muda dan Tua) */
            --primary: #3b82f6; /* Biru Menengah */
            --primary-dark: #1e40af; /* Biru Tua */
            --bg-light: #f8fafc;
            --text-dark: #1e293b;
            --text-muted: #64748b;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            overflow-x: hidden;
            margin: 0;
            background-color: #ffffff;
        }
        
        .login-container {
            min-height: 100vh;
            width: 100%;
            display: flex;
        }

        /* --- ANIMASI --- */
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-up { animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }

        /* --- BAGIAN KIRI (HERO & JAM) --- */
        .left-side {
            /* Gradien biru disesuaikan agar menyatu dengan gambar background */
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.85), rgba(30, 58, 138, 0.95)), 
                        url("{{ asset('images/bg-login.jpeg') }}");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            padding: 3rem;
            box-shadow: inset -20px 0 50px rgba(0,0,0,0.1);
        }

        .clock-large {
            font-size: 8.5rem; /* Jam Diperbesar */
            font-weight: 800;
            line-height: 1;
            letter-spacing: -3px;
            text-shadow: 0 10px 40px rgba(0,0,0,0.4);
            margin-bottom: 0.5rem;
        }

        .date-large {
            font-size: 1.35rem; /* Sedikit dibesarkan mengimbangi jam */
            font-weight: 500;
            margin-bottom: 4rem;
            opacity: 0.9;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        /* Kartu Status Jam (Premium Glassmorphism) */
        .lesson-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            padding: 2.5rem 3rem;
            text-align: center;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            min-width: 380px;
            transition: transform 0.3s ease;
        }
        
        .lesson-card:hover { transform: translateY(-5px); }

        .lesson-title {
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: rgba(255,255,255,0.8);
        }

        .lesson-timer {
            font-size: 3.5rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            letter-spacing: -1px;
            text-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        /* --- BAGIAN KANAN (FORM LOGIN) --- */
        .right-side {
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .login-box {
            width: 100%;
            max-width: 440px;
            padding: 3rem;
            opacity: 0; /* Untuk animasi fade-up */
        }

        .brand-logo-container { margin-bottom: 2.5rem; }
        
        /* Modern Inputs */
        .form-group-custom {
            position: relative;
            margin-bottom: 1.5rem;
        }
        
        .form-group-custom i {
            position: absolute;
            top: 50%;
            left: 1.2rem;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 1.2rem;
            transition: color 0.3s ease;
        }

        .form-control-modern {
            width: 100%;
            padding: 1rem 1rem 1rem 3rem;
            border-radius: 16px;
            border: 2px solid transparent;
            background-color: var(--bg-light);
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-dark);
            transition: all 0.3s ease;
        }
        
        .form-control-modern::placeholder { color: #94a3b8; font-weight: 400; }
        
        .form-control-modern:focus {
            outline: none;
            background-color: #ffffff;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
        }
        
        .form-control-modern:focus + i, .form-group-custom:focus-within i {
            color: var(--primary);
        }

        /* Modern Button */
        .btn-login {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            border: none;
            border-radius: 16px;
            padding: 1rem;
            font-weight: 700;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
            width: 100%;
            margin-top: 1.5rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.25);
        }
        
        .btn-login:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px rgba(59, 130, 246, 0.35);
        }
        
        .btn-login:active { transform: translateY(0); }

        /* Footer Copyright */
        .footer-copy {
            position: absolute; 
            bottom: 2rem; 
            font-size: 0.85rem; 
            font-weight: 500;
            color: var(--text-muted);
            text-align: center;
            width: 100%;
            left: 0;
        }

        /* Responsif untuk HP (Layar Kecil) */
        @media (max-width: 991px) {
            .left-side { display: none; } 
            .right-side { min-height: 100vh; padding: 2rem 1rem; }
            .login-box { padding: 2rem; background: #ffffff; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.08); border: 1px solid #f1f5f9; }
            body { background-color: var(--bg-light); }
        }
    </style>
</head>
<body>

<div class="container-fluid p-0">
    <div class="row g-0 login-container">
        
        {{-- SISI KIRI (HERO & WIDGET WAKTU) --}}
        <div class="col-lg-7 left-side d-none d-lg-flex">
            <div class="animate-fade-up text-center">
                <div id="clock" class="clock-large">00:00</div>
                <div id="date" class="date-large">Memuat tanggal...</div>
            </div>

            <div class="lesson-card animate-fade-up delay-1">
                <div class="lesson-title" id="lesson-name">Sedang Memuat...</div>
                <div class="lesson-timer">
                    <i class="bi bi-hourglass-split"></i>
                    <span id="countdown">--:--</span>
                </div>
                <div class="mt-3 fw-medium" style="font-size: 0.95rem; opacity: 0.8;" id="lesson-range">
                </div>
            </div>
        </div>

        {{-- SISI KANAN (FORM LOGIN) --}}
        <div class="col-lg-5 col-12 right-side">
            <div class="login-box animate-fade-up delay-2">
                
                <div class="text-center brand-logo-container">
                    <img src="{{ asset('images/logo-skansa.png') }}" alt="Logo" width="100" class="mb-3 drop-shadow">
                    <h2 class="fw-bold text-dark mb-1" style="letter-spacing: -0.5px;">Selamat Datang</h2>
                    <p class="text-muted fw-medium">Masuk untuk mengakses SIS-LAJAR</p>
                </div>

                <form id="loginForm" method="POST" action="{{ route('login.post') }}">
                    @csrf
                    
                    @if(session('error'))
                        <div class="alert alert-danger text-center small fw-bold rounded-4 border-0 bg-danger bg-opacity-10 text-danger fade show mb-4 py-2">
                            <i class="bi bi-exclamation-octagon-fill me-1"></i> {{ session('error') }}
                        </div>
                    @endif

                    <div class="form-group-custom">
                        <input type="text" name="username" class="form-control-modern" placeholder="Username / NIP" required autofocus autocomplete="off">
                        <i class="bi bi-person-fill"></i>
                    </div>

                    <div class="form-group-custom">
                        <input type="password" name="password" class="form-control-modern" placeholder="Kata Sandi" required>
                        <i class="bi bi-shield-lock-fill"></i>
                    </div>

                    <button type="submit" class="btn-login">
                        MASUK SEKARANG <i class="bi bi-arrow-right ms-2"></i>
                    </button>
                </form>
                
            </div>
            
            <div class="footer-copy d-none d-lg-block animate-fade-up delay-3">
                &copy; {{ date('Y') }} Sistem Manajemen Pembelajaran - SMKN 10 Makassar
            </div>
        </div>

    </div>
</div>

{{-- SCRIPT JAM & LOGIKA JADWAL --}}
<script>
    const lessonSchedule = @json($lessonHours ?? []); 

    function updateSystem() {
        const now = new Date();
        
        // --- 1. UPDATE JAM & TANGGAL ---
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        document.getElementById('clock').innerText = `${hours}:${minutes}`;

        const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' };
        document.getElementById('date').innerText = now.toLocaleDateString('id-ID', options);

        // --- 2. UPDATE STATUS PELAJARAN ---
        let activeLesson = null;
        
        const currentTotalMinutes = (now.getHours() * 60) + now.getMinutes();
        const currentSeconds = now.getSeconds();

        for (let i = 0; i < lessonSchedule.length; i++) {
            const lesson = lessonSchedule[i];
            
            const [startH, startM] = lesson.start_time.split(':').map(Number);
            const [endH, endM] = lesson.end_time.split(':').map(Number);
            
            const startTotal = (startH * 60) + startM;
            const endTotal = (endH * 60) + endM;

            if (currentTotalMinutes >= startTotal && currentTotalMinutes < endTotal) {
                let lessonName = lesson.name;
                if (!isNaN(lessonName)) {
                    lessonName = "Jam Ke-" + lessonName;
                }

                activeLesson = {
                    name: lessonName,
                    range: `${lesson.start_time.substring(0,5)} - ${lesson.end_time.substring(0,5)}`,
                    endTimeTotalMinutes: endTotal
                };
                break; 
            }
        }

        const lessonNameEl = document.getElementById('lesson-name');
        const countdownEl = document.getElementById('countdown');
        const rangeEl = document.getElementById('lesson-range');
        const cardEl = document.querySelector('.lesson-card');

        if (activeLesson) {
            lessonNameEl.innerText = "SEDANG BERLANGSUNG: " + activeLesson.name;
            rangeEl.innerHTML = `<i class="bi bi-clock me-1"></i> ${activeLesson.range} WITA`;
            
            const diffMinutes = activeLesson.endTimeTotalMinutes - currentTotalMinutes - 1; 
            const diffSeconds = 60 - currentSeconds;
            
            const m = String(diffMinutes).padStart(2, '0');
            const s = String(diffSeconds === 60 ? 0 : diffSeconds).padStart(2, '0');
            
            countdownEl.innerText = `${m}:${s}`;
            
            cardEl.style.background = "rgba(16, 185, 129, 0.25)"; 
            cardEl.style.borderColor = "rgba(16, 185, 129, 0.4)";

        } else {
            lessonNameEl.innerText = "DILUAR JAM PELAJARAN";
            countdownEl.innerText = "--:--";
            rangeEl.innerHTML = '<i class="bi bi-moon-stars me-1"></i> Tidak ada aktivitas belajar';
            
            cardEl.style.background = "rgba(255, 255, 255, 0.1)";
            cardEl.style.borderColor = "rgba(255, 255, 255, 0.2)";
        }
    }

    setInterval(updateSystem, 1000);
    updateSystem(); 

    // --- 3. PROSES AJAX LOGIN & SWEETALERT ---
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        e.preventDefault(); 

        const form = this;
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalBtnText = submitBtn.innerHTML;

        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Memproses...';
        submitBtn.disabled = true;

        const formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                'Accept': 'application/json' 
            }
        })
        .then(response => {
            return response.json().then(data => {
                if (response.ok) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Login Berhasil!',
                        text: 'Selamat Datang, ' + (data.nama || 'User'),
                        showConfirmButton: false,
                        timer: 1500,
                        timerProgressBar: true,
                        customClass: { popup: 'rounded-4 shadow-lg border-0' } 
                    }).then(() => {
                        window.location.href = data.redirect || "{{ route('dashboard') }}";
                    });
                } else {
                    throw data;
                }
            });
        })
        .catch(error => {
            submitBtn.innerHTML = originalBtnText;
            submitBtn.disabled = false;

            let errorMessage = "Username atau password salah!";
            if (error.errors) {
                errorMessage = Object.values(error.errors)[0][0];
            } else if (error.message) {
                errorMessage = error.message;
            }

            Swal.fire({
                icon: 'error',
                title: 'Akses Ditolak',
                text: errorMessage,
                confirmButtonColor: '#4361ee',
                customClass: {
                    popup: 'rounded-4 shadow-lg border-0',
                    confirmButton: 'rounded-pill px-5 py-2 fw-bold'
                }
            });
            
            form.querySelector('input[name="password"]').value = '';
        });
    });
</script>

</body>
</html>