@extends('operations.layout.mainlayout')

@section('content')

    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            color: black;
        }

        table.dataTable tr.dtrg-group td {
            background-color: white;
            border-bottom: 1px solid #e7e7e7 !important;
            font-size: 15px;
        }

        .btn-blz {
            color: var(--blazma-primary);
            border-color: var(--blazma-primary);
            width: 20%;
            margin: 2px;
        }

        .btn-blz:hover {
            color: #fff;
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
        }

        .active {
            color: #fff;
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
        }

        .qc-stat-actions button,
        .qc-stat-actions a {
            margin: 1px;
        }

        .qc-log-entry {
            padding: 8px 0;
            border-bottom: 1px dashed #ddd;
        }
        .qc-log-entry:last-child { border-bottom: 0; }
        .qc-log-entry .label { font-weight: 600; color: #1F3E61; }
        .qc-log-entry .value { color: #555; }

        /* Statistic L-J chart container — responsive so the chart
           scales with the modal width instead of forcing a fixed
           1024×500 canvas that overlaps markers when many points
           are plotted. */
        #chartContainerStatistic {
            width: 100%;
            height: 520px;
            min-height: 520px;
        }
        /* CanvasJS wraps its canvas in a div that must inherit size */
        #chartContainerStatistic > div {
            width: 100% !important;
            height: 100% !important;
        }
        /* Subtle separator between the rule badges and the export button */
        #export-statistic-chart { margin-top: .5rem; }
    </style>

    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Quality Control Statistic</h1>
                    </div>
                    <div class="col-sm-6"></div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <div class="col-12 col-sm-12 col-md-12">
                            <br/>
                            <div class="card bg-light">
                                <div class="card-header text-muted border-bottom-0"></div>
                                <div class="card-body pt-0">
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <span class="text-muted text-sm"><b>QC</b></span>
                                                    <select class="form-control rhospital_id" id="qc-control-id-filter" @if(!empty($filter_qc_id) && !empty($filter_lot_id) && !empty($filter_test_id) && !empty($filter_date_from) && !empty($filter_date_to)) disabled @endif>
                                                        <option value="" selected>Select QC</option>
                                                        @foreach($Controls as $control)
                                                            <option value="{{$control->ID}}" @if(!empty($filter_qc_id) && $filter_qc_id == $control->ID) selected @endif>{{$control->NAME}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <div class="col-md-4">
                                                    <span class="text-muted text-sm"><b>Lot</b></span>
                                                    <select class="form-control rhospital_id" id="qc-lot-id-filter" @if(!empty($filter_qc_id) && !empty($filter_lot_id) && !empty($filter_test_id) && !empty($filter_date_from) && !empty($filter_date_to)) disabled @endif>
                                                        <option value="">Select Lot</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-4">
                                                    <span class="text-muted text-sm"><b>Test</b></span>
                                                    <select class="form-control rhospital_id" id="qc-test-id-filter" @if(!empty($filter_qc_id) && !empty($filter_lot_id) && !empty($filter_test_id) && !empty($filter_date_from) && !empty($filter_date_to)) disabled @endif>
                                                        <option value="">Select Test</option>
                                                    </select>
                                                </div>

                                                <div class="col-md-4">
                                                    <span class="text-muted text-sm"><b>Date From</b></span>
                                                    <input type="date" class="form-control" name="date"
                                                           id="qc-filter-date-from" value="{{ $filter_date_from ?? '' }}" @if(!empty($filter_qc_id) && !empty($filter_lot_id) && !empty($filter_test_id) && !empty($filter_date_from) && !empty($filter_date_to)) disabled @endif>
                                                </div>

                                                <div class="col-md-4">
                                                    <span class="text-muted text-sm"><b>Date To</b></span>
                                                    <input type="date" class="form-control" name="date"
                                                           id="qc-filter-date-to" value="{{ $filter_date_to ?? '' }}" @if(!empty($filter_qc_id) && !empty($filter_lot_id) && !empty($filter_test_id) && !empty($filter_date_from) && !empty($filter_date_to)) disabled @endif>
                                                </div>

                                                <div class="col-md-4">
                                                    <button type="button" disabled class="mt-4 form-control btn btn-success" id="show-qc-statistic" @if(!empty($filter_qc_id) && !empty($filter_lot_id) && !empty($filter_test_id) && !empty($filter_date_from) && !empty($filter_date_to)) disabled @endif>Show Statistic</button>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h5 class="mb-0" style="color:#1F3E61;">QC Statistic Results</h5>
                                    <div>
                                        <button type="button" id="export-qc-statistic" class="btn btn-success">
                                            <i class="fas fa-file-excel"></i> Excel Export
                                        </button>
                                        <button type="button" id="print-qc-statistic" class="btn btn-info">
                                            <i class="fas fa-print"></i> Print
                                        </button>
                                    </div>
                                </div>
                                <table id="qc-result-statistic-table" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>QC Name</th>
                                        <th>Lot Name</th>
                                        <th>Test Name</th>
                                        <th># of Points</th>
                                        <th># of Excluded Points</th>
                                        <th>Target Mean</th>
                                        <th>Target SD</th>
                                        <th>Target CV %</th>
                                        <th>In House Mean</th>
                                        <th>In House SD</th>
                                        <th>In House CV %</th>
                                        <th>Generated</th>
                                        <th>Comment</th>
                                        <th>Log</th>
                                        <th>L-J Chart</th>
                                        <th>Print</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="modal-statistic">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Result Statistic</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form">
                    <div class="modal-body">

                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-result" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col-md-3">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Target MEAN</p>
                                <input type="number" class="form-control" id="target-mean" disabled>
                            </div>
                            <div class="col-md-3">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">In House MEAN</p>
                                <input type="number" class="form-control" id="calculate-mean" disabled>
                            </div>
                            <div class="col-md-3">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Target SD</p>
                                <input type="number" class="form-control" id="target-sd" disabled>
                            </div>
                            <div class="col-md-3">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">In House SD</p>
                                <input type="number" class="form-control" id="calculate-sd" disabled>
                            </div>
                            <div class="col-md-3 mt-2">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Target CV %</p>
                                <input type="number" class="form-control" id="target-cv" disabled>
                            </div>
                            <div class="col-md-3 mt-2">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">In House CV %</p>
                                <input type="number" class="form-control" id="calculate-cv" disabled>
                            </div>
                            <div class="col-md-3 mt-2">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;"># of Points</p>
                                <input type="number" class="form-control" id="number-result" disabled>
                            </div>
                            <div class="col-md-3 mt-2">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;"># of Excluded Points</p>
                                <input type="number" class="form-control" id="excluded-result" disabled>
                            </div>
                            <div class="col-md-3 mt-2">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">From</p>
                                <input type="text" class="form-control" id="result-from" disabled>
                            </div>
                            <div class="col-md-3 mt-2">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">To</p>
                                <input type="text" class="form-control" id="result-to" disabled>
                            </div>
                        </div>

                        <div class="row" style="margin-top:20px">
                            <div class="col-12">
                                <textarea class="form-control" id="comment" placeholder="Write Comment Here (Optional)"></textarea>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer justify-content-between">
                        <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button style="width:130px;color:#fff" id="export-statistic" type="button"
                                class="btn btn-info">Approve
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-comment">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Statistic Comment</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-danger alert-danger-confirm" role="alert"
                                 style="display: none;"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <textarea id="comment-result" disabled class="form-control mt-4" rows="3" cols="50"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-statistic-log">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Statistic Log</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="statistic-log-body">
                        <div class="qc-log-entry">
                            <div class="label">Approved By</div>
                            <div class="value" id="log-generated">—</div>
                        </div>
                        <div class="qc-log-entry">
                            <div class="label">Comment</div>
                            <div class="value" id="log-comment">—</div>
                        </div>
                        <div class="qc-log-entry">
                            <div class="label">Set As Target By</div>
                            <div class="value" id="log-target">—</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-statistic-lj">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="lj-statistic-title">L-J Chart</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div id="chartContainerStatistic"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="export-statistic-chart" type="button" class="btn btn-blz">Export Chart</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('footer-scripts')
    <script>
        $(document).ready(function() {
            // Track filter state for table auto-refresh
            let lastValidFilterKey = null;

            function getFilterKey() {
                return JSON.stringify({
                    qc: $('#qc-control-id-filter').val(),
                    lot: $('#qc-lot-id-filter').val(),
                    test: $('#qc-test-id-filter').val(),
                    from: $('#qc-filter-date-from').val(),
                    to: $('#qc-filter-date-to').val(),
                });
            }

            function toggleButton() {
                const isQCSelected = $('#qc-control-id-filter').val();
                const isLotSelected = $('#qc-lot-id-filter').val();
                const isTestSelected = $('#qc-test-id-filter').val();
                const dateFrom = $('#qc-filter-date-from').val();
                const dateTo = $('#qc-filter-date-to').val();

                if (isQCSelected && isLotSelected && isTestSelected && dateFrom && dateTo) {
                    $('#show-qc-statistic').prop('disabled', false);
                } else {
                    $('#show-qc-statistic').prop('disabled', true);
                }

                // Auto-refresh DataTable when filters change (only if all filters valid)
                if (typeof qcStatisticTable !== 'undefined' && qcStatisticTable) {
                    const filterKey = getFilterKey();
                    if (isQCSelected && isLotSelected && isTestSelected && dateFrom && dateTo) {
                        if (filterKey !== lastValidFilterKey) {
                            lastValidFilterKey = filterKey;
                            qcStatisticTable.ajax.reload(null, false);
                        }
                    }
                }
            }

            $('#qc-control-id-filter, #qc-lot-id-filter, #qc-test-id-filter, #qc-filter-date-from, #qc-filter-date-to').on('change keyup', toggleButton);

            // Pre-populate Lot / Test dropdowns based on query string (when navigated from QC Result page)
            @if(!empty($filter_qc_id))
                $.get('/operations/results/' + {{ (int)$filter_qc_id }} + '/lots', function(data) {
                    let opts = '<option value="">Select Lot</option>';
                    if (data && data.response) {
                        data.response.forEach(function(item) {
                            let selected = '';
                            @if(!empty($filter_lot_id))
                                if (item.ID == {{ (int)$filter_lot_id }}) selected = 'selected';
                            @endif
                            opts += '<option value="' + item.ID + '" ' + selected + '>' + item.NAME + '</option>';
                        });
                    }
                    $('#qc-lot-id-filter').html(opts);
                    @if(!empty($filter_lot_id))
                        $.get('/operations/results/' + {{ (int)$filter_lot_id }} + '/tests', function(data2) {
                            let opts2 = '<option value="">Select Test</option>';
                            if (data2 && data2.response) {
                                data2.response.forEach(function(item) {
                                    let selected = '';
                                    @if(!empty($filter_test_id))
                                        if (item.ID == {{ (int)$filter_test_id }}) selected = 'selected';
                                    @endif
                                    let optLabel = item.LAB_CATEGORY_PACKAGE_NAME_EN;
                                    if (item.LAB_CATEGORY_PACKAGE_RESULT_NAME_EN) {
                                        optLabel += ' - ' + item.LAB_CATEGORY_PACKAGE_RESULT_NAME_EN;
                                    }
                                    opts2 += '<option value="' + item.ID + '" ' + selected + '>' + optLabel + '</option>';
                                });
                            }
                            $('#qc-test-id-filter').html(opts2);
                            toggleButton();
                            @if(!empty($filter_test_id) && !empty($filter_date_from) && !empty($filter_date_to))
                                // All 5 filters pre-set — auto-open Result Statistic modal
                                $.ajax({
                                    type: "GET",
                                    url: "/operations/data/qc/" + {{ (int)$filter_test_id }} + "/statistic",
                                    data: {
                                        date_from: "{{ $filter_date_from }}",
                                        date_to: "{{ $filter_date_to }}"
                                    }
                                }).done(function (data) {
                                    const showOrDash = (v) => (v === null || v === undefined || v === '') ? '—' : v;
                                    $("#calculate-mean").val(showOrDash(data.response.calculated_mean));
                                    $("#target-mean").val(showOrDash(data.response.original_mean));
                                    $("#calculate-sd").val(showOrDash(data.response.calculated_sd));
                                    $("#target-sd").val(showOrDash(data.response.original_sd));
                                    $("#target-cv").val(showOrDash(data.response.target_cv));
                                    $("#calculate-cv").val(showOrDash(data.response.calculated_cv));
                                    $("#number-result").val(showOrDash(data.response.number_of_result));
                                    $("#excluded-result").val(showOrDash(data.response.excluded_count));
                                    $("#result-from").val("{{ $filter_date_from }}");
                                    $("#result-to").val("{{ $filter_date_to }}");
                                    $('#modal-statistic').modal('show');
                                }).fail(function (jqXHR, textStatus, errorThrown) {
                                    if (typeof toastr !== 'undefined') {
                                        toastr.error(jqXHR.responseJSON?.errorMessage || 'An error occurred');
                                    } else {
                                        alert(jqXHR.responseJSON?.errorMessage || 'An error occurred');
                                    }
                                });
                            @endif
                        });
                    @else
                        toggleButton();
                    @endif
                });
            @else
                toggleButton();
            @endif
        });

        // Cascade select handlers — populate Lot when QC changes, Test when Lot changes
        $("#qc-control-id-filter").change(function() {
            var qcId = $(this).val();
            if (!qcId) {
                $('#qc-lot-id-filter').html('<option value="">Select Lot</option>');
                $('#qc-test-id-filter').html('<option value="">Select Test</option>');
                toggleButton();
                return;
            }
            $.get('/operations/results/' + qcId + '/lots', function(data) {
                let opts = '<option value="">Select Lot</option>';
                if (data && data.response) {
                    data.response.forEach(function(item) {
                        opts += '<option value="' + item.ID + '">' + item.NAME + '</option>';
                    });
                }
                $('#qc-lot-id-filter').html(opts);
                $('#qc-test-id-filter').html('<option value="">Select Test</option>');
                toggleButton();
            });
        });

        $("#qc-lot-id-filter").change(function() {
            var lotId = $(this).val();
            if (!lotId) {
                $('#qc-test-id-filter').html('<option value="">Select Test</option>');
                toggleButton();
                return;
            }
            $.get('/operations/results/' + lotId + '/tests', function(data) {
                let opts = '<option value="">Select Test</option>';
                if (data && data.response) {
                    data.response.forEach(function(item) {
                        let label = item.LAB_CATEGORY_PACKAGE_NAME_EN;
                        if (item.LAB_CATEGORY_PACKAGE_RESULT_NAME_EN) {
                            label += ' - ' + item.LAB_CATEGORY_PACKAGE_RESULT_NAME_EN;
                        }
                        opts += '<option value="' + item.ID + '">' + label + '</option>';
                    });
                }
                $('#qc-test-id-filter').html(opts);
                toggleButton();
            });
        });

        $("#show-qc-statistic").click(function () {
            var dateFrom = $("#qc-filter-date-from").val();
            var dateTo = $("#qc-filter-date-to").val();
            var lot_test_id = $("#qc-test-id-filter").val();
            $.ajax({
                type: "GET",
                url: "/operations/data/qc/" + lot_test_id + "/statistic",
                data: {
                    date_from: dateFrom,
                    date_to: dateTo
                },
            }).done(function (data, textStatus, xhr) {
                // Render nulls as "—" so a "no usable points" case doesn't display as 0.
                const showOrDash = (v) => (v === null || v === undefined || v === '') ? '—' : v;
                $("#calculate-mean").val(showOrDash(data.response.calculated_mean));
                $("#target-mean").val(showOrDash(data.response.original_mean));
                $("#calculate-sd").val(showOrDash(data.response.calculated_sd));
                $("#target-sd").val(showOrDash(data.response.original_sd));
                $("#target-cv").val(showOrDash(data.response.target_cv));
                $("#calculate-cv").val(showOrDash(data.response.calculated_cv));
                $("#number-result").val(showOrDash(data.response.number_of_result));
                $("#excluded-result").val(showOrDash(data.response.excluded_count));
                $("#result-from").val(dateFrom);
                $("#result-to").val(dateTo);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                if (typeof toastr !== 'undefined') {
                    toastr.error(jqXHR.responseJSON?.errorMessage || 'An error occurred');
                } else {
                    alert(jqXHR.responseJSON?.errorMessage || 'An error occurred');
                }
            });

            $('#modal-statistic').modal('show');
        });

        var qcStatisticTable;
        function QcStatisticTable() {
            qcStatisticTable = $("#qc-result-statistic-table").DataTable({
                dom: 'lBfrtip',
                buttons: ['copy', 'csv', 'pdf', 'print'],
                pageLength: 50,
                lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                responsive: true,
                autoWidth: false,
                serverSide: true,
                processing: true,
                ordering: true,
                destroy: true,
                ajax: {
                    url: '/operations/data/qc-statistics',
                    data: function (d) {
                        d.qc_id = $('#qc-control-id-filter').val();
                        d.lot_id = $('#qc-lot-id-filter').val();
                        d.test_id = $('#qc-test-id-filter').val();
                        d.date_from = $('#qc-filter-date-from').val();
                        d.date_to = $('#qc-filter-date-to').val();
                    }
                },
                "order": [[0, "desc"]],
                columns: [
                    {data: "ID", name: "ID"},
                    {data: "QC_NAME", name: "QC_NAME"},
                    {data: "LOT_NAME", name: "LOT_NAME"},
                    {
                        data: "LAB_CATEGORY_PACKAGE_NAME",
                        name: "LAB_CATEGORY_PACKAGE_NAME",
                        render: function (data, type, row) {
                            if (row['LAB_CATEGORY_PACKAGE_RESULT_NAME'])
                                return data + ' - ' + row['LAB_CATEGORY_PACKAGE_RESULT_NAME'];
                            else
                                return data;
                        }
                    },
                    {data: "RESULT_NUMBER", name: "RESULT_NUMBER"},
                    {data: "EXCLUDED_NUMBER", name: "EXCLUDED_NUMBER"},
                    {data: "TARGET_MEAN", name: "TARGET_MEAN"},
                    {data: "TARGET_SD", name: "TARGET_SD"},
                    {data: "TARGET_CV", name: "TARGET_CV"},
                    {data: "CALCULATED_MEAN", name: "CALCULATED_MEAN"},
                    {data: "CALCULATED_SD", name: "CALCULATED_SD"},
                    {data: "CALCULATED_CV", name: "CALCULATED_CV"},
                    {
                        data: "GENERATED_USER",
                        name: "GENERATED_USER",
                        orderable: false,
                        render: function (data, type, row) {
                            return (data ?? '—') + '<br><small class="text-muted">' + (row.CREATE_AT ?? '') + '</small>';
                        }
                    },
                    {
                        data: "COMMENT",
                        name: "COMMENT",
                        orderable: false,
                        render: function (data, type, row) {
                            if (data) {
                                const encodedComment = $('<div>').text(data).html();
                                return `<button statistic-id="${row.ID}" comment="${encodedComment}"
                                    type="button" class="btn btn-success btn-sm rounded-circle show-statistic-comment"
                                    title="View Comment"><i class="fas fa-comment-dots"></i></button>`;
                            }
                            return '';
                        }
                    },
                    {
                        data: "ID",
                        name: "LOG",
                        orderable: false,
                        render: function (data, type, row) {
                            return `<button statistic-id="${row.ID}" type="button"
                                class="btn btn-info btn-sm rounded-circle show-statistic-log" title="View Log">
                                <i class="fas fa-history"></i></button>`;
                        }
                    },
                    {
                        data: "ID",
                        name: "LJ_CHART",
                        orderable: false,
                        render: function (data, type, row) {
                            return `<button statistic-id="${row.ID}" qc-lot-test-id="${row.QC_LOT_TEST_ID}" from="${row.FROM}" to="${row.TO}" type="button"
                                class="btn btn-warning btn-sm rounded-circle lj-chart-statistic" title="L-J Chart">
                                <i class="fas fa-chart-line"></i></button>`;
                        }
                    },
                    {
                        data: "ID",
                        name: "PRINT",
                        orderable: false,
                        render: function (data, type, row) {
                            return `<button statistic-id="${row.ID}" type="button"
                                class="btn btn-secondary btn-sm rounded-circle print-statistic-row" title="Print Row">
                                <i class="fas fa-print"></i></button>`;
                        }
                    },
                    {
                        data: "ID",
                        name: "ACTION",
                        orderable: false,
                        render: function (data, type, row) {
                            @permission('set_as_target_qc_statistic')
                            const targetBtn = `<button statistic-id="${row.ID}" type="button"
                                class="btn btn-warning btn-sm set-as-target" title="Set as Target">
                                <i class="fas fa-bullseye"></i> Set as Target
                            </button>`;
                            return targetBtn;
                            @else
                            return '';
                            @endpermission
                        }
                    }
                ]
            });
        }

        QcStatisticTable();

        $(document).on('click', '.show-statistic-comment', function () {
            let comment = $(this).attr("comment");
            $("#comment-result").val(comment);
            $('#modal-comment').modal('show');
        });

        $(document).on('click', '.show-statistic-log', function () {
            let statisticId = $(this).attr("statistic-id");
            $.ajax({
                url: '/operations/qc/statistic/' + statisticId + '/log',
                type: 'GET',
                success: function (resp) {
                    // Sanitize every user-controlled value before assigning to .html().
                    // USERNAME / COMMENT are sourced from the database; without this
                    // they are an XSS vector.
                    const esc = (s) => $('<div>').text(s ?? '').html();
                    const fmt = (u, at) => (esc(u) || '—') + ' @ ' + (esc(at) || '—');

                    $('#log-generated').html(fmt(resp.generated?.user, resp.generated?.at));

                    if (resp.comment?.user) {
                        $('#log-comment').html(
                            fmt(resp.comment.user, resp.comment.at) +
                            '<br><em>' + esc(resp.comment.text) + '</em>'
                        );
                    } else {
                        $('#log-comment').html('—');
                    }

                    if (resp.set_as_target?.user) {
                        $('#log-target').html(fmt(resp.set_as_target.user, resp.set_as_target.at));
                    } else {
                        $('#log-target').html('— (not yet set as target)');
                    }

                    $('#modal-statistic-log').modal('show');
                },
                error: function (xhr) {
                    if (typeof toastr !== 'undefined') {
                        toastr.error(xhr.responseJSON?.errorMessage || 'Failed to load log');
                    } else {
                        alert(xhr.responseJSON?.errorMessage || 'Failed to load log');
                    }
                }
            });
        });

        $(document).on('click', '.set-as-target', function () {
            let statisticId = $(this).attr("statistic-id");
            if (!window.confirm('Apply the Calculated Mean, SD and CV to the QC Setup row? This will overwrite the existing target values.')) {
                return;
            }
            let $btn = $(this);
            $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');
            $.ajax({
                url: '/operations/qc/statistic/' + statisticId + '/set-as-target',
                type: 'POST',
                data: { _token: $('meta[name="csrf-token"]').attr('content') },
                timeout: 30000,
                success: function (resp) {
                    if (typeof toastr !== 'undefined') {
                        toastr.success('Target values applied to QC Setup.');
                    } else {
                        alert('Target values applied to QC Setup.');
                    }
                    QcStatisticTable();
                },
                error: function (xhr) {
                    if (typeof toastr !== 'undefined') {
                        toastr.error(xhr.responseJSON?.errorMessage || 'Failed to set as target');
                    } else {
                        alert(xhr.responseJSON?.errorMessage || 'Failed to set as target');
                    }
                    $btn.prop('disabled', false).html('<i class="fas fa-bullseye"></i> Set as Target');
                }
            });
        });

        $(document).on('click', '.print-statistic-row', function () {
            let statisticId = $(this).attr("statistic-id");
            var analyzerParam = '{{ $filter_analyzer_id ?? '' }}';
            var printUrl = '/operations/qc/statistic/print/report?statistic_id=' + encodeURIComponent(statisticId);
            if (analyzerParam) {
                printUrl += '&analyzer_id=' + encodeURIComponent(analyzerParam);
            }
            window.open(printUrl, '_blank');
        });

        // L-J Chart for a single statistic row
        $(document).on('click', '.lj-chart-statistic', function () {
            // Attribute name reflects that this is QC_LOT_TEST.ID, not QC_LOT.ID.
            let lotTestId = $(this).attr("qc-lot-test-id");
            let fromDate = $(this).attr("from");
            let toDate = $(this).attr("to");

            if (!lotTestId) {
                if (typeof toastr !== 'undefined') toastr.error('Missing lot test id.');
                return;
            }

            // Fetch QC results for this statistic's lot test in its date range
            $.ajax({
                url: '/operations/qc-results',
                type: 'GET',
                data: {
                    test_id: [lotTestId],
                    date_from: fromDate,
                    date_to: toDate,
                    qc_result_status: 1
                },
                timeout: 30000,
                success: function (resp) {
                    let results = (resp && resp.data) ? resp.data : [];
                    let statResult = [];
                    let statOldResult = [];
                    let statMean = 0;
                    let statSd = 0;
                    let statCv = null;
                    let statTitle = '';

                    if (results.length > 0) {
                        statMean = parseFloat(results[0].MEAN) || 0;
                        statSd = parseFloat(results[0].SD) || 0;
                        if (results[0].CV !== undefined && results[0].CV !== null && results[0].CV !== '') {
                            statCv = parseFloat(results[0].CV);
                        }
                        if (results[0].LAB_CATEGORY_PACKAGE_RESULT_NAME) {
                            statTitle = results[0].LAB_CATEGORY_PACKAGE_NAME + ' - ' + results[0].LAB_CATEGORY_PACKAGE_RESULT_NAME;
                        } else {
                            statTitle = results[0].LAB_CATEGORY_PACKAGE_NAME || '';
                        }
                        // Exclude flagged results from the chart
                        results = results.filter(r => r.IS_EXCLUDED != 1);

                        results.forEach(function(r) {
                            if (r.CORRECTION_RESULT) {
                                statResult.push({ label: r.TIME, y: parseFloat(r.CORRECTION_RESULT) });
                                statOldResult.push({ label: r.TIME, y: parseFloat(r.RESULT) });
                            } else {
                                statResult.push({ label: r.TIME, y: parseFloat(r.RESULT) });
                            }
                        });
                    }

                    $('#lj-statistic-title').text('L-J Chart — ' + statTitle);
                    $('#modal-statistic-lj').modal('show');

                    // Defer chart render until the modal is fully visible
                    // so the container has its real width/height for
                    // correct tooltip positioning.
                    $('#modal-statistic-lj').off('.ljStatRender').one('shown.bs.modal.ljStatRender', function () {
                        renderStatisticLjChart(statResult, statOldResult, statMean, statSd, statTitle, statCv);
                    });
                },
                error: function (xhr) {
                    if (typeof toastr !== 'undefined') {
                        toastr.error(xhr.responseJSON?.errorMessage || 'Failed to load QC results');
                    } else {
                        alert(xhr.responseJSON?.errorMessage || 'Failed to load QC results');
                    }
                }
            });
        });

        // Render L-J chart for statistic modal (CanvasJS).
        //
        // The chart instance + container are stored in a dedicated
        // `ljStatChart` namespace so the export button, resize
        // listeners, and modal-shown handler all reach the same
        // instance. A legacy `statChartInstance` alias is kept for
        // any other code that still references the bare name.
        //
        // Optional target Mean / SD / CV% mirror the qc-result L-J
        // chart and are surfaced both as a chart subtitle and as the
        // reference grid (stripLines) for exported pages.
        var ljStatChart = {
            instance: null,
            container: null,
            targetMean: null,
            targetSd: null,
            targetCv: null,
            data: [],
            oldData: [],
            mean: 0,
            sd: 0,
            title: '',
        };
        var statChartInstance = ljStatChart.instance;

        function setStatChartInstance(c) {
            ljStatChart.instance = c;
            statChartInstance = c;
        }
        function setStatChartContainer(el) {
            ljStatChart.container = el;
        }
        function setStatTargetMean(v)  { ljStatChart.targetMean = v; }
        function setStatTargetSd(v)    { ljStatChart.targetSd   = v; }
        function setStatTargetCv(v)    { ljStatChart.targetCv   = v; }

        /**
         * Strip the per-point mutations the live chart applies
         * (sort / markerSize / markerColor / markerBorderColor).
         * Exported pages should look like fresh data, not like the
         * highlighted Westgard-decision view that the on-screen
         * chart now displays.
         */
        function stripStatChartMutations(points) {
            if (!Array.isArray(points)) return [];
            return points.map(function (p) {
                return { label: p.label, y: p.y };
            });
        }

        /**
         * Reset the live chart's axisX viewport so the next export
         * renders the FULL data range, not whatever zoom/pan the
         * user applied. Returns true if a re-render was performed.
         */
        function resetStatChartViewport(chart) {
            if (!chart || !chart.options || !chart.options.axisX) return false;
            if (chart.options.axisX.viewportMinimum == null &&
                chart.options.axisX.viewportMaximum == null) {
                return false;
            }
            chart.options.axisX.viewportMinimum = null;
            chart.options.axisX.viewportMaximum = null;
            try { chart.render(); } catch (e) { /* swallow */ }
            return true;
        }

        /**
         * Build the same stripLines the visible chart uses (±1SD,
         * ±2SD, ±3SD reference lines), so multi-page exports look
         * identical to what's on screen.
         */
        function buildStatExportStripLines(chartMean, chartSd) {
            if (!chartMean || !chartSd) return [];
            var lines = [];
            var labels = [['Mean', 'Mean'], ['-1SD ⬇', '+1SD ⬆'], ['-2SD ⬇', '+2SD ⬆'], ['-3SD ⬇', '+3SD ⬆']];
            var colors = ['#28a745', '#ffc107', '#fd7e14', '#dc3545'];
            // Mean line
            lines.push({
                value: parseFloat(chartMean),
                labelFontColor: '#28a745',
                labelFontSize: 13,
                label: 'Mean',
                labelAlign: 'far',
                labelWrap: false,
                labelMaxWidth: 60,
                lineDashType: 'line',
                color: '#28a745'
            });
            for (var i = 1; i <= 3; i++) {
                var vMin = parseFloat(chartMean) - chartSd * i;
                var vMax = parseFloat(chartMean) + chartSd * i;
                lines.push({
                    value: vMin,
                    labelFontColor: colors[i],
                    labelFontSize: 13,
                    label: labels[i][0],
                    labelAlign: 'far',
                    labelWrap: false,
                    labelMaxWidth: 60,
                    lineDashType: 'line',
                    color: colors[i]
                });
                lines.push({
                    value: vMax,
                    labelFontColor: colors[i],
                    labelFontSize: 13,
                    label: labels[i][1],
                    labelAlign: 'far',
                    labelWrap: false,
                    labelMaxWidth: 60,
                    lineDashType: 'line',
                    color: colors[i]
                });
            }
            return lines;
        }

        function renderStatisticLjChart(resultData, oldResultData, meanVal, sdVal, titleVal, cvVal) {
            // Snapshot into the namespace so the export function
            // (and any future relayout) can reach the same data
            // without depending on closure state.
            ljStatChart.data     = Array.isArray(resultData) ? resultData.slice() : [];
            ljStatChart.oldData  = Array.isArray(oldResultData) ? oldResultData.slice() : [];
            ljStatChart.mean     = parseFloat(meanVal) || 0;
            ljStatChart.sd       = parseFloat(sdVal)   || 0;
            ljStatChart.title    = titleVal || '';
            setStatTargetMean(ljStatChart.mean);
            setStatTargetSd(ljStatChart.sd);
            if (cvVal !== undefined && cvVal !== null && cvVal !== '' && !isNaN(parseFloat(cvVal))) {
                setStatTargetCv(parseFloat(cvVal));
            } else {
                setStatTargetCv(null);
            }

            // Adaptive marker size — small markers when there are
            // many points so they don't pile on top of each other
            // and become unreadable. Scale: ≤50 → 9, ~500 → 5,
            // ≥2000 → 3. Mirrors QcChart() in footer-scripts.
            var totalPoints = (ljStatChart.data || []).length + (ljStatChart.oldData || []).length;
            var baseMarkerSize = totalPoints <= 50 ? 9
                               : totalPoints <= 200 ? 7
                               : totalPoints <= 500 ? 5
                               : totalPoints <= 1000 ? 4
                               : 3;

            // Measure the container so the chart adapts to the
            // modal width instead of overflowing at a fixed size.
            // When the modal is hidden, clientWidth is 0; CanvasJS
            // then renders to a 0-width canvas which would show
            // nothing on modal open. Detect and fall back.
            var containerEl = document.getElementById('chartContainerStatistic');
            setStatChartContainer(containerEl);
            var chartWidth  = (containerEl && containerEl.clientWidth  > 100) ? containerEl.clientWidth  : 1024;
            var chartHeight = (containerEl && containerEl.clientHeight > 100) ? containerEl.clientHeight : 520;

            // Subtitle: result count + (optional) Target Mean / SD / CV.
            var subtitleLines = [];
            subtitleLines.push(
                'Result Count : ' + ljStatChart.data.length
                + (ljStatChart.oldData && ljStatChart.oldData.length ? '   |   Corrected : ' + ljStatChart.oldData.length : '')
            );
            if (ljStatChart.targetMean != null && ljStatChart.targetSd != null) {
                var cvTxt = (ljStatChart.targetCv != null && !isNaN(parseFloat(ljStatChart.targetCv)))
                    ? parseFloat(ljStatChart.targetCv).toFixed(2) + ' %'
                    : '—';
                subtitleLines.push(
                    'Target Mean : ' + parseFloat(ljStatChart.targetMean).toFixed(2)
                    + '   |   Target SD : ' + parseFloat(ljStatChart.targetSd).toFixed(2)
                    + '   |   Target CV : ' + cvTxt
                );
            }

            var chart = new CanvasJS.Chart("chartContainerStatistic", {
                backgroundColor: "#f8f9fa",
                width: chartWidth,
                height: chartHeight,
                title: {
                    text: ljStatChart.title,
                    verticalAlign: "top",
                    horizontalAlign: "center",
                    fontColor: "var(--blazma-primary)",
                    fontSize: 24,
                    fontWeight: "normal",
                    maxWidth: 900,
                    wrap: true
                },
                subtitles: subtitleLines.map(function (t, idx) {
                    return {
                        text: t,
                        verticalAlign: "top",
                        horizontalAlign: "center",
                        fontColor: idx === 0 ? "rgba(0,0,0,0.55)" : "#495057",
                        fontSize: idx === 0 ? 13 : 12,
                        fontWeight: "normal"
                    };
                }),

                // Enable mouse-wheel zoom + drag-pan so dense
                // regions can be inspected. The relayout listeners
                // (resize, modal-shown) keep the canvas sized
                // correctly without forcing the user to re-open.
                zoomEnabled: true,
                zoomType: "xy",
                panEnabled: true,
                // Tooltip config — explicit placement so the tooltip
                // appears next to the data point inside modals instead
                // of flopping to the bottom of the page.
                toolTip: {
                    enabled: true,
                    shared: false,
                    reversed: true,
                    animationEnabled: false,
                    borderColor: "#6c757d",
                    borderThickness: 1,
                    cornerRadius: 4,
                    fontColor: "#212529",
                    backgroundColor: "rgba(255,255,255,0.95)",
                    fontSize: 12
                },
                clip: false,
                toolbar: {
                    itemBackgroundColor: "#ffffff",
                    itemBackgroundColorOnHover: "#f1f3f5",
                    fontColor: "#495057",
                    buttonBorderColor: "#dee2e6",
                    buttonBorderThickness: 1,
                    buttonMargin: 4
                },

                axisY: {
                    gridThickness: 0,
                    labelFontSize: 11,
                    title: "Value",
                    titleFontSize: 12,
                    titleFontColor: "#6c757d",
                    stripLines: []
                },
                axisX: {
                    labelAutoSkip: true,
                    labelAutoSkipMinDistance: 40,
                    labelAngle: totalPoints > 200 ? -60 : -45,
                    labelFontSize: totalPoints > 200 ? 10 : 11,
                    labelMaxWidth: 110,
                    tickLength: 0,
                    lineThickness: 1,
                    lineColor: "#ced4da"
                },
                data: [
                    {
                        type: "line",
                        xValueType: "label",
                        dataPoints: ljStatChart.data,
                        color: "#28a745",
                        lineColor: "rgba(40,167,69,0.35)",
                        lineThickness: 1,
                        markerColor: "#28a745",
                        markerSize: baseMarkerSize,
                        markerBorderColor: "#ffffff",
                        markerBorderThickness: 0.5,
                        connectNullData: true,
                        toolTipContent: "{label}<br/>Result: <b>{y}</b>"
                    },
                    {
                        type: "scatter",
                        markerType: "circle",
                        markerColor: "#808080",
                        markerSize: baseMarkerSize - 1,
                        markerBorderColor: "#ffffff",
                        markerBorderThickness: 0.5,
                        dataPoints: ljStatChart.oldData,
                        toolTipContent: "{label}<br/>Original: <b>{y}</b>"
                    }
                ],
                exportFileName: "qc-statistic-chart"
            });

            // SD strip lines — same labels as QcChart() so the
            // statistic chart visually matches the result chart.
            var stripLines = chart.options.axisY.stripLines = [];
            var color = ['green', 'orange', 'red'];
            var labelArray = [
                ["Mean", "Mean"],
                ["-1SD ⬇", "+1SD ⬆"],
                ["-2SD ⬇", "+2SD ⬆"],
                ["-3SD ⬇", "+3SD ⬆"]
            ];
            var average = parseFloat(ljStatChart.mean);
            var standardDeviation = parseFloat(ljStatChart.sd);
            for (var i = 0; i <= 3; i++) {
                var valueMin = CanvasJS.formatNumber(average - (standardDeviation * i), "0.00");
                var valueMax = CanvasJS.formatNumber(average + (standardDeviation * i), "0.00");
                if (i > 0) {
                    stripLines.push({
                        value: valueMin,
                        labelFontColor: color[i] || '#ab1818',
                        labelFontSize: 13,
                        label: labelArray[i][0],
                        labelAlign: "far",
                        labelWrap: false,
                        labelMaxWidth: 60,
                        lineDashType: "line",
                        color: color[i] || '#ab1818'
                    });
                }
                stripLines.push({
                    value: valueMax,
                    labelFontColor: color[i] || '#ab1818',
                    labelFontSize: 13,
                    label: labelArray[i][1],
                    labelAlign: "far",
                    labelWrap: false,
                    labelMaxWidth: 60,
                    lineDashType: "line",
                    color: color[i] || '#ab1818'
                });
            }

            // Lock the Y-axis to ±3SD + a small margin so the
            // fixed SD labels on the right edge never overlap with
            // the data line, even when extreme values are present.
            chart.options.axisY.minimum = (average - standardDeviation * 3) - 1;
            chart.options.axisY.maximum = (average + standardDeviation * 3) + 1;

            chart.render();
            setStatChartInstance(chart);

            // Schedule a relayout once the container has its real
            // width. CanvasJS measures the parent on first render;
            // if the modal has just been shown the container may
            // briefly be 0px wide, so we resize after the next
            // animation frame.
            if (window.requestAnimationFrame) {
                requestAnimationFrame(function () {
                    requestAnimationFrame(scheduleStatRelayout);
                });
            }
        }

        /**
         * Resize the live chart to its container's current
         * dimensions and re-render. Bound to (a) the next animation
         * frame after renderStatisticLjChart() finishes, (b) window
         * resize, and (c) the modal's shown.bs.modal event so the
         * canvas matches the modal width when it becomes visible.
         */
        function scheduleStatRelayout() {
            var c = ljStatChart.instance;
            var ce = ljStatChart.container;
            if (!c || !ce) return;
            var w = ce.clientWidth  || 1024;
            var h = ce.clientHeight || 520;
            c.set('width',  w);
            c.set('height', h);
            try { c.render(); } catch (e) { /* swallow */ }
        }

        // Bind resize + modal-shown listeners ONCE at module load.
        $(window).off('resize.ljstatchart').on('resize.ljstatchart', scheduleStatRelayout);
        $('#modal-statistic-lj').off('shown.bs.modal.ljstatchart')
            .on('shown.bs.modal.ljstatchart', function () {
                scheduleStatRelayout();
            });

        /**
         * Export the statistic L-J chart as PNG. When the result
         * count exceeds PAGE_SIZE (default 30), the chart is split
         * into multiple pages, each rendered in a hidden container
         * and exported as a separate PNG. Otherwise a single export
         * is triggered on the existing visible chart.
         *
         * Both paths reset axisX viewport first so the export shows
         * the FULL data range, not whatever the user has
         * zoomed/panned to. Multi-page export calls
         * stripStatChartMutations() on each chunk so the exported
         * points don't carry any per-point mutations.
         */
        var STAT_PAGE_SIZE = 30;
        function exportStatisticLjChartAsPng() {
            var live = ljStatChart.instance;
            if (!live) {
                if (typeof toastr !== 'undefined') {
                    toastr.error('No chart to export. Please select a statistic with QC results first.');
                } else {
                    alert('No chart to export. Please select a statistic with QC results first.');
                }
                return;
            }
            var resultData = ljStatChart.data || [];
            var oldResultData = ljStatChart.oldData || [];
            if (!Array.isArray(resultData) || resultData.length === 0) {
                // Empty chart — reset viewport then export the
                // empty canvas so the user gets a "no data" PNG
                // rather than nothing.
                resetStatChartViewport(live);
                setTimeout(function () {
                    try { live.exportChart({ format: "png" }); } catch (e) { /* swallow */ }
                }, 250);
                return;
            }
            if (resultData.length <= STAT_PAGE_SIZE) {
                resetStatChartViewport(live);
                setTimeout(function () {
                    try { live.exportChart({ format: "png" }); } catch (e) { /* swallow */ }
                }, 250);
                return;
            }

            // Multi-page: chunk the data and render each chunk in
            // a hidden div. stripLines mirror the visible chart's
            // SD reference grid so each exported page is visually
            // consistent with the on-screen chart.
            var pages = Math.ceil(resultData.length / STAT_PAGE_SIZE);
            var stripLines = buildStatExportStripLines(ljStatChart.mean, ljStatChart.sd);
            for (var p = 0; p < pages; p++) {
                var start = p * STAT_PAGE_SIZE;
                var end = Math.min(start + STAT_PAGE_SIZE, resultData.length);
                var chunkResult = stripStatChartMutations(resultData.slice(start, end));
                var chunkOld    = stripStatChartMutations(oldResultData.slice(start, end));
                var containerId = "ljStatExportContainer_" + p;
                var $hidden = jQuery('<div id="' + containerId + '" style="position:absolute;left:-99999px;width:1024px;height:500px;"></div>');
                jQuery('body').append($hidden);
                var tmpChart = new CanvasJS.Chart(containerId, {
                    backgroundColor: "#f8f9fa",
                    title: {
                        text: (ljStatChart.title || '') + " (Page " + (p + 1) + " of " + pages + ")",
                        fontColor: "var(--blazma-primary)",
                        fontSize: 24
                    },
                    subtitles: [{
                        text: "Points " + (start + 1) + " - " + end + " of " + resultData.length,
                        fontSize: 13
                    }],
                    axisY: {
                        gridThickness: 0,
                        stripLines: stripLines,
                        minimum: parseFloat(ljStatChart.mean) - parseFloat(ljStatChart.sd) * 3 - 1,
                        maximum: parseFloat(ljStatChart.mean) + parseFloat(ljStatChart.sd) * 3 + 1,
                    },
                    axisX: {
                        labelAutoSkip: true,
                        labelAutoSkipMinDistance: 40,
                        labelAngle: -45,
                        tickLength: 0,
                        lineThickness: 1,
                        lineColor: "#ced4da"
                    },
                    data: [
                        {
                            type: "line",
                            xValueType: "label",
                            dataPoints: chunkResult,
                            color: "#28a745",
                            lineColor: "rgba(40,167,69,0.35)",
                            lineThickness: 1,
                            markerColor: "#28a745",
                            markerSize: 7,
                            toolTipContent: "{label}<br/>Result: <b>{y}</b>"
                        },
                        {
                            type: "scatter",
                            markerType: "circle",
                            markerColor: "#808080",
                            markerSize: 6,
                            dataPoints: chunkOld,
                            toolTipContent: "{label}<br/>Original: <b>{y}</b>"
                        }
                    ],
                    width: 1024,
                    height: 500,
                    exportFileName: "qc-statistic-chart-page-" + (p + 1)
                });
                tmpChart.render();
                (function (chart, id) {
                    setTimeout(function () {
                        try { chart.exportChart({ format: "png" }); } catch (e) { /* swallow */ }
                        setTimeout(function () {
                            jQuery('#' + id).remove();
                        }, 1000);
                    }, 350 + p * 700);
                })(tmpChart, containerId);
            }
        }

        // Wire the export button ONCE at module load. It used to be
        // delegated via $(document).on('click', ...) which leaked a
        // listener per render — bind it once and rely on the
        // namespace to find the current chart instance.
        (function bindStatExportButtonOnce() {
            var btn = document.getElementById("export-statistic-chart");
            if (!btn) return;
            if (btn.dataset.ljStatExportBound === '1') return;
            btn.dataset.ljStatExportBound = '1';
            btn.addEventListener("click", function () {
                exportStatisticLjChartAsPng();
                this.classList.remove("active");
            });
        })();

        $("#export-statistic").click(function () {
            var dateFrom = $("#qc-filter-date-from").val();
            var dateTo = $("#qc-filter-date-to").val();
            var lot_test_id = $("#qc-test-id-filter").val();
            var comment = $("#comment").val();
            var $btn = $(this);
            // Prevent duplicate inserts on double-click or rapid retries.
            if ($btn.prop('disabled')) return;
            $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');

            $.ajax({
                type: "POST",
                url: "/operations/qc/" + lot_test_id + "/statistic",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    date_from: dateFrom,
                    date_to: dateTo,
                    comment: comment
                },
                timeout: 30000
            }).done(function (data, textStatus, xhr) {
                $("#comment").val('');
                $('#modal-statistic').modal('hide');
                QcStatisticTable();
                if (typeof toastr !== 'undefined') toastr.success('Statistic saved.');
            }).fail(function (jqXHR, textStatus, errorThrown) {
                if (typeof toastr !== 'undefined') {
                    toastr.error(jqXHR.responseJSON?.errorMessage || 'An error occurred');
                } else {
                    alert(jqXHR.responseJSON?.errorMessage || "An error occurred");
                }
            }).always(function () {
                $btn.prop('disabled', false).html('Export');
            });
        });

        $("#export-qc-statistic").click(function () {
            var url = '/operations/qc/statistic/export?' + $.param({
                qc_id: $('#qc-control-id-filter').val(),
                lot_id: $('#qc-lot-id-filter').val(),
                test_id: $('#qc-test-id-filter').val(),
                date_from: $('#qc-filter-date-from').val(),
                date_to: $('#qc-filter-date-to').val(),
            });
            window.location.href = url;
        });

        $("#print-qc-statistic").click(function () {
            var url = '/operations/qc/statistic/print?' + $.param({
                qc_id: $('#qc-control-id-filter').val(),
                lot_id: $('#qc-lot-id-filter').val(),
                test_id: $('#qc-test-id-filter').val(),
                date_from: $('#qc-filter-date-from').val(),
                date_to: $('#qc-filter-date-to').val(),
                analyzer_id: '{{ $filter_analyzer_id ?? '' }}',
            });
            window.open(url, '_blank');
        });
    </script>
@endsection