<?php
/**
 * Horizontal Card Template
 */
if ( ! defined( 'ABSPATH' ) ) { exit; }

$cloudi7_icg_extra_data = json_decode( $cloudi7_icg_card->extra_data, true ) ?: array();
$cloudi7_icg_back_text  = get_option( 'cloudi7_icg_back_text', '' );
?>
<div class="cloudi7-icg-card-preview-wrapper">
    <!-- FRONT SIDE -->
    <div class="cloudi7-icg-card horizontal">
        <div class="cloudi7-icg-card-front">
            <div class="cloudi7-icg-card-header">
                <div class="cloudi7-icg-card-logo">
                    <span class="dashicons dashicons-id-card"></span>
                </div>
                <h3 class="cloudi7-icg-card-title"><?php echo esc_html( $cloudi7_icg_card->organization_type ); ?></h3>
            </div>
            
            <div class="cloudi7-icg-card-body">
                <div class="cloudi7-icg-card-photo">
                    <?php if ( $cloudi7_icg_card->photo ) : ?>
                        <img src="<?php echo esc_url( $cloudi7_icg_card->photo ); ?>" alt="<?php echo esc_attr( $cloudi7_icg_card->name ); ?>">
                    <?php endif; ?>
                </div>
                
                <div class="cloudi7-icg-card-info">
                    <h4 class="cloudi7-icg-card-name"><?php echo esc_html( $cloudi7_icg_card->name ); ?></h4>
                    <div class="cloudi7-icg-card-detail">
						<p><strong><?php echo esc_html__( 'ID No:', 'cloudi7-id-card-generator' ); ?></strong> <?php echo esc_html( $cloudi7_icg_card->id_number ); ?></p>
						<p><strong><?php echo esc_html__( 'Org Type:', 'cloudi7-id-card-generator' ); ?></strong> <?php echo esc_html( $cloudi7_icg_card->organization_type ); ?></p>
						
						<?php
						if ( ! empty( $cloudi7_icg_extra_data ) ) {
							foreach ( $cloudi7_icg_extra_data as $cloudi7_icg_label => $cloudi7_icg_value ) {
								if ( ! empty( $cloudi7_icg_value ) ) {
									echo '<p><strong>' . esc_html( ucwords( str_replace( '_', ' ', $cloudi7_icg_label ) ) ) . ':</strong> ' . esc_html( $cloudi7_icg_value ) . '</p>';
								}
							}
						}
						?>
					</div>
					
					<div class="cloudi7-icg-card-qr">
						<?php
						$cloudi7_icg_upload_dir = wp_upload_dir();
						$cloudi7_icg_qr_url = $cloudi7_icg_upload_dir['baseurl'] . '/cloudi7-icg-qrcodes/' . $cloudi7_icg_card->id_number . '.png';
						echo '<img src="' . esc_url( $cloudi7_icg_qr_url ) . '" alt="QR Code">';
						?>
					</div>
				</div>
            </div>
        </div>
    </div>

    <!-- BACK SIDE -->
    <div class="cloudi7-icg-card horizontal">
        <div class="cloudi7-icg-card-back">
            <div class="cloudi7-icg-card-back-text">
                <?php echo wp_kses_post( nl2br( $cloudi7_icg_back_text ) ); ?>
            </div>
            
            <div class="cloudi7-icg-card-back-footer">
                <?php if ( isset($cloudi7_icg_card->email) && $cloudi7_icg_card->email ) : ?>
                    <div><?php echo esc_html( $cloudi7_icg_card->email ); ?></div>
                <?php endif; ?>
                <?php if ( isset($cloudi7_icg_card->phone) && $cloudi7_icg_card->phone ) : ?>
                    <div><?php echo esc_html( $cloudi7_icg_card->phone ); ?></div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
