<?php
    //Prevent direct access
    defined('ABSPATH') || exit;
?>
<html>

<head></head>
<?php
$video_thumbnail = SMART_GIFT_CARD_PLUGIN_URL . 'assets/img/video_thumbnail.jpg';
$thumb_image = SMART_GIFT_CARD_PLUGIN_URL . 'assets/img/gift_card_info.png';

?>

<body style="background-color: #f7f7f7; margin: 0; padding: 70px 0; width: 100%; -webkit-text-size-adjust: none;">
    <div style="width: 100%; background-color: #f7f7f7; padding: 0; margin: 0;">
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td align="center" valign="top">
                    <table width="660" cellspacing="0" cellpadding="0" border="0" style="background-color: #fff;">
                        <tr>
                            <td align="center" valign="top" style="padding: 20px;">
                                <table width="600" style="border-radius: 20px; box-shadow: 0px 0px 31.59px 0px #97979733; padding: 10px;">
                                    <tr>
                                        <td align="center" valign="top" style="padding: 20px;">
                                            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                                                <tr>
                                                    <td style="padding:20px; text-align: center;" valign="top">
                                                        <?php
                                                        $file_extension = pathinfo($selected_image, PATHINFO_EXTENSION);
                                                        $image_extensions = ['jpg', 'jpeg', 'png', 'gif'];
                                                        $video_extensions = ['mp4', 'webm', 'ogg'];

                                                        if ( in_array( strtolower( $file_extension ), $image_extensions)) {
                                                            // If it's an image, display it
                                                            echo '<img src="' . esc_url( $selected_image  ) . '" alt="Gift Card Image" style="width: 100%; max-width: 560px; object-fit: cover; border: none; display: block; border-radius: 10px;">';
                                                        } elseif ( in_array(strtolower( $file_extension ), $video_extensions)) {
                                                            // If it's a video, display a thumbnail with a play button
                                                            echo '<a href="' . esc_url( $selected_image ) . '" target="_blank">
                                                                    <img src="' . esc_url( $video_thumbnail ) . '" alt="Gift Card Video" style="width: 100%; max-width: 560px; object-fit: cover; border: none; display: block; border-radius: 10px;"></a>';
                                                        }
                                                        ?>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: left;border-top: 0.5px solid #ddd;padding: 10px; 0" valign="top">
                                                        <div class="gift-info" style="background-image: url('<?php echo esc_url( $thumb_image ) ; ?>'); background-size: contain; background-repeat: no-repeat; height:340px; width: 560px;">
                                                            <div class="gift-message" style="padding: 75px 125px 0 15px;">
                                                                <p style="font-family: cursive;font-size: 14px;color: #333;line-height: 32px;margin: 0;padding: 0 10px;text-align: left;font-weight: 800;"><?php echo esc_html( $receiver_name ); ?>,</p>
                                                                <p style="font-family: cursive;font-size: 13px;color: #333;line-height: 32px;margin: 0;padding: 0 10px;text-align: left;font-weight: 500;"><?php echo esc_html($gift_message); ?></p>
                                                                <p style="font-family: cursive;font-size: 14px;color: #333;line-height: 32px;margin: 0;padding: 20px 30px 0 0;text-align: right;font-weight: 800;"><?php echo  esc_html( $sender_name ); ?></p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: left;border-top: 0.5px solid #ddd;padding: 10px;" valign="top">
                                                        <table class="gift-amount" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0;">
                                                            <tr>
                                                                <td style="color: #6A0DAD;font-size: 15px;font-family: fantasy; width: 70%; text-align: left;">
                                                                    Gift Value: <code style="color: #FFD700; font-size: 26px;"><?php echo  esc_html( $currency_symbol ). esc_html( $gift_amount ); ?></code>
                                                                    <p style="font-size: 13px;font-family: monospace;color: #333;"><?php echo  esc_html( $brand_name ); ?></p>
                                                                </td>
                                                                <td style="padding: 20px 20px 0 20px;text-align: left;">
                                                                    <div class="logo" style="text-align: center;">
                                                                        <img src="<?php echo esc_url( $brand_logo ); ?>" alt="Brand Logo" style="width: 100px;">
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="padding:10px; background-color: #f7f7f7;" valign="top">
                                                        <table class="gift-amount" width="100%" cellpadding="0" cellspacing="0" border="0">
                                                            <tr>
                                                                <td style="color: #6A0DAD;font-size: 15px;font-family: fantasy;">Gift Code:
                                                                        <code style="padding: 6px 10px; border: 0.25px solid #FFD700;">
                                                                            <span id="giftCode"><?php echo  esc_html( $gift_code ); ?></span>
                                                                        </code>
                                                                </td>
                                                                <td style="text-align: right;">
                                                                    <a href="<?php echo esc_url( $redeem_gift_page ); ?>" style="text-decoration: none;display: inline-block;text-align: center;color: #ffffff;background-color: #6A0DAD;padding: 10px 0px;border: none;border-radius: 5px;font-size: 24px;font-weight: 600;width: 100%;max-width: 150px;cursor: pointer;">
                                                                        Claim Gift
                                                                    <a/> 
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>