<?php
// admin/roles-content.php - محتوای مدیریت نقش‌ها
?>

<?php if ($message): ?>
<div class="alert alert-<?= strpos($message, 'خطا') !== false ? 'alert-danger' : 'alert-success' ?>">
    <i class="fas <?= strpos($message, 'خطا') !== false ? 'fa-exclamation-circle' : 'fa-check-circle' ?>"></i>
    <?= $message ?>
</div>
<?php endif; ?>

<!-- ===== کارت‌های آمار ===== -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
    <div class="bg-blue-500 text-white rounded-2xl p-5 shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-blue-100 text-sm">تعداد کل نقش‌ها</p>
                <h3 class="text-2xl font-bold mt-1"><?= persianNumber(count($roles)) ?></h3>
            </div>
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fas fa-user-tag text-xl"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-green-500 text-white rounded-2xl p-5 shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-green-100 text-sm">نقش‌های مدیریتی</p>
                <h3 class="text-2xl font-bold mt-1"><?= persianNumber(count(array_filter($roles, function($r) { return $r['level'] <= 2; }))) ?></h3>
            </div>
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fas fa-crown text-xl"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-purple-500 text-white rounded-2xl p-5 shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-purple-100 text-sm">نقش‌های عملیاتی</p>
                <h3 class="text-2xl font-bold mt-1"><?= persianNumber(count(array_filter($roles, function($r) { return $r['level'] > 2; }))) ?></h3>
            </div>
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fas fa-users-cog text-xl"></i>
            </div>
        </div>
    </div>
</div>

<!-- ===== دو ستون ===== -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    
    <!-- ===== ستون چپ: فرم افزودن نقش جدید ===== -->
    <div class="card" style="padding:20px 24px;background:#fff;border-radius:12px;border:1px solid #e5e7eb;">
        <h4 class="font-bold text-gray-700 mb-4 flex items-center gap-2" style="font-size:16px;">
            <i class="fas fa-plus-circle text-green-500"></i>
            افزودن نقش جدید
        </h4>
        <form method="POST" action="">
            <input type="hidden" name="action" value="add">
            
            <div class="form-group" style="margin-bottom:16px;">
                <label style="display:block;font-weight:600;color:#374151;margin-bottom:5px;font-size:14px;">نام نقش</label>
                <input type="text" name="name" placeholder="مثال: مدیر دفتر" 
                       class="form-control" 
                       style="width:100%;padding:10px 14px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;" required>
            </div>
            
            <div class="form-group" style="margin-bottom:16px;">
                <label style="display:block;font-weight:600;color:#374151;margin-bottom:5px;font-size:14px;">سطح دسترسی (عدد ۱ تا ۱۰)</label>
                <input type="number" name="level" placeholder="عدد ۱ تا ۱۰" 
                       class="form-control" 
                       style="width:100%;padding:10px 14px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;" 
                       min="1" max="10" required>
                <small style="color:#9ca3af;font-size:12px;display:block;margin-top:4px;">عدد کمتر = دسترسی بالاتر</small>
            </div>
            
            <button type="submit" class="btn btn-success" 
                    style="width:100%;padding:10px 24px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;background:#10b981;color:white;transition:all 0.3s;display:inline-flex;align-items:center;justify-content:center;gap:8px;">
                <i class="fas fa-save"></i> افزودن نقش
            </button>
        </form>
    </div>
    
    <!-- ===== ستون راست: لیست نقش‌ها ===== -->
    <div class="card" style="padding:20px 24px;background:#fff;border-radius:12px;border:1px solid #e5e7eb;">
        <h4 class="font-bold text-gray-700 mb-4 flex items-center gap-2" style="font-size:16px;">
            <i class="fas fa-list text-blue-500"></i>
            لیست نقش‌ها
            <span class="text-sm text-gray-400 mr-2">(<?= persianNumber(count($roles)) ?> نقش)</span>
        </h4>
        
        <div class="space-y-3 max-h-[500px] overflow-y-auto">
            <?php if (empty($roles)): ?>
            <p class="text-gray-400 text-center py-8">هیچ نقشی ثبت نشده است</p>
            <?php else: ?>
            <?php foreach ($roles as $role): ?>
            <div class="role-item" style="background:#f8fafc;border-radius:10px;padding:14px 16px;border:1px solid <?= $role['level'] <= 2 ? '#bfdbfe' : '#e5e7eb' ?>;transition:all 0.2s;">
                <form method="POST" action="" class="flex flex-wrap items-center gap-3">
                    <input type="hidden" name="action" value="edit">
                    <input type="hidden" name="id" value="<?= $role['id'] ?>">
                    
                    <div class="flex-1 min-w-[150px]">
                        <input type="text" name="name" value="<?= htmlspecialchars($role['name']) ?>" 
                               class="form-control" 
                               style="width:100%;padding:8px 12px;border:2px solid #e5e7eb;border-radius:6px;font-size:13px;" required>
                    </div>
                    
                    <div style="width:80px;">
                        <input type="number" name="level" value="<?= $role['level'] ?>" 
                               class="form-control" 
                               style="width:100%;padding:8px 12px;border:2px solid #e5e7eb;border-radius:6px;font-size:13px;text-align:center;" 
                               min="1" max="10" required>
                    </div>
                    
                    <div class="action-buttons" style="display:flex;gap:4px;align-items:center;">
                        <button type="submit" class="btn-action btn-action-edit" title="ویرایش" style="width:32px;height:32px;padding:0;border:none;border-radius:6px;font-size:13px;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;justify-content:center;color:white;background:#1a237e;">
                            <i class="fas fa-save"></i>
                        </button>
                        
                        <?php if ($role['id'] > 1): ?>
                        <button type="submit" class="btn-action btn-action-delete" title="حذف" 
                                style="width:32px;height:32px;padding:0;border:none;border-radius:6px;font-size:13px;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;justify-content:center;color:white;background:#dc3545;"
                                onclick="this.form.action.value='delete'; return confirm('آیا از حذف نقش «<?= htmlspecialchars($role['name']) ?>» مطمئن هستید؟')">
                            <i class="fas fa-trash"></i>
                        </button>
                        <?php endif; ?>
                    </div>
                </form>
                
                <div style="font-size:11px;color:#9ca3af;margin-top:8px;padding-top:6px;border-top:1px solid #f1f5f9;display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
                    <span>شناسه: <?= $role['id'] ?></span>
                    <span>|</span>
                    <span>سطح: <?= $role['level'] ?></span>
                    <?php if ($role['level'] <= 2): ?>
                    <span style="background:#dbeafe;color:#1e40af;padding:2px 10px;border-radius:20px;font-size:10px;font-weight:600;">نقش مدیریتی</span>
                    <?php endif; ?>
                    <?php if ($role['id'] == 1): ?>
                    <span style="background:#fecaca;color:#991b1b;padding:2px 10px;border-radius:20px;font-size:10px;font-weight:600;">غیرقابل حذف</span>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</div>
