@extends('operations.layout.mainlayout')

@section('content')

{{--    @if(session('role') != 4 && session('role') != 3 && session('role') != 7 && session('role') != 9 && session('role') != 13)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            color: black;
        }

        .item {
            background-color: rgb(18 221 24 / 13%) !important;
        }

        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);
        }


        .canvasjs-chart-credit {
            display: none;
        }

        /* QC Status column badges — colour-coded by Pass/Warning/Fail. */
        .qc-status-pass {
            background-color: #28a745 !important;
            color: #fff;
            padding: .25em .6em;
            border-radius: .5rem;
        }
        .qc-status-warning {
            background-color: #ffc107 !important;
            color: #212529;
            padding: .25em .6em;
            border-radius: .5rem;
        }
        .qc-status-fail {
            background-color: #dc3545 !important;
            color: #fff;
            padding: .25em .6em;
            border-radius: .5rem;
        }
        /* L-J modal filter row spacing */
        #lj-targets > div { padding: .25rem .5rem; }
        #lj-targets { background:#fff; border:1px solid #e9ecef; border-radius:.5rem; padding:.5rem 0; }

        /* L-J chart container — responsive so the chart scales with the
           modal width instead of forcing a fixed 1024×400 canvas that
           overlaps markers when many points are plotted. */
        #chartContainer {
            width: 100%;
            height: 520px;
            min-height: 520px;
        }
        /* CanvasJS wraps its canvas in a div that must inherit size */
        #chartContainer > div {
            width: 100% !important;
            height: 100% !important;
        }
        /* Make the legend chip list scroll horizontally on narrow screens
           so rule badges don't wrap awkwardly when many are triggered. */
        .lj-rules {
            flex-wrap: wrap;
            gap: .25rem;
        }
        /* Subtle separator between the rule badges and the export button */
        #exportChart { margin-top: .5rem; }

        .btn-qc-validate {
            white-space: nowrap;
            text-align: center;
        }

        /* Responsive design for corrective actions modal */
        @media (max-width: 768px) {
            #modal-correction-result .modal-dialog {
                margin: 10px;
            }

            #corrective-actions-select {
                font-size: 14px;
            }

            #correction-result {
                font-size: 14px;
            }
        }

        /*canvas{*/

        /*    width:1000px !important;*/
        /*    height:500px !important;*/

        /*}*/

    </style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <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 Validate Results</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

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

                        <!-- /.card -->
                        <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>
                                <form method="get" action="" style="width:100%;">
                                    <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>Analyzers</b></span>
                                                        <select class="form-control rhospital_id"
                                                                id="qc-analyzer-id-filter">
                                                            <option value="" selected>Select Analyzer</option>
                                                            @foreach($analyzers as $analyzer)
                                                                <option value="{{$analyzer->ID}}">{{$analyzer->NAME_EN}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <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">
                                                            <option value="" selected>Select QC</option>
                                                            @foreach($Controls as $control)
                                                                <option value="{{$control->ID}}">{{$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" multiple>
                                                            <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" multiple>
                                                            <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">
                                                    </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">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div class="card-footer">
                                    <div class="text-right">
                                        <button style="width:auto" disabled data-toggle="modal" data-target="#modal-lj"
                                                id="lj-chart" class="btn btn-warning">
                                            L-J Chart
                                        </button>
                                        <button id="qc-action-all" style="color:white !important;max-width:170px;display:none;" class="form-control btn btn-sm btn-success"> Action All Selected</button>
                                        @permission('add_qc_results')
                                        <button style="width:130px;color:#fff" data-toggle="modal"
                                                data-target="#modal-lg" id="add-test" class="btn btn-info">
                                            Add Result
                                        </button>
                                        @endpermission
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="card">
                            <div class="card-body">
                                <table id="qc-result-validate-table"
                                       class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th id="select_all"></th>
                                        <th>QC Name</th>
                                        <th>LOT Name</th>
                                        <th>Test Name</th>
                                        <th>MEAN</th>
                                        <th>SD</th>
                                        <th>Normal Range</th>
                                        <th>Result Time</th>
                                        <th>Result Value</th>
                                        <th>WestGard Rule</th>
                                        <th>Corrective</th>
                                        <th>Validate By</th>
                                        <th>Validate At</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div>

                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container-fluid -->
            </div>
        </section>
        <!-- /.content -->
    </div>

<div class="modal fade" id="modal-lg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Add Result</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-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">
                                QC</p>
                            <select class="form-control rhospital_id" id="qc-control-id" active="1">
                                <option value="" selected>Select QC</option>
                                @foreach($Controls as $control)
                                    <option value="{{$control->ID}}">{{$control->NAME}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">
                                Lot</p>
                            <select class="form-control rhospital_id" id="qc-lot-id">
                                <option value="" selected>Select Lot</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">
                                Test</p>
                            <select class="form-control rhospital_id" id="qc-test-id">
                                <option value="" selected>Select Test</option>
                            </select>
                        </div>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Result</p>
                            <input type="number" placeholder="Enter Test Result" class="form-control"
                                   id="qc-result-id">
                        </div>

                        <div class="col-md-6">
                            <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Time</p>
                            <input type="datetime-local" value="{{date('Y-m-d\TH:i:s',strtotime('+3 hour'))}}"
                                   class="form-control"
                                   id="qc-time-id">
                        </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="add-new-result-control" type="button"
                            class="btn btn-info">Save
                    </button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="modal-correction-result">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Corrective Action</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">
                        <label for="corrective-actions-select" class="form-label">Select Corrective Actions</label>
                        <select id="corrective-actions-select" class="form-control" multiple="multiple" style="width: 100%;">
                            <!-- Options will be populated via AJAX -->
                        </select>
                    </div>
                </div>

                <div class="row mt-3">
                    <div class="col-12">
                        <label for="correction-result" class="form-label">Corrective Action Details</label>
                        <textarea id="correction-result" class="form-control" placeholder="Enter Corrective Action Here" rows="3" cols="50"></textarea>
                    </div>
                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-danger" style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" data-dismiss="modal" aria-label="Close">Close</button>
                    <button id="save-corrective-action"  style="border-color:#63BF5B;border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Confirm</button>
                </div>



            </div>
        </div>

        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>

<div class="modal fade" id="modal-lj">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="lj-title">L-J Chart </h3>
                <button type="button" id="lg-chart-btn" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="row" style="margin-left: 2%; margin-right: 2%">
                <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">
                            {{-- QC / Lot / Test filter cascade — the chart
                                 is drawn from the intersection of all three.
                                 Selecting any dropdown reloads the chart. --}}
                            <div class="row">
                                <div class="col-lg-4">
                                    <span class="text-muted text-sm"><b>QC Name</b></span>
                                    <select id="lj-qc-filter" class="form-control">
                                        <option value="">Select QC</option>
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <span class="text-muted text-sm"><b>Lot No</b></span>
                                    <select id="lj-lot-filter" class="form-control">
                                        <option value="">Select Lot</option>
                                    </select>
                                </div>
                                <div class="col-lg-4">
                                    <span class="text-muted text-sm"><b>Test</b></span>
                                    <select id="lj-test-filter" class="form-control">
                                        <option value="">Select Test</option>
                                    </select>
                                </div>
                            </div>

                            {{-- Target Mean / SD / CV% — sourced from the
                                 selected test's QC_LOT_TEST row and shown
                                 next to the chart so reviewers can compare
                                 each result against the target. --}}
                            <div class="row mt-2">
                                <div class="col-lg-12">
                                    <div class="row text-center" id="lj-targets">
                                        <div class="col-md-4">
                                            <span class="text-muted text-sm">Target Mean</span>
                                            <div class="font-weight-bold" id="lj-target-mean">—</div>
                                        </div>
                                        <div class="col-md-4">
                                            <span class="text-muted text-sm">Target SD</span>
                                            <div class="font-weight-bold" id="lj-target-sd">—</div>
                                        </div>
                                        <div class="col-md-4">
                                            <span class="text-muted text-sm">Target CV %</span>
                                            <div class="font-weight-bold" id="lj-target-cv">—</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-2">
                                <div class="col-lg-6">
                                    <span class="text-muted text-sm"><b>Time from</b></span>
                                    <input id="qc-date-from" class="form-control date-filter"
                                           type="date"
                                           value="@if(!empty($date_from)){{$date_from}}@endif"
                                           placeholder="Date From">
                                </div>
                                <div class="col-lg-6">
                                    <span class="text-muted text-sm"><b>Time to</b></span>
                                    <input id="qc-date-to" class="form-control date-filter"
                                           type="date"
                                           value="@if(!empty($date_to)){{$date_to}}@endif"
                                           placeholder="Date To">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 mt-2">
                                    <div class="d-flex justify-content-between gap-2 filter-btns">
                                        <button id="qc-today-filter" class="btn btn-blz flex-fill">
                                            Today
                                        </button>
                                        <button id="qc-yesterday-filter" class="btn btn-blz flex-fill">
                                            Yesterday
                                        </button>
                                        <button id="qc-week-filter" class="btn btn-blz flex-fill">
                                            Week
                                        </button>
                                        <button id="qc-month-filter" class="btn btn-blz flex-fill">
                                            Month
                                        </button>
                                        <button id="qc-custom-date" class="btn btn-blz flex-fill">
                                            Custom
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12"><br/>
                                    <div id="chartContainer"></div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">

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


            <div class="modal-body">

                <label class="d-flex justify-content-center mt-3">Westgard Rules</label>
                <div class="row justify-content-center">
                    <h5><span class="badge badge-pill badge-success mr-1 rule" id="rule-1">One Qc ± 2SD</span></h5>
                    <h5><span class="badge badge-pill badge-success mr-1 rule" id="rule-2">One Qc ± 3SD</span></h5>
                    <h5><span class="badge badge-pill badge-success mr-1 rule" id="rule-3">Two Qc Sim ±2SD</span>
                    </h5>
                    <h5><span class="badge badge-pill badge-success mr-1 rule" id="rule-4">Four Qc Sim ± 1SD</span>
                    </h5>
                    <h5><span class="badge badge-pill badge-success mr-1 rule"
                              id="rule-5">Ten Qc in Same Side</span></h5>
                </div>

                <button id="exportChart" class="btn btn-blz" style="width: 10%">Export Chart</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

@endsection

@section('footer-scripts')
    <script>
        // Initialize Select2 for corrective actions dropdown
        function initializeCorrectiveActionsSelect() {
            $('#corrective-actions-select').select2({
                placeholder: 'Select corrective actions...',
                allowClear: true,
                width: '100%',
                ajax: {
                    url: '/operations/corrective-actions/active',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term // search term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.data.map(function (item) {
                                return {
                                    id: item.ID,
                                    text: item.NAME
                                };
                            })
                        };
                    },
                    cache: true
                }
            });
        }

        // Update textarea based on selected actions
        function updateTextareaFromSelection() {
            let selectedActions = $('#corrective-actions-select').select2('data');
            let actionNames = selectedActions.map(action => action.text);
            let currentTextareaValue = $("#correction-result").val();

            // Extract manual text (anything after the last action or all if no actions)
            let manualText = '';
            if (currentTextareaValue) {
                let lines = currentTextareaValue.split('\n');
                let lastActionIndex = -1;

                // Find the last line that matches a selected action
                for (let i = lines.length - 1; i >= 0; i--) {
                    let line = lines[i].trim();
                    if (actionNames.includes(line)) {
                        lastActionIndex = i;
                        break;
                    }
                }

                if (lastActionIndex >= 0) {
                    manualText = lines.slice(lastActionIndex + 1).join('\n');
                } else {
                    manualText = currentTextareaValue;
                }
            }

            // Combine selected actions with manual text
            let newValue = actionNames.join('\n');
            if (manualText) {
                newValue += (newValue ? '\n\n' : '') + manualText;
            }

            $("#correction-result").val(newValue);
        }

        // Handle selection changes
        $('#corrective-actions-select').on('select2:select select2:unselect', function (e) {
            updateTextareaFromSelection();
        });

        $(document).on('click', '.show-corrective-action', function () {
            let result_id = $(this).attr("result-id");
            $("#correction-result").val();
            $("#save-corrective-action").attr('result-id', result_id);

            // Clear previous selections
            $('#corrective-actions-select').val(null).trigger('change');

            // Load existing data
            $.ajax({
                type: "GET",
                url: "/operations/data/qc/"+result_id+"/correction-result",
            }).done(function(data, textStatus, xhr ) {
                let correctionText = data.response.CORRECTION || '';
                let correctiveActionIds = data.response.CORRECTIVE_ACTION_IDS || '';

                $("#correction-result").val(correctionText);

                // If we have corrective action IDs, pre-select them
                if (correctiveActionIds) {
                    let ids = correctiveActionIds.split(',').map(id => parseInt(id.trim()));
                    // Load the options first, then select them
                    $.ajax({
                        url: '/operations/corrective-actions/active',
                        dataType: 'json'
                    }).done(function(data) {
                        let options = data.data.map(function (item) {
                            return {
                                id: item.ID,
                                text: item.NAME
                            };
                        });

                        // Create option elements
                        let selectElement = $('#corrective-actions-select');
                        selectElement.empty();
                        options.forEach(function(option) {
                            let optionElement = new Option(option.text, option.id, false, ids.includes(option.id));
                            selectElement.append(optionElement);
                        });

                        // Trigger change to update Select2
                        selectElement.trigger('change');
                    });
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseJSON.errorMessage);
            });

            $('#modal-correction-result').modal('show');
        });

        $("#save-corrective-action").click(function () {
            let result_id = $(this).attr("result-id");
            let selectedActions = $('#corrective-actions-select').select2('data');
            let correctiveActionIds = selectedActions.map(action => action.id).join(',');

            $.ajax({
                type: "POST",
                data: {
                    'correction': $("#correction-result").val(),
                    'corrective_action_ids': correctiveActionIds
                },
                url: "/operations/qc/"+result_id+"/correction-result",
            }).done(function(data, textStatus, xhr ) {
                $('#modal-correction-result').modal('hide');
                let button = $('.show-corrective-action[result-id="' + result_id + '"]');
                button.removeClass('btn-outline-secondary').addClass('btn-success');
                $('button.btn-qc-validate[data-id="' + result_id + '"]').prop('disabled', false);
                $('button.btn-qc-validate[data-id="' + result_id + '"]').removeAttr('title');
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $(".alert-danger-confirm").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-confirm").slideDown( "slow", function() {
                    setTimeout(() => {
                        $(".alert-danger-confirm").slideUp("slow");
                    }, "5000")
                });
                $("#save-corrective-action").html('Save').attr('disabled', false);
            });
        });

        // Initialize Select2 when modal is shown
        $('#modal-correction-result').on('shown.bs.modal', function () {
            initializeCorrectiveActionsSelect();
        });
    </script>
@endsection