<div class="row justify-content-center">
    <div class="col-lg-11">
        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-collection"></i> Créer un Batch — <?= $next_id; ?></h5>
                <a href="<?= site_url('batches'); ?>" class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Retour
                </a>
            </div>
            <div class="card-body">

                <?php if (empty($unbatched)): ?>
                <div class="alert alert-info text-center py-4">
                    <i class="bi bi-check-circle fs-3 text-success"></i>
                    <h5 class="mt-2">Aucune dépense à batcher</h5>
                    <p class="text-muted">Toutes les dépenses validées sont déjà incluses dans un batch.</p>
                </div>
                <?php else: ?>

                <div class="alert alert-info py-2">
                    <i class="bi bi-info-circle"></i>
                    Sélectionnez les dépenses validées à inclure dans ce batch. 
                    <strong><?= count($unbatched); ?></strong> dépense(s) disponible(s).
                </div>

                <?= form_open('batches/create'); ?>

                <div class="table-responsive">
                    <table class="table table-sm table-hover mb-0" id="batchTable">
                        <thead class="table-light">
                            <tr>
                                <th style="width:40px">
                                    <input type="checkbox" class="form-check-input" id="selectAll">
                                </th>
                                <th>Expense ID</th>
                                <th>Date</th>
                                <th>Fournisseur</th>
                                <th>Catégorie</th>
                                <th>Lieu</th>
                                <th class="text-end">Montant</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($unbatched as $e): ?>
                            <tr>
                                <td>
                                    <input type="checkbox" class="form-check-input expense-cb" 
                                           name="expense_ids[]" value="<?= $e->id; ?>"
                                           data-amount="<?= $e->amount; ?>">
                                </td>
                                <td><code><?= $e->expense_id; ?></code></td>
                                <td class="small"><?= date('d/m/Y', strtotime($e->expense_date)); ?></td>
                                <td><?= htmlspecialchars($e->supplier); ?></td>
                                <td><span class="badge bg-light text-dark"><?= $e->category_label; ?></span></td>
                                <td><span class="badge bg-light text-dark"><?= $e->location_name; ?></span></td>
                                <td class="text-end fw-semibold"><?= number_format($e->amount, 0, ',', ' '); ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                        <tfoot class="table-light">
                            <tr class="fw-bold">
                                <td colspan="6" class="text-end">
                                    Sélection : <span id="selectedCount">0</span> dépense(s) — Total :
                                </td>
                                <td class="text-end text-primary" id="selectedTotal">0</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <hr>
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary" id="btnSubmit" disabled
                            onclick="return confirm('Créer le batch avec les dépenses sélectionnées ?');">
                        <i class="bi bi-collection"></i> Créer le batch
                    </button>
                    <a href="<?= site_url('batches'); ?>" class="btn btn-outline-secondary">Annuler</a>
                </div>

                <?= form_close(); ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<script>
// Tout sélectionner
document.getElementById('selectAll').addEventListener('change', function() {
    document.querySelectorAll('.expense-cb').forEach(function(cb) {
        cb.checked = this.checked;
    }.bind(this));
    updateTotals();
});

// Mise à jour des totaux
document.querySelectorAll('.expense-cb').forEach(function(cb) {
    cb.addEventListener('change', updateTotals);
});

function updateTotals() {
    var count = 0, total = 0;
    document.querySelectorAll('.expense-cb:checked').forEach(function(cb) {
        count++;
        total += parseFloat(cb.dataset.amount);
    });
    document.getElementById('selectedCount').textContent = count;
    document.getElementById('selectedTotal').textContent = total.toLocaleString('fr-FR') + ' KMF';
    document.getElementById('btnSubmit').disabled = (count === 0);
}
</script>
