@php
$page_name = 'Updation Report';
@endphp
@include('partial.header')
<style>
    .highlighted{
        background-color:rgba(51, 175, 101, 0.4) !important;
    }
</style>
<div class="container-fluid">

    @include('partial.navigation')
        <!--************ Main container start ************* -->
                
        <div class="main-container">
            <!-- Content wrapper start -->
            <div class="content-wrapper">

                <div class="table-container">
                    <table class="table" style="margin-bottom: 0px !important;">
                        <tbody>
                            <tr>
                                <td style="width:25px;">
                                    <a onclick="window.history.back()" href="rpt_all_shift_short#"
                                        data-toggle="dropdown" aria-haspopup="true">
                                        <i style="font-size:24px;" class="icon-keyboard_backspace"></i>
                                    </a>
                                </td>
                                <td style="width:180px;">
                                    <h5 class="table-title">Changes Report</h5>
                                </td>
                                <td style="width:50px;"><b>Date</b></td>
                                <td style="width:145px;" id="FromDatePanel">
                                    <table style="width:100%;">
                                        <tbody>
                                            <tr class="form-control form-control-sm" style="padding:0px !important;">
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Day_FromDate" name="Day_FromDate" value="{{date('d')}}"
                                                        maxlength="2" data-listener-added_e381efce="true"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Month_FromDate" name="Month_FromDate" value="{{date('m')}}"
                                                        maxlength="2" data-listener-added_e381efce="true"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:50px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Year_FromDate" name="Year_FromDate" value="{{date('Y')}}"
                                                        maxlength="4"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td style="width:145px;" id="ToDatePanel">
                                    <table style="width:100%;">
                                        <tbody>
                                            <tr class="form-control form-control-sm" style="padding:0px !important;">
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Day_ToDate" name="Day_ToDate" value="{{date('d')}}"
                                                        maxlength="2"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Month_ToDate" name="Month_ToDate" value="{{date('m')}}"
                                                        maxlength="2"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:50px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Year_ToDate" name="Year_ToDate" value="{{date('Y')}}"
                                                        maxlength="4"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td style="width:150px;">
                                    <button id="SearchBtn" class="btn btn-success btn-block"
                                        onclick="getAutoVapsi()">Search <span id="ajax_loader"></span></button>
                                </td>
                                <td style="width:100px;">
                                    <form id="exportForm" method="POST" action="/export_report" style="display: flex;gap: 20px;">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                        <input type="hidden" name="FromDate" id="FromDateExport">
                                        <input type="hidden" name="ToDate" id="ToDateExport">
                                        <input type="hidden" name="GroupAgentId" id="GroupAgentIdExport">
                                        <input type="hidden" name="fields" id="fieldsExport">
                                        <input type="hidden" name="format" id="formatExport">
                                        <input type="hidden" name="type" id="typeExport">

                                        <button class="btn btn-primary btn-block exportToExcel" type="button" onclick="exportExternal('excel')">Excel</button>
                                    </form>


                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="table-container">
                        <div class="table-responsive table2excel CustomFixedTbl CustomFreezTable"
                            style="min-height: 79vh; max-height: 79vh; overflow-x: scroll;">
                            <table class="table table-bordered">
                                <thead>
                                    <tr style="border-top:1px solid #DDD;">
                                        <th>Changed</th>
                                        <th>Shift Name</th>
                                        <th>Ledger (Old → New)</th>
                                        <th>Field Changed</th>
                                        <th>Old Value</th>
                                        <th>New Value</th>
                                        <th>Updated By</th>
                                        <th>Updated At</th>
                                    </tr>
                                </thead>


                                <tbody id="ListBodyPanel">
                                </tbody>
                                <tfoot id="ListFooterPanel"></tfoot>
                            </table>
                        </div>
                    </div>


                </div>
                <!-- Content wrapper end -->


            </div>
            <!-- *************
                    ************ Main container end *************
                ************* -->

        </div>

        <script>
            var BaseUrl = "/";
            var nav = "rpt_all_shift_short";
            var LoginRoleId = "2";
         </script>                           

        @include('partial.footer')
        
        <script>
            var LayerLedgerId = "0";
            var LayerFromDate = "{{date('Y-m-d')}}";
            var LayerToDate = "{{date('Y-m-d')}}";
            function setFormValuesAndSubmit(format) {

                var JsonData = {
                    'FromDate': getCustomDatePicker("FromDate", 'D'),
                    'ToDate': getCustomDatePicker("ToDate", 'D'),
                    'GroupAgentId'	: $('#SearchGroupAgentId').val(),
                    'format': format,
                    'type' : 'autoVapsiReport'
                };

                // Set form values
                $('#FromDateExport').val(JsonData.FromDate);
                $('#ToDateExport').val(JsonData.ToDate);
                $('#GroupAgentIdExport').val(JsonData.GroupAgentId);
                $('#formatExport').val(JsonData.format);
                $('#typeExport').val(JsonData.type);

                // Submit the form
                $('#exportForm').submit();
            }
            function exportExternal(format) {
                event.preventDefault();
                setFormValuesAndSubmit(format);
            }


            $(document).ready(function () {
                    $("#FromDatePanel").html(CustomDatePicker("FromDate", LayerFromDate));
                    $("#ToDatePanel").html(CustomDatePicker("ToDate", LayerToDate));
                    $("#ProcessDatePanel").html(CustomDatePicker("ProcessDate", LayerFromDate));
            });

            function sumAmountsByNumber(array) {
                let map = new Map();
                array.forEach(item => {
                    let number = Number(item.Number);
                    let amount = Number(item.Amount);
                    map.set(number, (map.get(number) || 0) + amount);
                });
                return map;
            }

            function getTransactionChanges(oldArray, newArray) {
                let oldMap = sumAmountsByNumber(oldArray);
                let newMap = sumAmountsByNumber(newArray);

                let changes = [];

                // Compare sums in both old and new
                for (let [number, newAmount] of newMap) {
                    let oldAmount = oldMap.get(number) || 0;

                    if (!oldMap.has(number)) {
                        // Added entry
                        changes.push({
                            oldNumber: null,
                            oldAmount: null,
                            newNumber: number,
                            newAmount: newAmount,
                            changeType: "Added"
                        });
                    } else if (oldAmount !== newAmount) {
                        // Modified amount
                        changes.push({
                            oldNumber: number,
                            oldAmount: oldAmount,
                            newNumber: number,
                            newAmount: newAmount,
                            changeType: "Modified"
                        });
                    }
                }

                // Check for removed numbers
                for (let [number, oldAmount] of oldMap) {
                    if (!newMap.has(number)) {
                        changes.push({
                            oldNumber: number,
                            oldAmount: oldAmount,
                            newNumber: null,
                            newAmount: null,
                            changeType: "Removed"
                        });
                    }
                }

                return changes;
            }

            function getAutoVapsi() {
                var FromDate = getCustomDatePicker("FromDate", 'D');
                var ToDate = getCustomDatePicker("ToDate", 'D');

                var JsonData = {
                    'FromDate': FromDate,
                    'ToDate': ToDate,
                    'Method': "ajax_get_auto_vapsi"
                };

                AjaxLoader("show");
                AjaxCall("/get_changes", JsonData, function (response) {
                    $("#ListBodyPanel").html(''); // Clear previous data

                    if (response.status && response.data.length > 0) {
                        var rowsHtml = "";

                        response.data.forEach(function (log) {
                            // Extract last part of model name
                            var modelName = log.model_name.split('\\').pop(); 
                            var modelId = log.model_id;
                            var shiftName = log.shift_name || "";
                            var updatedAt = log.updated_at;

                            // Prepare ledger info (Old → New format)
                            var oldLedgerId = log.changed_fields.ledger_id?.old ?? "N/A";
                            var newLedgerId = log.changed_fields.ledger_id?.new ?? "N/A";
                            var oldLedgerName = log.changed_fields.ledger_id?.old_name ?? "N/A";
                            var newLedgerName = log.changed_fields.ledger_id?.new_name ?? "N/A";

                            var ledgerInfo = `${oldLedgerName} → ${newLedgerName}`;

                            // If multiple fields changed, create separate rows for each field
                            Object.entries(log.changed_fields).forEach(([field, change]) => {
                                if (field === "ledger_id") return; // Skip ledger_id since it's already displayed separately

                                if(field === "counter_voucher_id") return; // Skip updated_at since it's already displayed separately
                                var oldValue = change.old ?? "N/A";
                                var newValue = change.new ?? "N/A";

                                if(ledgerInfo == "N/A → N/A"){
                                    return;
                                }
                                if(field == "updated_at"){
                                    return;
                                }
                                if(field == "total_amount"){
                                    return;
                                }
                                if(field == "updated_by" || field == "is_redeclared_txn"){
                                    return;
                                }
                                
                                
                                if(field == "transaction"){
                                    var oldValueJson = JSON.parse(oldValue);
                                    var newValueJson = JSON.parse(newValue);

                                    var differJson = getTransactionChanges(oldValueJson, newValueJson)

                                    console.log(differJson)

                                    for (let i = 0; i < differJson.length; i++) {
                                        var differ = differJson[i];
                                        rowsHtml += `
                                            <tr>
                                                <td>${modelName}</td>
                                                <td>${shiftName}</td>
                                                <td>${ledgerInfo}</td>
                                                <td>${field} (${differ.changeType})</td>
                                                <td>${differ.oldNumber ?? "NA"} → ${differ.oldAmount ?? "NA"}</td>
                                                <td>${differ.newNumber ?? "NA"} → ${differ.newAmount ?? "NA"}</td>
                                                <td>${log.updated_by}</td>
                                                <td>${updatedAt}</td>
                                            </tr>
                                        `;
                                    }
                                    
                                }
                                else{
                                    rowsHtml += `
                                        <tr>
                                            <td>${modelName}</td>
                                            <td>${shiftName}</td>
                                            <td>${ledgerInfo}</td>
                                            <td>${field}</td>
                                            <td>${oldValue}</td>
                                            <td>${newValue}</td>
                                                <td>${log.updated_by}</td>
                                            <td>${updatedAt}</td>
                                        </tr>
                                    `;
                                }

                                

                                

                                
                            });
                        });

                        $("#ListBodyPanel").html(rowsHtml);
                    } else {
                        $("#ListBodyPanel").html('<tr><td colspan="8" class="text-center">No records found.</td></tr>');
                    }

                    AjaxLoader("hide");
                });
            }




            function ExportToExl() {
                ExportToExcel_custom("HVS_Detail_FromAllShiftReport", "HPMaintable2excel");
            }
            $(function () {
                $("body").keydown(function (e) {
                    var keyCode = e.keyCode || e.which;
                    if (keyCode == 113) // F2 - Save Transaction
                    {
                        e.preventDefault();
                        AddBtn();
                    }
                    if (keyCode == 116) // F5 - Random
                    {
                        e.preventDefault();
                    }
                });
            });
            
            
        

            ko.bindingHandlers.nextFieldOnEnter = {
                init: function(element, valueAccessor, allBindingsAccessor) {
                    $(element).on('keydown', 'input, select', function (e) {
                        var self = $(this)
                        , form = $(element)
                          , focusable
                          , next
                        ;
                        //LastFocusedControl_Id = $(":focus").attr("id");
                        if (e.keyCode == 13) {
                            focusable = form.find('input,select,button,textarea').filter(':visible');
                            var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
                            next = focusable.eq(nextIndex);
                                
                                
                            next.focus().select();
                            return false;
                        }
                    });
                }
            };
            ko.applyBindings({});
        </script>