<?php $__env->startSection('content'); ?>
<div class="auth-container" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-lg-4 col-md-6">
            <div class="auth-card" style="background: rgba(255, 255, 255, 0.95); border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2);">
                <div class="auth-header text-center py-4">
                    <h2 style="font-weight: 700; color: #4a4a4a; margin-bottom: 0; letter-spacing: 1px;">MEMBER LOGIN</h2>
                    <div style="height: 3px; width: 60px; background: linear-gradient(90deg, #667eea, #764ba2); margin: 10px auto;"></div>
                </div>

                <div class="auth-body px-4 py-4">
                    <form method="POST" action="<?php echo e(route('login')); ?>">
                        <?php echo csrf_field(); ?>
                        <div class="mb-4">
                            <label for="email" class="form-label" style="font-weight: 600; color: #555; margin-bottom: 8px;">Username</label>
                            <div class="input-group">
                                <span class="input-group-text" style="background: #f8f9fa; border-right: none;">
                                    <i class="fas fa-user" style="color: #667eea;"></i>
                                </span>
                                <input id="email" type="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); ?>"
                                       name="email" value="<?php echo e(old('email')); ?>" required autocomplete="email" autofocus
                                       style="padding: 12px 15px; border-radius: 0 5px 5px 0; border-left: none;">
                            </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 d-block" style="color: #ff4757;">
                                    <i class="fas fa-exclamation-circle me-1"></i><?php echo e($message); ?>

                                </div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="mb-4 position-relative">
                            <label for="password" class="form-label" style="font-weight: 600; color: #555; margin-bottom: 8px;">Password</label>
                            <div class="input-group">
                                <span class="input-group-text" style="background: #f8f9fa; border-right: none;">
                                    <i class="fas fa-lock" style="color: #667eea;"></i>
                                </span>
                                <input id="password" type="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); ?>"
                                       name="password" required autocomplete="current-password"
                                       style="padding: 12px 15px; border-radius: 0 5px 5px 0; border-left: none;">
                                <span class="password-toggle" style="position: absolute; right: 10px; top: 38px; cursor: pointer; color: #667eea; z-index: 5;">
                                    <i class="fas fa-eye"></i>
                                </span>
                            </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 d-block" style="color: #ff4757;">
                                    <i class="fas fa-exclamation-circle me-1"></i><?php echo e($message); ?>

                                </div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="d-flex justify-content-end mb-4">
                            <a href="<?php echo e(route('password.request')); ?>" style="color: #667eea; text-decoration: none; font-size: 0.9rem; font-weight: 500;">
                                Forgot Password? Click Here
                            </a>
                        </div>

                        <button type="submit" class="btn w-100 py-2 mb-3"
                                style="background: linear-gradient(90deg, #667eea, #764ba2); color: white; font-weight: 600; border: none; border-radius: 5px; letter-spacing: 0.5px; transition: all 0.3s ease;">
                            LOGIN
                        </button>

                        <div class="text-center mt-4">
                            <p style="color: #777; margin-bottom: 10px;">Don't have an account?</p>
                            <a href="<?php echo e(route('register')); ?>" style="color: #764ba2; text-decoration: none; font-weight: 600; border-bottom: 2px solid #764ba2; padding-bottom: 2px;">
                                REGISTER NOW
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $__env->startSection('styles'); ?>
<style>
    body {
        font-family: 'Poppins', sans-serif;
        overflow-x: hidden;
    }

    .auth-container {
        padding: 20px;
        min-height: 100vh;
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
    }

    .auth-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .auth-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

    .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        border-color: #667eea;
    }

    .btn:hover {
        background: linear-gradient(90deg, #5a6fd1, #6a4299) !important;
        transform: translateY(-2px);
    }

    .input-group-text {
        border-radius: 5px 0 0 5px !important;
    }

    @keyframes gradientBG {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    @media (max-width: 768px) {
        .auth-container {
            padding: 10px;
        }

        .auth-body {
            padding: 20px 15px !important;
        }
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle password visibility
        const togglePassword = document.querySelector('.password-toggle');
        const password = document.querySelector('#password');

        if (togglePassword && password) {
            togglePassword.addEventListener('click', function() {
                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                password.setAttribute('type', type);
                this.classList.toggle('fa-eye');
                this.classList.toggle('fa-eye-slash');
            });
        }
    });
</script>
<?php $__env->stopSection(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\library\resources\views/auth/login.blade.php ENDPATH**/ ?>