{% extends "base.html" %}

{% block title %}Chrome Extension Download{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="mb-0">🖨️ Quality Recticel Print Helper - Chrome Extension</h3>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <strong>Direct Printing Solution:</strong> This Chrome extension enables direct printing from the Print Module to your default printer without browser dialogs.
                    </div>
                    
                    <h4>Features:</h4>
                    <ul>
                        <li>✅ Print labels directly to default printer</li>
                        <li>✅ No browser print dialogs</li>
                        <li>✅ Automatic printer detection</li>
                        <li>✅ Print status notifications</li>
                        <li>✅ Enhanced print button with visual feedback</li>
                    </ul>
                    
                    <h4>Installation Instructions:</h4>
                    <ol>
                        <li><strong>Download Extension Files:</strong>
                            <div class="mt-2 mb-3">
                                <button class="btn btn-primary" id="download-extension-btn">
                                    📥 Download Chrome Extension (.zip)
                                </button>
                                <br><br>
                                <div class="alert alert-info" style="font-size: 12px;">
                                    <strong>Alternative:</strong> Download individual files:
                                    <br>
                                    <a href="{{ url_for('main.extension_files', filename='manifest.json') }}" target="_blank">manifest.json</a> |
                                    <a href="{{ url_for('main.extension_files', filename='background.js') }}" target="_blank">background.js</a> |
                                    <a href="{{ url_for('main.extension_files', filename='content.js') }}" target="_blank">content.js</a> |
                                    <a href="{{ url_for('main.extension_files', filename='popup.html') }}" target="_blank">popup.html</a> |
                                    <a href="{{ url_for('main.extension_files', filename='popup.js') }}" target="_blank">popup.js</a>
                                </div>
                            </div>
                        </li>
                        
                        <li><strong>Extract Files:</strong>
                            <p>Extract the downloaded ZIP file to a folder on your computer (e.g., Desktop/print_extension)</p>
                        </li>
                        
                        <li><strong>Open Chrome Extensions:</strong>
                            <p>In Google Chrome, go to: <code>chrome://extensions/</code></p>
                        </li>
                        
                        <li><strong>Enable Developer Mode:</strong>
                            <p>Toggle the "Developer mode" switch in the top-right corner</p>
                        </li>
                        
                        <li><strong>Load Extension:</strong>
                            <p>Click "Load unpacked" and select the folder where you extracted the files</p>
                        </li>
                        
                        <li><strong>Verify Installation:</strong>
                            <p>The extension icon 🖨️ should appear in your Chrome toolbar</p>
                        </li>
                    </ol>
                    
                    <h4>Usage:</h4>
                    <ol>
                        <li>Navigate to the <a href="{{ url_for('main.print_module') }}" target="_blank">Print Module</a></li>
                        <li>Select an order from the table</li>
                        <li>Click the enhanced "🖨️ Print Direct" button</li>
                        <li>The label will print automatically to your default printer</li>
                    </ol>
                    
                    <div class="alert alert-warning">
                        <strong>System Requirements:</strong>
                        <ul class="mb-0">
                            <li>Google Chrome browser (version 88 or higher)</li>
                            <li>Default printer configured on your system</li>
                            <li>Printer drivers installed and working</li>
                        </ul>
                    </div>
                    
                    <div class="alert alert-success">
                        <strong>Troubleshooting:</strong>
                        <ul class="mb-0">
                            <li>Click the extension icon 🖨️ to test printer connection</li>
                            <li>Check Chrome's printer settings: <code>chrome://settings/printing</code></li>
                            <li>Ensure your default printer is set correctly</li>
                            <li>Reload the Print Module page after installing the extension</li>
                        </ul>
                    </div>
                    
                    <div class="mt-4 text-center">
                        <a href="{{ url_for('main.print_module') }}" class="btn btn-success">
                            🖨️ Go to Print Module
                        </a>
                        <button class="btn btn-secondary" onclick="window.close()">
                            ✖️ Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Create ZIP file dynamically when download is requested
document.getElementById('download-extension-btn').addEventListener('click', function(e) {
    e.preventDefault();
    
    // Show loading state
    this.innerHTML = '⏳ Preparing Download...';
    this.disabled = true;
    
    // Create the extension package
    fetch('/create_extension_package', {method: 'POST'})
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Start download
                window.location.href = data.download_url;
                
                // Reset button
                setTimeout(() => {
                    this.innerHTML = '📥 Download Chrome Extension (.zip)';
                    this.disabled = false;
                }, 2000);
            } else {
                alert('Error creating extension package: ' + data.error);
                this.innerHTML = '📥 Download Chrome Extension (.zip)';
                this.disabled = false;
            }
        })
        .catch(error => {
            alert('Error: ' + error.message);
            this.innerHTML = '📥 Download Chrome Extension (.zip)';
            this.disabled = false;
        });
});
</script>
{% endblock %}