<?php
/**
 * Provide a admin area view for the meta box
 *
 * This file is used to markup the admin-facing aspects of the plugin.
 *
 * @link       https://pinnerpress.com
 * @since      0.1.0
 *
 * @package    PinnerPress
 * @subpackage PinnerPress/admin/partials
 */

// This file should primarily consist of HTML with a little bit of PHP.
?>

<div class="pinnerpress-meta-box">
    <?php 
    // Check if hidden pins feature is enabled
    $hidden_pins_enabled = get_option('pinnerpress_enable_hidden_pins', '0') === '1';
    $is_premium = function_exists('pinnerpress_is_premium') && pinnerpress_is_premium();
    
    // Only show hidden images section if the feature is enabled and user has premium
    if ($hidden_pins_enabled && $is_premium): 
    ?>
    <h4><?php esc_html_e('Hidden Pinterest Images', 'pinnerpress'); ?></h4>
    <p class="description">
        <?php esc_html_e('Add images that will be included in the page for Pinterest but not displayed visually. These images are perfect for Pinterest-optimized graphics. You can select multiple images at once.', 'pinnerpress'); ?>
    </p>
    
    <div id="pinnerpress-hidden-images-container">
        <?php if (!empty($hidden_images)): ?>
            <?php foreach ($hidden_images as $index => $image): ?>
                <?php
                // Get attachment ID from URL
                $attachment_id = attachment_url_to_postid($image['url']);
                
                // Get thumbnail URL if attachment ID exists, otherwise use original URL
                if ($attachment_id) {
                    $thumbnail_url = wp_get_attachment_image_url($attachment_id, 'thumbnail');
                    $display_url = $thumbnail_url ? $thumbnail_url : $image['url'];
                } else {
                    $display_url = $image['url'];
                }
                ?>
                <div class="pinnerpress-hidden-image-item" data-index="<?php echo esc_attr($index); ?>">
                    <div class="pinnerpress-hidden-image-preview">
                        <img src="<?php echo esc_url($display_url); ?>" alt="Hidden Pinterest Image">
                        <button type="button" class="pinnerpress-remove-hidden-image" title="Remove image">&times;</button>
                        <input type="hidden" name="pinnerpress_hidden_images[<?php echo esc_attr($index); ?>][url]" value="<?php echo esc_url($image['url']); ?>">
                    </div>
                </div>
            <?php endforeach; ?>
        <?php endif; ?>
    </div>
    
    <p>
        <button type="button" id="pinnerpress-add-hidden-image" class="button button-secondary">
            <?php esc_html_e('Add Hidden Pinterest Images', 'pinnerpress'); ?>
        </button>
    </p>
    
    <hr style="margin: 20px 0;">
    <?php endif; ?>
    
    <h4><?php esc_html_e('Override Settings', 'pinnerpress'); ?></h4>
    <p class="description">
        <?php esc_html_e('Override global PinnerPress settings for this post/page:', 'pinnerpress'); ?>
    </p>
    
    <table class="form-table">
        <tbody>
            <tr>
                <td>
                    <label for="pinnerpress_disable_pin_buttons">
                        <input type="checkbox" 
                               id="pinnerpress_disable_pin_buttons" 
                               name="pinnerpress_disable_pin_buttons" 
                               value="1" 
                               <?php checked($disable_pin_buttons, '1'); ?> />
                        <?php esc_html_e('Disable Pin It buttons on all images', 'pinnerpress'); ?>
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pinnerpress_disable_image_banners">
                        <input type="checkbox" 
                               id="pinnerpress_disable_image_banners" 
                               name="pinnerpress_disable_image_banners" 
                               value="1" 
                               <?php checked($disable_image_banners, '1'); ?> />
                        <?php esc_html_e('Disable image banners on all images', 'pinnerpress'); ?>
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pinnerpress_disable_call_out_banners">
                        <input type="checkbox" 
                               id="pinnerpress_disable_call_out_banners" 
                               name="pinnerpress_disable_call_out_banners" 
                               value="1" 
                               <?php checked($disable_call_out_banners, '1'); ?> />
                        <?php esc_html_e('Disable call-out banners', 'pinnerpress'); ?>
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pinnerpress_disable_follow_box">
                        <input type="checkbox" 
                               id="pinnerpress_disable_follow_box" 
                               name="pinnerpress_disable_follow_box" 
                               value="1" 
                               <?php checked($disable_follow_box, '1'); ?> />
                        <?php esc_html_e('Disable follow box pop-ups', 'pinnerpress'); ?>
                    </label>
                </td>
            </tr>
        </tbody>
    </table>
    
    <p class="description">
        <?php esc_html_e('Note: These settings will override the global PinnerPress settings for this specific post/page only.', 'pinnerpress'); ?>
    </p>
</div>

<style>
.pinnerpress-meta-box .form-table {
    margin-top: 10px;
}

.pinnerpress-meta-box .form-table td {
    padding: 8px 0;
}

.pinnerpress-meta-box label {
    display: flex;
    align-items: center;
    font-weight: normal;
}

.pinnerpress-meta-box input[type="checkbox"] {
    margin-right: 8px;
}

.pinnerpress-meta-box .description {
    font-style: italic;
    color: #666;
    margin: 0 0 10px 0;
}

#pinnerpress-hidden-images-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 15px 0;
}

.pinnerpress-hidden-image-item {
    position: relative;
    display: inline-block;
}

.pinnerpress-hidden-image-preview {
    position: relative;
    display: inline-block;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #f9f9f9;
}

.pinnerpress-hidden-image-preview img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.pinnerpress-remove-hidden-image {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(220, 50, 50, 0.9);
    color: white;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.pinnerpress-remove-hidden-image:hover {
    background: rgba(220, 50, 50, 1);
    transform: scale(1.1);
}

.pinnerpress-remove-hidden-image:focus {
    outline: 2px solid #E60023;
    outline-offset: 2px;
}

#pinnerpress-hidden-images-container:empty + p {
    margin-top: 0;
}
</style> 