<?= $this->extend('layouts/main') ?>

<?= $this->section('content') ?>

<!-- High-Impact Login Experience -->
<section style="min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: #020817;">
    
    <!-- Cinematic Background -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;">
        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(2, 8, 23, 0.8), rgba(2, 8, 23, 0.95)); z-index: 2;"></div>
        <img src="https://images.unsplash.com/photo-1541888946425-d81bb19480c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" style="width: 100%; height: 100%; object-fit: cover;" alt="Background">
    </div>

    <!-- Glassmorphism Login Card -->
    <div class="container" style="position: relative; z-index: 3; display: flex; justify-content: center;">
        <div class="animate-up" style="width: 100%; max-width: 480px; padding: 50px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 40px 100px rgba(0,0,0,0.5);">
            
            <div style="text-align: center; margin-bottom: 40px;">
                <?php 
                    $db = \Config\Database::connect();
                    $siteLogo = $db->table('settings')->where('setting_key', 'site_logo')->get()->getRowArray()['setting_value'] ?? null;
                    if ($siteLogo): 
                ?>
                    <div style="width: 140px; height: 140px; margin: 0 auto 30px; position: relative;">
                        <div style="background: #fff; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 15px; border: 5px solid var(--accent); box-shadow: 0 15px 40px rgba(0,0,0,0.4); overflow: hidden;">
                            <img src="<?= $siteLogo ?>" alt="Logo" style="width: 100%; height: 100%; object-fit: contain;">
                        </div>
                    </div>
                <?php endif; ?>
                <div style="display: block; width: 100%; text-align: center; margin-bottom: 30px;">
                    <span style="display: block; font-size: 3.5rem; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 8px; line-height: 1;">Saanvi</span>
                    <span style="display: block; font-size: 1.4rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 16px; margin-top: 10px; line-height: 1;">Infratech</span>
                </div>
<?php /* Removed Portal Gateway labels as requested */ ?>
            <?php if(session()->getFlashdata('msg')):?>
                <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #fca5a5; padding: 15px; border-radius: 15px; margin-bottom: 30px; text-align: center; font-size: 0.9rem;">
                    <i class="bi bi-exclamation-circle" style="margin-right: 8px;"></i> <?= session()->getFlashdata('msg') ?>
                </div>
            <?php endif;?>

            <form action="<?= base_url('login/authenticate') ?>" method="post">
                <div style="margin-bottom: 25px;">
                    <label style="display: block; margin-bottom: 10px; color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;">Email Address</label>
                    <div style="position: relative;">
                        <i class="bi bi-envelope" style="position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.4);"></i>
                        <input type="email" name="email" style="width: 100%; padding: 15px 15px 15px 50px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; color: #fff; font-size: 1rem;" placeholder="name@saanviinfratech.com" required>
                    </div>
                </div>

                <div style="margin-bottom: 35px;">
                    <label style="display: block; margin-bottom: 10px; color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;">Security Key</label>
                    <div style="position: relative;">
                        <i class="bi bi-lock" style="position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.4);"></i>
                        <input type="password" name="password" style="width: 100%; padding: 15px 15px 15px 50px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 15px; color: #fff; font-size: 1rem;" placeholder="••••••••" required>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%; padding: 18px; border-radius: 15px; font-weight: 800; letter-spacing: 1px; box-shadow: 0 15px 35px rgba(10, 25, 47, 0.4);">
                    Authorize Access <i class="bi bi-shield-lock" style="margin-left: 10px;"></i>
                </button>
            </form>
            
            <div style="text-align: center; margin-top: 35px;">
                <a href="<?= base_url() ?>" style="color: rgba(255,255,255,0.4); font-size: 0.9rem; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255,255,255,0.4)'">
                    <i class="bi bi-arrow-left"></i> Return to Main Website
                </a>
            </div>
        </div>
    </div>
</section>

<?= $this->endSection() ?>
