<h4 class="mb-4"><?= lang('finance.daily_revenue') ?></h4>

<div class="card mb-3">
    <div class="card-body py-2">
        <div class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label form-label-sm"><?= lang('finance.date') ?></label>
                <input type="date" id="revenue-date" class="form-control form-control-sm" value="<?= date('Y-m-d') ?>">
            </div>
            <div class="col-md-2">
                <button class="btn btn-sm btn-primary" id="load-revenue"><?= lang('common.filter') ?></button>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card border-success"><div class="card-body text-center"><small class="text-muted"><?= lang('finance.grand_total') ?></small><br><h3 id="grand-total-display" class="text-success mb-0">0.00</h3></div></div>
    </div>
    <div class="col-md-4">
        <div class="card border-info"><div class="card-body text-center"><small class="text-muted"><?= lang('finance.transactions') ?></small><br><h3 id="trans-count-display" class="mb-0">0</h3></div></div>
    </div>
    <div class="col-md-4">
        <div class="card"><div class="card-body"><canvas id="revenue-chart" height="100"></canvas></div></div>
    </div>
</div>

<div class="card">
    <div class="card-header"><h6 class="mb-0"><?= lang('finance.breakdown_by_method') ?></h6></div>
    <div class="card-body">
        <table class="table" id="revenue-table">
            <thead><tr><th><?= lang('finance.method') ?></th><th><?= lang('finance.type') ?></th><th class="text-center"><?= lang('finance.count') ?></th><th class="text-end"><?= lang('finance.total') ?></th></tr></thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<?php $__view->push('scripts'); ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var chart = null;

    function loadRevenue() {
        var date = document.getElementById('revenue-date').value;
        $.get('/finance/reports/daily-revenue/data', { date: date }, function(r) {
            document.getElementById('grand-total-display').textContent = parseFloat(r.grandTotal).toFixed(2) + ' <?= Config::get('default_currency','EGP') ?>';
            document.getElementById('trans-count-display').textContent = r.transactionCount;

            var tbody = document.querySelector('#revenue-table tbody');
            tbody.innerHTML = '';
            if (r.summary.length === 0) {
                tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">No transactions</td></tr>';
            }
            r.summary.forEach(function(row) {
                tbody.innerHTML += '<tr><td>' + row.method + '</td><td>' + row.method_type + '</td><td class="text-center">' + row.count + '</td><td class="text-end"><strong>' + parseFloat(row.total).toFixed(2) + '</strong></td></tr>';
            });

            // Chart
            if (chart) chart.destroy();
            var labels = r.chartData.map(function(d) { return d.payment_date; });
            var data = r.chartData.map(function(d) { return parseFloat(d.total); });
            chart = new Chart(document.getElementById('revenue-chart'), {
                type: 'bar',
                data: { labels: labels, datasets: [{ label: 'Revenue', data: data, backgroundColor: '#28a745' }] },
                options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true } } }
            });
        });
    }

    document.getElementById('load-revenue').addEventListener('click', loadRevenue);
    loadRevenue();
});
</script>
<?php $__view->endPush(); ?>