@extends('operations.layout.mainlayout')

@section('content')
{{--    @if(session('role') != 4 && session('role') != 3 && session('role') != 7 && session('role') != 9 && session('role') != 18)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display{
            color:black;
        }
        .item {
            background-color: rgb(18 221 24 / 13%) !important;
        }
        table.dataTable tr.dtrg-group td {
            background-color: white;
            border-bottom: 1px solid #e7e7e7 !important;
            font-size:15px;
        }
        #reading-batch-table{
            font-size: 14px;
        }
    </style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Histopathology Reading</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">

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

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

                    <!-- /.card -->
                            <div class="col-12 col-sm-12 col-md-12">
                                <br />
                                <div class="card bg-light">
                                    <div class="card-header text-muted border-bottom-0">
                                    </div>
                                    <form method="get" action="" style="width:100%;">
                                        <div class="card-body pt-0">
                                            <div class="row">
                                                <div class="col-12">


                                                    <div class="row">
                                                        <div class="col-md-4">
                                                            <span class="text-muted text-sm"><b>Received from</b></span>
                                                            <input id="validation-date-from" class="form-control" type="date" name="date_from" value="@if(!empty($date_from)){{$date_from}}@endif" placeholder="Date From">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <span class="text-muted text-sm"><b>Received to</b></span>
                                                            <input id="validation-date-to" class="form-control"  type="date" name="date_to" value="@if(!empty($date_to)){{$date_to}}@endif" placeholder="Date To">
                                                        </div>
                                                            @permission('view_all_medical_complex')
                                                        <div class="col-md-2" >

                                                            <span class="text-muted text-sm"><b>Medical Complex</b></span>
                                                            <select class="form-control rhospital_id" id="validation-hospital-id" name="hospital">
                                                                <option value="">Select Medical Complex</option>
                                                                @foreach($hospitals as $ehospital)
                                                                    <option @if((!empty($hospital) && $hospital == $ehospital->ID) || (!empty(session('role'))  && (empty(session('is_primary') ) && empty(session('is_branch') )) && session('hospital_id') == $ehospital->ID)) selected @endif value="{{$ehospital->ID}}">{{$ehospital->NAME_EN}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">

                                                            <span class="text-muted text-sm"><b>Location</b></span>
                                                            <select class="form-control rhospital_id" id="validation-location-id" name="location">
                                                                <option value="">Select Location</option>
                                                                @if(count($locations) > 0)
                                                                    @foreach($locations as $location)
                                                                        <option value="{{$location->ID}}">{{$location->NAME_EN}}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                        @else   
                                                         <div class="col-md-2">
                                                            <span class="text-muted text-sm"><b>Select Send Out No.</b></span>
                                                            <select required class="form-control" name="validation-sendout-id" id="validation-sendout-id">
                                                                <option value="">Select Send Out</option>
                                                                @foreach($sendouts as $sendout)
                                                                    <option value="{{$sendout->ID}}">{{$sendout->SENDOUT_NO}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <span class="text-muted text-sm"><b>Test Category</b></span>
                                                            <select class="form-control" id="validation-category-id" name="status">
                                                                    <option value="">Select Test Category</option>
                                                                    @foreach($packages as $package)
                                                                            <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                                                        @endforeach
                                                            </select>
                                                        </div>
                                                        @endpermission

                                                    </div>
                                                    <div class="row">
                                                        @permission('pcr_batches')
                                                        <div class="col-md-2">
                                                            <span class="text-muted text-sm"><b>Select Batch No. (PCR Only)</b></span>
                                                            <select required class="form-control" name="validation-batch-id" id="validation-batch-id">
                                                                <option value="">Select Batch</option>
                                                                @foreach($batches as $batch)
                                                                    <option value="{{$batch->ID}}">{{$batch->BATCH_NO}}</option>
                                                                @endforeach
                                                            </select>

                                                        </div>
                                                        <div class="col-md-2">
                                                            <span class="text-muted text-sm"><b>Select Job No.</b></span>
                                                            <select required class="form-control" name="validation-run-id" id="validation-run-id">
                                                                <option value="">Select Job</option>
                                                                @foreach($runs as $run)
                                                                    <option value="{{$run->ID}}">{{$run->RUN_NO}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <span class="text-muted text-sm"><b>Select Send Out No.</b></span>
                                                            <select required class="form-control" name="validation-sendout-id" id="validation-sendout-id">
                                                                <option value="">Select Send Out</option>
                                                                @foreach($sendouts as $sendout)
                                                                    <option value="{{$sendout->ID}}">{{$sendout->SENDOUT_NO}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <span class="text-muted text-sm"><b>Test Category</b></span>
                                                            <select class="form-control" id="validation-category-id" name="status">
                                                                    <option value="">Select Test Category</option>
                                                                    @foreach($packages as $package)
                                                                            <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                                                        @endforeach
                                                            </select>
                                                        </div>
                                                        @endpermission
                                                    </div>


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

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

                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" name="validation-only-urgent" value="urgent" id="validation-only-urgent">
                                                <label class="custom-control-label" for="validation-only-urgent" style="margin-right: 10px;font-weight: 300;"> Only Urgent</label>
                                            </div>
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" name="validation-group-by" value="urgent" id="validation-group-by">
                                                <label class="custom-control-label" for="validation-group-by" style="margin-right: 10px;font-weight: 300;"> Group by Patient</label>
                                            </div>
                                        </div>--}}
                                            <div class="text-right">
                                            @permission('download_processing_validation')
                                            <a id="sample-validation-export"  class="btn btn-sm btn-success" style="color:#fff !important">
                                                <i class="fas fa-download"></i> Download Excel
                                            </a>
                                                @endpermission
                                        </div>
                                    </div>
                                </div>
                            </div>


                    <div class="card">
                    <div class="card-body">
                    <table id="reading-batch-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Sample#</th>
                                    <th>Test ID</th>
                                    <th>Test Type</th>
                                    <th style="min-width:100px">Result</th>
                                    <th>Unit</th>
                                    <th>Patient</th>
                                    <th>Identification</th>
                                    <th>Medical Complex</th>
                                    <th>Collection Time</th>
                                    <th>Receiving Time</th>
                                    <th>Result Time</th>
                                    <th>Logs</th>
                                    <th>Validate</th>
                                </tr>
                                </thead>

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


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

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

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

                        </div>

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

     <!-- /.content-wrapper -->
     <div class="modal fade" id="modal-analyzer-reference">
        <div class="modal-dialog modal-lg">
            <form id="upload-result-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">Reference Range</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-danger alert-danger-validate" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div id="reference-options" class="row">

                        </div>
                        </div>

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

    <!-- /.content-wrapper -->
    <div class="modal fade" id="modal-comments">
        <div class="modal-dialog modal-lg">
            <form id="comment-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">Sample Comments Log</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-danger alert-danger-validate" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="col">
                                    <div id="comments" class="timeline timeline-inverse ">
                                    </div>
                                </div>
                        @permission('add_processing_validation_comment')
                        <div class="row" style="padding: 0 10px;">
                        <div class="col-md-12">
                        <input type="file" id="files" name="files[]" multiple/>
                            <textarea id="sampleComment" required class="form-control mt-4" placeholder="Enter your comment here" id="COMMENT_TEXT" name="COMMENT_TEXT" rows="3" cols="50"></textarea>
                            </div>
                            <div class="col-md-12 mt-5 mb-4" style="display:flex;justify-content:end;align-items:center">
                                <button id="add-sample-comment" class="btn btn-info mr-3"><i class="fas fa-lg fa-plus-circle"></i> Add Comment</button>
                                <button id="reset-sample" type="button" class="btn btn-warning" style="color:white;padding-right:15px"><i class="fa fa-lg fa-arrow-circle-left" ></i> Reset Sample</button>
                            </div>
                        </div>
                        @endpermission
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    <div class="modal fade" id="modal-ct">
        <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">CT Values</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                                <input type="hidden" id="ct-sample-id" />
                                <div class="alert alert-danger alert-danger-validate" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="ic-value">IC</label>
                                <input id="ic-value" name="ic-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                            <div class="col-md-6">
                                <label for="ORF1ab-value">ORF1ab</label>
                                <input id="ORF1ab-value" name="ORF1ab-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="Ngene-value">Ngene</label>
                                <input id="Ngene-value" name="Ngene-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                            <div class="col-md-6">
                                <label for="Egene-value">Egene</label>
                                <input id="Egene-value" name="Egene-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <label for="RdRP-value">RdRP</label>
                                <input id="RdRP-value" name="RdRP-value" class="form-control" value="" type="number" step="0.01" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="save-ct-values"  style="padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Save</button>
                    </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
    </div>
    <div class="modal fade" id="modal-import">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Excel Importing</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post"  action="/operations/samples/">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-import" role="alert" style="display: none;"></div>
                            </div>
                        </div>

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

@section('footer-scripts')

    <script>
           var readingTable = $("#reading-batch-table").DataTable({
                dom: 'lBfrtip',
                "buttons" : [
                    'copy', 'csv', 'pdf', 'print'
                ],
                "pageLength" : 100,
                "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],

                "responsive": true,
                "autoWidth": false,
                serverSide: true,
                "processing": true,
                "ordering": false,
                rowGroup: {
                    enable: false,
                    dataSrc: "NAME"
                },
                ajax: {
                    url : '/operations/histopathology-validations-report',
                    data: function (d) {
                        d.date_from = $('#validation-date-from').val(),
                            d.date_to = $('#validation-date-to').val(),
                            d.hospital_id = $('#validation-hospital-id').val(),
                            d.only_results = $('#validation-only-results').is(':checked'),
                            d.only_urgent = $('#validation-only-urgent').is(':checked'),
                            d.group_by_patient = $('#validation-group-by').is(':checked'),
                            d.location = $('#validation-location-id').val(),
                            d.batch_id = $('#validation-batch-id').val(),
                            d.run_id = $('#validation-run-id').val(),
                            d.sendout_id = $('#validation-sendout-id').val(),
                            d.analyzer_id = $('#validation-analyzer-id').val(),
                            d.test_category = $('#validation-category-id').val()
                    }
                },
                // "createdRow": function (row, data, index) {
                //  if(data['IS_STAT']==1)
                //       $(row).css("background-color", "#eccaa5");
                // },
                'columnDefs': [
                    {
                        'targets': 0,
                        'checkboxes': {
                            'selectRow': true
                        },
                    }
                ],
                'select': {
                    'style': 'multi'
                },
                "order": [[ 0, "desc" ]],
                columns: [
                    { data: "SAMPLE_ID", name: "SAMPLE_ID", render: function ( data, type, row, meta ) {
                            if(data != null) @permission('view_samples_details') return '<a href="/operations/samples/'+data+'">'+data+'</a>';
                            @else
                                return data;
                            @endpermission
                        else return '';
                        } },
                    { data: "ID", name: "ID", render: function ( data, type, row, meta ) {
                            @permission('view_samples_details') return '<a href="/operations/samples/'+data+'">'+data+'</a>'; @else return  data @endpermission
                        } },
                    { data: "TEST_NAME", name: "LAB_CATEGORY_PACKAGE.NAME_EN",render: function ( data, type, row,meta ) {
                            if(row['IS_NORMAL']==1){
                                return "<span style='color:green'>"+data+"</span>";
                            }
                            else if(row['IS_NORMAL']==0){
                                return "<span style='color:red'>"+data+"</span>";
                            }
                            else if(row['IS_STAT']==1)
                                return "<span style='color:orange'>"+data+"</span>";
                            else
                                return data;
                        }
                    },
                    { data: "DECIMAL_RESULT", name: "DECIMAL_RESULT",render: function ( data, type, row,meta ) {
                            if(row['RESULT_TIME']){
                                return `<button ${row['HAS_TEMPLATE'] ? 'has-template="1"' : "" } sample-id=${row["ID"]} style="border-radius: 50%"  type="button" class="btn btn-success details-control"><i class="fas fa-plus"></i></button>`
                            }
                            else{
                                return `<button  ${row['HAS_TEMPLATE'] ? 'has-template="1"' : "" } sample-id=${row["ID"]} style="border-radius: 50%"  type="button" class="btn btn-info details-control"><i class="fas fa-plus"></i></button>`
                            }


                        } },
                    { data: "RESULT_UNIT", name: "RESULT_UNIT",render: function ( data, type, row ) {
                            if(row['IS_ANALYSIS'] == "1"){
                                return '<p>-----</p>';
                            }else{
                                var data_value = "";
                                if(data != null && data != 0) data_value = data;
                                return '<a href="#" @permission('add_processing_validation_unit') class="xedit-unit" @endpermission data-pk="'+row["ID"]+'" data-title="Enter Unit">'+data_value+'</a>';
                            } }},
                    { data: "NAME", name: "NAME"},
                    { data: "IDENTIFICATION", name: "IDENTIFICATION"},
                    { data: "HOSPITAL_NAME_EN", name: "HOSPITAL_NAME_EN" },
                    { data: "COLLECTION_TIME", name: "COLLECTION_TIME" },
                    { data: "ANALYZE_TIME", name: "ANALYZE_TIME" },
                    { data: "RESULT_TIME", name: "RESULT_TIME" },
                    { data: "ID", name: "ID", render: function ( data, type, row, meta ) {
                            @permission('view_processing_validation_comment')
                            if(row["HAS_COMMENT"]){
                                return ' <button sample-id='+row["ID"]+' style="border-radius: 50%"  type="button" class="btn btn-success check-comments"><i class="fas fa-comment-dots"></i></button>'
                            }else{
                                return ' <button sample-id='+row["ID"]+' style="border-radius: 50%"  type="button" class="btn btn-info check-comments"><i class="fas fa-comment-dots"></i></button>'
                            }
                            @endpermission
                        }},
                    { data: "ID", name: "ID", render: function ( data, type, row, meta ) {
                            var validation_button = `<div class="btn-group">
                                <button type="button" class="validate-batch-test btn btn-sm btn-warning" style="color:black !important;min-width:120px" test-id="${data}" >Validate</button>`;
                            if(row["TEST_CATEGORY"] == 10) {
                                validation_button += `<button type="button" class="btn btn-sm btn-outline-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button><div class="dropdown-menu">
                                    <button class="dropdown-item preview-report" sample-id='${row["ID"]}'  identification='${row["IDENTIFICATION"]}' order-id='${row["END_USER_LAB_ORDER_ID"]}'>Preview Report</button>
                             </div>`;
                            }
                            validation_button +=  `</div>`;
                            return validation_button;
                        } },

                ],
                "drawCallback": function( settings ) {
                    $(".xedit-result").editable({
                        type: 'number',
                        step: 'any',
                        url: "/operations/sample/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>")
                            }
                        },
                        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");
                                    }


                                }
                            }
                            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.comment){
                                    commentCulomn = element.parent().parent().find("td:eq(10) a");
                                    commentCulomn.attr('data-value', response.comment);
                                    commentCulomn.editable('setValue',response.comment);
                                    if (response.comment.length > 12)
                                        commentCulomn[0].innerHTML = response.comment.substring(0,12)+'...';
                                    else
                                        commentCulomn[0].innerHTML = response.comment;
                                }
                                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")
                                }
                            }

                        },

                    });
                    $(".preview-report").on("click",function(){
                        let identification = $(this).attr("identification");
                        let order_id = $(this).attr("order-id");
                        let sample_id = $(this).attr("sample-id");
                        window.open('/orders/'+order_id+'/preview/pdf/template/'+identification+'?sample_id='+sample_id);
                        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.comment){
                                    commentCulomn = element.parent().parent().find("td:eq(10) a");
                                    commentCulomn.attr('data-value', response.comment);
                                    commentCulomn.editable('setValue',response.comment);
                                    if (response.comment.length > 12)
                                        commentCulomn[0].innerHTML = response.comment.substring(0,12)+'...';
                                    else
                                        commentCulomn[0].innerHTML = response.comment;
                                }
                                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.comment){
                                    commentCulomn = element.parent().parent().find("td:eq(10) a");
                                    commentCulomn.attr('data-value', response.comment);
                                    commentCulomn.editable('setValue',response.comment);
                                    if (response.comment.length > 12)
                                        commentCulomn[0].innerHTML = response.comment.substring(0,12)+'...';
                                    else
                                        commentCulomn[0].innerHTML = response.comment;
                                }
                                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'},
                        ],
                    })

                    $(".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: 'text',
                        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>")
                            }
                        },
                    })
                }
            });

            $('#reading-batch-table tbody').on('click', '.details-control', function () {
                if($(this).attr("has-template"))
                {
                    getPackageTemplateComponents($(this).attr("sample-id"));
                    $('#modal-items-template').modal('show');
                }

            });

           function getPackageTemplateComponents(package_id,OnlyView=0){
               $("#template-results-specimens").empty();
               $("#template-sample-id").empty();
               $("#template-sample-id").append(`<input type="hidden" id="sample-id-template"  class="form-control" type="text" value="${package_id}" />`);
               $("#template-results-options").empty();
               $("#sub-template-options").empty();
               $(".template-critical-text").empty();
               $("#template-critical-btn").prop('checked', false);
               $(".critical-section-result").hide();
               $.ajax({
                   type: "GET",
                   url: "/operations/data/packages/"+package_id+"/template-components",
               }).done(function(data, textStatus, xhr ) {
                   if(data.response) {
                       if(data.response.SubTemplates)
                       {
                           var elements;
                           elements = `<div class="col-12">
                                        <div class="form-group">
                                        <label>Sub Templates</label>`;

                           elements += `<select class="form-control sub-template rhospital_id">`;
                           elements += `<option disabled selected  value="">Select Sub Template</option>`;
                           data.response.SubTemplates.forEach(function(option,index) {
                               // elements += `<option  ${(element.NAME != null && element.RESULT==option.LABEL) ? 'selected':''} value="${option.LABEL}">${option.LABEL}</option>`;
                               elements += `<option  value="${option.ID}">${option.NAME}</option>`;
                           })
                           elements += `</select>`;

                           elements += "</div>";
                           $("#sub-template-options").append(elements);

                       }
                       if(data.response.template)
                       {
                           $(".template-critical-text").text(data.response.template.CRITICAL_TEXT);
                       }

                       data.response.data.forEach(function(element,index) {
                           var elements;

                           elements = `<div class="col-12">
                                        <div class="form-group">
                                        <label>${element.components.LABEL}</label>`;
                           if (element.components.TYPE == "text") {
                               elements += `<textarea class="form-control" ${(OnlyView === 1) ? 'disabled':''} name="${element.COMPONENT_ID}">${element.RESULT != null ? element.RESULT: (element.components.RESULT_PLACEHOLDER != null ? element.components.RESULT_PLACEHOLDER : '')}</textarea>`;
                               // elements += `<input type="number" class="form-control" name="${element.COMPONENT_ID}" value="${element.HEIGHT_MARGIN}" placeholder="HEIGHT MARGIN">`;
                           } else if (element.components.TYPE == "img") {
                               elements += `<input type="file" class="form-control ${(OnlyView === 1) ? 'd-none':''}" accept="image/*" name="${element.COMPONENT_ID}">`;
                               if(element.RESULT)
                                   elements += ` File: <a  style="color:#17a2b8" href="https://s3.eu-west-1.amazonaws.com/blazma.com${element.RESULT}" target="_blank">`+element.RESULT.replace('/template-result/','')+`</a>`;
                           }
                           else if (element.components.TYPE == "pdf") {
                               elements += `<input type="file" class="form-control ${(OnlyView === 1) ? 'd-none':''}" accept="application/pdf" name="${element.COMPONENT_ID}">`;
                               if(element.RESULT)
                                   elements += ` File: <a  style="color:#17a2b8" href="https://s3.eu-west-1.amazonaws.com/blazma.com${element.RESULT}" target="_blank">`+element.RESULT.replace('/template-result/','')+`</a>`;
                           }
                           else if (element.components.TYPE == "select") {
                               elements += `<select class="form-control" ${(OnlyView === 1) ? 'disabled':''} name="${element.COMPONENT_ID}">`;
                               element.components.options.forEach(function(option,index) {
                                   elements += `<option  ${(element.RESULT != null && element.RESULT==option.LABEL) ? 'selected':''} value="${option.LABEL}">${option.LABEL}</option>`;
                               })
                               elements += `</select>`;
                           }

                            else if (element.components.TYPE == "editor") {
                                elements += `<textarea class="ckeditor" ${(OnlyView === 1) ? 'disabled':''} id="editor_${element.COMPONENT_ID}_${index}" name="${element.COMPONENT_ID}">${element.RESULT != null ? element.RESULT: (element.components.RESULT_PLACEHOLDER != null ? element.components.RESULT_PLACEHOLDER : '')}</textarea>`;
                            }
                            elements += "</div>";
                            $("#template-results-options").append(elements);
                            var editorId = 'editor_' + element.COMPONENT_ID + '_' + index;
                            if (CKEDITOR.instances[editorId]) {
                                CKEDITOR.instances[editorId].destroy();
                            }
                            CKEDITOR.replace(editorId, {
                                filebrowserImageUploadUrl: '/editor/upload-image',
                                uploadUrl: '/editor/upload-image'
                            });
                           $('.rhospital_id').select2({
                           });
                           if (element.CRITICAL_COMMENT) {
                               $("#template-critical-btn").prop('checked', true);
                               $(".critical-section-result").show();
                               $(".template-critical-text").text(element.CRITICAL_COMMENT);
                           }
                       });

                   }

               }).fail(function(jqXHR, textStatus, errorThrown) {
                   alert(jqXHR.responseJSON.errorMessage);
               });
           }
            $("body").on("click", ".validate-batch-test",function(){
                var test_id = $(this).attr("test-id")
                var validate_button = $(this);
                validate_button.html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading').attr('disabled', true);
                $.ajax({
                    type: "POST",
                    url: "/operations/samples/"+test_id+"/validate",
                    contentType: "application/json; charset=utf-8",
                }).done(function(data ) {
                    readingTable.draw();
                    toastr.success("Sample validated successfully");

                }).fail(function(jqXHR, textStatus, errorThrown) {
                    validate_button.html('Validate').attr('disabled', false);
                    if(jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.errorMessage) toastr.error(jqXHR.responseJSON.errorMessage)
                    else toastr.error("Internal error encountered")
                });
                return false;
            });
    </script>
    
@endsection