<div class="row">
    <div class="col-12">
        <div class="card glass-card">
            <div class="card-header"><h5 class="card-title">Comparison Report</h5></div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label">Period 1 Start</label>
                        <input type="date" id="period1_start" class="form-control" value="<?= date('Y-m-01') ?>">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Period 1 End</label>
                        <input type="date" id="period1_end" class="form-control" value="<?= date('Y-m-t') ?>">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Period 2 Start</label>
                        <input type="date" id="period2_start" class="form-control" value="<?= date('Y-m-01', strtotime('-1 month')) ?>">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Period 2 End</label>
                        <input type="date" id="period2_end" class="form-control" value="<?= date('Y-m-t', strtotime('-1 month')) ?>">
                    </div>
                    <div class="col-md-4 d-flex align-items-end">
                        <button class="btn btn-gold" onclick="loadComparison()"><i class="fas fa-chart-bar me-1"></i>Compare</button>
                    </div>
                </div>
                <div id="comparisonResults">
                    <div class="text-center py-5 text-muted">Select periods and click Compare.</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
function loadComparison() {
    const p1s = $('#period1_start').val();
    const p1e = $('#period1_end').val();
    const p2s = $('#period2_start').val();
    const p2e = $('#period2_end').val();
    $('#comparisonResults').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-2x text-gold"></i></div>');
    $.get('<?= url('reports/comparison/data') ?>', { period1_start: p1s, period1_end: p1e, period2_start: p2s, period2_end: p2e }, function(html) {
        $('#comparisonResults').html(html);
    });
}
</script>
