<?php $__template->layout('Layout.main'); ?>
<?php $__template->section('title'); ?>مقارنة الأدوار<?php $__template->endSection(); ?>

<?php $__template->section('page_actions'); ?>
<a href="/access-matrix" class="btn btn-outline">← المصفوفة</a>
<?php $__template->endSection(); ?>

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

<div class="card" style="margin-bottom:20px;padding:20px;">
    <form method="GET" action="/access-matrix/compare" style="display:flex;gap:15px;align-items:end;flex-wrap:wrap;">
        <div>
            <label class="form-label">الدور الأول</label>
            <select name="role_a" class="form-select" style="min-width:200px;" required>
                <option value="">اختر...</option>
                <?php foreach ($roles as $r): ?>
                <option value="<?= (int) $r['id'] ?>" <?= $roleA == $r['id'] ? 'selected' : '' ?>><?= e($r['name_ar']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <div style="font-size:24px;color:#6B7280;padding-bottom:5px;">⇄</div>
        <div>
            <label class="form-label">الدور الثاني</label>
            <select name="role_b" class="form-select" style="min-width:200px;" required>
                <option value="">اختر...</option>
                <?php foreach ($roles as $r): ?>
                <option value="<?= (int) $r['id'] ?>" <?= $roleB == $r['id'] ? 'selected' : '' ?>><?= e($r['name_ar']) ?></option>
                <?php endforeach; ?>
            </select>
        </div>
        <button type="submit" class="btn btn-primary">مقارنة</button>
    </form>
</div>

<?php if ($comparison): ?>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;">
    <!-- Only in Role A -->
    <div class="card">
        <div style="padding:12px 15px;background:#FEF2F2;border-bottom:2px solid #FECACA;">
            <h4 style="margin:0;color:#DC2626;font-size:14px;">
                فقط في: <?= e($roleAData['name_ar']) ?>
                <span style="float:left;background:#DC2626;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;"><?= count($comparison['only_a']) ?></span>
            </h4>
        </div>
        <div style="padding:10px 15px;max-height:400px;overflow-y:auto;">
            <?php if (empty($comparison['only_a'])): ?>
            <p style="color:#9CA3AF;text-align:center;">لا يوجد</p>
            <?php else: ?>
            <?php foreach ($comparison['only_a'] as $p): ?>
            <div style="padding:4px 0;font-size:12px;border-bottom:1px solid #F9FAFB;direction:ltr;"><?= e($p) ?></div>
            <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>

    <!-- Shared -->
    <div class="card">
        <div style="padding:12px 15px;background:#F0FDF4;border-bottom:2px solid #A7F3D0;">
            <h4 style="margin:0;color:#059669;font-size:14px;">
                مشتركة
                <span style="float:left;background:#059669;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;"><?= count($comparison['shared']) ?></span>
            </h4>
        </div>
        <div style="padding:10px 15px;max-height:400px;overflow-y:auto;">
            <?php if (empty($comparison['shared'])): ?>
            <p style="color:#9CA3AF;text-align:center;">لا يوجد</p>
            <?php else: ?>
            <?php foreach ($comparison['shared'] as $p): ?>
            <div style="padding:4px 0;font-size:12px;border-bottom:1px solid #F9FAFB;direction:ltr;"><?= e($p) ?></div>
            <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>

    <!-- Only in Role B -->
    <div class="card">
        <div style="padding:12px 15px;background:#EFF6FF;border-bottom:2px solid #BFDBFE;">
            <h4 style="margin:0;color:#0284C7;font-size:14px;">
                فقط في: <?= e($roleBData['name_ar']) ?>
                <span style="float:left;background:#0284C7;color:#fff;padding:2px 8px;border-radius:10px;font-size:11px;"><?= count($comparison['only_b']) ?></span>
            </h4>
        </div>
        <div style="padding:10px 15px;max-height:400px;overflow-y:auto;">
            <?php if (empty($comparison['only_b'])): ?>
            <p style="color:#9CA3AF;text-align:center;">لا يوجد</p>
            <?php else: ?>
            <?php foreach ($comparison['only_b'] as $p): ?>
            <div style="padding:4px 0;font-size:12px;border-bottom:1px solid #F9FAFB;direction:ltr;"><?= e($p) ?></div>
            <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php else: ?>
<div class="card" style="padding:40px;text-align:center;color:#9CA3AF;">
    <div style="font-size:48px;margin-bottom:15px;">🔍</div>
    <p>اختر دورين للمقارنة بينهما</p>
</div>
<?php endif; ?>

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