<?php if(isset($source) && $source == 'link'): ?>

    <?php if(isset($user_details->co_applicant_name)): ?>
        <div id="user-selection" style="width: 100%; padding-top:25px;">
            <h4 style="font-weight: bold;">Please select a User</h4>
            <div style="display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; gap: 20px;">
                <div id="app-selected" class="user-card" style="cursor: grab;">
                    <img class="app-image" id="app_click" src="/assets/front/img/avatar/user-profile.png">
                    <div class="user-name">
                        <?php echo isset($user_details->name) ? $user_details->name : 'Applicant'; ?>

                    </div>
                </div>
                <div id="co-app-selected" class="user-card" style="cursor: grab;">
                    <img class="co-app-image" id="co_app_click" src="/assets/front/img/avatar/user-profile.png">
                    <div class="user-name">
                        <?php echo isset($user_details->co_applicant_name) ? $user_details->co_applicant_name : 'Co-Applicant'; ?>

                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>
<?php endif; ?>


<div id="instruction-block" style="display: none;">
    <div class="card" style="margin: 0 auto; max-width: 600px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 8px;">
        <div class="card-body" style="background: #ffffff; padding-left: 40px; padding: 20px;">
            <h3 style="margin-bottom: 20px; font-size: 24px; text-align: center; color: #333;">E-KYC Instructions</h3>
            <ul style="text-align: left; list-style-type: disc; padding-left: 20px; color: #555;">
                <li style="margin-bottom: 5px;">Do not lock your device</li>
                <li style="margin-bottom: 5px;">Ensure a stable internet connection.</li>
                <li style="margin-bottom: 5px;">Use a smartphone, tablet, or computer with a working camera and microphone.</li>
                <li style="margin-bottom: 5px;">Good Lighting and Background</li>
                <li style="margin-bottom: 5px;">Sit in a well-lit area with minimal background noise.</li>
                <li style="margin-bottom: 5px;">Use a plain background to ensure clarity during the video call.</li>
            </ul>
            <button class="btn btn-primary" id="start-kyc-button" style="margin-top: 40px; background-color: #e68a3f; color: white; padding: 12px 30px; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; display: block; width: fit-content; margin-left: auto; margin-right: auto;">Continue</button>
        </div>
    </div>
</div>