<?php
require_once __DIR__ . '/../../includes/auth.php';
requireLogin();

require_once __DIR__ . '/../../config/database.php';

$results = $_SESSION['settlement_preview'] ?? [];

$totalReady = 0;
$totalCarry = 0;
$totalHold = 0;
$totalMismatch = 0;
$totalOutstanding = 0;

foreach ($results as $row) {

    if ($row['status'] === 'READY') {
        $totalReady += (float)$row['payable'];
    }

    if ($row['status'] === 'CARRY_FORWARD') {
        $totalCarry += (float)$row['payable'];
    }

    if ($row['status'] === 'HOLD') {
        $totalHold += (float)$row['payable'];
    }

    if ($row['status'] === 'BANK_MISMATCH') {
        $totalMismatch++;
    }
}

$stmt = $pdo->prepare("
    SELECT SUM(balance) as total_balance
    FROM manual_settlement_balances
    WHERE company_id = ?
");
$stmt->execute([$_SESSION['company_id']]);
$totalOutstanding = (float)$stmt->fetchColumn();

require_once __DIR__ . '/../../includes/layout.php';
?>

<div class="container">

<h2 style="margin-bottom:25px;">Settlement Dashboard</h2>

<!-- KPI CARDS -->
<div class="settlement-grid">

    <div class="settlement-card ready">
        <div class="label">READY</div>
        <div class="amount">R <?= number_format($totalReady,2) ?></div>
    </div>

    <div class="settlement-card carry">
        <div class="label">CARRY</div>
        <div class="amount">R <?= number_format($totalCarry,2) ?></div>
    </div>

    <div class="settlement-card hold">
        <div class="label">HOLD</div>
        <div class="amount">R <?= number_format($totalHold,2) ?></div>
    </div>

    <div class="settlement-card mismatch">
        <div class="label">MISMATCH</div>
        <div class="amount"><?= $totalMismatch ?></div>
    </div>

</div>

<!-- OUTSTANDING -->
<div class="outstanding-box">
    <h3>Total Outstanding Carry Balance</h3>
    <div class="outstanding-amount">
        R <?= number_format($totalOutstanding,2) ?>
    </div>
</div>

<!-- BAR CHART SECTION -->
<div class="chart-section">
    <canvas id="settlementChart"></canvas>
</div>

</div>

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

<script>
const ctx = document.getElementById('settlementChart');

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Ready', 'Carry', 'Hold'],
        datasets: [{
            label: 'Amount (R)',
            data: [
                <?= $totalReady ?>,
                <?= $totalCarry ?>,
                <?= $totalHold ?>
            ],
            backgroundColor: [
                '#22c55e',
                '#f59e0b',
                '#ef4444'
            ],
            borderRadius: 8,
            barThickness: 40
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        indexAxis: 'y',
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                ticks: {
                    callback: function(value) {
                        return 'R ' + value.toLocaleString();
                    }
                }
            }
        }
    }
});
</script>

<style>

/* GRID */
.settlement-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 992px) {
    .settlement-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .settlement-grid {
        grid-template-columns: 1fr;
    }
}

/* CARDS */
.settlement-card {
    padding: 20px;
    border-radius: 10px;
    background: #1e293b;
    color: white;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.settlement-card .label {
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 8px;
}

.settlement-card .amount {
    font-size: 20px;
    font-weight: bold;
}

.settlement-card.ready    { border-left: 5px solid #22c55e; }
.settlement-card.carry    { border-left: 5px solid #f59e0b; }
.settlement-card.hold     { border-left: 5px solid #ef4444; }
.settlement-card.mismatch { border-left: 5px solid #dc2626; }

/* OUTSTANDING */
.outstanding-box {
    background: #0f172a;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 40px;
    color: white;
}

.outstanding-amount {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

/* CHART */
.chart-section {
    background: white;
    padding: 25px;
    border-radius: 10px;
    height: 320px;
}

@media (max-width: 600px) {
    .chart-section {
        height: 260px;
    }
}

</style>

<?php require_once __DIR__ . '/../../includes/layout_footer.php'; ?>