@extends('operations.layout.mainlayout')

@section('content')
{{--    @if(session('role') != 4 && session('role') != 3 && session('role') != 7 && session('role') != 9 && session('role') != 18)--}}
{{--        {{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;
        }

        #validation-table{
            font-size: 14px;
        }
        #validation-table .badge{
            border-radius:50%;
            min-width: 25px;
            font-size: 12px;
            display: inline-block;
            padding: 5px;
            margin: 0 2px;
        }
        .badge-orange {
            background: #fd9843;
            color: #ffffff !important;
        }
        .badge-purple {
            background: #6f42c1;
        }
        .badge-phosphor {
            background: #ccff00;
            color: #000 !important;
        }
        .card-footer::after{
            content:none;
        }
        /* L-J chart container — responsive so the chart scales with the
           modal width instead of rendering as a small fixed 500x400 box. */
        #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;
        }
        #validate-all{
            min-width: 176px;
            height: 38px;
            padding: 4px 16px 4px 16px;
            border-radius: 30px;
            border: 1px;
            gap: 8px;
            background: var(--blazma-primary);
            color:white;
            font-size: 16px;
            font-weight: 400;
            line-height: 19px;
            letter-spacing: 0em;
        }
        #validate-all:hover{
            background: white;
            color:var(--blazma-primary);
            border: 1px solid var(--blazma-primary);
        }
        #reset-all{
            min-width: 176px;
            height: 38px;
            padding: 4px 16px 4px 16px;
            border-radius: 30px;
            border: 1px;
            gap: 8px;
            background: #e7c93e;
            color:white;
            font-size: 16px;
            font-weight: 400;
            line-height: 19px;
            letter-spacing: 0em;
        }
        #reset-all:hover{
            background: white;
            color:#e7c93e;
            border: 1px solid #e7c93e;
        }
        .card-footer-btns{
            height: 38px;
            padding: 4px 16px 4px 4px;
            border-radius: 30px;
            border: 1px;
            gap: 8px;
            border: 1px solid var(--blazma-primary);
            background:transparent;
            color:black !important;
            font-size: 16px;
            font-weight: 400;
            line-height: 19px;
            letter-spacing: 0em;

            display: inline-flex;
            justify-content: space-around;
            align-items: center;
        }

        .card-footer-btns:hover,.card-footer-btns:active,.card-footer-btns:focus{
            background: var(--blazma-primary);
            color:white !important;
            border: 1px solid var(--blazma-primary);
        }
        .card-footer img{
            max-width: 30px;
        }
        /* The footer holds two rows: the filter switches, then the action
           buttons. Side by side they used to squeeze into each other and
           overlap, which swallowed the clicks on Validate All Selected. */
        #validation-filters-footer{
            flex-direction: column;
            gap: 12px;
            /* operations.css pins .card-footer to a fixed 68px, which the
               second row would spill out of. */
            height: auto;
            min-height: 68px;
        }
        .validation-footer-toggles{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            row-gap: 8px;
        }
        .validation-footer-toggles .custom-control{
            margin-bottom: 0;
        }
        .validation-footer-actions{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }
        .validation-footer-actions > *{
            margin: 0;
            white-space: nowrap;
        }
        div.dataTables_wrapper div.dataTables_filter{
            display:inline;
            float:right;
        }
        #validation-table_filter i{
            color: var(--blazma-primary);
            position: absolute;
            top: 31px !important;
            right: 324px!important;
        }
        table.dataTable tbody td input[type="checkbox"] {
            background:#f4f6f9;
            accent-color: var(--blazma-primary);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            vertical-align: middle;
            border: 1px solid #E6E6E6;
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            cursor: pointer;
        }
        #select_all input[type="checkbox"]{
            background:#f4f6f9;
            accent-color: var(--blazma-primary);
            width: 20px;
            height: 20px;
            border-radius: 50%;
            vertical-align: middle;
            border: 1px solid #E6E6E6;
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            cursor: pointer;
        }
        /* Style for checkbox when it's checked */
        #select_all input[type="checkbox"]:checked {
            appearance: auto;
            clip-path: circle(50% at 50% 50%);
        }
        #select_all{
            padding:12px !important;
        }
        /* Style for checkbox when it's checked */
        table.dataTable tbody td input[type="checkbox"]:checked {
            appearance: auto;
            clip-path: circle(50% at 50% 50%);
        }
        /* Reservation-level select all: without this the "some tests
           selected" state would look exactly like "none selected". */
        tr.dtrg-group input.group-select-all:indeterminate {
            appearance: auto;
            -webkit-appearance: auto;
            clip-path: circle(50% at 50% 50%);
            opacity: 0.55;
        }
        #validation-table tr td:first-child:not(.dtrg-group td){
            padding:12px 0px 12px 0px !important;
        }

        .details-control:hover,.details-control:active,.details-control:focus,.upload-details-control:hover,.upload-details-control:active,.upload-details-control:focus{
            background-color:white !important;
            outline:none;
            color: var(--blazma-primary);
        }
        .details-control,.upload-details-control{
            background-color:white !important;
            border: none;
            font-size: 20px !important;
            max-height: 20px;
            padding: 0;
            color: var(--blazma-primary);
        }
        .details-success{
            color: green;
        }
        .details-success:hover,.details-success:active,.details-success:focus{
            color: green;
        }
        .comment-success{
            font-size: 20px;
            background:transparent;
            border:none;
            color: green;
        }
        .comment-success:hover,.comment-success:active,.comment-success:focus{
            outline: none;
            color: green;
            border: none;
            background: transparent;
        }

        /* Search Action Bar */
        .reservations-search-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 30px;
            background: #F9FAFB;
            box-shadow: 0px 2px 30px 0px #0000000F;
            border-radius: 30px;
        }

        .reservations-search-bar-left {
            color: var(--blazma-primary);
            font-size: 14px;
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        .reservations-search-bar-left .fa-filter {
            font-size: 16px;
            opacity: 0.85;
        }

        .reservations-search-bar-btn {
            background: #ffffff;
            color: var(--blazma-primary);
            border: none;
            border-radius: 30px;
            padding: 9px 32px;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 0.3px;
            cursor: pointer;
            box-shadow: 0 3px 12px rgba(0,0,0,0.15);
            transition: all 0.2s ease;
        }

        .reservations-search-bar-btn:hover {
            background: var(--blazma-primary);
            color: #fff0f4;
            box-shadow: 0 5px 18px rgba(0,0,0,0.2);
            transform: translateY(-1px);
        }

        .reservations-search-bar-btn:focus {
            outline: none;
        }

        .reservations-search-bar-btn:active {
            transform: translateY(0);
            outline: none;
        }
        .filters-toggle-btn {
            background: #F9FAFB;
            box-shadow: 0px 2px 30px 0px #0000000F;
            color: var(--blazma-primary);
            border: 1px solid rgba(255,255,255,0.4);
            border-radius: 30px;
            padding: 7px 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 14px;
            line-height: 1;
        }
        .filters-toggle-btn:hover {
            background: var(--blazma-primary);
            color: #fff0f4;
            box-shadow: 0 5px 18px rgba(0,0,0,0.2);
            transform: translateY(-1px);
        }
        .filters-toggle-btn:focus {
            outline: none;
        }

        /* Batch upload trigger: outline variant of the search-bar pill */
        .batch-upload-btn {
            background: #ffffff;
            color: var(--blazma-primary);
            border: 1.5px solid var(--blazma-primary) !important;
            box-shadow: 0 2px 8px rgba(var(--blazma-primary-rgb), 0.10);
        }
        .batch-upload-btn:hover {
            background: var(--blazma-primary);
            color: #ffffff;
            border-color: var(--blazma-primary); !important;
        }
        .batch-upload-btn i { font-size: 15px; }

        /* Batch upload modal */
        #modal-batch-upload-results .modal-content {
            border-radius: 14px;
            border: none;
            box-shadow: 0 12px 40px rgba(0,0,0,0.18);
            overflow: hidden;
        }
        #modal-batch-upload-results .modal-header {
            background: linear-gradient(135deg, var(--blazma-primary) 0%, var(--blazma-primary) 100%);
            color: #fff;
            border-bottom: none;
            padding: 18px 24px;
        }
        #modal-batch-upload-results .modal-header .modal-title {
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        #modal-batch-upload-results .modal-header .close { color: #fff; opacity: 0.9; text-shadow: none; }
        #modal-batch-upload-results .modal-body { padding: 22px 24px; background: #fafbfc; }
        #modal-batch-upload-results .modal-footer { padding: 14px 24px; background: #fff; border-top: 1px solid #eef0f3; }

        .batch-info-hint {
            background: #f4f8fb;
            border: 1px solid #e1e9f0;
            border-left: 4px solid #1c87c9;
            color: #2c4a5d;
            border-radius: 8px;
            padding: 10px 14px;
            font-size: 13px;
            line-height: 1.6;
        }
        .batch-info-hint code {
            background: #fff;
            border: 1px solid #e1e9f0;
            color: var(--blazma-primary);
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 12px;
        }

        .batch-dropzone {
            border: 2px dashed #c9d4df;
            border-radius: 12px;
            background: #ffffff;
            padding: 28px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
        }
        .batch-dropzone:hover, .batch-dropzone.is-dragover {
            border-color: var(--blazma-primary);
            background: #fff6f9
        }
        .batch-dropzone .dz-icon {
            width: 56px; height: 56px;
            margin: 0 auto 10px;
            border-radius: 50%;
            background: #fff0f4;
            color: var(--blazma-primary);
            display: flex; align-items: center; justify-content: center;
            font-size: 24px;
        }
        .batch-dropzone .dz-title { font-size: 15px; font-weight: 600; color: #2c3a47; margin-bottom: 4px; }
        .batch-dropzone .dz-sub   { font-size: 12.5px; color: #7a8590; }
        .batch-dropzone .dz-browse { color: var(--blazma-primary); text-decoration: underline; font-weight: 600; }
        .batch-dropzone:focus { outline: 2px solid var(--blazma-primary); outline-offset: 2px; }

        .batch-options-row {
            display: flex; justify-content: space-between; align-items: center;
            margin-top: 12px; padding: 10px 14px;
            background: #fff; border: 1px solid #eef0f3; border-radius: 10px;
        }
        .batch-options-row .file-count { font-size: 13px; color: #6a737d; }
        .batch-options-row .file-count b { color: #2c3a47; }

        .batch-file-list { margin-top: 14px; }
        .batch-file-row {
            display: flex; align-items: center; gap: 12px;
            background: #fff;
            border: 1px solid #eef0f3;
            border-radius: 10px;
            padding: 10px 14px;
            margin-bottom: 8px;
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .batch-file-row.is-success { border-color: #c6e8d2; background: #f2faf5; }
        .batch-file-row.is-error   { border-color: #f1c8cd; background: #fdf4f5; }
        .batch-file-row .bf-icon {
            width: 40px; height: 40px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .batch-file-row .bf-icon.pdf { background: var(--blazma-primary); color: var(--blazma-primary); }
        .batch-file-row .bf-icon.mp4 { background: #e7f0fd; color: #2980b9; }
        .batch-file-row .bf-icon.other { background: #eef0f3; color: #6a737d; }
        .batch-file-row .bf-meta { flex: 1; min-width: 0; }
        .batch-file-row .bf-name {
            font-size: 13.5px; font-weight: 600; color: #2c3a47;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .batch-file-row .bf-sub { font-size: 12px; color: #7a8590; margin-top: 2px; }
        .batch-file-row .bf-sub .sample-tag {
            display: inline-block; background: #fff0f4; color: var(--blazma-primary);
            padding: 1px 8px; border-radius: 10px; font-weight: 600;
            margin-left: 6px;
        }
        .batch-file-row .bf-status {
            font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 12px;
            white-space: nowrap;
        }
        .batch-file-row .bf-status.pending { background: #eef0f3; color: #6a737d; }
        .batch-file-row .bf-status.success { background: #d8f0e1; color: #1e7e3c; }
        .batch-file-row .bf-status.error   { background: #fadbde; color: #b3261e; }
        .batch-file-row .bf-remove {
            background: transparent; border: none; color: #7a8590;
            font-size: 16px; padding: 4px 6px; cursor: pointer; border-radius: 6px;
        }
        .batch-file-row .bf-remove:hover { color: #b3261e; background: #fdecee; }

        .batch-switch {
            display: flex; align-items: center; gap: 8px; font-size: 13px; color: #4a5560;
        }
        .batch-submit-btn {
            background: linear-gradient(135deg, var(--blazma-primary) 0%, var(--blazma-primary) 100%);
            color: #fff; border: none; border-radius: 30px;
            padding: 9px 28px; font-weight: 600; font-size: 14px;
            box-shadow: 0 4px 14px rgba(186,57,94,0.25);
            transition: all 0.2s ease;
        }
        .batch-submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(186,57,94,0.35); color:#fff; }
        .batch-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
        .batch-close-btn {
            background: #fff; color: #4a5560;
            border: 1px solid #d8dde3; border-radius: 30px;
            padding: 8px 22px; font-weight: 500; font-size: 14px;
        }
        .batch-close-btn:hover { background: #f4f6f8; }
        .icon-circle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border: 1px solid var(--blazma-primary);
            border-radius: 50%;
            background: #4cbdce;
        }

        .icon-circle i {
            color: #fff;
        }
    </style>
    <link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header p-0">
        <div class="container-fluid card m-0">
            <div class="row">
                <div class="col-sm-6 m-0 card ">
                    <h1 class="card-body m-0 text-dark mb-2" style="color: var(--blazma-text)!important;">Sample Validation</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">
                <div class="card filter-main-card">
                <div class="card bg-light mr-0">
                                <div class="card-body">
                                    <div class="row justify-content-between contain-filters" id="validation-filters-row">
                                    <div class=" mb-2">
                                        <div class="filter">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span class="filter-name">Reservations</span>
                                                <span id="reservations-number" class="filter-number" style="cursor: pointer;">0</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text" placeholder="Reservation ID" class="form-control search-input" id="validation-res-no"  />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="validation-reservation-date-from" class="form-control search-input" type="text" name="reservation_date_from" value="@if(!empty($date_from)){{$date_from}}@endif" placeholder="Date From">
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="validation-reservation-date-to" class="form-control search-input"  type="text" name="reservation_date_to" value="@if(!empty($date_to)){{$date_to}}@endif" placeholder="Date To">
                                            </div>
                                            @if(!empty(session('enable_histopathology')) && session('enable_histopathology') == 1)
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  placeholder="Internal No." class="form-control search-input" id="validation-intend-no" />
                                            </div>
                                            @endif
                                        </div>
                                        </div>
                                        <div class=" mb-2">
                                        <div class="filter">
                                        <div class="d-flex justify-content-between align-items-center">
                                                <span class="filter-name">Patients</span>
                                                <span id="patients-number" class="filter-number" style="cursor: pointer;">0</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text"  placeholder="ID" class="form-control search-input" id="sample-identification" />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                             <input type="text"  placeholder="NAME" class="form-control search-input" id="sample-name"  />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  placeholder="Mobile No." class="form-control search-input" id="sample-mobile"  />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  placeholder="MRN" class="form-control search-input" id="validation-mrn"  />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  placeholder="Reference Order ID" class="form-control search-input" id="reference-id" placeholder="Search by Reference ID" />
                                            </div>
                                        </div>
                                        </div>
                                        <div class=" mb-2">
                                        <div class="filter">
                                        <div class="d-flex justify-content-between align-items-center">
                                                <span class="filter-name">Samples</span>
                                                <span id="samples-number" class="filter-number" style="cursor: pointer;">0</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text"  placeholder="Sample ID" class="form-control search-input" id="sample-id" />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select required class="form-control search-input" name="validation-run-id" id="validation-run-id">
                                                                <option value="">Job No</option>
                                                                @foreach($runs as $run)
                                                                    <option value="{{$run->ID}}">{{$run->RUN_NO}}</option>
                                                                @endforeach
                                                            </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select required class="form-control search-input" name="validation-sendout-id" id="validation-sendout-id">
                                                                <option value="">Send Out No.</option>
                                                                @foreach($sendouts as $sendout)
                                                                    <option value="{{$sendout->ID}}">{{$sendout->SENDOUT_NO}}</option>
                                                                @endforeach
                                                            </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select required class="form-control search-input" name="validation-batch-id" id="validation-batch-id">
                                                                <option value="">PCR Batch No.</option>
                                                                @foreach($batches as $batch)
                                                                    <option value="{{$batch->ID}}">{{$batch->BATCH_NO}}</option>
                                                                @endforeach
                                                            </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="validation-date-from" autocomplete="off" placeholder="Receiving Date From" class="form-control date-from-receiving-report search-input"  type="text">
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="validation-date-to" autocomplete="off" placeholder="Receiving Date To" class="form-control date-to-receiving-report search-input"  type="text">
                                            </div>
                                        </div>
                                        </div>

                                        <div class=" mb-2">
                                        <div class="filter">
                                        <div class="d-flex justify-content-between align-items-center">
                                                <span class="filter-name">Tests</span>
                                                <span id="tests-number" class="filter-number" style="cursor: pointer;">0</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text"  class="form-control search-input" id="validation-test-id" placeholder="Test ID" />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" id="validation-category-id" name="status">
                                                                    <option value="">Test Name</option>
                                                                    @foreach($tests as $test)
                                                                            <option value="{{$test->ID}}">{{$test->NAME_EN}}</option>
                                                                        @endforeach
                                                            </select>
                                            </div>


                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" id="validation-package-id" >
                                                                <option value="">Select Package</option>
                                                                @foreach($packages as $package)
                                                                    <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                                                @endforeach
                                                            </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  class="form-control search-input" id="validation-ng-code" placeholder="NG Code" />
                                            </div>
                                        </div>
                                        </div>

                                        <div class="">
                                        <div class="filter">
                                        <div class="d-flex justify-content-between align-items-center">
                                                <span class="filter-name">Branch</span>
                                                <span id="branches-number" class="filter-number" style="cursor: pointer;">0</span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3" @if(empty(session('is_primary')) || !empty(session('org_id')) || session('role') == 17) style="display: none" @endif>
                                                 <select class="form-control rhospital_id search-input" id="validation-hospital-id" name="hospital">
                                                        <option value="">Registration Branch</option>
                                                        @foreach($hospitals as $ehospital)
                                                            <option @if((!empty($hospital) && $hospital == $ehospital->ID) || (!empty(session('role'))  && session('role') == 1 && session('hospital_id') == $ehospital->ID)) selected @endif value="{{$ehospital->ID}}">{{$ehospital->NAME_EN}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2" @if(empty(session('is_primary')) || !empty(session('org_id')) || session('role') == 17) style="display: none" @endif>
                                            <select class="form-control rhospital_id search-input" id="processing-hospital-id" name="processing_hospital">
                                                        <option value="">Processing Branch</option>
                                                        @foreach($processing_hospitals as $phospital)
                                                            <option @if(!empty($hospital) && $hospital == $phospital->ID) selected @endif value="{{$phospital->ID}}">{{$phospital->NAME_EN}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input runit_id" id="validation-unit-id" name="unit">
                                                        <option value="">Processing Unit</option>
                                                        @foreach($units as $unit)
                                                            <option value="{{$unit->ID}}">{{$unit->NAME_EN}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <select class="form-control rhospital_id search-input" id="validation-unit-category-id" name="unit_category">
                                                    <option value="">Unit Category</option>
                                                    @foreach($unit_categories as $unitCategory)
                                                        <option value="{{$unitCategory->ID}}">{{$unitCategory->NAME_EN}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2" @if(!empty(session('org_id')) || session('role') == 17) style="display: none" @endif>
                                            <select required id="validation-org-id" class="form-control rhospital_id search-input" name="org_id">
                                                            <option value="">Client</option>
                                                            @foreach($companies as $company)
                                                                <option @if(!empty(session('role'))  && (!empty(session('org_id')) || session('role') == 17) && !empty(session('org_id')) && session('org_id') == $company->ID) selected @endif value="{{$company->ID}}">{{$company->COMPANY_NAME}}{{!empty($company->CLIENT_CODE)?' ('.$company->CLIENT_CODE.')':''}}</option>
                                                            @endforeach
                                                        </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select required class="form-control search-input" name="validation-analyzer-id" id="validation-analyzer-id">
                                                                <option value="">Analyzer</option>
                                                                @foreach($analyzers as $analyzer)
                                                                    <option value="{{$analyzer->ID}}">{{$analyzer->NAME_EN}}</option>
                                                                @endforeach
                                                            </select>
                                            </div>
                                        </div>
                                        </div>


                                    </div>
                                    <div class="card-footer d-flex" id="validation-filters-footer">
                                        <div class="validation-footer-toggles">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input search-input" name="validation-only-results" value="reset" id="validation-only-results">
                                                <label class="custom-control-label" for="validation-only-results" style="margin-right: 10px;font-weight: 300;"> Only samples with results</label>
                                            </div>

                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input search-input" name="validation-only-rerun" value="rerun" id="validation-only-rerun">
                                                <label class="custom-control-label" for="validation-only-rerun" style="margin-right: 10px;font-weight: 300;"> Is Rerun </label>
                                            </div>

                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input search-input" name="validation-only-urgent" value="urgent" id="validation-only-urgent">
                                                <label class="custom-control-label" for="validation-only-urgent" style="margin-right: 10px;font-weight: 300;"> Only Urgent</label>
                                            </div>
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input search-input" checked name="validation-group-by" value="urgent" id="validation-group-by">
                                                <label class="custom-control-label" for="validation-group-by" style="margin-right: 10px;font-weight: 300;"> Group by Reservation</label>
                                            </div>
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input search-input" name="validation-group-by-test" value="urgent" id="validation-group-by-test">
                                                <label class="custom-control-label" for="validation-group-by-test" style="margin-right: 10px;font-weight: 300;"> Group by Test</label>
                                            </div>

                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input search-input" name="validation-is-on-hold" value="on_hold" id="report-is-on-hold">
                                                <label class="custom-control-label" for="report-is-on-hold" style="margin-right: 10px;font-weight: 300;"> Is On Hold</label>
                                            </div>

                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input search-input" name="has_no_result" value="no_result" id="validation-has-no-result">
                                                <label class="custom-control-label" for="validation-has-no-result" style="margin-right: 10px;font-weight: 300;"> Test with no results</label>
                                            </div>

                                        </div>
                                        <div class="validation-footer-actions">
                                            @permission('download_processing_validation')
                                            <a id="sample-validation-export" class="btn btn-sm card-footer-btns">
                                                <span class="icon-circle">
                                                    <i class="fas fa-long-arrow-alt-down"></i>
                                                </span>
                                                Download Excel
                                            </a>
                                            @endpermission
                                            @permission('import_processing_validation')
                                            <a class="btn btn-sm card-footer-btns" href="#" data-toggle="modal" data-target="#modal-import">
                                                <span class="icon-circle">
                                                    <i class="fas fa-long-arrow-alt-up"></i>
                                                </span>
                                                Import Excel
                                            </a>
                                            @if(!empty(session('enable_nbs')) && session('enable_nbs') || (!empty(session('enable_nbs_v2')) && session('enable_nbs_v2')))
                                            <a class="btn btn-sm card-footer-btns" href="#" data-toggle="modal" data-target="#modal-import-nbs">
                                                <span class="icon-circle">
                                                    <i class="fas fa-long-arrow-alt-up"></i>
                                                </span>
                                                Import NBS Excel
                                            </a>
                                            @endif
                                            @endpermission
                                            @permission('validate_processing_validation')<button id="reset-all"> Rerun All Selected</button> @endpermission
                                            @permission('validate_all_processing_validation')<button id="validate-all"> Validate All Selected</button> @endpermission
                                        </div>
                                    </div>
                                    <div class="reservations-search-bar mt-3">
                                        <div class="reservations-search-bar-left">
                                            <i class="fa fa-filter mr-2"></i>
                                            <span id="active-filters-label">Ready to search</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <button type="button" class="filters-toggle-btn mr-3" title="Toggle Filters">
                                                <i class="fa fa-chevron-up"></i>
                                            </button>
                                            <button type="button" id="validation-search-btn" class="reservations-search-bar-btn">
                                                <i class="fa fa-search mr-2"></i> Search
                                            </button>
                                            @if(in_array('sample_change_result', session('permissions', []) ?? []) || in_array('add_processing_validation_result', session('permissions', []) ?? []))
                                            <button type="button" id="validation-batch-upload-btn" class="reservations-search-bar-btn batch-upload-btn ml-2" title="Batch Upload Results by Filename">
                                                <i class="fa fa-cloud-upload-alt mr-2"></i> Batch Upload
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                </div>
                    <div class="card">
                    <div class="card-body">
                    <div class="table-responsive">
                    <table id="validation-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th id="select_all"></th>
                                    <th>Sample ID</th>
                                    <th>Test ID</th>
                                    <th>Test Name</th>
                                    <th style="min-width:100px">Result</th>
                                    <th>Unit</th>
                                    <th>Min</th>
                                    <th>Max</th>
                                    <th>Expected Result Time</th>
                                    <th>Comment</th>
                                    <th>Time Line</th>
                                    <th>Patient</th>
                                    <th>Identification</th>
                                    <th style="min-width:50px">Age</th>
                                    <th>Gender</th>
                                    <th>Registration Branch</th>
                                    <th>Internal Chat</th>
                                    <th>Validate</th>
                                    <th>Flags</th>
                                    <th>Action</th>
                                </tr>
                                </thead>

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

                    </div>
            <!-- /.row -->
        </div>
                <!-- /.row -->
            </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
    <div class="modal fade" id="modal-items">
        <div class="modal-dialog modal-lg">
            <form id="validate-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">Fill Results</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="patient-info-result"></div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-danger alert-danger-validate" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div id="results-questionnair"></div>
                        <div id="results-options" class="row">
                        </div>
                        <br>
                        <textarea class="ckeditor" name="result_comment"></textarea>
                        <div class="row">
                            <div class="modal-footer justify-content-end">
                                <button id="save-results-options"  style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

    <div class="modal fade" id="modal-mc-values">
        <div class="modal-dialog modal-md">
            <form id="validate-mc-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="result-id"></div>
                        <h3 class="modal-title">Fill MIC Values</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" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div id="mc-results" class="row">
                        </div>
                        <br>
                        <div class="row">
                            <div class="modal-footer justify-content-between">
                                <button id="save-mc-results"  style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
<div class="modal fade" id="modal-ua-options">
    <div class="modal-dialog modal-lg">
        <form id="ua-option-form">
            <div class="modal-content">
                <div class="modal-header">
                    <div id="sample-id"></div>
                    <h3 class="modal-title"></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-validate" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col">
                            <label for="ua-option-name">Option Name</label>
                            <input type="text" class="form-control" placeholder="Option Name" name="ua-option-name" id="ua-option-name">
                        </div>
                    </div>
                    <div class="custom-control custom-switch mt-3">
                        <input type="checkbox" class="custom-control-input" name="ua-is-normal" value="1" id="ua-is-normal">
                        <label class="custom-control-label" for="ua-is-normal" style="margin-right: 10px;font-weight: 300;"> Is Normal</label>
                    </div>

                    </div>
                    <div class="row">
                        <div class="modal-footer justify-content-between">
                            <button id="save-ua-options"  style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>


<div class="modal fade" id="modal-items-template">
    <div class="modal-dialog modal-xl">
        <form id="template-form" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <div id="template-sample-id"></div>
                    <h3 class="modal-title">Fill Template Results</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-validate" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div id="sub-template-options" class="row">
                    </div>
                    <div id="template-results-specimens" class="row">
                    </div>
                    <div id="template-results-options" class="row">
                    </div>
                    <br>
                    <div id="critical-options" class="row">
                        <div class="col-3">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input"  id="template-critical-btn">
                            <label class="custom-control-label" for="template-critical-btn" style="margin-right: 10px;font-weight: 300;"> Critical Result</label>
                        </div>
                        </div>
                        <div class="col-12 critical-section-result" style="display: none">
                            <br>
                            <p><b>Critical Comment</b></p>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                </div>
                                <textarea maxlength="500" class="form-control template-critical-text"  rows="4" cols="50"></textarea>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="modal-footer justify-content-end">
                            <button id="save-template-results-options"  style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>

    <!-- /.content-wrapper -->
    <div class="modal fade" id="modal-upload-items">
        <div class="modal-dialog modal-lg">
            <form id="upload-result-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">Upload Attachment</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-validate" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="display: flex;justify-content: space-between;">
                        <input type="file" id="result-files" accept="application/pdf,video/mp4" name="files[]" multiple/>
                        <div class="custom-control custom-switch text-right">
                                                <input type="checkbox" class="custom-control-input" name="is_attach_normal" value="" id="is_attach_normal">
                                                <label class="custom-control-label" for="is_attach_normal" style="margin-right: 10px;font-weight: 300;"> Is Normal</label>
                                            </div>
                        </div>

                        <div class="row">
                            <div id="display-attachments" style="width:100%" class="timeline timeline-inverse mt-5">
                            </div>
                        </div>

                        </div>

                        <div class="row">
                            <div class="modal-footer justify-content-between">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <button type="button" id="upload-attachment-result" class="btn btn-success">Upload Attachments</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

     <!-- /.content-wrapper -->
     <div class="modal fade" id="modal-analyzer-reference">
        <div class="modal-dialog modal-lg">
            <form id="upload-result-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">Reference Range</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-validate" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div id="reference-options" class="row">

                        </div>
                        </div>

                        <div class="row">
                            <div class="col-12 modal-footer justify-content-between">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" id="manual-analyzer-reference" class="btn btn-info">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

    <!-- /.content-wrapper -->
    <div class="modal fade" id="modal-comments">
        <div class="modal-dialog modal-lg">
            <form id="comment-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">Sample Comments 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 class="row">
                            <div class="col-12">
                                <div class="alert alert-danger alert-danger-validate" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div id="comments" class="timeline timeline-inverse ">
                                </div>
                            </div>
                            <div class="col-12">
                                <div id="note" class="timeline timeline-inverse ">
                                </div>
                            </div>
                            <div class="col-12">
                                <small> (Reservation Attachment)</small>
                                <div id="attachments" class="timeline timeline-inverse ">
                                </div>
                            </div>

                        </div>
                        @permission('add_processing_validation_comment')
                        <div class="row" style="padding: 0 10px;">
                        <div class="col-md-12">
                        <input type="file" id="files" name="files[]" multiple/>
                            <textarea id="sampleComment" required class="form-control mt-4" placeholder="Enter your comment here" id="COMMENT_TEXT" name="COMMENT_TEXT" rows="3" cols="50"></textarea>
                            </div>
                            <div class="col-md-12 mt-5 mb-4" style="display:flex;justify-content:end;align-items:center">
                                <button id="add-sample-comment" class="btn btn-info mr-3"><i class="fas fa-lg fa-plus-circle"></i> Add Comment</button>
                                <button id="reset-sample" type="button" class="btn btn-warning" style="color:white;padding-right:15px"><i class="fa fa-lg fa-arrow-circle-left" ></i> Rerun Sample</button>
                            </div>
                        </div>
                        @endpermission
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <div class="modal fade" id="modal-ct">
        <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">CT Values</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">
                                <input type="hidden" id="ct-sample-id" />
                                <div class="alert alert-danger alert-danger-validate" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="ic-value">IC</label>
                                <input id="ic-value" name="ic-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                            <div class="col-md-6">
                                <label for="ORF1ab-value">ORF1ab</label>
                                <input id="ORF1ab-value" name="ORF1ab-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="Ngene-value">Ngene</label>
                                <input id="Ngene-value" name="Ngene-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                            <div class="col-md-6">
                                <label for="Egene-value">Egene</label>
                                <input id="Egene-value" name="Egene-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="RdRP-value">RdRP</label>
                                <input id="RdRP-value" name="RdRP-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="save-ct-values"  style="padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Save</button>
                    </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
    </div>
    <div class="modal fade" id="modal-import">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Excel Importing</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post"  action="/operations/samples/">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-import" role="alert" style="display: none;"></div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Upload Excel File</p>
                                <input style="padding:3px" class="form-control" name="import-file" id="import-file" type="file" required />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="text-right">
                            <input type="checkbox" name="validation-all-samples" value="reset" id="validation-all-samples">
                            <label for="only-reset" style="margin-right: 10px;font-weight: 300;"> With validate all samples</label>
                        </div>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default float-left" data-dismiss="modal">{{trans("web.cancel")}}</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="import_results" type="button" class="btn btn-success">Import</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <div class="modal fade" id="modal-import-nbs">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Excel New born Screening Results Importing</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post"  action="/operations/samples/">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-import" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Upload NBS Excel File @if(!empty(session('enable_nbs')) && session('enable_nbs'))<small class="text-muted">(Tandem Mass files: filename must start with "MS")</small>@endif</p>
                                <input style="padding:3px" class="form-control" name="import-nbs-file" id="import-nbs-file" type="file" required />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default float-left" data-dismiss="modal">{{trans("web.cancel")}}</button>
                        @if((!empty(session('enable_nbs')) && session('enable_nbs')) || (!empty(session('enable_nbs_v2')) && session('enable_nbs_v2')))<button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="import_nbs_results" @if(!empty(session('enable_nbs_v2')) && session('enable_nbs_v2')) data-version="2" @else data-version="1" @endif @if(!empty(session('enable_nbs')) && session('enable_nbs')) data-enable-ms="1" @endif type="button" class="btn btn-success">Import</button>@endif
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="critical-result-value">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                <div id="critical-sample-id"></div>
                    <h3 class="modal-title">Critical Results Reporting</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-import" role="alert" style="display: none;"></div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col">
                                <p class="alert alert-danger" style="font-size:15px;color:white;font-weight: 600;margin-bottom: 10px;">Those values/interpretations that indicate that the patient is in
imminent danger, significant morbidity, or serious adverse consequences
unless evaluated immediately</p>
                            </div>
                            </div>
                            <div id="patient-details"class="row"></div>
                    </div>
                    <div class="modal-footer">
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button" class="btn btn-default float-left" data-dismiss="modal">{{trans("web.cancel")}}</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px; border-color: #757897;" id="agree_critical_results" type="button" class="btn btn-success">Agree</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="sms_critical_results" type="button" class="btn btn-secondary">Send SMS</button>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="email_critical_results" type="button" class="btn btn-secondary">Send Email</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="modal-time-log">
    <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Time Line 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 class="row">
                        <div class="col-12">
                        <div id="sample-time-log"></div>
                        </div>
                    </div>
                </div>
            </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>

    @include('operations.layout.modals.confirm_result')

<!-- /.content-wrapper -->
@if(!empty(session('enable_qc')) && session('enable_qc') == 1)
<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">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="text-muted text-sm"><b>QC</b></span>
                                    <select class="form-control rhospital_id date-filter"
                                        id="qc-approval-control-id-filter" multiple>
                                        <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-approval-lot-id-filter" multiple>
                                        <option value="" selected>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-approval-test-id-filter" multiple>
                                        <option value="">Select Test</option>
                                    </select>
                                </div>



                            </div>
                            <div class="row">
                                <div class="col-lg-6 mt-2">
                                    <span class="text-muted text-sm"><b>Time from</b></span>
                                    <input id="qc-approval-date-from" class="form-control" type="text"
                                        placeholder="Date From">
                                </div>

                                <div class="col-lg-6 mt-2">
                                    <span class="text-muted text-sm"><b>Time to</b></span>
                                    <input id="qc-approval-date-to" class="form-control" type="text"
                                        placeholder="Date To">
                                </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 mb-3" style="width: 10%">Export Chart</button>
                <table id="qc-approval-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>Result</th>
                            <th>Time</th>
                        </tr>
                    </thead>

                </table>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endif

<div class="modal fade" id="modal-tests-results">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Patient Tests Results</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" style="text-align: center;">
                        <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12">
                    <div class="card bg-white">
                        <div class="card-footer">
                            <div class="text-left d-flex align-items-center">
                                <div class="custom-control custom-switch mr-4">
                                    <input type="checkbox" class="custom-control-input" checked id="only-this-test">
                                    <label class="custom-control-label" for="only-this-test"
                                        style="margin-right: 10px;font-weight: 300;"> Only This Test (<span
                                            id="p-result-test-name"></span>)</label>
                                </div>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="include-linked-results">
                                    <label class="custom-control-label" for="include-linked-results"
                                        style="font-weight: 300;">Include Linked Results</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col">
                        <table id="patient-results-tests-table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Sample ID</th>
                                    <th>Name</th>
                                    <th>Tests</th>
                                    <th>Collection Date</th>
                                    <th>Result Date</th>
                                    <th>Result</th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade" id="modal-linked-results">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Linked Test Results</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">
                        <table id="linked-results-tests-table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Reservation ID</th>
                                    <th>Sample ID</th>
                                    <th>Patient Name</th>
                                    <th>Tests</th>
                                    <th>Collection Date</th>
                                    <th>Result Date</th>
                                    <th>Result</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="questionnaire-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: 1px solid white; z-index: 1">
                    <h4 class="modal-title" >{{--Test Questionnaire--}}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="questionnaire-modal-body">

                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal fade" id="ck-modal">
        <div class="modal-dialog modal-lg">

                <div class="modal-content">
                    <div class="modal-header">
                        <div id="ck-sample-id"></div>
                        <h3 class="modal-title">Fill 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-ck" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6 mb-3">
                                <p><b>Suggestions</b></p>
                                    <select id="ck-suggestions" class="form-control">
                                        <option value="">Select Suggestions</option>
                                    </select><br />
                            </div>
                            <div class="col-12">
                                <textarea class="ckeditor" id="ckeditor"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="modal-footer justify-content-end">
                                @permission('add_processing_validation_result')
                                <button id="save-ck-comment" style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Save</button>
                                @endpermission
                            </div>
                        </div>
                    </div>
                </div>

            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <div class="modal fade" id="view-reference-comment-modal">
        <div class="modal-dialog modal-lg">

                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Reference 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 id="view-reference-comment"></div>
                            </div>
                        </div>
                    </div>
                </div>

            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <div class="modal fade" id="view-patient-history-modal">
        <div class="modal-dialog modal-lg">

                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Patient History</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 id="view-patient-history"></div>
                            </div>
                        </div>
                    </div>
                </div>

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

    <!-- Batch upload results modal -->
    <div class="modal fade" id="modal-batch-upload-results">
        <div class="modal-dialog modal-lg">
            <form id="batch-upload-results-form" onsubmit="return false;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title"><i class="fa fa-cloud-upload-alt mr-2"></i>Batch Upload Results</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="batch-info-hint mb-3">
                            <i class="fa fa-info-circle mr-1"></i>
                            File names must contain the <b>Test ID</b> or <b>Sample ID</b> of a result of type <b>file/video</b>.
                            If a Sample has more than one file/video test, please use the Test ID.
                            Up to <b>10 files</b> &middot; Allowed: <b>PDF</b>, <b>MP4</b>.
                            Example: <code>result_12345_v2.pdf</code> &rarr; test/sample <code>12345</code>.
                        </div>

                        <div class="alert alert-danger batch-upload-alert-danger" role="alert" style="display:none;"></div>

                        <div class="batch-dropzone" id="batch-dropzone" role="button" tabindex="0">
                            <div class="dz-icon"><i class="fa fa-cloud-upload-alt"></i></div>
                            <div class="dz-title">Drag &amp; drop files here</div>
                            <div class="dz-sub">or <span class="dz-browse">browse</span> &middot; PDF / MP4 &middot; up to 10 files</div>
                        </div>
                        <input type="file" id="batch-upload-files" accept="application/pdf,video/mp4" name="files[]" multiple style="display:none;" />

                        <div class="batch-options-row">
                            <div class="file-count">
                                <i class="fa fa-paperclip mr-1"></i>
                                <span id="batch-file-count">0</span> file(s) selected
                                <span class="text-muted ml-2" id="batch-file-total-size"></span>
                            </div>
                            <div class="batch-switch">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="is_attach_normal_batch">
                                    <label class="custom-control-label" for="is_attach_normal_batch">Mark all as Normal</label>
                                </div>
                            </div>
                        </div>

                        <div id="batch-upload-results-list" class="batch-file-list"></div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="batch-close-btn" data-dismiss="modal">Close</button>
                        <button type="button" id="batch-upload-attachment-submit" class="batch-submit-btn" disabled>
                            <i class="fa fa-cloud-upload-alt mr-2"></i>Upload Attachments
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('footer-scripts')
<script>
    // Function to get filter request data for validation report
    function getValidationAnalysisReportRequestData() {
        return {
            date_from : $('#validation-date-from').val(),
            date_to : $('#validation-date-to').val(),
            hospital_id : $('#validation-hospital-id').val(),
            only_results : $('#validation-only-results').is(':checked'),
            is_rerun : $('#validation-only-rerun').is(':checked'),
            only_urgent : $('#validation-only-urgent').is(':checked'),
            has_no_result : $('#validation-has-no-result').is(':checked'),
            group_by_reservation : $('#validation-group-by').is(':checked'),
            group_by_test : $('#validation-group-by-test').is(':checked'),
            location : $('#validation-location-id').val(),
            batch_id : $('#validation-batch-id').val(),
            run_id : $('#validation-run-id').val(),
            sendout_id : $('#validation-sendout-id').val(),
            analyzer_id : $('#validation-analyzer-id').val(),
            test_category : $('#validation-category-id').val(),
            package_id : $('#validation-package-id').val(),
            unit_id : $('#validation-unit-id').val(),
            unit_category_id : $('#validation-unit-category-id').val(),
            org_id : $('#validation-org-id').val(),
            res_no : $('#validation-res-no').val(),
            mrn : $('#validation-mrn').val(),
            intend : $('#validation-intend-no').val(),
            reservation_date_from : $('#validation-reservation-date-from').val(),
            reservation_date_to : $('#validation-reservation-date-to').val(),
            sample_mobile : $('#sample-mobile').val(),
            sample_identification : $('#sample-identification').val(),
            sample_name : $('#sample-name').val(),
            reference_id : $('#reference-id').val(),
            sample_id : $('#sample-id').val(),
            validation_test_id : $('#validation-test-id').val(),
            processing_hospital_id : $('#processing-hospital-id').val()
        };
    }

    $(document).ready(function() {
        // Filters toggle
        $(document).on('click', '.filters-toggle-btn', function() {
            var $btn     = $(this);
            var $icon    = $btn.find('i');
            var $filters = $('#validation-filters-row');
            var $footerFilters = $('#validation-filters-footer');
            var hidden   = $btn.data('hidden') || false;
            if (!hidden) {
                $filters.hide();
                $footerFilters.removeClass('d-flex').hide();
                $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
                $btn.data('hidden', true);
            } else {
                $filters.css('display', 'flex');
                $footerFilters.addClass('d-flex').show();
                $icon.removeClass('fa-chevron-down').addClass('fa-chevron-up');
                $btn.data('hidden', false);
            }
        });
        // Update active filters count in the search bar
        function updateActiveFiltersCount() {
            var count = 0;
            $('.filter input[type=text], .filter input[type=date]').each(function() {
                if ($(this).val() && $(this).val().trim() !== '') count++;
            });
            $('.filter select').each(function() {
                var val = $(this).val();
                if (val && val !== '' && !(Array.isArray(val) && val.length === 0)) count++;
            });
            if (count === 0) {
                $('#active-filters-label').html('Ready to search');
            } else {
                $('#active-filters-label').html('<strong>' + count + '</strong> filter' + (count > 1 ? 's' : '') + ' applied');
            }
        }
        $(document).on('change keyup', '.filter input, .filter select', function() {
            updateActiveFiltersCount();
        });
        updateActiveFiltersCount();

        // Search button click handler - triggers table reload
        $(document).on('click', '#validation-search-btn', function(e) {
            e.preventDefault();
            // Access the DataTable directly from the DOM element
            var table = $('#validation-table').DataTable();
            if (table) {
                table.draw();
            }
        });

        $('.search-input').on('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                $(this).blur();
                $('#validation-search-btn').trigger('click');
            }
        });

        // Filter totals click handler - update filter counts
        $(document).on('click', '.filter-number', function() {
            $(this).html('<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>').attr('disabled', true);
            $.ajax({
                async: true,
                url: '/operations/validations-report-analysis-totals',
                data: getValidationAnalysisReportRequestData(),
                success: function (response) {
                    $('#reservations-number').text(response.TOTAL_RESERVATIONS).attr('disabled', false);
                    $('#patients-number').text(response.TOTAL_PATIENTS).attr('disabled', false);
                    $('#samples-number').text(response.TOTAL_SAMPLES).attr('disabled', false);
                    $('#tests-number').text(response.TOTAL_TESTS).attr('disabled', false);
                    $('#branches-number').text(response.TOTAL_BRANCH).attr('disabled', false);
                }
            });
        });

        // Filter change handlers - set flag but don't trigger search
        $(document).on('change', "#sample-mobile, #sample-identification, #sample-name, #reference-id, #validation-reservation-date-from, #validation-reservation-date-to, #sample-id, #validation-test-id, #processing-hospital-id, #validation-date-from, #validation-batch-id, #validation-run-id, #validation-sendout-id, #validation-analyzer-id, #validation-category-id, #validation-package-id, #validation-ng-code, #validation-date-to, #validation-unit-id, #validation-unit-category-id, #validation-res-no, #validation-org-id, #validation-mrn, #validation-intend-no, #validation-location-id, #validation-only-results, #validation-only-rerun, #validation-only-urgent, #validation-hospital-id, #validation-has-no-result", function(){
            ValidationfilterChanged = true;
        });

        // Hospital change handler with AJAX for loading locations
        $(document).on('change', "#validation-hospital-id", function(){
            $.ajax({
                type: "GET",
                url: "/operations/hospitals/"+$("#validation-hospital-id").val()+"/locations",
            }).done(function(data, textStatus, xhr ) {
                if(data.response) {
                    $("#validation-location-id").empty();
                    $("#validation-location-id").append('<option value="0">Select Location</option>');
                    data.response.forEach(function(element) {
                        $("#validation-location-id").append('<option value="'+element.ID+'">'+element.NAME_EN+'</option>');
                    })
                }else{
                    alert("Please re-login, your session has ended");
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseJSON.errorMessage);
            });
            ValidationfilterChanged = true;
        });

        // Initial group-by state. Runs straight away — the table is created in
        // footer-scripts, which is included before this section — so the
        // columns are hidden before the first draw paints them.
        if ($('#validation-group-by').is(':checked')){
            var table = $('#validation-table').DataTable();
            if (table) {
                table.columns([11, 12, 13, 14]).visible(false);
                table.rowGroup().enable();
            }
        }

        // Group by change handlers
        $(document).on('change', "#validation-group-by, #validation-group-by-test", function(){
            ValidationfilterChanged = true;
            var table = $('#validation-table').DataTable();
            if (table) {
                if($('#validation-group-by').is(':checked')){
                    table.columns([11, 12, 13, 14]).visible(false);
                    table.rowGroup().enable().draw();
                }else if($('#validation-group-by-test').is(':checked')){
                    table.columns([9, 10, 11, 12, 13, 14]).visible(true);
                    table.rowGroup().enable().draw();
                }else {
                    table.columns([3]).visible(true);
                    table.columns([11, 12, 13, 14]).visible(true);
                    table.rowGroup().disable().draw();
                }
            }
        });

        // Export button handler
        $(document).on("click", "#sample-validation-export", function(){
            var table = $('#validation-table').DataTable();
            var data = table.rows().data();
            var samples = [];
            data.each(function (value, index) {
                samples.push(value["ID"]);
            });
            window.open(
                '/operations/validation/export?samples='+samples.join(","),
                '_blank'
            );
            return false;
        });

        // Import results button handler
        $(document).on("click", "#import_results", function () {
            var fd = new FormData();
            var files = $('#import-file')[0].files;

            if(files.length > 0 ){
                $(".alert-danger-import").slideUp( "slow", function() {});
                $('#import_results').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);
                var validateAll = $('#validation-all-samples').is(':checked');

                fd.append('file',files[0]);
                fd.append('validate',validateAll);
                $.ajax({
                    type: "POST",
                    url: "/operations/validation/import",
                    data: fd,
                    contentType: false,
                    processData: false,
                }).done(function(data ) {
                    var table = $('#validation-table').DataTable();
                    table.clear();
                    table.draw();
                    $('#modal-import').modal('hide');
                    $("#import-file").val('');
                    $('#import_results').html('Import Results').attr('disabled', false);

                }).fail(function(jqXHR, textStatus, errorThrown) {
                    $(".alert-danger-import").html(jqXHR.responseJSON.errorMessage.join("<br />"));
                    $(".alert-danger-import").slideDown( "slow", function() {});
                    var table = $('#validation-table').DataTable();
                    table.clear();
                    table.draw();
                    $("#import-file").val('');
                    $('#import_results').html('Import Results').attr('disabled', false);
                });
            }
            return false;
        });

        // Validate all button handler
        $(document).on("click", "#validate-all", function(){
            var table = $('#validation-table').DataTable();
            var rows_selected = table.column(0).checkboxes.selected();
            var sample_ids = rows_selected.join(",");
            table.column(0).checkboxes.deselect();

            var data = {
                sample_ids:sample_ids
            }
            var validate_button = $(this);
            validate_button.html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading').attr('disabled', true);
            $.ajax({
                type: "POST",
                url: "/operations/samples/validate/all",
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify(data),
            }).done(function(data ) {
                // Remove validated rows client-side - status 8 means they won't appear in validation list
                var selectedIds = sample_ids.split(',');
                selectedIds.forEach(function(id) {
                    id = id.trim();
                    var row = table.row(function(idx, rowData, node) {
                        return String(rowData.ID) === id;
                    });
                    if (row.length) {
                        row.remove();
                    }
                });
                table.draw(false); // Redraw without fetching from server
                toastr.success("All Samples validated successfully");
                validate_button.html('Validate All Selected').attr('disabled', false);

            }).fail(function(jqXHR, textStatus, errorThrown) {
                validate_button.html('Validate All Selected').attr('disabled', false);
                if(jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.errorMessage) toastr.error(jqXHR.responseJSON.errorMessage)
                else toastr.error("Internal error encountered")
                table.ajax.reload(null, false); // Reload to get actual server state on failure
            });
            return false;
        });

        // Reset all button handler
        $(document).on("click", "#reset-all", function(){
            var table = $('#validation-table').DataTable();
            var rows_selected = table.column(0).checkboxes.selected();
            var sample_ids = rows_selected.join(",")
            table.column(0).checkboxes.deselect();
            var data = {
                sample_ids:sample_ids
            }
            var reset_button = $(this);
            reset_button.html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading').attr('disabled', true);
            $.ajax({
                type: "POST",
                url: "/operations/samples/reset/all",
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify(data),
            }).done(function(data ) {
                table.ajax.reload(null, false); // Reload data from server to get updated status
                toastr.success("All Samples reset successfully");
                reset_button.html('Rerun All Selected').attr('disabled', false);

            }).fail(function(jqXHR, textStatus, errorThrown) {
                reset_button.html('Rerun All Selected').attr('disabled', false);
                if(jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.errorMessage) toastr.error(jqXHR.responseJSON.errorMessage)
                else toastr.error("Internal error encountered")
                table.ajax.reload(null, false); // Reload to get actual server state on failure
            });
            return false;
        });

        // Modal import hidden handler
        $('#modal-import').on('hidden.bs.modal', function () {
            $(".alert-danger-import").hide();
            $("#validation-all-samples").prop('checked', false);
            $('#import_results').html('Import Results').attr('disabled', false);
        });
    });

    $(document).ready(function() {
        $('#validation-category-id').select2();
        $('#validation-package-id').select2();
    });

    $('#validation-reservation-date-from').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('#validation-reservation-date-from').val(chosen_date.format('YYYY-MM-DD HH:mm')).trigger("change");
        })
        $('#validation-reservation-date-from').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
        });

    $('#validation-reservation-date-to').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('#validation-reservation-date-to').val(chosen_date.format('YYYY-MM-DD HH:mm')).trigger("change");
        })
        $('#validation-reservation-date-to').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
        });
        $('.date-from-receiving-report').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('.date-from-receiving-report').val(chosen_date.format('YYYY-MM-DD HH:mm')).trigger("change");
        })
        // Listen for the apply button click
        $('.date-from-receiving-report').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
        });
        $('.date-to-receiving-report').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('.date-to-receiving-report').val(chosen_date.format('YYYY-MM-DD HH:mm')).trigger("change");
        })
        $('.date-to-receiving-report').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
        });

        // ---------- Batch upload results modal ----------
        (function () {
            var batchFiles = []; // staged File objects
            var ALLOWED_EXT = ['pdf', 'mp4'];
            var MAX_FILES = 10;

            function escapeHtml(s) {
                return $('<div>').text(s == null ? '' : String(s)).html();
            }
            function humanSize(bytes) {
                if (!bytes && bytes !== 0) return '';
                var u = ['B','KB','MB','GB'], i = 0;
                while (bytes >= 1024 && i < u.length - 1) { bytes /= 1024; i++; }
                return bytes.toFixed(bytes >= 10 || i === 0 ? 0 : 1) + ' ' + u[i];
            }
            function extOf(name) { return (name.split('.').pop() || '').toLowerCase(); }
            function iconClass(ext) {
                if (ext === 'pdf') return 'pdf';
                if (ext === 'mp4') return 'mp4';
                return 'other';
            }
            function iconGlyph(ext) {
                if (ext === 'pdf') return 'fa-file-pdf';
                if (ext === 'mp4') return 'fa-file-video';
                return 'fa-file';
            }

            function renderList() {
                var $list = $('#batch-upload-results-list').empty();
                var totalSize = 0;
                batchFiles.forEach(function (f, idx) {
                    totalSize += f.size || 0;
                    var ext = extOf(f.name);
                    var status = f._status || 'pending';
                    var statusLabel = status === 'success' ? 'Uploaded'
                                    : status === 'error'   ? 'Failed'
                                    : 'Ready';
                    var rowClass = status === 'success' ? 'is-success'
                                : status === 'error'   ? 'is-error' : '';
                    var sampleTag = f._sampleId ? '<span class="sample-tag">Test ' + escapeHtml(f._sampleId) + '</span>' : '';
                    var subMsg   = f._message ? escapeHtml(f._message) : (humanSize(f.size) + ' &middot; ' + ext.toUpperCase());
                    var removeBtn = status === 'pending'
                        ? '<button type="button" class="bf-remove" data-idx="' + idx + '" title="Remove"><i class="fa fa-times"></i></button>'
                        : '';
                    $list.append(
                        '<div class="batch-file-row ' + rowClass + '">' +
                            '<div class="bf-icon ' + iconClass(ext) + '"><i class="fa ' + iconGlyph(ext) + '"></i></div>' +
                            '<div class="bf-meta">' +
                                '<div class="bf-name">' + escapeHtml(f.name) + sampleTag + '</div>' +
                                '<div class="bf-sub">' + subMsg + '</div>' +
                            '</div>' +
                            '<span class="bf-status ' + status + '">' + statusLabel + '</span>' +
                            removeBtn +
                        '</div>'
                    );
                });
                $('#batch-file-count').text(batchFiles.length);
                $('#batch-file-total-size').text(batchFiles.length ? '(' + humanSize(totalSize) + ')' : '');
                var anyPending = batchFiles.some(function (f) { return (f._status || 'pending') === 'pending'; });
                $('#batch-upload-attachment-submit').prop('disabled', !(batchFiles.length > 0 && anyPending));
            }

            function addFiles(fileList) {
                var $alert = $('.batch-upload-alert-danger').hide().empty();
                var rejected = [];
                Array.prototype.forEach.call(fileList, function (f) {
                    if (batchFiles.length >= MAX_FILES) { rejected.push(f.name + ' (max ' + MAX_FILES + ' reached)'); return; }
                    var ext = extOf(f.name);
                    if (ALLOWED_EXT.indexOf(ext) === -1) { rejected.push(f.name + ' (unsupported)'); return; }
                    var dup = batchFiles.some(function (g) { return g.name === f.name && g.size === f.size; });
                    if (dup) { rejected.push(f.name + ' (duplicate)'); return; }
                    batchFiles.push(f);
                });
                if (rejected.length) {
                    $alert.html('<b>Skipped:</b> ' + escapeHtml(rejected.join(', '))).show();
                }
                renderList();
            }

            function resetModal() {
                batchFiles = [];
                $('#batch-upload-files').val('');
                $('#is_attach_normal_batch').prop('checked', false);
                $('.batch-upload-alert-danger').hide().empty();
                $('#batch-upload-attachment-submit')
                    .html('<i class="fa fa-cloud-upload-alt mr-2"></i>Upload Attachments')
                    .prop('disabled', true);
                renderList();
            }

            $('#validation-batch-upload-btn').on('click', function () {
                resetModal();
                $('#modal-batch-upload-results').modal('show');
            });

            // Open file picker when clicking the dropzone (delegated, in case of re-render)
            $(document).on('click', '#batch-dropzone, #batch-dropzone .dz-browse', function (e) {
                e.preventDefault();
                document.getElementById('batch-upload-files').click();
            });
            // Keyboard accessibility on the dropzone
            $(document).on('keydown', '#batch-dropzone', function (e) {
                if (e.key === 'Enter' || e.key === ' ' || e.keyCode === 13 || e.keyCode === 32) {
                    e.preventDefault();
                    document.getElementById('batch-upload-files').click();
                }
            });

            // File input change (delegated so it survives modal re-shows)
            $(document).on('change', '#batch-upload-files', function () {
                var files = this.files;
                if (files && files.length) addFiles(files);
                this.value = '';
            });

            // Drag & drop on the dropzone
            $(document).on('dragover dragenter', '#batch-dropzone', function (e) {
                e.preventDefault(); e.stopPropagation();
                $(this).addClass('is-dragover');
            });
            $(document).on('dragleave dragend', '#batch-dropzone', function (e) {
                e.preventDefault(); e.stopPropagation();
                $(this).removeClass('is-dragover');
            });
            $(document).on('drop', '#batch-dropzone', function (e) {
                e.preventDefault(); e.stopPropagation();
                $(this).removeClass('is-dragover');
                var dt = e.originalEvent.dataTransfer;
                if (dt && dt.files && dt.files.length) addFiles(dt.files);
            });
            // Prevent the browser from navigating away if a file is dropped outside the dropzone
            $(document).on('dragover drop', function (e) {
                if (!$(e.target).closest('#batch-dropzone').length) {
                    e.preventDefault();
                }
            });

            // Remove a staged file
            $('#batch-upload-results-list').on('click', '.bf-remove', function () {
                var idx = parseInt($(this).attr('data-idx'), 10);
                if (!isNaN(idx)) { batchFiles.splice(idx, 1); renderList(); }
            });

            $('#batch-upload-attachment-submit').on('click', function (e) {
                e.preventDefault();
                var $btn = $(this);
                var $alert = $('.batch-upload-alert-danger').hide().empty();
                var pending = batchFiles.filter(function (f) { return (f._status || 'pending') === 'pending'; });
                if (!pending.length) { $alert.html('Please select at least one file.').show(); return; }

                var formData = new FormData();
                pending.forEach(function (f) { formData.append('files[]', f); });
                formData.append('is_normal', $('#is_attach_normal_batch').is(':checked') ? 1 : 0);

                $btn.html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Uploading...').prop('disabled', true);

                $.ajax({
                    type: 'POST',
                    url: '/operations/data/packages/batch-results-attachment',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false
                }).done(function (data) {
                    var rows = (data && data.response && data.response.results) ? data.response.results : [];
                    var anySuccess = false;
                    rows.forEach(function (r) {
                        var target = batchFiles.find(function (f) { return f.name === r.filename && (f._status || 'pending') === 'pending'; });
                        if (target) {
                            target._status   = r.success ? 'success' : 'error';
                            target._sampleId = r.sampleId || null;
                            target._message  = r.message || '';
                            anySuccess = anySuccess || r.success;
                        }
                    });
                    renderList();
                    $btn.html('<i class="fa fa-cloud-upload-alt mr-2"></i>Upload Attachments').prop('disabled', true);
                    if (anySuccess) {
                        $('#validation-table').DataTable().draw(false);
                    }
                }).fail(function (jqXHR) {
                    $btn.html('<i class="fa fa-cloud-upload-alt mr-2"></i>Upload Attachments').prop('disabled', false);
                    var msg = (jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.errorMessage) ? jqXHR.responseJSON.errorMessage : 'Upload failed.';
                    $alert.html(msg).show();
                });
            });
        })();
</script>

@endsection