<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stampa Report - <?php echo e($data['title'] ?? 'Report'); ?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 12px;
            line-height: 1.4;
            color: #333;
            background: #f5f5f5;
        }

        .toolbar {
            background: #2c3e50;
            color: #fff;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .toolbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .toolbar-title {
            font-size: 18px;
            font-weight: bold;
        }

        .toolbar-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .toolbar label {
            font-size: 13px;
            opacity: 0.9;
        }

        .toolbar select {
            padding: 6px 12px;
            border: 1px solid #4a5568;
            border-radius: 4px;
            background: #4a5568;
            color: #fff;
            font-size: 13px;
            cursor: pointer;
        }

        .toolbar select:focus {
            outline: none;
            border-color: #63b3ed;
        }

        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .btn-print {
            background: #28a745;
            color: #fff;
        }

        .btn-print:hover {
            background: #218838;
        }

        .btn-close {
            background: #dc3545;
            color: #fff;
        }

        .btn-close:hover {
            background: #c82333;
        }

        .btn-secondary {
            background: #6c757d;
            color: #fff;
        }

        .btn-secondary:hover {
            background: #5a6268;
        }

        .preview-container {
            max-width: 210mm;
            margin: 20px auto;
            background: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
        }

        .preview-container.portrait {
            width: 210mm;
            min-height: 297mm;
        }

        .preview-container.landscape {
            width: 297mm;
            min-height: 210mm;
        }

        .report-header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #2c3e50;
        }

        .report-header h1 {
            font-size: 24px;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .report-header .subtitle {
            font-size: 14px;
            color: #7f8c8d;
        }

        .report-summary {
            background: #e8f4f8;
            padding: 12px 15px;
            margin-bottom: 20px;
            border-left: 4px solid #17a2b8;
            font-size: 13px;
        }

        .report-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: 11px;
        }

        .report-table th,
        .report-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        .report-table th {
            background: #f8f9fa;
            font-weight: bold;
            color: #2c3e50;
        }

        .report-table tr:nth-child(even) {
            background: #fafafa;
        }

        .report-table tr:hover {
            background: #f0f0f0;
        }

        .no-data {
            text-align: center;
            color: #999;
            font-style: italic;
            padding: 40px 20px;
        }

        .no-data i {
            font-size: 48px;
            margin-bottom: 10px;
            display: block;
        }

        .report-footer {
            margin-top: 30px;
            padding-top: 15px;
            border-top: 1px solid #ddd;
            text-align: center;
            font-size: 10px;
            color: #999;
        }

        .row-count {
            font-size: 12px;
            color: #666;
            margin-top: 10px;
            text-align: right;
        }

        @page {
            margin: 15mm;
        }

        @media print {
            @page portrait {
                size: portrait;
            }

            @page landscape {
                size: landscape;
            }

            .toolbar {
                display: none !important;
            }

            body {
                background: #fff;
                padding: 0;
            }

            .preview-container {
                margin: 0;
                box-shadow: none;
                padding: 0;
                max-width: none;
                width: 100%;
            }

            .preview-container.portrait {
                width: auto;
                min-height: auto;
            }

            .preview-container.landscape {
                width: auto;
                min-height: auto;
            }

            .report-table {
                page-break-inside: auto;
            }

            .report-table tr {
                page-break-inside: avoid;
                page-break-after: auto;
            }

            .report-table thead {
                display: table-header-group;
            }

            .report-table tfoot {
                display: table-footer-group;
            }
        }
    </style>
</head>
<body>
    <div class="toolbar" id="toolbar">
        <div class="toolbar-left">
            <span class="toolbar-title">Anteprima di Stampa</span>
            <div class="toolbar-group">
                <label for="orientation">Orientamento:</label>
                <select id="orientation">
                    <option value="portrait">Verticale (Portrait)</option>
                    <option value="landscape">Orizzontale (Landscape)</option>
                </select>
            </div>
            <div class="toolbar-group">
                <label for="font-size">Dimensione font:</label>
                <select id="font-size">
                    <option value="10">Piccolo (10px)</option>
                    <option value="11">Normale (11px)</option>
                    <option value="12" selected>Medio (12px)</option>
                    <option value="13">Grande (13px)</option>
                </select>
            </div>
        </div>
        <div>
            <button class="btn btn-secondary" onclick="window.opener ? window.close() : window.location.href='<?php echo e(route('report.index')); ?>'">
                Indietro
            </button>
            <button class="btn btn-print" onclick="printReport()">
                Stampa
            </button>
        </div>
    </div>

    <div class="preview-container portrait" id="preview-container">
        <div class="report-header">
            <h1><?php echo e($data['title'] ?? 'Report'); ?></h1>
            <div class="subtitle">Generato il <?php echo e(now()->format('d/m/Y H:i')); ?></div>
        </div>

        <?php if(!empty($data['summary'])): ?>
        <div class="report-summary">
            <strong><?php echo e($data['summary']); ?></strong>
        </div>
        <?php endif; ?>

        <?php if(!empty($data['headers']) && !empty($data['rows'])): ?>
        <table class="report-table" id="report-table">
            <thead>
                <tr>
                    <?php $__currentLoopData = $data['headers']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $header): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <th><?php echo e($header); ?></th>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tr>
            </thead>
            <tbody>
                <?php $__currentLoopData = $data['rows']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr>
                    <?php $__currentLoopData = $row; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cell): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <td><?php echo e(is_array($cell) ? json_encode($cell) : $cell); ?></td>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
        <div class="row-count">Totale righe: <?php echo e(count($data['rows'])); ?></div>
        <?php else: ?>
        <div class="no-data">
            Nessun dato disponibile per questo report.
        </div>
        <?php endif; ?>

        <div class="report-footer">
            <p>Report generato automaticamente - Glastree</p>
        </div>
    </div>

    <script>
        const orientationSelect = document.getElementById('orientation');
        const fontSizeSelect = document.getElementById('font-size');
        const previewContainer = document.getElementById('preview-container');
        const reportTable = document.getElementById('report-table');

        function printReport() {
            window.print();
        }

        orientationSelect.addEventListener('change', function() {
            previewContainer.classList.remove('portrait', 'landscape');
            previewContainer.classList.add(this.value);

            if (this.value === 'landscape') {
                document.body.classList.add('landscape-mode');
            } else {
                document.body.classList.remove('landscape-mode');
            }
        });

        fontSizeSelect.addEventListener('change', function() {
            const size = this.value;
            document.body.style.fontSize = size + 'px';
            if (reportTable) {
                reportTable.style.fontSize = (parseInt(size) - 1) + 'px';
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const savedOrientation = localStorage.getItem('report-print-orientation');
            const savedFontSize = localStorage.getItem('report-print-font-size');

            if (savedOrientation) {
                orientationSelect.value = savedOrientation;
                orientationSelect.dispatchEvent(new Event('change'));
            }

            if (savedFontSize) {
                fontSizeSelect.value = savedFontSize;
                fontSizeSelect.dispatchEvent(new Event('change'));
            }
        });

        orientationSelect.addEventListener('change', function() {
            localStorage.setItem('report-print-orientation', this.value);
        });

        fontSizeSelect.addEventListener('change', function() {
            localStorage.setItem('report-print-font-size', this.value);
        });
    </script>
</body>
</html>
<?php /**PATH /var/www/html/glastree/resources/views/report/print-preview.blade.php ENDPATH**/ ?>