<?php $this->start('body');
    $p = $this->data['plan'] ?? [];
    $os = $this->data['objectives'] ?? [];
    $targetTotal = 0; foreach ($os as $o) $targetTotal += (float)$o['target_value'];
?>

<div class="d-flex align-items-center justify-content-between mb-3">
    <div>
        <h5 class="mb-0" style="font-weight:600;color:#334155;"><i class="fas fa-map-signs me-2" style="color:#7A8BA1;"></i><?= htmlspecialchars($p['plan_name']); ?></h5>
        <div class="text-muted small mt-1" style="color:#64748B;">Year <?= (int)$p['plan_year']; ?> · Target TZS <?= number_format((float)$p['target_amount']); ?> · <?= htmlspecialchars($p['status']); ?></div>
    </div>
    <div class="d-flex gap-2">
        <?php if (UserGroups::can('BdmPlans','edit')): ?><a href="<?= PROOT; ?>BdmPlans/edit/<?= (int)$p['c0d']; ?>" class="btn btn-sm" style="background:#F8FAFC;border:1px solid #E2E8F0;color:#334155;"><i class="fas fa-edit me-1" style="color:#7A8BA1;"></i>Edit</a><?php endif; ?>
        <a href="<?= PROOT; ?>BdmPlans" class="btn btn-sm" style="background:#F8FAFC;border:1px solid #E2E8F0;color:#334155;"><i class="fas fa-arrow-left me-1"></i>Back</a>
    </div>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-header bg-white d-flex align-items-center justify-content-between" style="border-bottom:1px solid #E2E8F0;">
        <strong style="color:#334155;">Objectives</strong>
        <span class="text-muted small" style="color:#64748B;"><?= count($os); ?> · sum TZS <?= number_format($targetTotal); ?></span>
    </div>
    <?php if (UserGroups::can('BdmPlans','addObjectiveAj')): ?>
    <div class="card-body p-2" style="background:#F8FAFC;border-bottom:1px solid #E2E8F0;">
        <div class="row g-2 align-items-end">
            <div class="col-md-7"><input type="text" id="obj_text" class="form-control form-control-sm" placeholder="Grow public-sector revenue in Dodoma…"></div>
            <div class="col-md-3"><input type="number" step="0.01" id="obj_target" value="0" class="form-control form-control-sm" placeholder="Target TZS"></div>
            <div class="col-md-2"><button type="button" id="btn_add_obj" class="btn btn-sm w-100" style="background:#7A8BA1;border-color:#7A8BA1;color:#fff;font-weight:600;"><i class="fas fa-plus me-1"></i>Add</button></div>
        </div>
    </div>
    <?php endif; ?>
    <div class="table-responsive">
        <table class="table table-sm mb-0 align-middle">
            <thead style="background:#F1F5F9;">
                <tr><th style="color:#334155;">Objective</th><th class="text-end" style="color:#334155;">Target</th></tr>
            </thead>
            <tbody>
                <?php foreach ($os as $o): ?>
                    <tr>
                        <td style="color:#334155;"><?= htmlspecialchars($o['objective']); ?></td>
                        <td class="text-end" style="color:#334155;"><?= number_format((float)$o['target_value']); ?></td>
                    </tr>
                <?php endforeach; ?>
                <?php if (empty($os)): ?><tr><td colspan="2" class="text-center py-4" style="color:#94A3B8;">No objectives yet.</td></tr><?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<?php $this->end(); ?>

<?php $this->start('section_js'); ?>
<script>
$('#btn_add_obj').on('click', function () {
    var txt = $('#obj_text').val().trim();
    if (!txt) { rsToast('Enter an objective.', 'warning'); return; }
    $.post('<?= PROOT; ?>BdmPlans/addObjectiveAj', {
        plan_id: <?= (int)$p['c0d']; ?>, objective: txt, target_value: $('#obj_target').val() || 0
    }, 'json').done(function (res) {
        if (res && res.ok) { rsToast('Objective added.', 'success'); setTimeout(function () { location.reload(); }, 400); }
        else                { rsToast('Failed: ' + (res.msg || 'unknown'), 'error'); }
    });
});
</script>
<?php $this->end(); ?>
