<?php $this->load->view('layouts/header'); ?>
<style>
.pending-activation-icon { display: inline-block; vertical-align: middle; fill: currentColor; }
</style>

    <!-- App Header -->
    <div class="appHeader no-border transparent position-absolute">
        <div class="left"></div>
        <div class="pageTitle"></div>
        <div class="right">
            <a href="<?php echo base_url('auth/logout'); ?>" class="headerButton text-danger">
                Logout
            </a>
        </div>
    </div>

    <!-- App Capsule -->
    <div id="appCapsule">
        <div class="section mt-5 text-center">
            <div class="mb-4">
                <svg class="pending-activation-icon" style="width: 120px; height: 120px; color: #FFA500;" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 61C150 61 64 147 64 253v6c0 46 24 86 60 110-36 24-60 64-60 110v6c0 106 86 192 192 192s192-86 192-192v-6c0-46-24-86-60-110 36-24 60-64 60-110v-6C448 147 362 61 256 61zm0 90c70 0 128 58 128 128v6c0 20-11 38-28 47-44 29-72 78-72 134 0 57 46 103 103 103s103-46 103-103c0-56-28-105-72-134-17-9-28-27-28-47v-6c0-70-58-128-128-128s-128 58-128 128v6c0 20 11 38 28 47 44 29 72 78 72 134 0 57-46 103-103 103S153 385 153 328c0-56 28-105 72-134 17-9 28-27 28-47v-6c0-70 58-128 128-128z"/></svg>
            </div>
            <h1>Account Pending Activation</h1>
            <h4 class="text-muted mb-4">Your account is awaiting verification</h4>
        </div>
        
        <div class="section mb-5 p-2">
            <div class="card">
                <div class="card-body">
                    <div class="alert alert-warning mb-3" role="alert">
                        <svg class="pending-activation-icon" style="width: 24px; height: 24px; vertical-align: middle; color: #856404; fill: #856404;" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
                        <strong class="ms-2">Verification Required</strong>
                    </div>
                    
                    <p class="mb-3">
                        Thank you for registering with <?php echo get_app_name(); ?>! Your account has been created successfully, but it needs to be verified by our team before you can access all features.
                    </p>
                    
                    <div class="mb-3">
                        <h5>What's Next?</h5>
                        <ul class="list-unstyled">
                            <li class="d-flex align-items-start mb-3">
                                <svg class="pending-activation-icon text-success" style="width: 24px; height: 24px; min-width: 24px;" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm-42.7 283.3L115.3 306l65.4-65.4 42.6 42.6 106.4-106.4 42.6 42.6-149 149z"/></svg>
                                <span class="ms-2">Your account is under review</span>
                            </li>
                            <li class="d-flex align-items-start mb-3">
                                <svg class="pending-activation-icon text-warning" style="width: 24px; height: 24px; min-width: 24px;" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 64C132.3 64 32 164.3 32 288s100.3 224 224 224 224-100.3 224-224S379.7 64 256 64zm0 400c-97 0-176-79-176-176S159 112 256 112s176 79 176 176-79 176-176 176zm16-304h-32v128l112 64 16-27.3-96-54.7V160z"/></svg>
                                <span class="ms-2">This usually takes 24-48 hours</span>
                            </li>
                            <li class="d-flex align-items-start mb-3">
                                <svg class="pending-activation-icon text-primary" style="width: 24px; height: 24px; min-width: 24px;" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M424 80H88a56.06 56.06 0 00-56 56v240a56.06 56.06 0 0056 56h336a56.06 56.06 0 0056-56V136a56.06 56.06 0 00-56-56zm-14.18 92.63l-144 112a16 16 0 01-19.64 0L102.18 172.63c-6.24-4.86-6.24-14.4 0-19.26 6.24-4.86 16.38-4.86 22.62 0L256 251.73l131.19-98.36c6.24-4.86 16.38-4.86 22.62 0 6.24 4.86 6.24 14.4 0 19.26z"/></svg>
                                <span class="ms-2">You'll receive an email once approved</span>
                            </li>
                            <li class="d-flex align-items-start mb-3">
                                <svg class="pending-activation-icon text-info" style="width: 24px; height: 24px; min-width: 24px;" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M256 48L96 128v144c0 114.9 93.1 208 208 208s208-93.1 208-208V128L256 48zm0 36.5l120 66.7v137.8c0 66.3-53.7 120-120 120s-120-53.7-120-120V151.2L256 84.5z"/></svg>
                                <span class="ms-2">We verify all accounts for security</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="alert alert-info" role="alert">
                        <strong>Need Help?</strong><br>
                        If you have any questions, please contact our support team at 
                        <a href="mailto:<?php echo get_support_email(); ?>">
                            <?php echo get_support_email(); ?>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="card mt-2">
                <div class="card-body">
                    <h5 class="mb-3">Account Information</h5>
                    <ul class="listview image-listview flush transparent">
                        <li>
                            <div class="item">
                                <div class="in">
                                    <div>Name</div>
                                    <div class="text-end">
                                        <strong><?php echo htmlspecialchars($user->first_name . ' ' . $user->last_name); ?></strong>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <div class="in">
                                    <div>Email</div>
                                    <div class="text-end">
                                        <strong><?php echo htmlspecialchars($user->email); ?></strong>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <div class="in">
                                    <div>Status</div>
                                    <div class="text-end">
                                        <span class="badge badge-warning">Pending Verification</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item">
                                <div class="in">
                                    <div>Registered</div>
                                    <div class="text-end">
                                        <strong><?php echo date('M d, Y', strtotime($user->created_at)); ?></strong>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="form-button-group transparent mt-3">
                <a href="<?php echo base_url('auth/logout'); ?>" class="btn btn-outline-danger btn-block btn-lg">
                    <svg class="pending-activation-icon" style="width: 22px; height: 22px; vertical-align: middle; margin-right: 6px;" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M192 277.4V288c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32v-10.6c0-23.2-12.4-44.6-32.4-55.8l-32-16c-5.4-2.7-11.4-4.2-17.6-4.2s-12.2 1.5-17.6 4.2l-32 16c-20 11.2-32.4 32.6-32.4 55.8z"/><path d="M336 128H176c-17.7 0-32 14.3-32 32v16c0 17.7 14.3 32 32 32h160c17.7 0 32-14.3 32-32v-16c0-17.7-14.3-32-32-32z"/><path d="M208 64h96v32h-96z"/><path d="M289.9 384H222c-8.8 0-16 7.2-16 16s7.2 16 16 16h68c8.8 0 16-7.2 16-16s-7.2-16-16-16z"/></svg>
                    Logout
                </a>
            </div>
        </div>
    </div>

<?php $this->load->view('layouts/footer'); ?>
