<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Preview</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            font-size: 14px;
            line-height: 1.4;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        
        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        
        .print-settings {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .setting-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .setting-group label {
            font-size: 12px;
            font-weight: bold;
            color: #555;
        }
        
        .setting-group select, .setting-group input {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .zoom-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .zoom-btn {
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            background-color: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
        }
        
        .zoom-btn:hover {
            background-color: #f0f0f0;
        }
        
        .zoom-value {
            width: 60px;
            text-align: center;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .preview-container {
            position: relative;
            margin: 20px 0;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 4px;
            overflow: auto;
            min-height: 600px;
        }
        
        .preview-content {
            position: relative;
            margin: 0 auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
            min-height: 500px;
        }
        
        .print-button-container {
            text-align: center;
            margin: 20px 0;
        }
        
        #print-button {
            background-color: #4CAF50;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
        }
        
        #print-button:hover {
            background-color: #45a049;
        }
        
        @media print {
            body {
                margin: 0 !important;
                padding: 0 !important;
                background-color: #fff !important;
            }
            
            .container {
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
            }
            
            .controls,
            .print-button-container {
                display: none !important;
            }
            
            .preview-container {
                margin: 0 !important;
                padding: 0 !important;
                background-color: #fff !important;
            }
            
            .preview-content {
                box-shadow: none !important;
                transform: none !important;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Document Print Preview</h1>
        
        <div class="controls">
            <div class="print-settings">
                <div class="setting-group">
                    <label for="paper-size">Paper Size:</label>
                    <select id="paper-size">
                        <option value="100mmx150mm">100mm x 150mm</option>
                        <option value="a4">A4</option>
                        <option value="letter">Letter</option>
                        <option value="custom">Custom</option>
                    </select>
                </div>
                
                <div class="setting-group">
                    <label for="orientation">Orientation:</label>
                    <select id="orientation">
                        <option value="portrait">Portrait</option>
                        <option value="landscape">Landscape</option>
                    </select>
                </div>
                
                <div class="setting-group">
                    <label for="margins">Margins:</label>
                    <select id="margins">
                        <option value="none">None</option>
                        <option value="minimum">Minimum</option>
                        <option value="normal">Normal</option>
                        <option value="custom">Custom</option>
                    </select>
                </div>
            </div>
            
            <div class="zoom-controls">
                <button class="zoom-btn" onclick="changeZoom(-10)">-</button>
                <input type="text" class="zoom-value" id="zoom-value" value="100" onchange="setZoom(this.value)">
                <button class="zoom-btn" onclick="changeZoom(10)">+</button>
            </div>
        </div>
        
        <div class="preview-container">
            <div class="preview-content" id="preview-content">
                <!-- Content to be previewed will be inserted here -->
                <iframe src="BillOfLadingTemplate.html" width="100%" height="100%" frameborder="0"></iframe>
            </div>
        </div>
        
        <div class="print-button-container">
            <button id="print-button" onclick="printDocument()">Print Document</button>
        </div>
    </div>
    
    <script>
        let currentZoom = 100;
        let paperSize = '100mmx150mm';
        let orientation = 'portrait';
        
        // Initialize preview
        function initPreview() {
            updatePreviewSize();
        }
        
        // Update preview size based on selected paper size and orientation
        function updatePreviewSize() {
            const previewContent = document.getElementById('preview-content');
            
            if (paperSize === '100mmx150mm') {
                if (orientation === 'portrait') {
                    previewContent.style.width = '100mm';
                    previewContent.style.height = '150mm';
                } else {
                    previewContent.style.width = '150mm';
                    previewContent.style.height = '100mm';
                }
            } else if (paperSize === 'a4') {
                if (orientation === 'portrait') {
                    previewContent.style.width = '210mm';
                    previewContent.style.height = '297mm';
                } else {
                    previewContent.style.width = '297mm';
                    previewContent.style.height = '210mm';
                }
            } else if (paperSize === 'letter') {
                if (orientation === 'portrait') {
                    previewContent.style.width = '216mm';
                    previewContent.style.height = '279mm';
                } else {
                    previewContent.style.width = '279mm';
                    previewContent.style.height = '216mm';
                }
            }
            
            // Apply zoom
            applyZoom();
        }
        
        // Apply zoom to preview
        function applyZoom() {
            const previewContent = document.getElementById('preview-content');
            previewContent.style.transform = `scale(${currentZoom / 100})`;
            previewContent.style.transformOrigin = 'top left';
        }
        
        // Change zoom level
        function changeZoom(delta) {
            currentZoom = Math.max(10, Math.min(200, currentZoom + delta));
            document.getElementById('zoom-value').value = currentZoom;
            applyZoom();
        }
        
        // Set zoom level
        function setZoom(value) {
            currentZoom = Math.max(10, Math.min(200, parseInt(value) || 100));
            document.getElementById('zoom-value').value = currentZoom;
            applyZoom();
        }
        
        // Handle paper size change
        document.getElementById('paper-size').addEventListener('change', function(e) {
            paperSize = e.target.value;
            updatePreviewSize();
        });
        
        // Handle orientation change
        document.getElementById('orientation').addEventListener('change', function(e) {
            orientation = e.target.value;
            updatePreviewSize();
        });
        
        // Print document
        function printDocument() {
            // Open the template in a new window for printing
            const printWindow = window.open('BillOfLadingTemplate.html', '_blank');
            
            // Wait for the window to load before printing
            printWindow.onload = function() {
                // Apply the selected paper size and orientation to the print window
                const style = printWindow.document.createElement('style');
                let paperSizeValue = document.getElementById('paper-size').value;
                let paperSizeStyle = '';
                
                // 根据选择的纸张大小设置样式
                if (paperSizeValue === '100mmx150mm') {
                    paperSizeStyle = '100mm 150mm';
                } else if (paperSizeValue === 'a4') {
                    paperSizeStyle = 'A4';
                } else if (paperSizeValue === 'letter') {
                    paperSizeStyle = 'letter';
                }
                
                style.textContent = `
                    @media print {
                        @page {
                            size: ${orientation === 'portrait' ? paperSizeStyle + ' portrait' : paperSizeStyle + ' landscape'};
                            margin: 0;
                        }
                        
                        body {
                            margin: 0 !important;
                            padding: 0 !important;
                            width: 100% !important;
                            height: 100% !important;
                            overflow: hidden !important;
                            display: flex !important;
                            justify-content: center !important;
                            align-items: center !important;
                        }
                        
                        .container {
                            width: 100% !important;
                            height: 100% !important;
                            margin: 0 !important;
                            padding: 5mm !important;
                            border: 2px solid #000 !important;
                            box-sizing: border-box !important;
                            display: flex !important;
                            flex-direction: column !important;
                            position: relative !important;
                            z-index: 1 !important;
                        }
                        
                        .details-table {
                            flex: 1 !important;
                            min-height: 0 !important;
                        }
                        
                        .details-table tbody {
                            display: block !important;
                            overflow-y: auto !important;
                            max-height: 100% !important;
                        }
                        
                        .details-table thead, .details-table tbody tr {
                            display: table !important;
                            width: 100% !important;
                            table-layout: fixed !important;
                        }
                    }
                `;
                printWindow.document.head.appendChild(style);
                
                // Trigger print
                printWindow.print();
            };
        }
        
        // Initialize preview on page load
        window.addEventListener('load', initPreview);
    </script>
</body>
</html>