# easy-invoice/2.1.1/templates/quotes/live-preview.php

Easy Invoice – Invoice Generator, PDF Quotes & Payments, version 2.1.1. 171 lines.

- Page: https://pluginprobe.com/plugins/easy-invoice/2.1.1/code/templates/quotes/live-preview.php
- Raw: https://pluginprobe.com/plugins/easy-invoice/2.1.1/raw/templates/quotes/live-preview.php
- Modified: 2025-08-14T09:51:16+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/easy-invoice/2.1.1/code/templates/quotes/live-preview.php#L10-L20`.

```php
<!-- Right Panel - Live Preview -->
<div class="bg-white shadow rounded-lg" style="padding: 10px;">
    
    <div class="px-6 py-5 border-b border-gray-200" style="margin-bottom: 10px;">
        <div class="flex justify-between items-center">
            <div class="flex items-center">
                <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3">
                    <i class="fas fa-eye text-indigo-600 text-xl"></i>
                </div>
                <div class="ml-4">
                    <h2 class="text-lg font-medium text-gray-900">Quote Preview</h2>
                    <p class="mt-1 text-sm text-gray-500">Live preview of your quote</p>
                </div>
            </div>
            <?php if($quote_id > 0 ){ ?>
            <a href="<?php echo get_permalink($quote_id); ?>" target="_blank" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-external-link-alt mr-2"></i>
                Full Preview
            </a>
            <?php } ?>
        </div>
    </div>

    <?php
    // Get the current template (default to 'standard')
    $current_template = $quote ? $quote->getTemplate() : 'standard';
    if (empty($current_template)) {
        $current_template = 'standard';
    }
    $template_class = 'template-' . $current_template;
    
    // Initialize formatter for the quote templates
    $formatter = new \EasyInvoice\Helpers\QuoteFormatter($quote);
    ?>
    
    <div id="quote-container" class="quote-container quote-preview <?php echo $template_class; ?>">
        <?php
        // Dynamically load the selected template from quote templates directory
        $template_file = EASY_INVOICE_PLUGIN_DIR . 'templates/quote-templates/' . $current_template . '.php';
       
        if (file_exists($template_file)) {
            require $template_file;
        } else {
            // Show template not found message
            ?>
            <div class="template-not-found">
                <div class="template-not-found-icon">
                    <i class="fas fa-exclamation-circle"></i>
                </div>
                <h3>Template Not Found</h3>
                <p>The selected template "<?php echo esc_html($current_template); ?>" does not exist.</p>
                <p>Please select a different template or contact support if you believe this is an error.</p>
            </div>
            <style>
                .template-not-found {
                    text-align: center;
                    padding: 40px;
                    background: #fff;
                    border-radius: 8px;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                }
                .template-not-found-icon {
                    font-size: 48px;
                    color: #dc3545;
                    margin-bottom: 20px;
                }
                .template-not-found h3 {
                    font-size: 24px;
                    color: #32325d;
                    margin-bottom: 10px;
                }
                .template-not-found p {
                    color: #8898aa;
                    margin-bottom: 10px;
                }
            </style>
            <?php
        }
        ?>
    </div>
</div>

<style>
/* Loading state styles */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    text-align: center;
}

.quote-container.loading .loading-overlay {
    display: flex;
}

/* (Resize logic removed per request) */
</style>

<script>
jQuery(document).ready(function($) {
    // Localize easyInvoice object for this page
// Localize easyInvoice object for this page
window.easyInvoiceQ = window.easyInvoice || {};
window.easyInvoice.isPro = <?php echo easy_invoice_has_pro() ? 'true' : 'false'; ?>;
window.easyInvoice.ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
window.easyInvoice.nonce = '<?php echo wp_create_nonce('easy_invoice_nonce'); ?>';
 
    // Function to update the live preview using AJAX
    function updateLivePreview(templateId) {
        $('#quote-container').addClass('loading');
        $.ajax({
            url: window.easyInvoice.ajaxUrl,
            type: 'POST',
            data: {
                action: 'easy_invoice_load_quote_template',
                template: templateId,
                quote_id: <?php echo $quote ? $quote->getId() : 0; ?>,
                nonce: window.easyInvoice.nonce
            },
            success: function(response) {
                if (response.success) {
                    $('#quote-container').html(response.data.html);
                } else {
                    $('#quote-container').html('<div class="error">Failed to load template: ' + response.data.message + '</div>');
                }
                $('#quote-container').removeClass('loading');
            },
            error: function(xhr, status, error) {
                $('#quote-container').html('<div class="error">Failed to load template. Please try again.</div>');
                $('#quote-container').removeClass('loading');
            }
        });
    }
    
    // Listen for template changes
    $('.template-card').on('click', function(e) {
        const templateId = $(this).data('template-id');
        
        // Check if this is a premium template in free version
        const isPremium = $(this).attr('data-is-premium') === 'true';
        const isFreeVersion = !window.easyInvoice || !window.easyInvoice.isPro;
        
        if (isPremium && isFreeVersion) {
            // Show premium upgrade modal instead of selecting the template
            if (typeof EasyInvoiceConfirmation !== 'undefined' && EasyInvoiceConfirmation.showFeatureUpgrade) {
                EasyInvoiceConfirmation.showFeatureUpgrade('<?php _e('Premium Templates', 'easy-invoice'); ?>', '<?php _e('Access all premium templates including Modern, Professional, Classic, and more to give your quotes a unique and professional look.', 'easy-invoice'); ?>');
            } else {
                alert('<?php _e('This is a premium feature. Please upgrade to Pro to access all templates.', 'easy-invoice'); ?>');
            }
            return;
        }
        
        updateLivePreview(templateId);
    });
    

    


});
</script> 
```