<!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="<?php echo e(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=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
    
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        body {
            font-family: 'Inter', sans-serif;
            overflow: hidden; /* Hilangkan scrollbar default */
            margin: 0;
        }
        
        .login-container {
            height: 100vh;
            width: 100%;
        }

        /* --- BAGIAN KIRI (INFO JADWAL & JAM) --- */
        .left-side {
            /* Background Gambar + Overlay Biru Transparan */
            background: linear-gradient(rgba(67, 97, 238, 0.7), rgba(46, 39, 168, 0.7)), 
                        url("<?php echo e(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: 2rem;
        }

        .clock-large {
            font-size: 5rem;
            font-weight: 700;
            line-height: 1;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .date-large {
            font-size: 1.5rem;
            font-weight: 300;
            margin-bottom: 3rem;
            opacity: 0.9;
        }

        /* Kartu Status Jam (Desain Glassmorphism) */
        .lesson-card {
            background: rgba(255, 255, 255, 0.15); /* Transparan Putih */
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 1rem;
            padding: 2rem 4rem;
            text-align: center;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            min-width: 320px;
            color: white;
        }

        .lesson-title {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .lesson-timer {
            font-size: 2.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

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

        .login-box {
            width: 100%;
            max-width: 420px;
            padding: 3rem;
        }

        .btn-primary {
            background-color: #4361ee;
            border: none;
            padding: 12px;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s;
        }
        
        .btn-primary:hover {
            background-color: #3f37c9;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
        }

        .form-control {
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            background-color: #f8fafc;
        }
        
        .form-control:focus {
            background-color: #fff;
            border-color: #4361ee;
            box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
        }

        /* Footer Copyright */
        .footer-copy {
            position: absolute; 
            bottom: 20px; 
            font-size: 0.8rem; 
            opacity: 0.7;
        }

        /* Responsif untuk HP (Layar Kecil) */
        @media (max-width: 992px) {
            .left-side { display: none; } /* Sembunyikan kiri di HP/Tablet Portrait */
            .right-side { width: 100%; }
            body { overflow: auto; }
        }
    </style>
</head>
<body>

<div class="container-fluid p-0">
    <div class="row g-0 login-container">
        
        <div class="col-lg-8 left-side d-none d-lg-flex">
            <div id="clock" class="clock-large">00:00</div>
            <div id="date" class="date-large">Memuat tanggal...</div>

            <div class="lesson-card">
                <div class="lesson-title" id="lesson-name">Sedang Memuat...</div>
                <div class="lesson-timer">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-clock-history" viewBox="0 0 16 16">
                        <path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.79-.615c.32.312.613.65.875 1.004l-.934.364a6.99 6.99 0 0 0-.078-.043zm.797 1.343c.275.366.52.756.727 1.163l-.916.406a6.99 6.99 0 0 0-.642-1.03l.831-.54zm-2.922-3.14l.36-.933a8.004 8.004 0 0 1 1.126.342l-.219.976a7.003 7.003 0 0 0-.985-.299z"/>
                        <path d="M8 5.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 1 .5-.5z"/>
                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8z"/>
                    </svg>
                    <span id="countdown">--:--</span>
                </div>
                <div style="margin-top: 10px; font-size: 0.9rem; opacity: 0.9;" id="lesson-range">
                    </div>
            </div>
            
            <div class="footer-copy">
                Sistem Manajemen Pembelajaran &copy; <?php echo e(date('Y')); ?> SMKN 10 Makassar
            </div>
        </div>

        <div class="col-lg-4 col-12 right-side">
            <div class="login-box">
                <div class="text-center mb-5">
                    
                    
                    <h3 class="fw-bold text-primary" style="letter-spacing: -0.5px;">Selamat Datang</h3>
                    <p class="text-muted">Silakan login untuk mengakses SIS-LAJAR</p>
                </div>

                <form id="loginForm" method="POST" action="<?php echo e(route('login.post')); ?>">
                    <?php echo csrf_field(); ?>
                    
                    <?php if(session('error')): ?>
                        <div class="alert alert-danger text-center small fade show">
                            <i class="bi bi-exclamation-circle me-1"></i> <?php echo e(session('error')); ?>

                        </div>
                    <?php endif; ?>

                    <div class="mb-4">
                        <label class="form-label text-secondary small fw-bold text-uppercase">Username</label>
                        <input type="text" name="username" class="form-control form-control-lg" placeholder="Masukkan Username" required autofocus>
                    </div>

                    <div class="mb-4">
                        <label class="form-label text-secondary small fw-bold text-uppercase">Password</label>
                        <input type="password" name="password" class="form-control form-control-lg" placeholder="Masukkan Password" required>
                    </div>

                    <div class="d-grid gap-2 mt-5">
                        <button type="submit" class="btn btn-primary btn-lg shadow-sm">MASUK SEKARANG</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>


<script>
    const lessonSchedule = <?php echo json_encode($lessonHours ?? [], 15, 512) ?>; 

    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.innerText = 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.2)"; 
            cardEl.style.border = "1px solid rgba(16, 185, 129, 0.5)";

        } else {
            lessonNameEl.innerText = "DILUAR JAM PELAJARAN";
            countdownEl.innerText = "--:--";
            rangeEl.innerText = "Tidak ada aktivitas belajar";
            
            cardEl.style.background = "rgba(255, 255, 255, 0.1)";
            cardEl.style.border = "1px solid 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;

        // Mengubah teks tombol saat loading (pakai spinner bawaan bootstrap jika diinginkan, atau text biasa)
        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') + ' di SIS-LAJAR',
                        showConfirmButton: false,
                        timer: 2000,
                        timerProgressBar: true,
                        // Menyesuaikan custom class agar match dengan tema SIS-LAJAR
                        customClass: { popup: 'rounded-4' } 
                    }).then(() => {
                        window.location.href = data.redirect || "<?php echo e(route('dashboard')); ?>";
                    });
                } else {
                    throw data;
                }
            });
        })
        .catch(error => {
            // Mengembalikan tombol ke keadaan semula
            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', // Sesuai warna button theme
                customClass: {
                    popup: 'rounded-4',
                    confirmButton: 'rounded-3 px-4 py-2'
                }
            });
            
            // Kosongkan form password saja agar user mudah mencoba lagi
            form.querySelector('input[name="password"]').value = '';
        });
    });
</script>

</body>
</html><?php /**PATH /home/vol15_7/infinityfree.com/if0_40829333/htdocs/resources/views/auth/login.blade.php ENDPATH**/ ?>