<?= $this->extend('layout/template') ?>
<?= $this->section('content') ?>

<div class="container-fluid">

<div class="card card-primary">

    <div class="card-header">
        <h3 class="card-title">
            <i class="fas fa-calendar-week"></i>
            Rekap Mingguan
        </h3>
    </div>

    <div class="card-body">

        <!-- FILTER -->
        <form method="get" action="<?= base_url('laporan/rekap-mingguan') ?>">
            <div class="row">

                <div class="col-md-4">
                    <label>Tanggal Awal</label>
                    <input type="date" name="awal" value="<?= $awal ?>" class="form-control">
                </div>

                <div class="col-md-4">
                    <label>Tanggal Akhir</label>
                    <input type="date" name="akhir" value="<?= $akhir ?>" class="form-control">
                </div>

                <div class="col-md-4">
                    <label>&nbsp;</label><br>
                    <button class="btn btn-primary">
                        <i class="fas fa-search"></i> Tampilkan
                    </button>

                    <a href="<?= base_url('laporan/cetak?awal='.$awal.'&akhir='.$akhir) ?>"
                       target="_blank"
                       class="btn btn-success">
                        <i class="fas fa-print"></i> Cetak
                    </a>
                </div>

            </div>
        </form>

        <hr>

        <!-- GRAFIK -->
        <div class="card card-info premium-card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-chart-line mr-1"></i>
                    Grafik Rekap Mingguan
                </h3>
            </div>

            <div class="card-body">
                <div style="height: 340px;">
                    <canvas id="grafikMingguan"></canvas>
                </div>
            </div>
        </div>

        <hr>

        <!-- TABEL -->
        <table class="table table-bordered table-striped" id="example1">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Tanggal</th>
                    <th>Total Pengembalian</th>
                    <th>Total Denda</th>
                </tr>
            </thead>

            <tbody>
            <?php
            $no=1;
            $jumlahPengembalian=0;
            $jumlahDenda=0;

            foreach($rekap as $r):
                $jumlahPengembalian += $r['total_pengembalian'];
                $jumlahDenda += $r['total_denda'];
            ?>
                <tr>
                    <td><?= $no++; ?></td>
                    <td><?= date('d-m-Y',strtotime($r['tanggal'])) ?></td>
                    <td align="center"><?= $r['total_pengembalian']; ?></td>
                    <td>Rp <?= number_format($r['total_denda'],0,',','.'); ?></td>
                </tr>
            <?php endforeach; ?>
            </tbody>

            <tfoot>
                <tr>
                    <th colspan="2">TOTAL</th>
                    <th><?= $jumlahPengembalian ?></th>
                    <th>Rp <?= number_format($jumlahDenda,0,',','.'); ?></th>
                </tr>
            </tfoot>

        </table>

    </div>

</div>

</div>

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

<script>
document.addEventListener("DOMContentLoaded", function () {

<?php if (!empty($rekap)): ?>

const tanggal = [
<?php foreach($rekap as $r): ?>
'<?= date('d-m-Y', strtotime($r['tanggal'])) ?>',
<?php endforeach; ?>
];

const pengembalian = [
<?php foreach($rekap as $r): ?>
<?= (int)$r['total_pengembalian'] ?>,
<?php endforeach; ?>
];

const denda = [
<?php foreach($rekap as $r): ?>
<?= (int)$r['total_denda'] ?>,
<?php endforeach; ?>
];

const ctx = document.getElementById('grafikMingguan').getContext('2d');

// gradient bar
const gradientBar = ctx.createLinearGradient(0, 0, 0, 350);
gradientBar.addColorStop(0, "rgba(78,115,223,0.9)");
gradientBar.addColorStop(1, "rgba(78,115,223,0.3)");

// gradient line
const gradientLine = ctx.createLinearGradient(0, 0, 0, 350);
gradientLine.addColorStop(0, "rgba(231,74,59,0.4)");
gradientLine.addColorStop(1, "rgba(231,74,59,0)");

new Chart(ctx, {

    data: {
        labels: tanggal,
        datasets: [

            {
                type: 'bar',
                label: 'Pengembalian',
                data: pengembalian,
                backgroundColor: gradientBar,
                borderRadius: 10,
                barThickness: 28
            },

            {
                type: 'line',
                label: 'Denda',
                data: denda,
                borderColor: '#e74a3b',
                backgroundColor: gradientLine,
                borderWidth: 3,
                fill: true,
                tension: 0.45,
                pointRadius: 5,
                pointHoverRadius: 7,
                pointBackgroundColor: '#fff',
                pointBorderColor: '#e74a3b',
                pointBorderWidth: 3,
                yAxisID: 'y1'
            }

        ]
    },

    options: {

        responsive: true,
        maintainAspectRatio: false,

        animation: {
            duration: 1200,
            easing: 'easeOutQuart'
        },

        interaction: {
            mode: 'index',
            intersect: false
        },

        plugins: {

            legend: {
                position: 'top',
                labels: {
                    usePointStyle: true,
                    padding: 20,
                    font: {
                        size: 13,
                        weight: '600'
                    }
                }
            },

            tooltip: {
                backgroundColor: '#111',
                titleColor: '#fff',
                bodyColor: '#fff',
                padding: 12,
                cornerRadius: 8,
                displayColors: false,

                callbacks: {
                    label: function(context){
                        if(context.dataset.label === 'Denda'){
                            return 'Denda: Rp ' + context.raw.toLocaleString('id-ID');
                        }
                        return 'Pengembalian: ' + context.raw + ' Buku';
                    }
                }
            }

        },

        scales: {

            x: {
                grid: { display: false },
                ticks: { color: '#858796' }
            },

            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgba(0,0,0,0.04)'
                },
                ticks: { color: '#858796' }
            },

            y1: {
                beginAtZero: true,
                position: 'right',
                grid: { drawOnChartArea: false },
                ticks: {
                    callback: val => 'Rp ' + val.toLocaleString('id-ID'),
                    color: '#858796'
                }
            }

        }

    }

});

<?php else: ?>

document.getElementById('grafikMingguan').parentElement.innerHTML =
'<div class="alert alert-info text-center">Tidak ada data</div>';

<?php endif; ?>

});
</script>

<style>
/* 🔥 PREMIUM LOOK */
.premium-card {
    border: none;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.premium-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    font-size: 15px;
}

canvas {
    padding: 10px;
}
</style>

<?= $this->endSection() ?>