@extends('operations.layout.mainlayout')

@section('content')

                @if(!empty($noRulesEnabled))
                    <div class="alert alert-warning d-flex align-items-center" role="alert"
                         style="border-left:4px solid #e0a800;">
                        <i class="fas fa-exclamation-triangle mr-2"></i>
                        <div>
                            <strong>No Westgard rule is enabled for this profile.</strong>
                            QC results are not being evaluated &mdash; every result is reported as
                            Pass no matter how far it sits from the target mean.
                            Enable the rules you run under <em>QC &rarr; Westgard Rules</em>.
                        </div>
                    </div>
                @endif

    {{--    @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.
           Using bg-* utility classes would clash with the table's
           dataTables dark row hover, so we set explicit colour here. */
        .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; }

    </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 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" style="display:none;">
                                                        <span class="text-muted text-sm"><b>Status</b></span>
                                                        <select class="form-control"
                                                                id="qc-result-status">
                                                            <option value="1" selected>Approved</option>
                                                            <option value="0">Pendding</option>
                                                            <option value="-1">Approval Rejectd</option>
                                                            <option value="2">Validated</option>
                                                            <option value="-2">Validate Rejectd</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 style="width:auto" id="export-qc-result" class="btn btn-success">
                                            <i class="fas fa-file-excel"></i> Export
                                        </button>
                                        @permission('recalculate_qc_statistic')
                                        <button style="width:auto" disabled id="recalculate-stats" class="btn btn-info">
                                            Recalculate In House Statistics
                                        </button>
                                        @endpermission
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="card">
                            <div class="card-body">
                                <table id="qc-result-table"
                                       class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>#</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</th>
                                        <th>Westgard Rules</th>
                                        <th>Westgard Level</th>
                                        <th>Result Time</th>
                                        <th>Is Excluded</th>
                                        <th>QC Status</th>
                                        <th>Corrective</th>
                                        <th>Validate By</th>
                                        <th>Validate At</th>
                                        <th>Approve By</th>
                                        <th>Approve At</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div>

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

    <!-- /.content-wrapper -->
    <!-- /.content-wrapper -->
    <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>

    <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">
                            <textarea id="correction-result" disabled class="form-control mt-4"
                                      placeholder="Enter Corrective Action Here" rows="3" cols="50"></textarea>
                        </div>
                    </div>


                </div>
            </div>

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

@endsection

@section('footer-scripts')
    <script>
        $(document).on('click', '.show-corrective-action', function () {
            let result_id = $(this).attr("result-id");
            $("#correction-result").val();
            $.ajax({
                type: "GET",
                url: "/operations/data/qc/" + result_id + "/correction-result",
            }).done(function (data, textStatus, xhr) {
                $("#correction-result").val(data.response.CORRECTION);
            }).fail(function (jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseJSON.errorMessage);
            });


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

    </script>
@endsection