@{
    ViewData["Title"] = "Realisasi Terhadap Target";
}

<div class="breadcrumbs text-sm">
    <ul>
        <li class="text-gray-500"><a>Laporan</a></li>
        <li>Realisasi Terhadap Target</li>
    </ul>
</div>

<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
    <div class="prose">
        <h3 class="mb-2">Realisasi Terhadap Target</h3>
    </div>

    <div class="justify-self-end lg:self-center">
        <a class="btn btn-primary text-white rounded-full" href="#">
            <span class="icon icon-fill me-2">download</span>
            Download
        </a>
        <button class="btn rounded-full bg-white" type="button" onclick="modal_filter.showModal()">
            <span class="icon icon-fill me-2">filter_list</span>
            Filter
        </button>
    </div>
</div>

<div class="h-8"></div>

<div class="card bg-white shadow-sm">
    <div class="card-body p-0">
        <table class="table-zebra table" id="example">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Wilayah</th>
                    <th>Rumah Memilah Konsisten</th>
                    <th>Rumah Memilah Tidak Konsisten</th>
                    <th>Target Bulanan Pertumbuhan Rumah Memilah</th>
                    <th>Realisasi terhadap Target</th>
                </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr class="font-bold">
                    <td colspan="2">Total</td>
                    <td id="total-konsisten"></td>
                    <td id="total-tidak-konsisten"></td>
                    <td id="total-target"></td>
                    <td id="total-realisasi" class="p-0"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<!-- Filter Modal -->
<dialog id="modal_filter" class="modal modal-bottom sm:modal-middle">
    <div class="modal-box w-full sm:max-w-sm">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold">Filter</h3>
            <button type="button" class="btn btn-sm btn-circle btn-ghost" onclick="modal_filter.close()">✕</button>
        </div>
        <form action="#" method="get">
            <fieldset class="fieldset max-w-sm">
                <legend class="fieldset-legend">Tahun</legend>
                <select class="select w-full" name="tahun">
                    <option disabled>Pilih Tahun</option>
                    <option selected>2025</option>
                    <option>2024</option>
                    <option>2023</option>
                </select>
            </fieldset>
            <div class="grid grid-cols-2 gap-4">
                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Bulan Awal</legend>
                    <input type="month" class="input w-full" name="bulanAwal" placeholder="Pilih bulan">
                </fieldset>
                <fieldset class="fieldset">
                    <legend class="fieldset-legend">Bulan Akhir</legend>
                    <input type="month" class="input w-full" name="bulanAkhir" placeholder="Pilih bulan">
                </fieldset>
            </div>
            <div class="modal-action">
                <button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
                <button type="submit" class="btn btn-neutral">Terapkan Filter</button>
            </div>
        </form>
    </div>
</dialog>

<script src="/lib/jquery/jquery-3.7.1.js"></script>
<script src="/lib/datatables/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>

<script type="text/javascript">
    var table;

    const parseNumber = (value) => {
        if (value === null || value === undefined) return 0;
        if (typeof value === 'string') {
            return Number(value.replace(/\./g, '').replace(',', '.')) || 0;
        }
        return Number(value) || 0;
    };

    const formatNumber = (value) => parseNumber(value).toLocaleString('id-ID');

    const applyRealisasiStyle = (target, value) => {
        const $target = $(target);
        const numericValue = parseNumber(value);
        const isPositive = numericValue >= 0;
        const formatted = numericValue.toLocaleString('id-ID');

        $target
            .removeClass('bg-green-100 text-green-800 bg-red-100 text-red-800 font-semibold')
            .addClass(isPositive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800')
            .addClass('font-semibold')
            .text(formatted);
    };

    $(document).ready(function () {

        table = new DataTable('#example', {
            ajax: '@Url.Action("Table", "RealisasiTerhadapTarget")',
            scrollX: true,
            autoWidth: false,
            paging: true,
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();

                const sumColumn = (index) => api.column(index).data().reduce((total, value) => total + parseNumber(value), 0);

                var totalKonsisten = sumColumn(2);
                var totalTidakKonsisten = sumColumn(3);
                var totalTarget = sumColumn(4);
                var totalRealisasi = sumColumn(5);

                $('#total-konsisten').html(formatNumber(totalKonsisten));
                $('#total-tidak-konsisten').html(formatNumber(totalTidakKonsisten));
                $('#total-target').html(formatNumber(totalTarget));
                applyRealisasiStyle('#total-realisasi', totalRealisasi);
            },
            columns: [
                { data: null, render: (d, t, r, m) => m.row + 1 },
                { data: 'wilayah' },
                {
                    data: 'konsisten',
                    render: (data) => formatNumber(data)
                },
                {
                    data: 'tidakKonsisten',
                    render: (data) => formatNumber(data)
                },
                {
                    data: 'target',
                    render: (data) => formatNumber(data)
                },
                {
                    data: 'realisasi',
                    render: (data) => formatNumber(data)
                }
            ],
            columnDefs: [
                {
                    targets: 5,
                    createdCell: function (td, cellData) {
                        applyRealisasiStyle(td, cellData);
                    }
                }
            ]
        });

    });
</script>