<!-- TAB 3: SAVINGS CHALLENGES -->
    <div class="tab-pane fade <?= $activeTab=='savings'?'show active':'' ?>" id="savings" role="tabpanel">
        <div class="d-flex justify-content-between align-items-center mb-4 animate-slide-up delay-1">
            <h4 class="fw-bold mb-0">تحديات الادخار الكبرى</h4>
            <button class="btn btn-info btn-premium shadow-sm text-white" data-bs-toggle="modal" data-bs-target="#savingsModal"><i class="fa-solid fa-flag-checkered"></i> هدف جديد</button>
        </div>

        <div class="row">
            <?php foreach($goals as $goal): 
                $percent = ($goal->target_amount > 0) ? ($goal->current_amount / $goal->target_amount) * 100 : 0;
                $remDays = 0; $dateStatus = ""; $color = "info";
                if ($goal->expected_date) {
                    $dtTarget = new DateTime($goal->expected_date);
                    $dtNow = new DateTime();
                    $interval = $dtNow->diff($dtTarget);
                    
                    if ($dtTarget < $dtNow && $goal->current_amount < $goal->target_amount) {
                         $dateStatus = "الوقت انتهى!";
                         $color = "danger";
                    } else {
                         $remDays = $interval->days;
                         $dateStatus = "متبقي $remDays يوم";
                         if ($remDays <= 30) $color = "warning";
                    }
                }
                $isCompleted = ($goal->current_amount >= $goal->target_amount);
                if ($isCompleted) { $dateStatus = "تم إنجاز التحدي 🏆"; $color = "success"; }
            ?>
            <div class="col-md-6 mb-4">
                <div class="card card-saas h-100 <?= $isCompleted ? 'bg-success text-white' : '' ?>">
                    <div class="card-body position-relative">
                        <div class="position-absolute top-0 end-0 m-3">
                            <a href="<?= BASE_URL ?>/finance/delete/finance_saving_goals/<?= $goal->id ?>" class="<?= $isCompleted ? 'text-white-50' : 'text-danger' ?>" onclick="return confirm('حذف الهدف؟');"><i class="fa-solid fa-trash"></i></a>
                        </div>
                        <h4 class="fw-bold mb-1"><i class="fa-solid fa-bullseye me-2 opacity-50"></i> <?= htmlspecialchars($goal->title) ?></h4>
                        <?php if($goal->expected_date): ?>
                        <div class="badge bg-<?= $color ?> <?= $isCompleted ? 'bg-white text-success' : 'text-dark' ?> mb-4 shadow-sm"><i class="fa-regular fa-clock"></i> <?= $dateStatus ?></div>
                        <?php else: ?><div class="mb-4"></div><?php endif; ?>
                        
                        <h2 class="fw-bold text-center display-6 mb-0"><?= number_format($goal->current_amount) ?> </h2>
                        <div class="text-center mb-3">من أصل <?= number_format($goal->target_amount) ?> ج.م</div>
                        
                        <div class="progress rounded-pill bg-light border mb-4" style="height: 20px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);">
                            <div class="progress-bar <?= $isCompleted ? 'bg-white' : "bg-{$color}" ?> progress-bar-striped progress-bar-animated" style="width: <?= $percent ?>%; <?= $isCompleted ? 'color: #198754; font-weight:bold;' : '' ?>"><?= number_format($percent, 1) ?>%</div>
                        </div>

                        <?php if(!$isCompleted): ?>
                        <form action="<?= BASE_URL ?>/finance/addSavingProgress" method="POST" class="d-flex gx-2 needs-validation loader-form">
                            <?= csrf_field() ?>
                            <input type="hidden" name="goal_id" value="<?= $goal->id ?>">
                            <div class="input-group">
                                <span class="input-group-text bg-white border-end-0"><i class="fa-solid fa-plus text-success"></i></span>
                                <input type="number" step="0.01" name="amount" class="form-control border-start-0" required placeholder="المبلغ المُدخر اليوم...">
                                <button class="btn btn-dark fw-bold px-4">إيداع</button>
                            </div>
                        </form>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    
