<?php
/**
 * Modern Vertical Template - Redesigned Professional
 */
if ( ! defined( 'ABSPATH' ) ) { exit; }

// Organization Data
$cloudi7_icg_org_logo    = get_option( 'cloudi7_icg_org_logo', '' );
$cloudi7_icg_org_name    = get_option( 'cloudi7_icg_org_name', 'Your Organization' );
$cloudi7_icg_org_address = get_option( 'cloudi7_icg_org_address', '' );
$cloudi7_icg_org_phone   = get_option( 'cloudi7_icg_org_phone', '' );
$cloudi7_icg_org_email   = get_option( 'cloudi7_icg_org_email', '' );
$cloudi7_icg_org_website = get_option( 'cloudi7_icg_org_website', '' );
$cloudi7_icg_org_terms   = get_option( 'cloudi7_icg_org_terms', '' );

// Card Data
$cloudi7_icg_id_number = $cloudi7_icg_card->id_number;
$cloudi7_icg_name      = $cloudi7_icg_card->name;
$cloudi7_icg_photo     = $cloudi7_icg_card->photo ? $cloudi7_icg_card->photo : plugins_url( 'assets/images/default-avatar.png', Cloudi7_ICG_PLUGIN_FILE );
$cloudi7_icg_org_type  = $cloudi7_icg_card->organization_type;
$cloudi7_icg_extra_data = json_decode( $cloudi7_icg_card->extra_data, true ) ?: array();

// QR Code Path
$cloudi7_icg_upload_dir = wp_upload_dir();
$cloudi7_icg_qr_url = $cloudi7_icg_upload_dir['baseurl'] . '/cloudi7-icg-qrcodes/' . $cloudi7_icg_id_number . '.png';
?>

<!-- FRONT SIDE -->
<div class="cloudi7-icg-card modern vertical cloudi7-icg-card-front">
    
    <!-- HEADER ZONE -->
    <header class="cloudi7-icg-card-zone-header">
        <?php if ( $cloudi7_icg_org_logo ) : ?>
            <img src="<?php echo esc_url( $cloudi7_icg_org_logo ); ?>" class="cloudi7-icg-header-logo">
        <?php endif; ?>
        <div class="cloudi7-icg-header-content">
            <h2 class="cloudi7-icg-header-org-name" style="font-size: 15px;"><?php echo esc_html( $cloudi7_icg_org_name ); ?></h2>
        </div>
    </header>

    <!-- BODY ZONE -->
    <main class="cloudi7-icg-card-zone-body">
        <div class="cloudi7-icg-body-left">
            <div class="cloudi7-icg-user-photo-wrap">
                <img src="<?php echo esc_url( $cloudi7_icg_photo ); ?>" alt="User Photo">
            </div>
        </div>
        
        <div class="cloudi7-icg-body-right">
            <h3 class="cloudi7-icg-user-name" style="font-size: 18px;"><?php echo esc_html( $cloudi7_icg_name ); ?></h3>
            <div class="cloudi7-icg-id-badge">ID: <?php echo esc_html( $cloudi7_icg_id_number ); ?></div>
            
            <div class="cloudi7-icg-dynamic-list">
                <?php if ( ! empty( $cloudi7_icg_extra_data ) ) : ?>
                    <?php 
                    $cloudi7_icg_count = 0;
                    foreach ( $cloudi7_icg_extra_data as $cloudi7_icg_label => $cloudi7_icg_value ) : 
                        if ($cloudi7_icg_count >= 3) break;
                    ?>
                        <div class="cloudi7-icg-dynamic-item">
                            <label><?php echo esc_html( ucfirst( str_replace('_', ' ', $cloudi7_icg_label) ) ); ?>:</label>
                            <span><?php echo esc_html( $cloudi7_icg_value ); ?></span>
                        </div>
                    <?php 
                    $cloudi7_icg_count++;
                    endforeach; 
                    ?>
                <?php endif; ?>
            </div>
        </div>

        <!-- QR Code Block -->
        <div class="cloudi7-icg-card-qr-wrap">
            <img src="<?php echo esc_url( $cloudi7_icg_qr_url ); ?>" class="cloudi7-icg-qr-code">
            <span class="cloudi7-icg-qr-label"><?php esc_html_e( 'SCAN TO VERIFY', 'cloudi7-id-card-generator' ); ?></span>
        </div>
    </main>

    <!-- FOOTER ZONE -->
    <footer class="cloudi7-icg-card-zone-footer">
        <p><?php echo esc_url( str_replace(['http://', 'https://'], '', home_url('/')) ); ?></p>
    </footer>
</div>

<!-- BACK SIDE -->
<div class="cloudi7-icg-card modern vertical cloudi7-icg-card-back">
    
    <!-- HEADER ZONE -->
    <header class="cloudi7-icg-card-zone-header">
        <h2 class="cloudi7-icg-header-org-name" style="font-size: 13px; text-align: center; width: 100%;"><?php echo esc_html( $cloudi7_icg_org_name ); ?></h2>
    </header>

    <!-- BODY ZONE -->
    <main class="cloudi7-icg-card-zone-body">
        <div class="cloudi7-icg-back-contact-info" style="font-size: 10px;">
            <?php if ( $cloudi7_icg_org_address ) : ?><div><?php echo esc_html( $cloudi7_icg_org_address ); ?></div><?php endif; ?>
            <?php if ( $cloudi7_icg_org_phone ) : ?><div>Tel: <?php echo esc_html( $cloudi7_icg_org_phone ); ?></div><?php endif; ?>
            <?php if ( $cloudi7_icg_org_email ) : ?><div>Email: <?php echo esc_html( $cloudi7_icg_org_email ); ?></div><?php endif; ?>
        </div>
        
        <?php if ( $cloudi7_icg_org_terms ) : ?>
            <div class="cloudi7-icg-terms-section">
                <h4><?php esc_html_e( 'Terms & Conditions', 'cloudi7-id-card-generator' ); ?></h4>
                <div class="cloudi7-icg-terms-list">
                    <?php 
                    $cloudi7_icg_terms_array = explode("\n", $cloudi7_icg_org_terms);
                    foreach($cloudi7_icg_terms_array as $cloudi7_icg_term) {
                        if(trim($cloudi7_icg_term)) echo "• " . esc_html($cloudi7_icg_term) . "<br>";
                    }
                    ?>
                </div>
            </div>
        <?php endif; ?>
    </main>

    <!-- FOOTER ZONE -->
    <footer class="cloudi7-icg-card-zone-footer">
        <p><?php echo esc_url( str_replace(['http://', 'https://'], '', home_url('/')) ); ?></p>
    </footer>
</div>
