<?php $__env->startSection('title', 'User Login'); ?>

<?php $__env->startSection('styles'); ?>
##parent-placeholder-bf62280f159b1468fff0c96540f3989d41279669##
<style>
    .auth-section {
        min-height: 100vh;
        background: linear-gradient(135deg, #0a192f 0%, #112240 50%, #020617 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 0;
        position: relative;
        overflow: hidden;
    }
    
    .auth-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
        opacity: 0.3;
    }

    /* Image Slider Styles */
    .slider-container {
        position: relative;
        height: 600px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }

    .slide.active {
        opacity: 1;
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slide-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
        padding: 3rem 2rem 2rem;
        color: white;
    }

    .slide-content h3 {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .slide-content p {
        font-size: 1rem;
        opacity: 0.9;
    }

    .slider-dots {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        z-index: 10;
    }

    .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .dot.active {
        background: white;
        width: 30px;
        border-radius: 5px;
    }

    .auth-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 24px;
        border: none;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        transition: transform 0.3s ease;
    }

    .auth-card:hover {
        transform: translateY(-5px);
    }

    .auth-logo {
        max-width: 180px;
        margin: 0 auto 2rem;
        display: block;
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    }

    .card-title {
        font-size: 2rem;
        font-weight: 700;
        background: linear-gradient(135deg, #0a192f 0%, #1e3a5f 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
    }

    .card-subtitle {
        color: #6c757d;
        font-size: 0.95rem;
        margin-bottom: 2rem;
    }

    .form-group label {
        font-weight: 600;
        color: #2d3748;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .form-control {
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 0.75rem 1rem 0.75rem 3rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: #f8f9fa;
    }

    .form-control:focus {
        border-color: #1e3a5f;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(10, 25, 47, 0.15);
    }

    .input-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        width: 20px;
        height: 20px;
    }

    .btn-primary {
        background: linear-gradient(135deg, #0a192f 0%, #1e3a5f 100%);
        border: none;
        border-radius: 12px;
        padding: 0.875rem;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(10, 25, 47, 0.5);
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(10, 25, 47, 0.7);
    }

    .btn-light {
        background: #fff;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 0.75rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .btn-light:hover {
        border-color: #1e3a5f;
        background: #f8f9fa;
        transform: translateY(-2px);
    }

    .custom-checkbox .custom-control-label {
        font-weight: 500;
        color: #4a5568;
        font-size: 0.9rem;
    }

    .custom-control-input:checked ~ .custom-control-label::before {
        background: linear-gradient(135deg, #0a192f 0%, #1e3a5f 100%);
        border-color: #1e3a5f;
    }

    .divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 1.5rem 0;
    }

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e2e8f0;
    }

    .divider span {
        padding: 0 1rem;
        color: #a0aec0;
        font-size: 0.875rem;
        font-weight: 500;
    }

    .alert {
        border-radius: 12px;
        border: none;
        padding: 1rem 1.25rem;
        margin-bottom: 1.5rem;
    }

    .alert-danger {
        background: linear-gradient(135deg, #fc8181 0%, #f56565 100%);
        color: white;
    }

    .forgot-pass a {
        color: #1e3a5f;
        font-weight: 600;
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.3s ease;
    }

    .forgot-pass a:hover {
        color: #0a192f;
        text-decoration: underline;
    }

    .signup-link {
        color: #1e3a5f;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .signup-link:hover {
        color: #0a192f;
        text-decoration: underline;
    }

    .copyright {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.85rem;
        margin-top: 2rem;
        text-align: center;
    }

    @media (max-width: 991px) {
        .slider-container {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .auth-section {
            padding: 1rem;
        }
        
        .card-title {
            font-size: 1.5rem;
        }
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<section class="auth-section">
    <div class="container-fluid">
        <div class="row justify-content-center align-items-center">
            <!-- Image Slider Column -->
            <div class="col-lg-6 d-none d-lg-block">
                <div class="slider-container">
                    <div class="slide active">
                        <img src="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=800&h=600&fit=crop" alt="Team collaboration">
                        <div class="slide-content">
                            <h3>Connect & Collaborate</h3>
                            <p>Join thousands of professionals growing their network</p>
                        </div>
                    </div>
                    <div class="slide">
                        <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop" alt="Team success">
                        <div class="slide-content">
                            <h3>Achieve Together</h3>
                            <p>Powerful tools to help your team succeed</p>
                        </div>
                    </div>
                    <div class="slide">
                        <img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?w=800&h=600&fit=crop" alt="Innovation">
                        <div class="slide-content">
                            <h3>Innovate & Grow</h3>
                            <p>Transform your ideas into reality</p>
                        </div>
                    </div>
                    <div class="slider-dots">
                        <span class="dot active" onclick="currentSlide(0)"></span>
                        <span class="dot" onclick="currentSlide(1)"></span>
                        <span class="dot" onclick="currentSlide(2)"></span>
                    </div>
                </div>
            </div>

            <!-- Login Form Column -->
            <div class="col-12 col-md-8 col-lg-5 col-xl-4">
                <a href="/">
                    <img src="<?php echo e(asset('storage/app/public/photos/'.$settings->logo)); ?>" 
                         alt="Logo" 
                         class="auth-logo">
                </a>
                
                <?php if(Session::has('status')): ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i data-feather="alert-circle" class="mr-2" style="width: 18px; height: 18px;"></i>
                    <?php echo e(session('status')); ?>

                    <button type="button" class="close text-white" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <?php endif; ?>
                
                <?php if($errors->any()): ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i data-feather="alert-circle" class="mr-2" style="width: 18px; height: 18px;"></i>
                    <ul class="mb-0 pl-3">
                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li><?php echo e($error); ?></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                    <button type="button" class="close text-white" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <?php endif; ?>
                
                <div class="card auth-card">
                    <div class="card-body p-4 p-md-5">
                        <h4 class="card-title text-center">Welcome Back</h4>
                        <p class="card-subtitle text-center">Sign in to continue to your account</p>
                        
                        <form method="POST" action="<?php echo e(route('login')); ?>">
                            <?php echo csrf_field(); ?>
                            
                            <div class="form-group">
                                <label>Email Address <span class="text-danger">*</span></label>
                                <div class="position-relative">
                                    <i data-feather="mail" class="input-icon"></i>
                                    <input type="email" 
                                           class="form-control" 
                                           name="email" 
                                           value="<?php echo e(old('email')); ?>" 
                                           placeholder="name@example.com" 
                                           required 
                                           autofocus>
                                </div>
                            </div>

                            <div class="form-group">
                                <label>Password <span class="text-danger">*</span></label>
                                <div class="position-relative">
                                    <i data-feather="lock" class="input-icon"></i>
                                    <input type="password" 
                                           class="form-control" 
                                           name="password" 
                                           placeholder="Enter your password" 
                                           required>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" 
                                           class="custom-control-input" 
                                           id="rememberMe" 
                                           name="remember">
                                    <label class="custom-control-label" for="rememberMe">
                                        Remember me
                                    </label>
                                </div>
                                <div class="forgot-pass">
                                    <a href="<?php echo e(route('password.request')); ?>">Forgot password?</a>
                                </div>
                            </div>

                            <button class="btn btn-primary btn-block" type="submit">
                                Sign In
                            </button>

                            <?php if($settings->enable_social_login == "yes"): ?>
                            <div class="divider">
                                <span>Or continue with</span>
                            </div>

                            <a href="<?php echo e(route('social.redirect', ['social' => 'google'])); ?>" 
                               class="btn btn-light btn-block">
                                <i class="mdi mdi-google text-danger mr-2"></i>
                                Sign in with Google
                            </a>
                            <?php endif; ?>

                            <p class="text-center mt-4 mb-0">
                                <span class="text-muted">Don't have an account?</span>
                                <a href="<?php echo e(route('register')); ?>" class="signup-link ml-1">Sign Up</a>
                            </p>
                        </form>
                    </div>
                </div>

                <p class="copyright">
                    &copy; <?php echo e(date('Y')); ?> <?php echo e($settings->site_name); ?>. All Rights Reserved.
                </p>
            </div>
        </div>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
##parent-placeholder-16728d18790deb58b3b8c1df74f06e536b532695##
<script>
    // Initialize Feather icons
    if (typeof feather !== 'undefined') {
        feather.replace();
    }

    // Image Slider
    let currentSlideIndex = 0;
    const slides = document.querySelectorAll('.slide');
    const dots = document.querySelectorAll('.dot');

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.remove('active');
            dots[i].classList.remove('active');
        });
        
        slides[index].classList.add('active');
        dots[index].classList.add('active');
    }

    function nextSlide() {
        currentSlideIndex = (currentSlideIndex + 1) % slides.length;
        showSlide(currentSlideIndex);
    }

    function currentSlide(index) {
        currentSlideIndex = index;
        showSlide(index);
    }

    // Auto-advance slides every 5 seconds
    if (slides.length > 0) {
        setInterval(nextSlide, 5000);
    }
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.guest', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/tslazqaq/nosa.tstockpro.com/resources/views/auth/login.blade.php ENDPATH**/ ?>