@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h2>PROYEKSI PENCAPAIAN LABA RUGI TS 2025</h2>
                <table id="dataTable" class="table table-bordered table-responsive">
                    <thead>
                        <tr id="headerRow"></tr>
                    </thead>
                    <tbody></tbody>
                </table>
                <div id="pagination" class="mt-3"></div>
                <button id="saveBtn" class="btn btn-primary mt-3">Save Changes</button>
            </div>
        </div>
    </div>
</div>

<style>
    td[contenteditable="true"] {
        background-color: white;
        cursor: text;
    }
    .changed-cell {
        background-color: #fff3cd !important; /* kuning */
    }
    .invalid-cell {
        background-color: #f8d7da !important; /* merah */
    }
</style>

<script>
$(document).ready(function(){
    let tableData = [];
    let columns = [];
    let rowsPerPage = 15;
    let currentPage = 1;
    let changedCells = new Set();
    let numericCols = [
        'sasaran_tebu_digiling',
        'real_tebu_digiling',
        'margin_per_rayon',
        'realisasi_giling_sd',
        'realisasi_giling_sd_ton',
        'harga_gula',
        'harga_tetes',
        'pendapatan_gula',
        'pendapatan_tetes',
        'real_bdd',
        'biaya_teralokasi',
        'persen_alokasi_bia',
        'cogm_kinerja',
        'margin_kinerja',
        'real_margin_per_ton'
    ];

    // Format number with thousands separator and decimals
    function number_format(number, decimals = 0, dec_point = ',', thousands_sep = '.') {
        number = parseFloat(number);
        if (isNaN(number)) return number;
        let fixed = number.toFixed(decimals);
        let parts = fixed.split('.');
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousands_sep);
        return parts.length > 1 ? parts.join(dec_point) : parts[0];
    }

    function getDecimals(col) {
        if (col === 'sasaran_tebu_digiling' || col === 'real_tebu_digiling') return 1;
        if (col === 'persen_alokasi_bia') return 2;
        return 0;
    }

    function renderTable(){
        let tbody = $('#dataTable tbody');
        tbody.empty();

        let start = (currentPage - 1) * rowsPerPage;
        let end = Math.min(start + rowsPerPage, tableData.length);

        for (let i = start; i < end; i++) {
            let tr = $('<tr>');
            columns.forEach((col, colIndex) => {
                let value = tableData[i][col];
                let displayValue = value;
                if (numericCols.includes(col) && !isNaN(parseFloat(value))) {
                    displayValue = number_format(value, getDecimals(col), ',', '.');
                }
                let td = $('<td contenteditable="true" style="text-align:right;">').text(displayValue);
                td.data('row', i).data('col', col);

                td.on('input', function(){
                    let val = $(this).text().replace(/\./g, '').replace(',', '.').trim();

                    if (numericCols.includes(col) && isNaN(parseFloat(val))) {
                        $(this).removeClass('changed-cell').addClass('invalid-cell');
                    } else {
                        $(this).removeClass('invalid-cell').addClass('changed-cell');
                        changedCells.add(i + '-' + col);
                    }
                });

                tr.append(td);
            });
            tbody.append(tr);
        }
    }

    function renderPagination(){
        let totalPages = Math.ceil(tableData.length / rowsPerPage);
        let paginationDiv = $('#pagination');
        paginationDiv.empty();

        for (let i = 1; i <= totalPages; i++) {
            let btn = $('<button class="btn btn-sm btn-secondary me-1">').text(i);
            if (i === currentPage) btn.prop('disabled', true);
            btn.on('click', function(){
                currentPage = i;
                renderTable();
            });
            paginationDiv.append(btn);
        }
    }

    $.getJSON('/tebu-handsontable/data', function(data){
        columns = Object.keys(data[0]).filter(col => !['created_at', 'updated_at'].includes(col));
        tableData = data;

        // Mapping column keys to display names
        const colDisplayNames = {
            sasaran_tebu_digiling: 'Sasaran Tebu Digiling (Ton)',
            real_tebu_digiling: 'Real Tebu Digiling SD (Ton)',
            margin_per_rayon: 'Margin per rayon',
            realisasi_giling_sd: 'Gula',
            realisasi_giling_sd_ton: 'Tetes',
            harga_gula: 'Harga Gula (real)',
            harga_tetes: 'Harga Tetes (real)',
            pendapatan_gula: 'Pendapatan Gula (Rp)',
            pendapatan_tetes: 'Pendapatan Tetes (Rp)',
            real_bdd: 'Real BDD',
            biaya_teralokasi: 'Biaya Teralokasi',
            persen_alokasi_bia: '% Alokasi Bia',
            cogm_kinerja: 'COGM Kinerja',
            margin_kinerja: 'Margin Kinerja',
            real_margin_per_ton: 'Real Margin/Ton Tebu'
        };

        let headerRow = $('#headerRow');
        headerRow.empty();
        columns.forEach(col => {
            let th = $('<th style="text-align:right;">').html(
            (colDisplayNames[col] || col).replace(/\n/g, '<br>')
            );
            headerRow.append(th);
        });

        renderTable();
        renderPagination();
    });

    $('#saveBtn').on('click', function(){
        if (changedCells.size === 0) {
            alert('Tidak ada perubahan untuk disimpan.');
            return;
        }

        let updatedData = [];
        changedCells.forEach(key => {
            let [rowIndex, colName] = key.split('-');
            let updatedRow = tableData[rowIndex];
            updatedData.push(updatedRow);
        });

        $.ajax({
            url: '/tebu-handsontable/update',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(
                Array.from(changedCells).map(key => {
                    let [rowIndex, colName] = key.split('-');
                    let absoluteRowIndex = parseInt(rowIndex);
                    let rowData = tableData[absoluteRowIndex];
                    let cellText = $('#dataTable tbody tr').eq(absoluteRowIndex % rowsPerPage).find('td').eq(columns.indexOf(colName)).text().trim();
                    // Remove formatting for numeric columns before sending
                    if (numericCols.includes(colName)) {
                        cellText = cellText.replace(/\./g, '').replace(',', '.');
                        let decimals = getDecimals(colName);
                        let num = parseFloat(cellText);
                        if (!isNaN(num)) {
                            cellText = num.toFixed(decimals);
                        }
                    }
                    return {
                        id: rowData.id,
                        [colName]: cellText
                    };
                })
            ),
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function(res){
                alert('Perubahan berhasil disimpan!');
                changedCells.clear();
                $('td').removeClass('changed-cell invalid-cell');
            }
        });
    });
});
</script>
@endsection