<?php
function wf_h($v) {
    return htmlspecialchars((string)$v, ENT_QUOTES, 'UTF-8');
}
$groups = $groups ?? [];
$stats = $stats ?? ['total'=>0,'done'=>0,'enabled'=>0];
$progress = $stats['total'] > 0 ? round(($stats['done'] / $stats['total']) * 100) : 0;
?>

<div class="container-fluid py-3">

    <div class="card border-0 shadow-sm mb-4" style="border-radius:24px;background:linear-gradient(135deg,#0f172a,#1d4ed8);color:#fff;">
        <div class="card-body p-4">
            <h3 class="fw-bold mb-1"><i class="fa fa-diagram-project"></i> Conference Workflow Board</h3>
            <div class="opacity-75">EasyChair-like setup checklist: profile, CFP, reviewers, decisions, program, proceedings.</div>

            <div class="mt-3">
                <div class="d-flex justify-content-between">
                    <span>Progress</span>
                    <strong><?= (int)$progress ?>%</strong>
                </div>
                <div class="progress" style="height:12px;border-radius:999px;">
                    <div class="progress-bar bg-success" style="width:<?= (int)$progress ?>%"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-md-4">
            <div class="card border-0 shadow-sm" style="border-radius:20px;"><div class="card-body text-center">
                <div class="fs-2 fw-bold"><?= (int)$stats['total'] ?></div><div class="text-muted">Total steps</div>
            </div></div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm" style="border-radius:20px;"><div class="card-body text-center">
                <div class="fs-2 fw-bold text-success"><?= (int)$stats['done'] ?></div><div class="text-muted">Done</div>
            </div></div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 shadow-sm" style="border-radius:20px;"><div class="card-body text-center">
                <div class="fs-2 fw-bold text-primary"><?= (int)$stats['enabled'] ?></div><div class="text-muted">Enabled</div>
            </div></div>
        </div>
    </div>

    <?php foreach ($groups as $group => $steps): ?>
        <div class="card border-0 shadow-sm mb-4" style="border-radius:22px;">
            <div class="card-body p-4">
                <h5 class="fw-bold mb-3"><?= wf_h(ucfirst($group)) ?></h5>

                <div class="table-responsive">
                    <table class="table table-bordered align-middle">
                        <thead class="table-dark">
                            <tr>
                                <th>Step</th>
                                <th>Description</th>
                                <th>Enabled</th>
                                <th>Done</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        <?php foreach ($steps as $s): ?>
                            <tr>
                                <td>
                                    <strong><?= wf_h($s['title_ar'] ?: $s['title_en']) ?></strong>
                                    <div class="text-muted small"><?= wf_h($s['step_key']) ?></div>
                                </td>
                                <td><?= wf_h($s['description_ar'] ?: $s['description_en']) ?></td>
                                <td>
                                    <span class="badge <?= (int)$s['is_enabled'] ? 'bg-success' : 'bg-secondary' ?>">
                                        <?= (int)$s['is_enabled'] ? 'Enabled' : 'Disabled' ?>
                                    </span>
                                </td>
                                <td>
                                    <span class="badge <?= (int)$s['is_done'] ? 'bg-success' : 'bg-warning text-dark' ?>">
                                        <?= (int)$s['is_done'] ? 'Done' : 'Pending' ?>
                                    </span>
                                </td>
                                <td>
                                    <a class="btn btn-sm btn-primary" href="/easychair/admin/workflow-board/toggle-done?id=<?= (int)$s['id'] ?>">Toggle Done</a>
                                    <a class="btn btn-sm btn-outline-secondary" href="/easychair/admin/workflow-board/toggle-enabled?id=<?= (int)$s['id'] ?>">Enable/Disable</a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    <?php endforeach; ?>

</div>
