
<div class="row">
    <div class="col-md-9">
        <div class="row">
            <!-- Tokens -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-inline-flex align-items-center">
                                <i class="ph-duotone ph-ticket text-success me-2 f-20"></i>
                                <p class="text-muted mb-0">Tokens</p>
                            </div>
                            <h4 class="mb-0"><?= number_format($totalTokens) ?></h4>
                        </div>
                        <hr>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-inline-flex align-items-center">
                                <i class="ph-duotone ph-currency-sign text-success me-2 f-20"></i>
                                <p class="text-muted mb-0">Amount</p>
                            </div>
                            <h4 class="mb-0"><?= amount_format_pakistani($totalAmount) ?></h4>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Funded Tokens -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-inline-flex align-items-center">
                                <i class="ph-duotone ph-hand-heart text-primary me-2 f-20"></i>
                                <p class="text-muted mb-0">Funded Tokens</p>
                            </div>
                            <h4 class="mb-0"><?= number_format($totalFundedTokens) ?></h4>
                        </div>
                        <hr>
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-inline-flex align-items-center">
                                <i class="ph-duotone ph-coins text-primary me-2 f-20"></i>
                                <p class="text-muted mb-0">Funded Amount</p>
                            </div>
                            <h4 class="mb-0"><?= amount_format_pakistani($totalFundedAmount) ?></h4>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Refunds & Discounts -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <!-- Refunds -->
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-inline-flex align-items-center">
                                <i class="ph-duotone ph-arrow-arc-left text-danger me-2 f-20"></i>
                                <p class="text-muted mb-0">Refunds</p>
                            </div>
                            <h4 class="mb-0"><?= amount_format_pakistani($totalRefund) ?></h4>
                        </div>
                        <hr>
                        <!-- Discounts -->
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-inline-flex align-items-center">
                                <i class="ph-duotone ph-tag text-warning me-2 f-20"></i>
                                <p class="text-muted mb-0">Discounts</p>
                            </div>
                            <h4 class="mb-0"><?= amount_format_pakistani($totalDiscount) ?></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div>  

    <!-- Net Cash -->
    <div class="col-md-3">
        <?php 
            // Dynamic color: green if positive cash, red if zero or negative
            $cashColor = ($totalCash > 0) ? 'bg-success' : 'bg-danger';
        ?>
        <div class="card <?= $cashColor ?> text-white widget-visitor-card">
            <div class="card-body text-center">
                <h6 class="text-white">Net Cash</h6>
                <h3 class="text-white"><?= amount_format_pakistani($totalCash) ?></h3>
                <i class="material-icons-two-tone d-block f-46 text-white">payments</i>
            </div>
        </div>
    </div>
</div>


<!-- <div class="row">
    <div class="col-md-8">
        <div class="card shadow p-3">
            <h6 class="text-center">Department-wise Net Amount</h6>
            <canvas id="amountChart"></canvas>
        </div>
    </div>

  
    <div class="col-md-4">
        <div class="card shadow p-3">
            <h6 class="text-center">Department-wise Tokens</h6>
            <canvas id="tokenChart"></canvas>
        </div>
    </div>




    
</div> -->
<!-- 
<div class="row">
    <div class="card shadow">
    <div class="card-body table-responsive">
        <table class="table table-bordered table-striped">
<thead class="table-dark">
<tr>
    <th>Department</th>
    <th>Funded By</th>

    <?php foreach ($shifts as $shift): ?>
        <th><?= $shift->name ?></th>
    <?php endforeach; ?>

    <th>Total Tokens</th>
    <th>Total Amount</th>
    <th>Discount</th>
    <th>Refund</th>
    <th>Net Total</th>
</tr>
</thead>

          <tbody>
<?php foreach ($stats as $dept): ?>
    <?php foreach ($dept['sponsors'] as $sp): ?>
    <tr>
        <td><?= $dept['department_name'] ?></td>
        <td>
            <span class="badge bg-info">
                <?= $sp['funded_by'] ?>
            </span>
        </td>

        <?php foreach ($shifts as $shift): ?>
            <td><?= $sp['shifts'][$shift->id] ?? 0 ?></td>
        <?php endforeach; ?>

        <td><strong><?= $sp['total_tokens'] ?></strong></td>
        <td><?= number_format($sp['total_amount']) ?></td>
        <td class="text-danger"><?= number_format($sp['total_discount']) ?></td>
        <td class="text-warning"><?= number_format($sp['total_refund']) ?></td>
        <td class="text-success fw-bold">
            <?= number_format($sp['net_total']) ?>
        </td>
    </tr>
    <?php endforeach; ?>
<?php endforeach; ?>
</tbody>

        </table>
    </div>
</div>

</div>


    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->

<!-- ================= CHART JS ================= -->
<!-- <script>
const deptLabels = <?= json_encode($deptChartLabels) ?>;
const tokenData  = <?= json_encode($deptTokenData) ?>;
const netData    = <?= json_encode($deptNetData) ?>;

// DONUT - Tokens
new Chart(document.getElementById('tokenChart'), {
    type: 'doughnut',
    data: {
        labels: deptLabels,
        datasets: [{
            data: tokenData
        }]
    }
});

// BAR - Net Amount
new Chart(document.getElementById('amountChart'), {
    type: 'bar',
    data: {
        labels: deptLabels,
        datasets: [{
            label: 'Net Amount (PKR)',
            data: netData
        }]
    }
});
</script>
 -->



<div class="row">
    <div class="12">
            <?php $this->load->view('admin/tokens/widgets/tokens-table'); ?>        
    </div>

</div>

<?php $this->load->view('admin/layout/form-status-notification'); ?> 
<?php $this->load->view('admin/layout/delete-confirmation-modal'); ?>


    </div>
<?php $this->load->view('admin/tokens/widgets/add-tokens-modal'); ?>
<?php $this->load->view('admin/tokens/widgets/edit-tokens-modal'); ?>

<script>
$(document).ready(function () {
  $('.edit-token-btn').click(function () {

    // Fill hidden id
    $('#edit_id').val($(this).data('id'));

    // Fill name
    $('#edit_name').val($(this).data('name'));

    // Fill phone
    $('#edit_phone').val($(this).data('phone'));

    // Fill gender
    $('#edit_gender').val($(this).data('gender'));

    // Fill age
    $('#edit_age').val($(this).data('age'));

    // Fill age unit
    $('#edit_age_unit').val($(this).data('age_unit'));

    // Finally open the modal
    $('#editTokenModal').modal('show');
  });
});
</script>
      <script>
$(document).ready(function() {
    $('#services-table').DataTable({
        responsive: true,
        pageLength: 25,
        lengthMenu: [10,25,50,100],
        order: [[0,'DESC']]
    });
});
</script>