@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;
        }
        .dtrg-level-1 td{
            border-right:none !important;
            border-left:none !important;
        }
        .item {
            background-color: rgb(18 221 24 / 13%) !important;
        }

        #patient360-table{
            font-size: 14px;
        }
        #patient360-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{
            max-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);
        }
        .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;
        }
        div.dataTables_wrapper div.dataTables_filter{
            display:inline;
            float:right;
        }
        #patient360-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%);
        }
        #patient360-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;
        }
        .contain-filters > div {
            display: flex;
        }

        /* 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;
        }

        /* 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: #fde7ea; 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(var(--blazma-primary-rgb),0.25);
            transition: all 0.2s ease;
        }
        .batch-submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--blazma-primary-rgb),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; }
        .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;
        }
    </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;">Patient 360</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="patient360-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="filter360-number"><i class="fa fa-eye"></i></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="patient360-res-no"  />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" id="patient360-status-id-report" >
                                                        <option value="">Reservation Status</option>
                                                        @foreach($statuses as $status)
                                                            <option value="{{$status->ORDER_STATUS_ID}}">{{$status->LAB_DESC_EN}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" name="reservation_type" id="reservation_type">
                                                        <option value="">Reservation Type</option>
                                                        <option value="1">Normal</option>
                                                        <option value="2">Home Visit</option>
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="patient360-reservation-date-from" class="form-control search-input" type="text" name="reservation_date_from" value="{{$start_date}}" placeholder="Date From">
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="patient360-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="patient360-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="filter360-number"><i class="fa fa-eye"></i></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="patient360-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="filter360-number"><i class="fa fa-eye"></i></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 class="form-control report-sample-status-id search-input" multiple id="report-sample-status-id" >
                                                        <option value="">Sample Status</option>
                                                        <option value="-1">Rejected</option>
                                                        <option value="1">Order Confirmed</option>
                                                        <option value="13">Pre Analytical</option>
                                                        <option value="2">Sample Collected</option>
                                                        <option value="6">In Transit</option>
                                                        <option value="7">Dropped off</option>
                                                        <option value="5">Outsourced</option>
                                                        <option value="3">Received</option>
                                                        <option value="4">Ready</option>
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input id="report-date-from" placeholder="Collection Date From" autocomplete="off" class="form-control date-from-reservation-report search-input" type="text">

                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input id="report-date-to" autocomplete="off" placeholder="Collection Date To" class="form-control date-to-reservation-report search-input"  type="text">

                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="patient360-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="patient360-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="filter360-number"><i class="fa fa-eye"></i></span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text"  class="form-control search-input" id="patient360-test-id" placeholder="Test ID" />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" multiple id="report-status-id" name="status[]">
                                                <option value="">Test Status</option>
                                                <option value="-5">Pending</option>
                                                <option value="1">Confirmed</option>
                                                <option value="2">Collected</option>
                                                <option value="13">Pre-analytical</option>
                                                <option value="3">Received</option>
                                                <option value="19">Preformed</option>
                                                <option value="8">Validated</option>
                                                <option value="4">Ready</option>
                                                <option value="-3">Cancelled</option>
                                                <option value=-2"">Refunded</option>
                                                <option value="-1">Rejected</option>
                                            </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" id="patient360-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="patient360-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 id="report-r-date-from" autocomplete="off" class="form-control collect-from-reservation-report search-input" type="text" name="date_from" value="@if(!empty($date_from)){{$date_from}}@endif" placeholder="Result Date From">
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="report-r-date-to" autocomplete="off" class="form-control collect-to-reservation-report search-input" type="text" name="date_from" value="@if(!empty($date_from)){{$date_from}}@endif" placeholder="Result Date To">
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text"  class="form-control search-input" id="report-r-test-word" placeholder="Word of Template" />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  class="form-control search-input" id="patient360-ng-code" placeholder="NG Code" />
                                            </div>
                                        </div>
                                        </div>

                                        <div class="mb-2">
                                        <div class="filter">
                                        <div class="d-flex justify-content-between align-items-center">
                                                <span class="filter-name">Branch</span>
                                                <span id="branches-number" class="filter360-number"><i class="fa fa-eye"></i></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="patient360-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 rhospital_id search-input" id="patient360-collection_branch-id" name="collection_branch">
                                                        <option value="">Collection 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">
                                            <select class="form-control search-input runit_id" id="patient360-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="patient360-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="patient360-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}}</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="report-location-id" name="location">
                                                        <option value="">Location</option>
                                                        @if(count($locations) > 0)
                                                            @foreach($locations as $location)
                                                                <option @if(!empty(session('location_id')) && session('location_id') == $location->ID) selected @endif value="{{$location->ID}}">{{$location->NAME_EN}}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <select required class="form-control search-input" id="patient360-run-id">
                                                    <option value="">Job No</option>
                                                    @foreach($runs as $run)
                                                        <option value="{{$run->ID}}">{{$run->RUN_NO}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        </div>


                                    </div>
                                    <div class="card-footer d-flex justify-content-end mt-3" id="patient360-filters-footer">
                                        <div class="col-lg-12 text-right d-flex justify-content-end align-items-center">

                                        <input type="checkbox" class="rounded-checkbox search-input" value="is_confirmation" id="report-is-confirmation">
                                        <label for="report-is-confirmation" style="margin-right: 10px;font-weight: 300;"> IS Confirmation </label>

                                        <input type="checkbox" class="rounded-checkbox search-input" value="is_rerun" id="report-is-rerun">
                                        <label for="report-is-rerun" style="margin-right: 10px;font-weight: 300;"> Is Rerun </label>

                                        <input type="checkbox" class="rounded-checkbox search-input" value="is_critical" id="report-is-critical">
                                        <label for="report-is-critical" style="margin-right: 10px;font-weight: 300;"> IS Critical </label>

                                        <input type="checkbox" class="rounded-checkbox search-input" value="is_urgent_stat" id="report-is-urgent-stat">
                                        <label for="report-is-urgent-stat" style="margin-right: 10px;font-weight: 300;"> IS Urgent </label>

                                        <input type="checkbox" class="rounded-checkbox search-input" value="is_not_normal" id="report-is-not-normal">
                                        <label for="report-is-not-normal" style="margin-right: 10px;font-weight: 300;"> Is Not Normal </label>

                                        <input type="checkbox" class="rounded-checkbox search-input" value="is_post_pone" id="report-is-post-pone">
                                        <label for="report-is-post-pone" style="margin-right: 10px;font-weight: 300;"> Is Post Pone</label>
                                        <b style="margin-right: 15px;">/</b>

                                        <input type="checkbox" class="rounded-checkbox search-input" value="is_on_hold" id="report-is-on-hold">
                                        <label for="report-is-on-hold" style="margin-right: 10px;font-weight: 300;"> Is On Hold</label>
                                        <b style="margin-right: 15px;">/</b>

                                        <input type="checkbox" class="rounded-checkbox search-input" value="has_no_result" id="report-has-no-result">
                                        <label for="report-has-no-result" style="margin-right: 10px;font-weight: 300;"> Test with no results</label>
                                        <b style="margin-right: 15px;">/</b>

                                        <b style="margin-right: 10px">TAT : </b>
                                        <input type="checkbox" class="rounded-checkbox search-input" name="exceed_tat" value="exceed_tat" id="report-exceed-tat">
                                        <label for="report-exceed-tat" style="margin-right: 10px;font-weight: 300;"> Delay</label>

                                        <input type="checkbox" class="rounded-checkbox search-input" value="on_time" id="report-on-time">
                                        <label for="report-on-time" style="margin-right: 10px;font-weight: 300;"> On Time</label>

                                        <input type="checkbox" class="rounded-checkbox search-input" name="refresh" value="refresh" id="refresh" checked>
                                        <label for="refresh" style="margin-right: 10px;font-weight: 300;"> Refresh Automatically</label>

                                    </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="patient360-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="patient360-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="patient360-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <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>Flags</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                    <th>Actions</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-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>
                    {{-- Audit trail of the Addendum / Amended issued on this result.
                         Filled by getPackageTemplateComponents(); stays hidden when the
                         result has never been revised. --}}
                    <div id="template-revision-log" class="row" style="display:none;">
                        <div class="col-12">
                            <hr style="margin-bottom:10px;">
                            <p style="margin-bottom:6px;"><b>Addendum / Amended History</b></p>
                            <div class="table-responsive">
                                <table class="table table-sm table-bordered" style="font-size:13px;margin-bottom:0;">
                                    <thead>
                                    <tr>
                                        <th style="width:60px;">#</th>
                                        <th style="width:130px;">Type</th>
                                        <th>Created By</th>
                                        <th style="width:180px;">Date</th>
                                        <th style="width:40px;"></th>
                                    </tr>
                                    </thead>
                                    <tbody id="template-revision-log-body"></tbody>
                                </table>
                            </div>
                        </div>
                    </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">
                            {{-- Shown only when a ready (status 4) result is open read-only.
                                 Clicking one clones the result into a new revision and turns
                                 this same window editable, so Save then applies the edit. --}}
                            <button type="button" id="open-template-addendum" revision-type="addendum"
                                    style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;display:none;"
                                    class="btn btn-warning template-revision">Addendum</button>
                            <button type="button" id="open-template-amended" revision-type="amended"
                                    style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;display:none;"
                                    class="btn btn-warning template-revision">Amended</button>
                            <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>

    <!-- 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>

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

                        @if(in_array('add_processing_validation_comment', session('permissions', []) ?? array()) || in_array('add_processing_approval_log_comment', session('permissions', []) ?? array()))
                        <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>
                                @permission('add_processing_validation_comment')
                                <button id="reset-sample" type="button" class="btn btn-warning mr-3" style="color:white;padding-right:15px"><i class="fa fa-lg fa-arrow-circle-left" ></i> Rerun Sample</button>
                                @endpermission
                                @permission('add_processing_approval_log_comment')
                                <button id="return-sample-comment" type="button" class="btn btn-info"><i
                                    class="fa fa-lg fa-arrow-circle-left"></i> Return Sample</button>
                                @endpermission
                            </div>

                        </div>
                        @endif
                    </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="patient360-all-samples" value="reset" id="patient360-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 Excel File</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>
                        <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" id="import_nbs_results" type="button" class="btn btn-success">Import</button>
                    </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>

<!-- /.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">
                <input type="hidden" id="linked-results-package-id" value="" />
                <input type="hidden" id="linked-results-action" value="" />
                <input type="hidden" id="linked-results-context" value="" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="linked-results-action-btn" class="prime-btn" style="display:none;min-width:150px;"></button>
            </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="modal-lg-reject">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Sample Rejection</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="reject-patient360-sample-form" method="post" action="/operations/patient360/samples/" enctype="multipart/form-data">
                <div class="modal-body">
                    <label>Reject Reason</label>
                    <select required id="reject-reason" name="reject-reason" class="form-control">
                        <option value="">Select Rejection Reason</option>
                        @if(!empty($rejection_reasons))
                        @foreach($rejection_reasons as $rejection_reason)
                        <option value="{{$rejection_reason->ID}}">{{$rejection_reason->NAME_EN}}</option>
                        @endforeach
                        @endif
                    </select>
                    <div class="mt-3">
                        <label for="patient360-reject-file">Attachment <small class="text-muted">(optional)</small></label>
                        <input type="file" class="form-control-file" id="patient360-reject-file" name="reject-file"
                               accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx">
                        <small class="form-text text-muted">PDF, image, Word or Excel — up to 10 MB.</small>
                    </div>
                    <div class="custom-control custom-switch mt-3">
                        <input type="checkbox" class="custom-control-input" name="send-sms" value="reset"
                            id="send-sms-checkbox">
                        <label class="custom-control-label" for="send-sms-checkbox"
                            style="margin-right: 10px;font-weight: 300;"> Notify Patient via SMS</label>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="patient360-reject-sample-btn" class="btn btn-danger">Reject Sample</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<div class="modal fade" id="modal-view-result">
        <div class="modal-dialog modal-lg">
            <form>
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">View 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-patient360"></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-patient360"></div>
                        <div id="results-options-patient360" class="row">
                        </div>
                    </div>
                    <div class="row">
                            <div class="modal-footer justify-content-between">
                            </div>
                        </div>
                </div>
    </form>
</div>
</div>
    <div class="modal fade" id="modal-lg-release">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Release Report</h4>
                    <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">
                            <p>Would you like to send all results or only this test ?</p>
                        </div>
                    </div>
                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <div class="col text-right">
                        <a id="patient360-send-all-result" test-id="" style="width:130px; display:inline;"
                            class="btn btn-info release-report mr-3" target="_blank" href="#">
                            Send All Result
                        </a>

                        <a single-test="1" id="patient360-only-this-result" test-id=""
                            style="display:inline;"
                            class="btn btn-secondary release-report single-test" target="_blank" href="#">
                            Only this test
                        </a>
                    </div>

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </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-lg-split">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Sample Test Split</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="row">
                    <div class="col">
                        <table id="sample-split-test-table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th id="select_all"></th>
                                    <th>Test ID</th>
                                    <th>Name</th>
                                    <th>Status</th>

                                </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button style="border-radius: 20px;padding:14px;font-size:15px;min-width:150px;" type="button"
                    class="btn btn-default" data-dismiss="modal" id="items-cancel">Close</button>
                <div class="text-right">
                    <button id="split-all-tests-patient360" style="max-width:170px" class="form-control btn btn-info"> Split
                        Selected</button>
                </div>
            </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-between">
                                @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>
@include('operations.layout.modals.confirm_result')
@endsection

@section('footer-scripts')
<script>
    $(document).ready(function() {
        // Filters toggle
        $(document).on('click', '.filters-toggle-btn', function() {
            var $btn     = $(this);
            var $icon    = $btn.find('i');
            var $filters = $('#patient360-filters-row');
            var $footerFilters = $('#patient360-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);
            }
        });
    });
    $('#patient360-category-id').select2();
    $('#patient360-package-id').select2();
    $('.report-sample-status-id').select2({
            placeholder: "Sample Status",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });
    $('#report-status-id').select2({
            placeholder: "Test Status",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });
    $('.collect-to-reservation-report').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('.collect-to-reservation-report').val(chosen_date.format('YYYY-MM-DD HH:mm'));
        })
        // $('.collect-to-reservation-report').on('apply.daterangepicker', function(ev, picker) {
        //     $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
        // });
        $('.collect-from-reservation-report').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('.collect-from-reservation-report').val(chosen_date.format('YYYY-MM-DD HH:mm'));
        })
        // $('.collect-from-reservation-report').on('apply.daterangepicker', function(ev, picker) {
        //     $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
        // });

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

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

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

        $('#patient360-reservation-date-to').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        }, function(chosen_date) {
            $('#patient360-reservation-date-to').val(chosen_date.format('YYYY-MM-DD HH:mm'));
        })

        $('#patient360-reservation-date-to').on('apply.daterangepicker', function(ev, picker) {
            if (!$(this).val()) {
                $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm')).trigger("change");
            }
        });
        // $('#patient360-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");
        // });

        // Patient 360 Filter - Search Button Handler
        function getPatient360AnalysisReportRequestData() {
            return {
                        collection_date_from : $('#report-date-from').val(),
                        collection_date_to : $('#report-date-to').val(),
                        date_from : $('#patient360-date-from').val(),
                        date_to : $('#patient360-date-to').val(),
                        result_from : $('#report-r-date-from').val(),
                        result_to : $('#report-r-date-to').val(),
                        result_word_template : $('#report-r-test-word').val(),
                        hospital_id : $('#patient360-hospital-id').val(),
                        reservation_status_id : $('#patient360-status-id-report').val(),
                        only_results : $('#patient360-only-results').is(':checked'),
                        only_urgent : $('#patient360-only-urgent').is(':checked'),
                        group_by_reservation : $('#patient360-group-by').is(':checked'),
                        group_by_test : $('#patient360-group-by-test').is(':checked'),
                        location : $('#patient360-location-id').val(),
                        batch_id : $('#patient360-batch-id').val(),
                        run_id : $('#patient360-run-id').val(),
                        sendout_id : $('#patient360-sendout-id').val(),
                        analyzer_id : $('#patient360-analyzer-id').val(),
                        test_category : $('#patient360-category-id').val(),
                        package_id : $('#patient360-package-id').val(),
                        unit_id : $('#patient360-unit-id').val(),
                    unit_category_id : $('#patient360-unit-category-id').val(),
                        collection_branch_id : $('#patient360-collection_branch-id').val(),
                        org_id : $('#patient360-org-id').val(),
                        res_no : $('#patient360-res-no').val(),
                        mrn : $('#patient360-mrn').val(),
                        intend : $('#patient360-intend-no').val(),
                        reservation_date_from : $('#patient360-reservation-date-from').val(),
                        reservation_date_to : $('#patient360-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(),
                        patient360_test_id : $('#patient360-test-id').val(),
                        processing_hospital_id : $('#processing-hospital-id').val(),
                        reservation_type : $('#reservation_type').val(),
                        sample_status_id : $('#report-sample-status-id').val(),
                        location : $('#report-location-id').val(),
                        exceed_tat : $('#report-exceed-tat').is(':checked'),
                        is_post_pone : $('#report-is-post-pone').is(':checked'),
                        is_on_hold : $('#report-is-on-hold').is(':checked'),
                        has_no_result : $('#report-has-no-result').is(':checked'),
                        is_urgent_stat : $('#report-is-urgent-stat').is(':checked'),
                        is_critical : $('#report-is-critical').is(':checked'),
                        is_confirmation : $('#report-is-confirmation').is(':checked'),
                        is_rerun : $('#report-is-rerun').is(':checked'),
                        on_time : $('#report-on-time').is(':checked'),
                        status_id : $('#report-status-id').val()
            };
        }

        // 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', '#patient360-search-btn', function(e) {
            e.preventDefault();
            $('.filter360-number').html("<i class='fa fa-eye'></i>");
            // Access the DataTable directly from the DOM element
            var table = $('#patient360-table').DataTable();
            if (table) {
                table.draw();
            }
        });

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

        // Filter totals click handler
        $(document).on('click', '.filter360-number', function() {
            $('.filter360-number').html('<span class="spinner-border spinner-border-sm"  aria-hidden="true"></span>').attr('disabled', true);
            $.ajax({
                async:true,
                url: '/operations/patient360-report-analysis-totals',
                data: getPatient360AnalysisReportRequestData(),
                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)
                }
            });
        });

        // =====================================================
        // Patient360 Functions moved from footer-scripts.blade.php
        // =====================================================

        Patient360filterChanged = false;

        function getFormattedAge(data){
            if(!data) data = '';
           data = data.split("-");
           if(data && data[2] && data[1] && data[0]){
           var age = calculateAge(data[2],data[1],data[0])

           if(age){
                return age.year+'Y - '+age.month+'M - '+age.day+'D'
            }else{
                ''
            }
        }else{
            return ''
        }
    }

    function getPatient360SampleAction(row){
        var dropdown_button = ''
            if(row["TEST_CATEGORY"] == 10 && (row['SAMPLE_STATUS_ID'] == 3 || row['SAMPLE_STATUS_ID'] == 12)) {

            dropdown_button = `<div class="dropdown">
                                <button class="actions-btn dropdown-toggle" type="button" id="testdropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Actions</button>`;

                                dropdown_button += `<div class="dropdown-menu" aria-labelledby="testdropdownMenuButton">`
                                if(!row['REJECT_REASON_ID']) dropdown_button += `@permission('reject_sample')<button test-id="${row['SAMPLE_ID']}" class="dropdown-item open-reject-modal"> Reject Sample </button>@endpermission`
                                dropdown_button += `@permission('reset_sample')<button id="reset-sample-patient360" class="dropdown-item" test-id="${row['SAMPLE_ID']}" > Reset Sample </button>@endpermission`
                                dropdown_button += `@permission('split_sample')<button type="button" id="split-sample" sample-id="${row['SAMPLE_ID']}" class="dropdown-item"><i class="fa fa-table mr-1"></i> Split Sample</button>@endpermission`
            dropdown_button +=  ` </div></div>`;
        }
        return dropdown_button
    }

    function getPatient360Action(data,row,isGroup=false){
        var button = ''
        let disabledClass = "";
        let tooltipAttr = "";
        if (row["CONFIRM_RESULT_ID"] && !row['CONFIRMATION_BY']) {

            disabledClass = "disabled-btn";
            tooltipAttr = `title="Waiting Confirmation Result"`;
        }

        switch(String(row['LAB_ORDER_STATUS_ID'])) {
            case '2':
                if(isGroup){
                    button += `<div class="btn-group">
                    @permission('receive_sample')<button type="button" id="receive-patient360" class="receive-patient360 prime-btn" sample-id="${data}" >Receive</button>@endpermission`;
                    button +=  `</div>`;
                }
                break;

            case '3':
                if(!isGroup){

                button += `<div class="btn-group" ${tooltipAttr}>
                    @permission('validate_processing_validation')<button type="button" id="validate-test-${data}" class="validate-patient360 prime-btn ${disabledClass}" test-id="${data}" >Validate</button>@endpermission`;
                button +=  `</div>`;

                }
                break;
            case '12':
                if(!isGroup){
                    button += `<div class="btn-group" ${tooltipAttr}>
                    @permission('validate_processing_validation')<button type="button" id="validate-test-${data}" class="validate-patient360 prime-btn ${disabledClass}" test-id="${data}" >Validate</button>@endpermission`;
                    button +=  `</div>`;
                }
                break;
            case '19':
                if(!isGroup){
                    button += `<div class="btn-group" ${tooltipAttr}>
                    @permission('validate_processing_validation')<button type="button" id="validate-test-${data}" class="validate-patient360 prime-btn ${disabledClass}" test-id="${data}" >Validate</button>@endpermission`;
                    button +=  `</div>`;
                }
                break;
            case '8':
                if(!isGroup){
                button += `<div class="btn-group" ${tooltipAttr}>
                        @permission('approve_processing_approval') <button type="button" id="approve-test-${data}" class="approve-patient360 prime-btn ${disabledClass}"  test-id="${data}" >Approve</button> @endpermission </div>`;
                        return button;
                }
                break;
            default:
            }
        return button;
    }

    function canEditPatient360(permissions,row,type = null){
        let canEdit = false
        let defaultPermissions = @json(session('permissions', []));
        const contains = permissions.some(element => {
            return defaultPermissions.includes(element);
        });
        if(contains){
            switch(String(row['LAB_ORDER_STATUS_ID'])) {
                case '3':
                case '12':
                case '18':
                case '19':
                if(type == 'result') return defaultPermissions.includes("add_processing_validation_result");
                if(type == 'unit') return defaultPermissions.includes("add_processing_validation_unit");
                if(type == 'min') return defaultPermissions.includes("add_processing_validation_min");
                if(type == 'max') return defaultPermissions.includes("add_processing_validation_max");
                if(type == 'comment') return defaultPermissions.includes("view_processing_validation_comment");
                canEdit =  true
                break;
            case '8':
                if(type == 'result') return defaultPermissions.includes("add_processing_approval_result");
                if(type == 'unit') return defaultPermissions.includes("add_processing_approval_unit");
                if(type == 'min') return defaultPermissions.includes("add_processing_approval_min");
                if(type == 'max') return defaultPermissions.includes("add_processing_approval_max");
                if(type == 'comment') return defaultPermissions.includes("view_processing_approval_log_comment");
                canEdit =  true
                break;
            case '4':
                if(type == 'comment') return defaultPermissions.includes("view_processing_approval_log_comment");
                canEdit =  false
                break;
            case '-1':
                if(type == 'comment') return defaultPermissions.includes("view_processing_approval_log_comment");
                canEdit =  false
                break;
            default:
                canEdit =  false
            break;
            }
        }
        return canEdit;
    }

    function drawCallbackPatient360() {
        $(".xedit-result").editable({
            disabled:false,
            type: 'number',
            step: 'any',
            url: "/operations/sample/result",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else if (response.status === 422) {
                    toastr.warning('Test result are outside the accepted range for the formula test, so the formula could not be calculated.');
                    $('#patient360-table').DataTable().ajax.reload(null, false)
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
            success:function (response){
                if(response.data)
                {
                    for (const [key, value] of Object.entries(response.data)) {
                        let element = $("td").find(`[data-pk='${key}']`);
                        if(element.length>0){
                            let parent = element.parent().parent();
                            parent.addClass('item')
                            let result=parent.find('.xedit-result')
                            result.text(value)
                            toastr.success("Sample ID -"+key+"- Calculated Auto successfully");
                        }
                    }
                    $('#patient360-table').DataTable().ajax.reload(null, false)
                }

                if(response.test_id){
                    $.ajax({
                        type: "POST",
                        url: "/operations/flag/"+response.test_id+"/show",
                        contentType: "application/json; charset=utf-8",
                    }).done(function(data ) {
                        if (data.response) {
                            let flagElement = $("td").find(`[id='flag-${response.test_id}']`);
                            let parentFlag = flagElement.parent().parent();
                            let resultFlag=parentFlag.find(`[id='flag-${response.test_id}']`)
                            resultFlag.html('<span  id="flag-'+response.test_id+'">'+data.response+' </span>');
                        }
                    }).fail(function(jqXHR, textStatus, errorThrown) {
                        return false
                    });

                    let element = $("td").find(`[data-pk='${response.test_id}']`);
                    let parentElement = element.parent().parent();
                    parent = parentElement.find("td:eq(3) span");
                    parentTd = parentElement.find("td:eq(3)");
                    updateRowData(parentElement,response.test_id)

                    if(response.is_normal == 1){
                        parent.css("color","green")
                        parentTd.css("color","green")
                    }
                    else if(response.is_normal == null){
                        parent.css("color","black")
                        parentTd.css("color","black")
                    }
                    else if(response.is_normal == 0){
                        parent.css("color","red")
                        parentTd.css("color","red")
                    }
                }

                if(response.is_impossible_result){
                    toastr.error('Impossible result value for this test');
                }
                else if(response.is_critical_result && response.test_id){
                    toastr.error('Critical result value');
                    $("#critical-sample-id").empty();
                    $("#critical-sample-id").append(`<input type="hidden" id="criticalSampleId" class="form-control" type="text" value="${response.test_id}" />`);
                    $('#critical-result-value').modal('show');
                }
            },

        });

        $(".reset-patient360-sample").on("click",function(e){
            e.preventDefault();
            let sampleId = $(this).attr("sample-id");
            $.ajax({
                type: "POST",
                url: "/operations/samples/"+sampleId+"/reset-to-received",
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                if (data.response) {
                    toastr.success("Sample Reset Successfully");
                    let element = $("td").find(`[sample-id='${sampleId}']`);
                    let parentElement = element.parent().parent();
                    updateRowData(parentElement,sampleId)
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $(".alert-danger-validate").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-validate").slideDown( "fast", function() {});
                setTimeout(() => {
                    $(".alert-danger-validate").hide();
                }, 3000);
                return false
            });
        });

        function getCriticalPatientInfo(test_id) {
            $.ajax({
                type: "GET",
                url: `/operations/validation/${test_id}/result/critical/patient/info`,
            }).done(function(data, textStatus, xhr ) {
                if(data) {
                    $('#patient-details').html(data)
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseJSON.errorMessage);
            });
        }

        $('#critical-result-value').on('shown.bs.modal', function () {
            var test_id = $('#criticalSampleId').val();
            getCriticalPatientInfo(test_id)
        })

        $(".preview-report").on("click",function(){
            let identification = $(this).attr("identification");
            let order_id = $(this).attr("order-id");
            let has_template = $(this).attr("has-template");

            if(has_template==1){
                let sample_id = $(this).attr("sample-id");
                window.open('/orders/'+order_id+'/preview/pdf/template/'+identification+'?sample_id='+sample_id);
                return false;
            }else {
                    window.open('/operations/previews/'+order_id+'/normal/'+identification);
                return false;
            }

        });

        $(".xedit-symbol-result").editable({
            type: 'select',
            source: [
                {value: null, text: '='},
                {value: '>', text: ">"},
                {value: '<', text: "<"},
                {value: '≥', text: "≥"},
                {value: '≤', text: "≤"},
            ],
            url: "/operations/validation/result-symbol",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
            success:function (response){
                if(response.test_id){
                    let element = $("td").find(`[data-pk='${response.test_id}']`);
                    parent = element.parent().parent().find("td:eq(3) span");
                    parentTd = element.parent().parent().find("td:eq(3)");
                    if(response.is_normal == 1){
                        parent.css("color","green")
                        parentTd.css("color","green")
                    }else if(response.is_normal == 0){
                        parent.css("color","red")
                        parentTd.css("color","red")
                    }
                }
            }
        });
        $(".xedit-result-pcr").editable({
            type: 'select',
            source: [
                {value: 1, text: "Negative"},
                {value: 2, text: "Positive"}
            ],
            url: "/operations/validation/result",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            }
        });

        $(".xedit-ic").editable({
            type: 'number',
            step: 'any',
            url: "/operations/sample/ic",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
        });

        $('.good-postive').editable({
            type: 'select',
            url: "/operations/sample/result",
            success:function (response){
                if(response.test_id){
                    let element = $("td").find(`[data-pk='${response.test_id}']`);
                    parent = element.parent().parent().find("td:eq(3) span");
                    parentTd = element.parent().parent().find("td:eq(3)");
                    if(response.is_normal == 1){
                        parent.css("color","green")
                        parentTd.css("color","green")
                    }else if(response.is_normal == 0){
                        parent.css("color","red")
                        parentTd.css("color","red")
                    }
                }
            },
            source: [
                {value: 1, text: 'Negative'},
                {value: 2, text: 'Positive'},
                {value: 3, text: 'Equivocal'},
            ],
        })

        $('.good-postive-editable').editable({
            type: 'select',
            url: "/operations/sample/result",
            success:function (response){
                if(response.test_id){
                    let element = $("td").find(`[data-pk='${response.test_id}']`);
                    parent = element.parent().parent().find("td:eq(3) span");
                    parentTd = element.parent().parent().find("td:eq(3)");
                    if(response.is_normal == 1){
                        parent.css("color","green")
                        parentTd.css("color","green")
                    }else if(response.is_normal == 0){
                        parent.css("color","red")
                        parentTd.css("color","red")
                    }
                }
            },
            source: function(params) {
                var param1 = $(this).editable().data('param');
                var param2 = $(this).editable().data('nextparam');
                return [{value: 1, text: param1},{value: 2, text: param2}]
            },
        });
        $('.good-postive-equ').editable({
            type: 'select',
            url: "/operations/sample/result",
            success:function (response){
                if(response.test_id){
                    let element = $("td").find(`[data-pk='${response.test_id}']`);
                    parent = element.parent().parent().find("td:eq(3) span");
                    parentTd = element.parent().parent().find("td:eq(3)");
                    if(response.is_normal == 1){
                        parent.css("color","green")
                        parentTd.css("color","green")
                    }else if(response.is_normal == 0){
                        parent.css("color","red")
                        parentTd.css("color","red")
                    }
                }
            },
            source: function(params) {
                var param1 = $(this).editable().data('param');
                var param2 = $(this).editable().data('nextparam');
                var param3 = $(this).editable().data('nextxparam');
                return [{value: 1, text: param1},{value: 2, text: param2},{value: 3, text: param3}]
            },
        })
        $(".xedit-or").editable({
            type: 'number',
            step: 'any',
            url: "/operations/sample/or",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
        });

        $(".xedit-ng").editable({
            type: 'number',
            step: 'any',
            url: "/operations/sample/ng",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
        })

        $(".xedit-eg").editable({
            type: 'number',
            step: 'any',
            url: "/operations/sample/eg",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
        })

        $(".xedit-unit").editable({
            type: 'text',
            step: 'any',
            url: "/operations/sample/unit",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
        })

        $(".xedit-comment").editable({
            type: 'textarea',
            step: 'any',
            url: "/operations/sample/comment",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
        })
        $(".xedit-rd").editable({
            type: 'number',
            step: 'any',
            url: "/operations/sample/rd",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
        })

        $(".xedit-min-normal").editable({
            type: 'number',
            step: 'any',
            url: "/operations/sample/min-normal",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
        })

        $(".xedit-max-normal").editable({
            type: 'number',
            step: 'any',
            url: "/operations/sample/max-normal",
            error: function(response, newValue) {
                if(response.status === 500) {
                    return 'Service unavailable. Please try later.';
                } else {
                    $(".xe-error").remove();
                    var error = $.parseJSON( response.responseText )
                    $(".popover-body").prepend("<span class='xe-error' style='color:red'>"+error+"</span>")
                }
            },
        })
    }

    async function convertKeysAndValuesToString(obj) {
        let newObject = {};
        for (let [key, value] of Object.entries(obj)) {
            newObject[key] = String(value);
            if(key == 'RESULT_SYMBOL' && !value) newObject[key] = '=';
        }
        return newObject;
    }

    function performGroupRender(firstRowData) {
        var node = $('tr[id="' + firstRowData.SAMPLE_ID + '"]');
        if(node){
            let firstLevelGroupContent = `<span class="group mr-2"><a style="color:black" target="_blank" href="/operations/samples/${firstRowData.SAMPLE_ID}">${firstRowData.SAMPLE_ID}</a></span>`;
            let secondLevelGroupContent = `<span class="group mr-2">${firstRowData.UNIT_NAME}</span>`;
            let thirdLevelGroupContent = getPatient360Action(firstRowData.SAMPLE_ID,firstRowData,true)
            let fiveLevelGroupContent = getPatient360SampleAction(firstRowData)
            if(!firstRowData.SAMPLE_ID && firstRowData.ID) thirdLevelGroupContent = getPatient360Action(firstRowData.ID,firstRowData,true)

            let forthLevelGroupContent = `${firstRowData.SAMPLE_STATUS}`;
            let newRow = $(`<tr id="${firstRowData.SAMPLE_ID}" class="dtrg-group dtrg-start dtrg-level-1" />`);
            newRow.append('<td></td>'.repeat(0));
            if(firstRowData.SAMPLE_ID){
                newRow.append(`<td>${firstLevelGroupContent}</td>`);
            }else{
                newRow.append('<td></td>');
            }
            if(firstRowData.UNIT_NAME){
                newRow.append(`<td style="padding:12px 0px!important;">${secondLevelGroupContent}</td>`);
            }else{
                newRow.append('<td></td>');
            }
            newRow.append('<td></td>'.repeat(9));
            if(firstRowData.SAMPLE_STATUS){
                newRow.append(`<td style="padding:12px!important;text-align:center;font-size: 14px;">${forthLevelGroupContent}</td>`);
            }
            else{
                newRow.append('<td></td>');
            }
            if(firstRowData.SAMPLE_ID){
                newRow.append(`<td style="padding:12px!important;text-align:center;">${thirdLevelGroupContent}</td>`);
                newRow.append(`<td style="padding:12px!important;text-align:center;">${fiveLevelGroupContent}</td>`);
            }
            else if(firstRowData.ID){
                newRow.append(`<td style="padding:12px!important;text-align:center;">${thirdLevelGroupContent}</td>`);
                newRow.append('<td></td>');
            }
            else{
                newRow.append('<td></td>');
            }

            node.replaceWith(newRow);
        }
    }

    function updateRowData(parentElement,testId){
        var table = $('#patient360-table').DataTable();
        let dataTableRow = table.row(parentElement);
        $.ajax({
            type: "GET",
            url: `/operations/patient360/${testId}/sample`,
        }).done(async function(data) {
            try {
                let stringData = await convertKeysAndValuesToString(data);
                dataTableRow.data(stringData).invalidate();
                performGroupRender(data);
                drawCallbackPatient360();
            } catch (e) {
                toastr.error("Failed to refresh table data");
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            if(jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.errorMessage){
                toastr.error(jqXHR.responseJSON.errorMessage);
            } else {
                toastr.error("Failed to refresh table data");
            }
        });
     }

     $("body").on("click", ".approve-patient360",function(){
            var test_id = $(this).attr("test-id")
            var approve_button = $(this);
            var hasLR = $('#flag-'+test_id).find("[title='Linked Results']").length > 0;
            if(hasLR){
                $('#linked-results-package-id').val(test_id);
                $('#linked-results-action').val('approve');
                $('#linked-results-context').val('patient360');
                $('#linked-results-action-btn').text('Approve').show();
                getLinkedTestResults(test_id);
                $('#modal-linked-results').modal('show');
                return false;
            }
            approve_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/"+test_id+"/approve",
                contentType: "application/json; charset=utf-8",
            }).done(function(data ) {
                let element = $("td").find(`[test-id='${test_id}']`);
                let parentElement = element.parent().parent();
                updateRowData(parentElement,test_id)
                toastr.success("Sample approved successfully");
            }).fail(function(jqXHR, textStatus, errorThrown) {
                approve_button.html('Approve').attr('disabled', false);
                if(jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.errorMessage){
                    toastr.error(jqXHR.responseJSON.errorMessage)
                    if(jqXHR.responseJSON.errorMessage.includes("Critical and it Should be agreed")){
                        $("#critical-sample-id").empty();
                        $("#critical-sample-id").append(`<input type="hidden" id="criticalSampleId" approval="1" class="form-control" type="text" value="${test_id}" />`);
                        $('#critical-result-value').modal('show');
                    }
                }
                else{
                    toastr.error("Internal error encountered")
                }
            });
            return false;
        });

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

            $('#patient360-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 && typeof Patient360Table !== 'undefined') {
                        Patient360Table.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