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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title>Log Masuk — MySpBT</title>
    <link rel="stylesheet" href="<?php echo e(asset('vendor/fontawesome-free/css/all.min.css')); ?>">
    <?php
        $bgFiles = collect(\Illuminate\Support\Facades\Storage::disk('public')->files('back-login'))
            ->filter(fn($f) => !str_ends_with($f, 'captions.json'))
            ->sort()
            ->values()
            ->all();
        $bgImages = array_map(fn($f) => asset('storage/' . $f), $bgFiles);
        $captionsRaw = [];
        if (\Illuminate\Support\Facades\Storage::disk('public')->exists('back-login/captions.json')) {
            $captionsRaw =
                json_decode(
                    \Illuminate\Support\Facades\Storage::disk('public')->get('back-login/captions.json'),
                    true,
                ) ?? [];
        }
        $bgCaptions = array_map(fn($f) => $captionsRaw[basename($f)] ?? '', $bgFiles);
        $bantuans = \App\Models\Bantuan::all();
    ?>
    <style>
        @font-face {
            font-family: 'EagleHorizon';
            src: url('/font/EagleHorizonP.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
            overflow: hidden;
            position: relative;
        }

        /* Animated background orbs */
        body::before,
        body::after {
            content: '';
            position: fixed;
            border-radius: 50%;
            filter: blur(80px);
            opacity: .45;
            animation: float 8s ease-in-out infinite;
            z-index: 0;
        }

        body::before {
            width: 420px;
            height: 420px;
            background: #6c63ff;
            top: -100px;
            left: -80px;
        }

        body::after {
            width: 350px;
            height: 350px;
            background: #00c9ff;
            bottom: -80px;
            right: -60px;
            animation-delay: -4s;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0) scale(1);
            }

            50% {
                transform: translateY(30px) scale(1.05);
            }
        }

        /* Background slideshow */
        #bgSlider {
            position: fixed;
            inset: 0;
            z-index: 2;
        }

        #bgSlider img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        #bgSlider img.active {
            opacity: 1;
        }

        #bgOverlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .45);
            z-index: 3;
        }

        /* Caption overlay */
        #bgCaption {
            position: fixed;
            top: 0;
            left: 0;
            width: 55%;
            bottom: 0;
            z-index: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            padding: 0 40px;
        }

        #bgCaptionText {
            font-family: 'EagleHorizon', 'Georgia', serif;
            font-size: 35px;
            color: #fff;
            letter-spacing: 1.5px;
            text-align: center;
            text-shadow: 0 2px 12px rgba(0, 0, 0, .7), 0 0 40px rgba(0, 0, 0, .4);
            display: block;
            transform: translateY(100vh);
            opacity: 0;
            transition: transform 1s cubic-bezier(.22, .68, 0, 1.1), opacity 0.7s ease;
        }

        #bgCaptionText.caption-visible {
            transform: translateY(0);
            opacity: 1;
        }

        .login-wrapper {
            position: relative;
            z-index: 5;
            width: 100%;
            max-width: 420px;
            padding: 20px;
            margin-right: 5%;
        }

        .glass-card {
            position: relative;
            background: rgba(255, 255, 255, .08);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: 20px;
            padding: 40px 36px 32px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1);
            border: 2px solid transparent;
            overflow: hidden;
        }

        /* Spinning glow border */
        .glass-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg,
                    transparent 0%,
                    transparent 60%,
                    #6c63ff 72%,
                    #00c9ff 78%,
                    #6c63ff 84%,
                    transparent 90%,
                    transparent 100%);
            animation: spin 4s linear infinite;
            z-index: -2;
        }

        .glass-card::after {
            content: '';
            position: absolute;
            inset: 2px;
            background: rgba(15, 12, 41, .85);
            border-radius: 18px;
            z-index: -1;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .logo-area {
            text-align: center;
            margin-bottom: 28px;
        }

        .logo-area img {
            width: 72px;
            height: 72px;
            object-fit: contain;
            margin-bottom: 12px;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .3));
        }

        .logo-area h1 {
            font-size: 22px;
            font-weight: 700;
            color: #fff;
            letter-spacing: .5px;
        }

        .logo-area p {
            font-size: 13px;
            color: rgba(255, 255, 255, .55);
            margin-top: 4px;
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        .form-group label {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, .7);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: .8px;
        }

        .input-wrap {
            position: relative;
        }

        .input-wrap i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, .35);
            font-size: 14px;
            transition: color .3s;
        }

        .input-wrap input {
            width: 100%;
            padding: 12px 14px 12px 42px;
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 12px;
            color: #fff;
            font-size: 14px;
            font-family: 'Inter', sans-serif;
            transition: border-color .3s, background .3s, box-shadow .3s;
            outline: none;
        }

        .input-wrap input::placeholder {
            color: rgba(255, 255, 255, .3);
        }

        .input-wrap input:focus {
            border-color: rgba(108, 99, 255, .6);
            background: rgba(255, 255, 255, .1);
            box-shadow: 0 0 0 3px rgba(108, 99, 255, .15);
        }

        .input-wrap input:focus+i,
        .input-wrap input:focus~i {
            color: rgba(255, 255, 255, .7);
        }

        .input-wrap input.is-invalid {
            border-color: #ff6b6b;
        }

        .error-msg {
            color: #ff6b6b;
            font-size: 12px;
            margin-top: 6px;
        }

        .options-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .remember-check {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .remember-check input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #6c63ff;
            cursor: pointer;
        }

        .remember-check span {
            font-size: 13px;
            color: rgba(255, 255, 255, .6);
        }

        .forgot-link {
            font-size: 13px;
            color: rgba(108, 99, 255, .9);
            text-decoration: none;
            transition: color .3s;
        }

        .forgot-link:hover {
            color: #8b83ff;
        }

        .btn-login {
            width: 100%;
            padding: 13px;
            background: linear-gradient(135deg, #6c63ff, #4f46e5);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: transform .2s, box-shadow .3s;
            letter-spacing: .3px;
        }

        .btn-login:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 24px rgba(108, 99, 255, .4);
        }

        .btn-login:active {
            transform: translateY(0);
        }

        .btn-login i {
            margin-right: 6px;
        }

        .register-link {
            text-align: center;
            margin-top: 20px;
            font-size: 13px;
            color: rgba(255, 255, 255, .5);
        }

        .register-link a {
            color: rgba(108, 99, 255, .9);
            text-decoration: none;
            font-weight: 500;
        }

        .register-link a:hover {
            color: #8b83ff;
        }

        .alert-danger {
            background: rgba(255, 107, 107, .12);
            border: 1px solid rgba(255, 107, 107, .25);
            border-radius: 10px;
            padding: 10px 14px;
            margin-bottom: 20px;
            color: #ff8a8a;
            font-size: 13px;
        }

        .help-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 22px;
            padding-top: 16px;
            border-top: 1px solid rgba(255, 255, 255, .1);
            color: rgba(255, 255, 255, .5);
            font-size: 13px;
        }

        .help-bar a {
            color: rgba(255, 255, 255, .5);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: color .25s;
        }

        .help-bar a:hover {
            color: rgba(255, 255, 255, .85);
        }

        .help-bar i {
            font-size: 15px;
            color: rgba(108, 99, 255, .8);
        }

        /* Bantuan modal */
        .bantuan-modal-bg {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .55);
            z-index: 100;
            align-items: center;
            justify-content: center;
        }

        .bantuan-modal-bg.open {
            display: flex;
        }

        .bantuan-modal {
            background: rgba(20, 15, 50, .95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(108, 99, 255, .35);
            border-radius: 16px;
            padding: 32px 28px;
            max-width: 360px;
            width: 90%;
            color: #fff;
            position: relative;
            animation: fadeUp .35s ease;
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .bantuan-modal h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .bantuan-modal h4 i {
            color: rgba(108, 99, 255, .9);
        }

        .bantuan-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 14px;
            font-size: 14px;
            color: rgba(255, 255, 255, .8);
        }

        .bantuan-row i {
            margin-top: 2px;
            min-width: 16px;
        }

        .bantuan-close {
            position: absolute;
            top: 12px;
            right: 14px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, .5);
            font-size: 18px;
            cursor: pointer;
            transition: color .2s;
        }

        .bantuan-close:hover {
            color: #fff;
        }
    </style>
</head>

<body>
    <?php if(count($bgImages) > 0): ?>
        <div id="bgSlider">
            <?php $__currentLoopData = $bgImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $idx => $img): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <img src="<?php echo e($img); ?>" alt="" data-caption="<?php echo e($bgCaptions[$idx] ?? ''); ?>">
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        <div id="bgOverlay"></div>
        <div id="bgCaption">
            <span id="bgCaptionText"></span>
        </div>
    <?php endif; ?>
    <div class="login-wrapper">
        <div class="glass-card">
            <div class="logo-area">
                <img src="<?php echo e(asset('image/JAIS-Logo (3).png')); ?>" alt="JAIS Logo">
                <h1>MySpBT</h1>
                <p>Sistem Pengurusan Buku Teks</p>
                <p>Bahagian Pendidikan Islam, Jabatan Agama Islam Selangor</p>
            </div>

            <?php if($errors->any()): ?>
                <div class="alert-danger">
                    <i class="fas fa-exclamation-circle mr-1"></i>
                    <?php echo e($errors->first()); ?>

                </div>
            <?php endif; ?>

            <form action="<?php echo e(route('login')); ?>" method="POST">
                <?php echo csrf_field(); ?>

                <div class="form-group">
                    <label>Alamat E-mel</label>
                    <div class="input-wrap">
                        <input type="email" name="email" class="<?php echo e($errors->has('email') ? 'is-invalid' : ''); ?>"
                            placeholder="nama@contoh.com" value="<?php echo e(old('email')); ?>" autofocus>
                        <i class="fas fa-envelope"></i>
                    </div>
                </div>

                <div class="form-group">
                    <label>Kata Laluan</label>
                    <div class="input-wrap">
                        <input type="password" name="password"
                            class="<?php echo e($errors->has('password') ? 'is-invalid' : ''); ?>"
                            placeholder="Masukkan kata laluan">
                        <i class="fas fa-lock"></i>
                    </div>
                </div>

                <div class="options-row">
                    <label class="remember-check">
                        <input type="checkbox" name="remember" <?php echo e(old('remember') ? 'checked' : ''); ?>>
                        <span>Ingat Saya</span>
                    </label>
                </div>

                <button type="submit" class="btn-login">
                    <i class="fas fa-sign-in-alt"></i> Log Masuk
                </button>
            </form>

            <div class="help-bar">
                <a href="#" id="btnBantuan">
                    <i class="fas fa-question-circle"></i>
                    Bantuan
                </a>
            </div>

        </div>
    </div>

    
    <div class="bantuan-modal-bg" id="bantuanModal">
        <div class="bantuan-modal">
            <button class="bantuan-close" id="closeBantuan">&times;</button>
            <h4><i class="fas fa-headset"></i> Hubungi Kami</h4>
            <?php $__empty_1 = true; $__currentLoopData = $bantuans; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $b): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="bantuan-entry"
                    <?php if(!$loop->first): ?> style="border-top:1px solid rgba(255,255,255,.15);padding-top:10px;margin-top:10px;" <?php endif; ?>>
                    <div class="bantuan-row">
                        <i class="fas fa-user" style="color:#6c63ff"></i>
                        <span><?php echo e($b->nama); ?></span>
                    </div>
                    <?php if($b->telefon): ?>
                        <div class="bantuan-row">
                            <i class="fas fa-phone" style="color:#28a745"></i>
                            <span><?php echo e($b->telefon); ?></span>
                        </div>
                    <?php endif; ?>
                    <?php if($b->alamat): ?>
                        <div class="bantuan-row">
                            <i class="fas fa-map-marker-alt" style="color:#dc3545"></i>
                            <span><?php echo e($b->alamat); ?></span>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <p style="color:rgba(255,255,255,.5);font-size:13px;">Maklumat bantuan belum dikonfigurasi oleh
                    pentadbir.</p>
            <?php endif; ?>
        </div>
    </div>
</body>

<script>
    (function() {
        var imgs = document.querySelectorAll('#bgSlider img');
        if (!imgs.length) return;

        var captionEl = document.getElementById('bgCaptionText');
        var current = 0;

        function showCaption(text) {
            if (!captionEl) return;
            captionEl.classList.remove('caption-visible');
            captionEl.textContent = text || '';
            if (text) {
                // slight delay so CSS transition plays after text is set
                requestAnimationFrame(function() {
                    requestAnimationFrame(function() {
                        captionEl.classList.add('caption-visible');
                    });
                });
            }
        }

        imgs[0].classList.add('active');
        showCaption(imgs[0].getAttribute('data-caption'));

        if (imgs.length < 2) return;

        setInterval(function() {
            imgs[current].classList.remove('active');
            current = (current + 1) % imgs.length;
            imgs[current].classList.add('active');
            showCaption(imgs[current].getAttribute('data-caption'));
        }, 4000);
    })();

    // Bantuan modal
    var modal = document.getElementById('bantuanModal');
    document.getElementById('btnBantuan').addEventListener('click', function(e) {
        e.preventDefault();
        modal.classList.add('open');
    });
    document.getElementById('closeBantuan').addEventListener('click', function() {
        modal.classList.remove('open');
    });
    modal.addEventListener('click', function(e) {
        if (e.target === modal) modal.classList.remove('open');
    });
</script>

</html>
<?php /**PATH C:\laragon\www\myspbt\resources\views/auth/login.blade.php ENDPATH**/ ?>