@extends('operations.layout.mainlayout')

@section('content')

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

        #histopathology-approval-table {
            font-size: 14px;
        }

        .btn-blz {
            color: var(--blazma-primary);
            border-color: var(--blazma-primary);
            width: 20%;
            margin: 2px;
        }

        .btn-blz:hover {
            color: #fff;
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
        }

        .active {
            color: #fff;
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
        }


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

        .date-filter {
            color: var(--blazma-primary);
            border: 1px solid var(--blazma-primary);
        }

        /*table td {*/
        /*    max-width: 120px;*/
        /*    white-space: nowrap;*/
        /*    text-overflow: ellipsis;*/
        /*    word-break: break-all;*/
        /*    overflow: hidden;*/
        /*}*/

        /*.urgent-control-input:checked~.urgent-control-label::before {*/
        /*    color: #fff;*/
        /*    border-color: #0e8b35 !important;*/
        /*    background-color: #1f8636 !important;*/
        /*    box-shadow: none;*/
        /*}*/
    </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 Approval</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="approval-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="approval-date-to" class="form-control" type="date"
                                                               name="date_to"
                                                               value="@if(!empty($date_to)){{$date_to}}@endif"
                                                               placeholder="Date To">
                                                    </div>
                                                    <div class="col-md-2">

                                                        <span class="text-muted text-sm"><b>Medical Complex</b></span>
                                                        <select class="form-control rhospital_id"
                                                                id="approval-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="approval-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>


                                                </div>
                                                <div class="row">
                                                    <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="approval-batch-id"
                                                                id="approval-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="approval-run-id"
                                                                id="approval-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 Analyzer</b></span>
                                                        <select required class="form-control"
                                                                name="approval-analyzer-id" id="approval-analyzer-id">
                                                            <option value="">Select Analyzer</option>
                                                            @foreach($analyzers as $analyzer)
                                                                <option value="{{$analyzer->ID}}">{{$analyzer->NAME_EN}}</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="approval-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>
                                                </div>

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

                                </form>
                                {{--<div class="card-footer">

                                    @permission('approve_processing_approval')
                                    <div class="text-right">
                                        <button id="approve-all" style="color:white !important;max-width:170px"
                                                class="form-control btn btn-sm btn-success"> Approve All Selected
                                        </button>
                                    </div>
                                    @endpermission

                                </div>--}}
                            </div>
                        </div>


                        <div class="card">
                            <div class="card-body">
                                <table id="histopathology-approval-table" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Test ID</th>
                                        <th>Test Type</th>
                                        <th>Patient</th>
                                        <th>Identification</th>
                                        <th>Medical Complex</th>
                                        <th>Collection Time</th>
                                        <th>Receiving Time</th>
                                        <th>Result Time</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div>
                        </div>
                        <!-- /.container-fluid -->
                    </div>
                </div>
            </div>
        </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>
    <!-- /.content-wrapper -->
    <!-- /.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>

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

    <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_approval_log_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="return-sample-comment" type="button" class="btn btn-info"><i
                                            class="fa fa-lg fa-arrow-circle-left"></i> Return 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-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="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>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>

    <!-- /.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">
                                                <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">
                                                <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">
                                                <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" style="height: 400px; width: 500px;"></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>
        <div class="modal fade" id="modal-lj-test-group">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="lj-title">Tests Group </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-12">
                                            <span class="text-muted text-sm"><b>Tests Group</b></span>
                                            <select class="form-control rhospital_id" id="tests-group-id-filter">
                                                <option value="" selected>Select Test</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer">

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

        <div class="modal fade" id="modal-opinions">
            <div class="modal-dialog">
                <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">Request doctor opinion</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="doctor">Select doctor</label>
                                    <select class="form-control" name="doctor" id="doctor">
                                        <option value="" selected disabled>Select a doctor</option>
                                        @foreach($Doctors as $doctor)
                                            <option value="{{$doctor->ID}}">{{$doctor->USERNAME}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="modal-footer justify-content-between">
                                    <button id="save-request-doctor-opinion"
                                            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>
    @endif

@endsection

@section('footer-scripts')
    <script>
        var HistopathologyApprovalTable =
            $("#histopathology-approval-table").DataTable({
                dom: 'lBfrtip',
                "buttons" : [
                    'copy', 'csv', 'pdf', 'print'
                ],
                "lengthMenu": [[10, 25, 50, 500,1000,5000,10000,40000], [10, 25, 50, 500, 1000,5000,10000,40000]],
                "responsive": true,
                "autoWidth": false,
                serverSide: true,
                scrollX: false,
                "processing": true,
                "ordering": false,
                rowGroup: {
                    enable: false,
                    dataSrc: "NAME"
                },
                ajax: {
                    url : '/operations/histopathology/approval-report',
                    data: function (d) {
                        d.date_from = $('#approval-date-from').val(),
                            d.date_to = $('#approval-date-to').val(),
                            d.hospital_id = $('#approval-hospital-id').val(),
                            d.only_results = $('#approval-only-results').is(':checked'),
                            d.only_positive = $('#approval-only-positive').is(':checked'),
                            d.only_urgent = $('#approval-only-urgent').is(':checked'),
                            d.location = $('#approval-location-id').val(),
                            d.batch_id = $('#approval-batch-id').val(),
                            d.run_id = $('#approval-run-id').val(),
                            d.analyzer_id = $('#approval-analyzer-id').val(),
                            d.test_category = $('#approval-category-id').val()
                    }
                },
                'columnDefs': [
                    {
                        'targets': 0,
                        'checkboxes': {
                            'selectRow': true
                        },
                    }
                ],
                'select': {
                    'style': 'multi'
                },
                "order": [[ 0, "desc" ]],
                columns: [

                    { 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: "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 ) {
                            let approval_button = `<div class="btn-group">
                                @permission('approve_processing_approval') <button type="button" class="histopathology-approve-test btn btn-sm btn-success" style="color:white !important;min-width:120px" test-id="${data}" >Approve</button> @endpermission
                            <button type="button" class="btn btn-sm btn-outline-success 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">
                            `
                            approval_button += `
                                    <button class="dropdown-item request-opinion" test-id='${row["ID"]}' identification='${row["IDENTIFICATION"]}' order-id='${row["END_USER_LAB_ORDER_ID"]}'>Request Opinion</button>
                                    <button class="dropdown-item preview-report" sample-id='${row["ID"]}' identification='${row["IDENTIFICATION"]}' order-id='${row["END_USER_LAB_ORDER_ID"]}'>Preview Report</button>`;
                            approval_button += `</div>
                                </div></div>
                            </div>`;
                            return approval_button;

                        }},

                ],
                "drawCallback": function( settings ) {
                    $(".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-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")
                                }
                            }
                        },
                    });
                    $(".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>")
                            }
                        },
                    })
                }
            });

        $('#histopathology-approval-table tbody').on('click', '.check-comments', function () {
            getPackageComments($(this).attr("sample-id"))
            $('#modal-comments').modal('show');
        });

        $('#histopathology-approval-table tbody').on('click', '.ct-details-control', function () {
            $("#ct-sample-id").val($(this).attr("sample-id"));
            $("#ic-value").val($(this).attr("ic"));
            $("#ORF1ab-value").val($(this).attr("or"));
            $("#Ngene-value").val($(this).attr("ng"));
            $("#Egene-value").val($(this).attr("eg"));
            $("#RdRP-value").val($(this).attr("rd"));
            $('#modal-ct').modal('show');
        });

        $("#approval-date-from").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-date-to").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-batch-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-run-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-analyzer-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-category-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-only-urgent").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-hospital-id").change(function(){

            $.ajax({
                type: "GET",
                url: "/operations/hospitals/"+$("#approval-hospital-id").val()+"/locations",
            }).done(function(data, textStatus, xhr ) {
                if(data.response) {
                    $("#approval-location-id").empty();
                    $("#approval-location-id").append('<option value="0">Select Location</option>');
                    data.response.forEach(function(element) {
                        $("#approval-location-id").append('<option value="'+element.ID+'">'+element.NAME_EN+'</option>');
                    })
                }else{
                    alert("Please re-login, your session has ended");
                }
            }).fail(function(jqXHR, textStatus, errorThrown) {
                alert(jqXHR.responseJSON.errorMessage);
            });
            HistopathologyApprovalTable.draw();
        });
        $("#approval-location-id").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-only-results").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#approval-only-positive").change(function(){
            HistopathologyApprovalTable.draw();
        });
        $("#urgent-only-positive").change(function(){
            HistopathologyApprovalTable.draw();
        });

        $(document).on('click', '.request-opinion', function (e) {
            e.preventDefault();
            var testId = $(this).attr('test-id');
            $('#modal-opinions').modal('show');
            $('#save-request-doctor-opinion').off();
            $('#save-request-doctor-opinion').on('click', function (e) {
                e.preventDefault();
                var doctorId = $('#doctor').val();
                if (doctorId == null) {
                    $(".alert-danger-validate").html('Select a doctor before save');
                    $(".alert-danger-validate").slideDown( "slow", function() {});
                    setTimeout(() => {
                        $(".alert-danger-validate").hide();
                    }, 3000);
                }
                else {
                    var request_button = $(this);
                    request_button.html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading').attr('disabled', true);
                    $.ajax({
                       url: '/operations/histopathology/request-opinion',
                       method: "POST",
                        data:{
                            testId: testId,
                            doctorId: doctorId,
                        },
                       success:function (response) {
                           request_button.html('Save').attr('disabled', false);
                           $('#modal-opinions').modal('hide')
                           toastr.success('Requested has been stored successfully')
                       },
                        error: function (response) {
                            request_button.html('Save').attr('disabled', false);
                            toastr.error(response.responseJSON.errorMessage)
                        }
                    });
                }
            })

        })

        $("body").on("click", ".histopathology-approve-test",function(){
            var test_id = $(this).attr("test-id")
            var approve_button = $(this);
            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 ) {
                HistopathologyApprovalTable.draw();
                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)
                else toastr.error("Internal error encountered")
            });
            return false;
        });

        $('#doctor').select2();
    </script>

@endsection