<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>مقارنة اللقطات: #<?= (int) ($snap1['id'] ?? 0) ?> ↔ #<?= (int) ($snap2['id'] ?? 0) ?><?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/archive/<?= (int) ($snap1['id'] ?? 0) ?>" class="btn btn-outline">← لقطة #<?= (int) ($snap1['id'] ?? 0) ?></a>
<a href="/archive/<?= (int) ($snap2['id'] ?? 0) ?>" class="btn btn-outline">← لقطة #<?= (int) ($snap2['id'] ?? 0) ?></a>
<?php $__template->endSection(); ?>

<?php $__template->section('content'); ?>

<!-- Comparison Header -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">
    <div class="card" style="padding:15px;border-right:4px solid #DC2626;">
        <div style="font-weight:700;color:#DC2626;margin-bottom:5px;">لقطة #<?= (int) ($diff['snapshot_1']['id'] ?? 0) ?> (قبل)</div>
        <div style="font-size:13px;color:#6B7280;">السبب: <?= e($diff['snapshot_1']['reason'] ?? '') ?></div>
        <div style="font-size:12px;color:#9CA3AF;"><?= e($diff['snapshot_1']['taken_at'] ?? '') ?></div>
    </div>
    <div class="card" style="padding:15px;border-right:4px solid #059669;">
        <div style="font-weight:700;color:#059669;margin-bottom:5px;">لقطة #<?= (int) ($diff['snapshot_2']['id'] ?? 0) ?> (بعد)</div>
        <div style="font-size:13px;color:#6B7280;">السبب: <?= e($diff['snapshot_2']['reason'] ?? '') ?></div>
        <div style="font-size:12px;color:#9CA3AF;"><?= e($diff['snapshot_2']['taken_at'] ?? '') ?></div>
    </div>
</div>

<!-- Main Entity Diff -->
<?php $mainDiff = $diff['main_entity_diff'] ?? []; ?>
<?php if (empty($mainDiff)): ?>
    <div class="card" style="padding:30px;text-align:center;color:#059669;margin-bottom:20px;">
        <strong>✓ لا توجد اختلافات في بيانات الكيان الرئيسية</strong>
    </div>
<?php else: ?>
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#0D7377;">اختلافات الكيان الرئيسي <span style="color:#DC2626;font-size:14px;">(<?= count($mainDiff) ?> حقل)</span></h3>
        </div>
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th style="width:30%;">الحقل</th>
                        <th style="width:35%;">القيمة القديمة</th>
                        <th style="width:35%;">القيمة الجديدة</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($mainDiff as $field => $change): ?>
                    <tr>
                        <td style="font-weight:600;"><?= e($field) ?></td>
                        <?php if (isset($change['old']) || isset($change['new'])): ?>
                            <td style="background:#FEF2F2;color:#DC2626;font-size:13px;word-break:break-all;">
                                <?php
                                $oldVal = $change['old'] ?? null;
                                if ($oldVal === null) {
                                    echo '<span style="color:#D1D5DB;">NULL</span>';
                                } elseif (is_array($oldVal)) {
                                    echo '<code style="font-size:11px;">' . e(json_encode($oldVal, JSON_UNESCAPED_UNICODE)) . '</code>';
                                } else {
                                    echo e((string) $oldVal);
                                }
                                ?>
                            </td>
                            <td style="background:#F0FDF4;color:#059669;font-size:13px;word-break:break-all;">
                                <?php
                                $newVal = $change['new'] ?? null;
                                if ($newVal === null) {
                                    echo '<span style="color:#D1D5DB;">NULL</span>';
                                } elseif (is_array($newVal)) {
                                    echo '<code style="font-size:11px;">' . e(json_encode($newVal, JSON_UNESCAPED_UNICODE)) . '</code>';
                                } else {
                                    echo e((string) $newVal);
                                }
                                ?>
                            </td>
                        <?php else: ?>
                            <td colspan="2" style="font-size:12px;color:#6B7280;">
                                <details>
                                    <summary style="cursor:pointer;color:#0D7377;">كائن متداخل — اضغط للعرض</summary>
                                    <pre style="margin-top:5px;font-size:11px;background:#F9FAFB;padding:8px;border-radius:4px;overflow-x:auto;"><?= e(json_encode($change, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT)) ?></pre>
                                </details>
                            </td>
                        <?php endif; ?>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    </div>
<?php endif; ?>

<!-- Related Data Diff -->
<?php $relatedDiff = $diff['related_diff'] ?? []; ?>
<?php if (!empty($relatedDiff)): ?>
    <?php foreach ($relatedDiff as $section => $sectionDiff): ?>
    <div class="card" style="margin-bottom:20px;">
        <div style="padding:15px 20px;border-bottom:1px solid #E5E7EB;">
            <h3 style="margin:0;color:#0D7377;"><?= e($section) ?></h3>
        </div>
        <div style="padding:20px;">
            <?php if (isset($sectionDiff['count_changed']) && $sectionDiff['count_changed']): ?>
                <div style="margin-bottom:15px;padding:10px;background:#FFF7ED;border:1px solid #FED7AA;border-radius:6px;font-size:13px;">
                    عدد السجلات: <span style="color:#DC2626;"><?= (int) $sectionDiff['old_count'] ?></span> → <span style="color:#059669;"><?= (int) $sectionDiff['new_count'] ?></span>
                </div>
            <?php endif; ?>

            <?php if (!empty($sectionDiff['added'])): ?>
                <div style="margin-bottom:10px;">
                    <strong style="color:#059669;">✚ سجلات مُضافة (<?= count($sectionDiff['added']) ?>)</strong>
                    <?php foreach ($sectionDiff['added'] as $added): ?>
                        <div style="margin-top:5px;padding:8px;background:#F0FDF4;border:1px solid #BBF7D0;border-radius:4px;font-size:12px;">
                            ID: <?= (int) ($added['id'] ?? 0) ?>
                            <?php if (isset($added['full_name_ar'])): ?> — <?= e($added['full_name_ar']) ?><?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

            <?php if (!empty($sectionDiff['removed'])): ?>
                <div style="margin-bottom:10px;">
                    <strong style="color:#DC2626;">✖ سجلات مُزالة (<?= count($sectionDiff['removed']) ?>)</strong>
                    <?php foreach ($sectionDiff['removed'] as $removed): ?>
                        <div style="margin-top:5px;padding:8px;background:#FEF2F2;border:1px solid #FECACA;border-radius:4px;font-size:12px;">
                            ID: <?= (int) ($removed['id'] ?? 0) ?>
                            <?php if (isset($removed['full_name_ar'])): ?> — <?= e($removed['full_name_ar']) ?><?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

            <?php if (!empty($sectionDiff['changed'])): ?>
                <div>
                    <strong style="color:#D97706;">✎ سجلات مُعدّلة (<?= count($sectionDiff['changed']) ?>)</strong>
                    <?php foreach ($sectionDiff['changed'] as $changedId => $fieldChanges): ?>
                        <details style="margin-top:5px;border:1px solid #FED7AA;border-radius:4px;">
                            <summary style="padding:8px 12px;cursor:pointer;background:#FFF7ED;font-size:13px;">سجل #<?= (int) $changedId ?> — <?= count($fieldChanges) ?> حقل متغير</summary>
                            <table style="width:100%;font-size:12px;margin:0;">
                                <thead><tr style="background:#F9FAFB;"><th style="padding:4px 10px;">الحقل</th><th style="padding:4px 10px;">قبل</th><th style="padding:4px 10px;">بعد</th></tr></thead>
                                <tbody>
                                    <?php foreach ($fieldChanges as $fk => $fc): ?>
                                    <?php if (isset($fc['old']) || isset($fc['new'])): ?>
                                    <tr>
                                        <td style="padding:4px 10px;font-weight:600;"><?= e($fk) ?></td>
                                        <td style="padding:4px 10px;color:#DC2626;background:#FEF2F2;"><?= e((string) ($fc['old'] ?? 'NULL')) ?></td>
                                        <td style="padding:4px 10px;color:#059669;background:#F0FDF4;"><?= e((string) ($fc['new'] ?? 'NULL')) ?></td>
                                    </tr>
                                    <?php endif; ?>
                                    <?php endforeach; ?>
                                </tbody>
                            </table>
                        </details>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>

            <?php if (empty($sectionDiff['added']) && empty($sectionDiff['removed']) && empty($sectionDiff['changed']) && empty($sectionDiff['count_changed'])): ?>
                <div style="color:#059669;text-align:center;">✓ لا توجد اختلافات</div>
            <?php endif; ?>
        </div>
    </div>
    <?php endforeach; ?>
<?php else: ?>
    <div class="card" style="padding:30px;text-align:center;color:#059669;">
        <strong>✓ لا توجد اختلافات في البيانات المرتبطة</strong>
    </div>
<?php endif; ?>

<?php $__template->endSection(); ?>