

<?php $__env->startSection('content'); ?>
<style>
    /* ============================================
       FULL PAGE RED THEME
    ============================================ */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* Hapus atau ganti overflow: hidden; */
    overflow: auto; /* atau biarkan default */
}

    .login-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #1a0000 0%, #8B0000 25%, #DC143C 50%, #FF1744 75%, #8B0000 100%);
        padding: 20px;
        z-index: 9999;
        overflow: hidden;
    }

    .video-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    
    filter:brightness(.55);
}

.login-card{
    z-index:10;
}
.glow-effect{
    z-index:2;
}
.video-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            rgba(20,0,0,.55),
            rgba(120,0,0,.45),
            rgba(220,20,60,.35)
        );
    backdrop-filter:blur(2px);
    
}
    /* ============================================
       ANIMATED BACKGROUND
    ============================================ */
    .bg-animation {
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: 
            radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
        animation: rotateBg 30s linear infinite;
        z-index: 0;
    }

    @keyframes rotateBg {
        0% { transform: rotate(0deg) scale(1); }
        50% { transform: rotate(180deg) scale(1.2); }
        100% { transform: rotate(360deg) scale(1); }
    }

    /* ============================================
       FLOATING PARTICLES
    ============================================ */
    .particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
    }

    .particle {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        animation: floatParticle linear infinite;
    }

    @keyframes floatParticle {
        0% {
            transform: translateY(100vh) translateX(0) rotate(0deg);
            opacity: 0;
        }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% {
            transform: translateY(-100vh) translateX(100px) rotate(720deg);
            opacity: 0;
        }
    }

    /* ============================================
       RED OVERLAY PATTERN
    ============================================ */
    .pattern-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 8px),
            repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 2px, transparent 2px, transparent 8px);
        z-index: 0;
        pointer-events: none;
    }

    /* ============================================
       GLOW EFFECT
    ============================================ */
    .glow-effect {
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(220, 20, 60, 0.3) 0%, transparent 70%);
        animation: glowPulse 4s ease-in-out infinite;
        z-index: 0;
        pointer-events: none;
    }

    .glow-effect.glow-1 {
        top: -200px;
        right: -200px;
        animation-delay: 0s;
    }

    .glow-effect.glow-2 {
        bottom: -200px;
        left: -200px;
        animation-delay: 2s;
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(139, 0, 0, 0.4) 0%, transparent 70%);
    }

    @keyframes glowPulse {
        0%, 100% { transform: scale(1); opacity: 0.5; }
        50% { transform: scale(1.3); opacity: 1; }
    }

    /* ============================================
       LOGIN CARD - FULL RED THEME
    ============================================ */
    .login-card {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 440px;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 28px;
        padding: 45px 40px 35px;
        box-shadow: 
            0 30px 80px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        animation: cardSlideUp 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        transform-origin: center center;
        max-height: 95vh;
        overflow-y: auto;
    }

    .login-card::-webkit-scrollbar {
        width: 4px;
    }

    .login-card::-webkit-scrollbar-track {
        background: transparent;
    }

    .login-card::-webkit-scrollbar-thumb {
        background: #DC143C;
        border-radius: 10px;
    }

    @keyframes cardSlideUp {
        0% {
            opacity: 0;
            transform: translateY(60px) scale(0.9);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .login-card:hover {
        box-shadow: 
            0 40px 100px rgba(0, 0, 0, 0.7),
            0 0 0 2px rgba(220, 20, 60, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    /* ============================================
       CARD HEADER
    ============================================ */
    .login-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .login-header .brand-icon {
        width: 85px;
        height: 85px;
        margin: 0 auto 18px;
        background: linear-gradient(135deg, #DC143C, #8B0000);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 38px;
        color: white;
        box-shadow: 
            0 15px 40px rgba(220, 20, 60, 0.5),
            inset 0 -3px 0 rgba(0,0,0,0.1);
        transition: all 0.4s ease;
        position: relative;
    }

    .login-header .brand-icon::after {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.1);
        animation: ringPulse 2s ease-in-out infinite;
    }

    @keyframes ringPulse {
        0%, 100% { transform: scale(1); opacity: 0.3; }
        50% { transform: scale(1.1); opacity: 0.6; }
    }

    .login-header .brand-icon:hover {
        transform: rotate(-8deg) scale(1.05);
        box-shadow: 0 20px 50px rgba(220, 20, 60, 0.7);
    }

    .login-header .brand-icon i {
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }

    .login-header h3 {
        font-weight: 800;
        font-size: 26px;
        color: #1a1a1a;
        letter-spacing: 2px;
        margin: 0 0 4px;
    }

    .login-header h3 .highlight {
        background: linear-gradient(135deg, #DC143C, #8B0000);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .login-header p {
        color: #718096;
        font-size: 14px;
        margin: 0;
        font-weight: 400;
        letter-spacing: 0.3px;
    }

    /* ============================================
       FORM ELEMENTS
    ============================================ */
    .form-group {
        margin-bottom: 20px;
        position: relative;
    }

    .form-group label {
        display: block;
        margin-bottom: 7px;
        font-weight: 600;
        color: #2d3748;
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    .form-group label .label-icon {
        color: #DC143C;
        margin-right: 6px;
        font-size: 13px;
    }

    .form-group .input-wrapper {
        position: relative;
    }

    .form-group .input-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        font-size: 15px;
        transition: all 0.3s ease;
        z-index: 2;
        pointer-events: none;
    }

    .form-group .form-control {
        width: 100%;
        padding: 12px 15px 12px 44px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: #f7fafc;
        height: 48px;
        color: #2d3748;
    }

    .form-group .form-control::placeholder {
        color: #a0aec0;
        font-size: 13px;
    }

    .form-group .form-control:focus {
        border-color: #DC143C;
        box-shadow: 0 0 0 4px rgba(220, 20, 60, 0.12);
        background: #ffffff;
        outline: none;
    }

    .form-group .form-control:focus ~ .input-icon,
    .form-group .form-control:focus + .input-icon {
        color: #DC143C;
        transform: translateY(-50%) scale(1.1);
    }

    .form-group .form-control.is-invalid {
        border-color: #ff1744;
        background: #fff5f5;
        box-shadow: 0 0 0 4px rgba(255, 23, 68, 0.1);
    }

    .form-group .invalid-feedback {
        color: #ff1744;
        font-size: 12px;
        margin-top: 5px;
        display: block;
        font-weight: 500;
    }

    /* ============================================
       PASSWORD TOGGLE
    ============================================ */
    .password-toggle {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #a0aec0;
        cursor: pointer;
        padding: 5px;
        font-size: 15px;
        transition: all 0.3s ease;
        z-index: 2;
    }

    .password-toggle:hover {
        color: #DC143C;
    }

    /* ============================================
       CHECKBOX & FORGOT
    ============================================ */
    .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 22px 0 26px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .custom-checkbox {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #4a5568;
        font-size: 14px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s ease;
        user-select: none;
    }

    .custom-checkbox:hover {
        color: #DC143C;
    }

    .custom-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #DC143C;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

    .custom-checkbox input[type="checkbox"]:hover {
        transform: scale(1.1);
    }

    .forgot-link {
        color: #DC143C;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .forgot-link:hover {
        color: #8B0000;
        text-decoration: underline;
        transform: translateX(3px);
    }

    .forgot-link i {
        font-size: 12px;
    }

    /* ============================================
       LOGIN BUTTON
    ============================================ */
    .btn-login {
        width: 100%;
        padding: 14px;
        background: linear-gradient(135deg, #DC143C 0%, #8B0000 100%);
        border: none;
        border-radius: 12px;
        color: #ffffff;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 2px;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 6px 25px rgba(220, 20, 60, 0.45);
        cursor: pointer;
        height: 52px;
        position: relative;
        overflow: hidden;
        text-transform: uppercase;
    }

    .btn-login::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        transition: left 0.6s ease;
    }

    .btn-login:hover::before {
        left: 100%;
    }

    .btn-login:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 40px rgba(220, 20, 60, 0.6);
    }

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

    .btn-login:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none !important;
    }

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

    /* ============================================
       DIVIDER
    ============================================ */
    .divider {
        display: flex;
        align-items: center;
        margin: 24px 0 20px;
        gap: 15px;
    }

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    }

    .divider span {
        color: #a0aec0;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        white-space: nowrap;
    }

    /* ============================================
       FOOTER
    ============================================ */
    .login-footer {
        text-align: center;
        padding-top: 20px;
        border-top: 2px solid #f0f0f0;
        color: #718096;
        font-size: 14px;
    }

    .login-footer .register-link {
        color: #DC143C;
        text-decoration: none;
        font-weight: 700;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .login-footer .register-link:hover {
        color: #8B0000;
        text-decoration: underline;
        transform: scale(1.02);
    }

    /* ============================================
       ALERT MESSAGES
    ============================================ */
    .alert-custom {
        border-radius: 12px;
        padding: 13px 16px;
        margin-bottom: 18px;
        border: none;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 12px;
        animation: alertSlideDown 0.5s ease-out forwards;
    }

    @keyframes alertSlideDown {
        0% {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .alert-custom i {
        font-size: 18px;
        flex-shrink: 0;
    }

    .alert-custom .alert-text {
        flex: 1;
    }

    .alert-danger {
        background: linear-gradient(135deg, #fed7d7, #feb2b2);
        color: #8B0000;
        border-left: 4px solid #DC143C;
    }

    .alert-success {
        background: linear-gradient(135deg, #c6f6d5, #9ae6b4);
        color: #22543d;
        border-left: 4px solid #48bb78;
    }

    /* ============================================
       RESPONSIVE
    ============================================ */
    @media (max-width: 576px) {
        .login-card {
            padding: 30px 20px 25px;
            border-radius: 20px;
            max-width: 100%;
            margin: 10px;
        }

        .login-header .brand-icon {
            width: 70px;
            height: 70px;
            font-size: 30px;
            margin-bottom: 14px;
        }

        .login-header h3 {
            font-size: 22px;
        }

        .login-header p {
            font-size: 13px;
        }

        .form-group .form-control {
            padding: 10px 12px 10px 38px;
            font-size: 13px;
            height: 44px;
        }

        .form-group .input-icon {
            left: 12px;
            font-size: 14px;
        }

        .btn-login {
            padding: 12px;
            font-size: 14px;
            height: 46px;
        }

        .form-actions {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            margin: 18px 0 22px;
        }

        .glow-effect {
            display: none;
        }

        .login-container {
            padding: 10px;
        }
    }

    @media (max-width: 400px) {
        .login-card {
            padding: 22px 16px 20px;
            margin: 5px;
            border-radius: 16px;
        }

        .login-header .brand-icon {
            width: 60px;
            height: 60px;
            font-size: 26px;
        }

        .login-header h3 {
            font-size: 19px;
        }

        .login-header p {
            font-size: 12px;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-group .form-control {
            height: 40px;
            font-size: 13px;
            padding: 8px 10px 8px 36px;
        }

        .btn-login {
            height: 42px;
            font-size: 13px;
            padding: 10px;
        }

        .custom-checkbox {
            font-size: 13px;
        }

        .forgot-link {
            font-size: 13px;
        }
    }

    @media (min-width: 577px) and (max-width: 768px) {
        .login-card {
            padding: 38px 32px 30px;
            max-width: 420px;
        }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
        .login-card {
            max-width: 460px;
        }
    }

    @media (max-height: 700px) {
        .login-card {
            padding: 28px 30px 22px;
        }

        .login-header {
            margin-bottom: 22px;
        }

        .login-header .brand-icon {
            width: 60px;
            height: 60px;
            font-size: 26px;
            margin-bottom: 12px;
        }

        .form-group {
            margin-bottom: 14px;
        }

        .form-actions {
            margin: 16px 0 18px;
        }

        .divider {
            margin: 16px 0 14px;
        }

        .login-footer {
            padding-top: 14px;
        }
    }

    /* ============================================
       SCROLLBAR STYLING
    ============================================ */
    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
    }

    ::-webkit-scrollbar-thumb {
        background: linear-gradient(135deg, #DC143C, #8B0000);
        border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #8B0000;
    }

    .brand-logo{
    text-align:center;
    margin-bottom:20px;
}

.brand-logo img{
    width:110px;
    height:auto;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.3));
    transition:.3s;
}

.brand-logo img:hover{
    transform:scale(1.08);
}
</style>

<!-- ============================================
     FULL PAGE LOGIN
============================================ -->
<div class="login-container">

    <!-- Video Background -->
    <video class="video-bg" autoplay muted loop playsinline>
        <source src="<?php echo e(asset('video/background.mp4')); ?>" type="video/mp4">
    </video>

    <!-- Overlay -->
    <div class="video-overlay"></div>

    <!-- Glow Effects -->

    <!-- Glow Effects -->
    <div class="glow-effect glow-1"></div>
    <div class="glow-effect glow-2"></div>

    <!-- Pattern Overlay -->
    <div class="pattern-overlay"></div>

    <!-- Floating Particles -->
    <div class="particles" id="particles"></div>

    <!-- ===== LOGIN CARD ===== -->
    <div class="login-card">

        <!-- Header -->
        <div class="login-header">
            <div class="brand-logo">
    <img src="<?php echo e(asset('gambar/dkriuklogobaru2025.jpg')); ?>" alt="Logo DMS">
</div>
            <h3>LOGIN <span class="highlight">DMS</span></h3>
            <p>Silakan masuk untuk melanjutkan</p>
        </div>

        <!-- Alert Messages -->
        <?php if(session('error')): ?>
            <div class="alert alert-danger alert-custom">
                <i class="fas fa-exclamation-circle"></i>
                <span class="alert-text"><?php echo e(session('error')); ?></span>
            </div>
        <?php endif; ?>

        <?php if(session('success')): ?>
            <div class="alert alert-success alert-custom">
                <i class="fas fa-check-circle"></i>
                <span class="alert-text"><?php echo e(session('success')); ?></span>
            </div>
        <?php endif; ?>

        <?php if($errors->any()): ?>
            <div class="alert alert-danger alert-custom">
                <i class="fas fa-exclamation-triangle"></i>
                <span class="alert-text">
                    <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <?php echo e($error); ?><br>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </span>
            </div>
        <?php endif; ?>

        <!-- Login Form -->
        <form action="<?php echo e(route('login.proses')); ?>" method="POST" id="loginForm">
            <?php echo csrf_field(); ?>

            <!-- Email -->
            <div class="form-group">
                <label for="email">
                    <i class="fas fa-envelope label-icon"></i> Alamat Email
                </label>
                <div class="input-wrapper">
                    <input
                        type="email"
                        id="email"
                        name="email"
                        class="form-control <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                        value="<?php echo e(old('email')); ?>"
                        placeholder="contoh@email.com"
                        required
                        autofocus
                    >
                    <i class="fas fa-envelope input-icon"></i>
                </div>
                <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <div class="invalid-feedback"><?php echo e($message); ?></div>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
            </div>

            <!-- Password -->
            <div class="form-group">
                <label for="password">
                    <i class="fas fa-lock label-icon"></i> Kata Sandi
                </label>
                <div class="input-wrapper">
                    <input
                        type="password"
                        id="password"
                        name="password"
                        class="form-control <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                        placeholder="Masukkan kata sandi"
                        required
                    >
                    <i class="fas fa-lock input-icon"></i>
                    <button type="button" class="password-toggle" id="togglePassword" aria-label="Toggle password visibility">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <div class="invalid-feedback"><?php echo e($message); ?></div>
                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
            </div>

            <!-- Actions -->
            <div class="form-actions">
                <label class="custom-checkbox">
                    <input
                        type="checkbox"
                        name="remember"
                        <?php echo e(old('remember') ? 'checked' : ''); ?>

                    >
                    <span>Ingat Saya</span>
                </label>
                <a href="#" class="forgot-link">
                    <i class="fas fa-key"></i> Lupa Password?
                </a>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="btn-login" id="btnLogin">
                <i class="fas fa-sign-in-alt"></i> MASUK
            </button>
        </form>

        <!-- Divider -->
        <div class="divider">
            <span>ATAU</span>
        </div>

        <!-- Footer -->
        <div class="login-footer">
            <p>Belum punya akun? 
                <a href="#" class="register-link">
                    Daftar Sekarang
                </a>
            </p>
        </div>

    </div>
</div>

<!-- ============================================
     FONT AWESOME
============================================ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<!-- ============================================
     SCRIPTS
============================================ -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    // ==========================================
    // 1. PARTICLES GENERATOR
    // ==========================================
    const particlesContainer = document.getElementById('particles');
    if (particlesContainer) {
        for (let i = 0; i < 25; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            const size = Math.random() * 6 + 3;
            const left = Math.random() * 100;
            const duration = Math.random() * 25 + 15;
            const delay = Math.random() * 15;
            particle.style.width = size + 'px';
            particle.style.height = size + 'px';
            particle.style.left = left + '%';
            particle.style.animationDuration = duration + 's';
            particle.style.animationDelay = delay + 's';
            particlesContainer.appendChild(particle);
        }
    }

    // ==========================================
    // 2. PASSWORD TOGGLE
    // ==========================================
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');

    if (togglePassword && passwordInput) {
        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            const icon = this.querySelector('i');
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });
    }

    // ==========================================
    // 3. FORM SUBMIT HANDLING (FIXED)
    // ==========================================
    const form = document.getElementById('loginForm');
    const btnLogin = document.getElementById('btnLogin');

    if (form && btnLogin) {
        // Flag untuk mencegah double submit
        let isSubmitting = false;

        form.addEventListener('submit', function(e) {
            // Cegah jika sudah dalam proses submit
            if (isSubmitting) {
                e.preventDefault();
                return false;
            }

            // Set flag
            isSubmitting = true;

            // Show loading state
            btnLogin.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
            btnLogin.disabled = true;

            // Safety: Re-enable after 10 seconds if stuck (lebih pendek)
            setTimeout(function() {
                if (btnLogin.disabled) {
                    btnLogin.innerHTML = '<i class="fas fa-sign-in-alt"></i> MASUK';
                    btnLogin.disabled = false;
                    isSubmitting = false;
                }
            }, 10000);
        });
    }

    // ==========================================
    // 4. AUTO HIDE ALERTS
    // ==========================================
    const alerts = document.querySelectorAll('.alert-custom');
    alerts.forEach(function(alert, index) {
        setTimeout(function() {
            alert.style.transition = 'all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
            alert.style.opacity = '0';
            alert.style.transform = 'translateY(-30px) scale(0.95)';
            setTimeout(function() {
                if (alert.parentNode) {
                    alert.style.display = 'none';
                }
            }, 600);
        }, 5000 + (index * 300));
    });

    // ==========================================
    // 5. KEYBOARD SHORTCUT - ENTER (FIXED)
    // ==========================================
    // HAPUS keydown listener karena bisa menyebabkan double submit
    // Biarkan browser menangani Enter secara default

    // ==========================================
    // 6. PREVENT DUPLICATE SUBMIT VIA BUTTON CLICK
    // ==========================================
    if (btnLogin) {
        btnLogin.addEventListener('click', function(e) {
            // Jika tombol sudah disabled, cegah aksi
            if (this.disabled) {
                e.preventDefault();
                return false;
            }
        });
    }

    console.log('✅ Login page loaded successfully (FIXED!)');
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\dms\resources\views\auth\login.blade.php ENDPATH**/ ?>