@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;
}

#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);
}



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

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

#approval-table .badge {
    border-radius: 50%;
    min-width: 25px;
    font-size: 12px;
    display: inline-block;
    padding: 5px;
    margin: 0 2px;
}

.badge-orange {
    background: #fd9843;
    color: #ffffff !important;
}

.badge-purple {
    background: #6f42c1;
}

.badge-phosphor {
    background: #ccff00;
    color: #000 !important;
}

.card-footer::after {
    content: none;
}

/* L-J chart container — responsive so the chart scales with the
   modal width instead of rendering as a small fixed 500x400 box. */
#chartContainer {
    width: 100%;
    height: 520px;
    min-height: 520px;
}
/* CanvasJS wraps its canvas in a div that must inherit size */
#chartContainer > div {
    width: 100% !important;
    height: 100% !important;
}

#approve-all {
    max-width: 190px;
    height: 38px;
    padding: 4px 16px 4px 16px;
    border-radius: 30px;
    border: 1px;
    gap: 8px;
    background: var(--blazma-primary);
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;
}

#approve-all:hover {
    background: white;
    color: var(--blazma-primary);
    border: 1px solid var(--blazma-primary);
}

.card-footer-btns {
    height: 38px;
    padding: 4px 16px 4px 4px;
    border-radius: 30px;
    border: 1px;
    gap: 8px;
    border: 1px solid var(--blazma-primary);
    background: transparent;
    color: black !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0em;

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

.card-footer-btns:hover,
.card-footer-btns:active,
.card-footer-btns:focus {
    background: var(--blazma-primary);
    color: white !important;
    border: 1px solid var(--blazma-primary);
}

.card-footer img {
    max-width: 30px;
}

div.dataTables_wrapper div.dataTables_filter {
    display: inline;
    float: right;
}

#approval-table_filter i {
    color: var(--blazma-primary);
    position: absolute;
    top: 31px !important;
    right: 324px !important;
}

table.dataTable tbody td input[type="checkbox"] {
    background: #f4f6f9;
    accent-color: var(--blazma-primary);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #E6E6E6;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

#select_all input[type="checkbox"] {
    background: #f4f6f9;
    accent-color: var(--blazma-primary);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #E6E6E6;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

/* Style for checkbox when it's checked */
#select_all input[type="checkbox"]:checked {
    appearance: auto;
    clip-path: circle(50% at 50% 50%);
}

#select_all {
    padding: 12px !important;
}

/* Style for checkbox when it's checked */
table.dataTable tbody td input[type="checkbox"]:checked {
    appearance: auto;
    clip-path: circle(50% at 50% 50%);
}

/* Reservation-level select all: without this the "some tests selected"
   state would look exactly like "none selected". */
tr.dtrg-group input.group-select-all:indeterminate {
    appearance: auto;
    -webkit-appearance: auto;
    clip-path: circle(50% at 50% 50%);
    opacity: 0.55;
}

#approval-table tr td:first-child:not(.dtrg-group td) {
    padding: 12px 0px 12px 0px !important;
}

.details-control:hover,
.details-control:active,
.details-control:focus,
.upload-details-control:hover,
.upload-details-control:active,
.upload-details-control:focus {
    background-color: white !important;
    outline: none;
    color: var(--blazma-primary);
}

.details-control,
.upload-details-control {
    background-color: white !important;
    border: none;
    font-size: 20px !important;
    max-height: 20px;
    padding: 0;
    color: var(--blazma-primary);
}

.details-success {
    color: green;
}

.details-success:hover,
.details-success:active,
.details-success:focus {
    color: green;
}

.comment-success {
    font-size: 20px;
    background: transparent;
    border: none;
    color: green;
}

.comment-success:hover,
.comment-success:active,
.comment-success:focus {
    outline: none;
    color: green;
    border: none;
    background: transparent;
}

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

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

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

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

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

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

.reservations-search-bar-btn:active {
    transform: translateY(0);
    outline: none;
}
.filters-toggle-btn {
    background: #F9FAFB;
    box-shadow: 0px 2px 30px 0px #0000000F;
    color: var(--blazma-primary);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 30px;
    padding: 7px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1;
}
.filters-toggle-btn:hover {
    background: var(--blazma-primary);
    color: #fff0f4;
    box-shadow: 0 5px 18px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}
.filters-toggle-btn:focus {
    outline: none;
}
</style>
<link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">

  <!-- Content Header (Page header) -->
  <div class="content-header p-0">
        <div class="container-fluid card m-0">
            <div class="row">
                <div class="col-sm-6 m-0 card ">
                    <h1 class="card-body m-0 text-dark mb-2" style="color: var(--blazma-text)!important;">Sample 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">
                    <div class="card filter-main-card">
                        <div class="card bg-light mr-0">
                        <div class="card-body">
                            <div class="row justify-content-between contain-filters" id="approval-filters-row">
                                <div class=" mb-2">
                                    <div class="filter">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="filter-name">Reservations</span>
                                            <span id="reservations-number" class="filter-number" style="cursor: pointer;">0</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-3">
                                            <input type="text" placeholder="Reservation ID" class="form-control search-input"
                                                id="approval-res-no" />
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input id="approval-reservation-date-from" class="form-control search-input"
                                                type="text" name="reservation_date_from"
                                                value="@if(!empty($date_from)){{$date_from}}@endif"
                                                placeholder="Date From">
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input id="approval-reservation-date-to" class="form-control search-input" type="text"
                                                name="reservation_date_to"
                                                value="@if(!empty($date_to)){{$date_to}}@endif" placeholder="Date To">
                                        </div>
                                        @if(!empty(session('enable_histopathology')) && session('enable_histopathology') == 1)
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input type="text" placeholder="Internal No." class="form-control search-input"
                                                id="approval-intend-no" />
                                        </div>
                                        @endif
                                    </div>
                                </div>
                                <div class=" mb-2">
                                    <div class="filter">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="filter-name">Patients</span>
                                            <span id="patients-number" class="filter-number" style="cursor: pointer;">0</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-3">
                                            <input type="text" placeholder="ID" class="form-control search-input"
                                                id="sample-identification" />
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input type="text" placeholder="NAME" class="form-control search-input"
                                                id="sample-name" />
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input type="text" placeholder="Mobile No." class="form-control search-input"
                                                id="sample-mobile" />
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input type="text" placeholder="MRN" class="form-control search-input"
                                                id="approval-mrn" />
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input type="text" placeholder="Reference Order ID" class="form-control search-input"
                                                id="reference-id" placeholder="Search by Reference ID" />
                                        </div>
                                    </div>
                                </div>
                                <div class=" mb-2">
                                    <div class="filter">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="filter-name">Samples</span>
                                            <span id="samples-number" class="filter-number" style="cursor: pointer;">0</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-3">
                                            <input type="text" placeholder="Sample ID" class="form-control search-input"
                                                id="sample-id" />
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select required class="form-control search-input" name="approval-run-id"
                                                id="approval-run-id">
                                                <option value="">Job No</option>
                                                @foreach($runs as $run)
                                                <option value="{{$run->ID}}">{{$run->RUN_NO}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select required class="form-control search-input" name="approval-batch-id"
                                                id="approval-batch-id">
                                                <option value="">PCR Batch No.</option>
                                                @foreach($batches as $batch)
                                                <option value="{{$batch->ID}}">{{$batch->BATCH_NO}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input id="approval-date-from" autocomplete="off"
                                                placeholder="Receiving Date From"
                                                class="form-control date-from-receiving-report search-input" type="text">
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center mt-2">
                                            <input id="approval-date-to" autocomplete="off"
                                                placeholder="Receiving Date To"
                                                class="form-control date-to-receiving-report search-input" type="text">
                                        </div>
                                    </div>
                                </div>

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


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

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

                            <div class="card-footer d-flex justify-content-between" id="approval-filters-footer">
                                <div class="d-flex text-left">
                                    {{-- <input type="checkbox" name="validation-only-results" value="reset" id="approval-only-results">
                                     <label for="only-reset" style="margin-right: 10px;font-weight: 300;"> Only samples with results</label>--}}
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input search-input" name="approval-only-positive" value="positive" id="approval-only-positive">
                                        <label class="custom-control-label" for="approval-only-positive" style="margin-right: 10px;font-weight: 300;"> Only Positive</label>
                                    </div>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input search-input" name="approval-only-urgent" value="urgent" id="approval-only-urgent">
                                        <label class="custom-control-label" for="approval-only-urgent" style="margin-right: 10px;font-weight: 300;"> Only Urgent</label>
                                    </div>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input search-input" name="approval-group-by" checked value="urgent" id="approval-group-by">
                                        <label class="custom-control-label" for="approval-group-by" style="margin-right: 10px;font-weight: 300;"> Group by Reservation</label>
                                    </div>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input search-input" name="approval-group-by-test" value="urgent" id="approval-group-by-test">
                                        <label class="custom-control-label" for="approval-group-by-test" style="margin-right: 10px;font-weight: 300;"> Group by Test</label>
                                    </div>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input search-input" name="approval-is-on-hold" value="on_hold" id="report-is-on-hold">
                                        <label class="custom-control-label" for="report-is-on-hold" style="margin-right: 10px;font-weight: 300;"> Is On Hold</label>
                                    </div>
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input search-input" name="has_no_result" value="no_result" id="approval-has-no-result">
                                        <label class="custom-control-label" for="approval-has-no-result" style="margin-right: 10px;font-weight: 300;"> Test with no results</label>
                                    </div>
                                </div>
                                @permission('approve_all_processing_approval')
                                <div class="text-right">
                                    <button id="approve-all" class="form-control"> Approve All Selected</button>
                                </div>
                                @endpermission

                            </div>
                            <div class="reservations-search-bar mt-3">
                                <div class="reservations-search-bar-left">
                                    <i class="fa fa-filter mr-2"></i>
                                    <span id="active-filters-label">Ready to search</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <button type="button" class="filters-toggle-btn mr-3" title="Toggle Filters">
                                        <i class="fa fa-chevron-up"></i>
                                    </button>
                                    <button type="button" id="approval-search-btn" class="reservations-search-bar-btn">
                                        <i class="fa fa-search mr-2"></i> Search
                                    </button>
                                </div>
                            </div>
                        </div>


                        <div class="card">
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="approval-table" class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th id="select_all"></th>
                                                <th>Sample ID</th>
                                                <th>Test ID</th>
                                                <th>Test Name</th>
                                                <th style="min-width:100px">Result</th>
                                                <th>Unit</th>
                                                <th>Min</th>
                                                <th>Max</th>
                                                <th>Expected Result Time</th>
                                                <th>Comment</th>
                                                <th>Time Line</th>
                                                <th>Patient</th>
                                                <th>Identification</th>
                                                <th style="min-width:50px">Age</th>
                                                <th>Gender</th>
                                                <th>Registration Branch</th>
                                                <th>Internal Comments</th>
                                                <th>Approve</th>
                                                <th>Flags</th>
                                                <th>Action</th>
                                            </tr>
                                        </thead>

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

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

                    </div>
                    @permission('add_processing_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>
                            @permission('add_processing_validation_comment')
                            <button id="reset-sample" type="button" class="btn btn-warning mr-3" style="color:white;padding-right:15px"><i class="fa fa-lg fa-arrow-circle-left" ></i> Rerun Sample</button>
                            @endpermission
                            <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="col-12 col-sm-12 col-md-12">
                    <div class="card bg-white">
                        <div class="card-footer">
                            <div class="text-left d-flex align-items-center">
                                <div class="custom-control custom-switch mr-4">
                                    <input type="checkbox" class="custom-control-input" checked id="only-this-test">
                                    <label class="custom-control-label" for="only-this-test"
                                        style="margin-right: 10px;font-weight: 300;"> Only This Test (<span
                                            id="p-result-test-name"></span>)</label>
                                </div>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="include-linked-results">
                                    <label class="custom-control-label" for="include-linked-results"
                                        style="font-weight: 300;">Include Linked Results</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

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

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

<div class="modal fade" id="modal-linked-results">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Linked Test Results</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <table id="linked-results-tests-table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th>Reservation ID</th>
                                    <th>Sample ID</th>
                                    <th>Patient Name</th>
                                    <th>Tests</th>
                                    <th>Collection Date</th>
                                    <th>Result Date</th>
                                    <th>Result</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
            </div>
        </div>
    </div>
</div>

<!-- /.content-wrapper -->
@if(!empty(session('enable_qc')) && session('enable_qc') == 1)
<div class="modal fade" id="modal-lj">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="lj-title">L-J Chart </h3>
                <button type="button" id="lg-chart-btn" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="row" style="margin-left: 2%; margin-right: 2%">
                <div class="col-12 col-sm-12 col-md-12">
                    <br />
                    <div class="card bg-light">
                        <div class="card-header text-muted border-bottom-0">
                        </div>

                        <div class="card-body pt-0">
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="text-muted text-sm"><b>QC</b></span>
                                    <select class="form-control rhospital_id date-filter"
                                        id="qc-approval-control-id-filter" multiple>
                                        <option value="" selected>Select QC</option>
                                        @foreach($Controls as $control)
                                        <option value="{{$control->ID}}">{{$control->NAME}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <span class="text-muted text-sm"><b>Lot</b></span>
                                    <select class="form-control rhospital_id" id="qc-approval-lot-id-filter" multiple>
                                        <option value="" selected>Select Lot</option>
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <span class="text-muted text-sm"><b>Test</b></span>
                                    <select class="form-control rhospital_id" id="qc-approval-test-id-filter" multiple>
                                        <option value="">Select Test</option>
                                    </select>
                                </div>



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

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

                            <div class="row">
                                <div class="col-md-12"> <br />
                                    <div id="chartContainer"></div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">

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



            <div class="modal-body">

                <label class="d-flex justify-content-center mt-3">Westgard Rules</label>
                <div class="row justify-content-center">
                    <h5><span class="badge badge-pill badge-success mr-1 rule" id="rule-1">One Qc ± 2SD</span></h5>
                    <h5><span class="badge badge-pill badge-success mr-1 rule" id="rule-2">One Qc ± 3SD</span></h5>
                    <h5><span class="badge badge-pill badge-success mr-1 rule" id="rule-3">Two Qc Sim ±2SD</span></h5>
                    <h5><span class="badge badge-pill badge-success mr-1 rule" id="rule-4">Four Qc Sim ± 1SD</span></h5>
                    <h5><span class="badge badge-pill badge-success mr-1 rule" id="rule-5">Ten Qc in Same Side</span>
                    </h5>
                </div>
                <button id="exportChart" class="btn btn-blz mb-3" style="width: 10%">Export Chart</button>
                <table id="qc-approval-result-table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>QC Name</th>
                            <th>Lot Name</th>
                            <th>Test Name</th>
                            <th>Mean</th>
                            <th>SD</th>
                            <th>Result</th>
                            <th>Time</th>
                        </tr>
                    </thead>

                </table>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@endif
<div class="modal fade" id="modal-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="questionnaire-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: 1px solid white; z-index: 1">
                    <h4 class="modal-title" >{{--Test Questionnaire--}}</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="questionnaire-modal-body">

                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
<div class="modal fade" id="modal-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>
                    <br>
                    <div id="critical-options" class="row">
                        <div class="col-3">
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input"  id="template-critical-btn">
                                <label class="custom-control-label" for="template-critical-btn" style="margin-right: 10px;font-weight: 300;"> Critical Result</label>
                            </div>
                        </div>
                        <div class="col-12 critical-section-result" style="display: none">
                            <br>
                            <p><b>Critical Comment</b></p>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                </div>
                                <textarea maxlength="500" class="form-control template-critical-text"  rows="4" cols="50"></textarea>
                            </div>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="modal-footer justify-content-end">
                            <button id="save-template-results-options"
                                style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;"
                                class="btn btn-success">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>



<div class="modal fade" id="modal-time-log">
    <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Time Line Log</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                        <div id="sample-time-log"></div>
                        </div>
                    </div>
                </div>
            </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>
<div class="modal fade" id="ck-modal">
    <div class="modal-dialog modal-lg">

        <div class="modal-content">
            <div class="modal-header">
                <div id="ck-sample-id"></div>
                <h3 class="modal-title">Fill Comment</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <div class="alert alert-danger alert-danger-ck" role="alert" style="display: none;"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 mb-3">
                        <p><b>Suggestions</b></p>
                        <select id="ck-suggestions" class="form-control">
                            <option value="">Select Suggestions</option>
                        </select><br />
                    </div>
                    <div class="col-12">
                        <textarea class="ckeditor" id="ckeditor"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="modal-footer justify-content-between">
                        @permission('add_processing_approval_result')
                        <button id="save-ck-comment"
                            style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;"
                            class="btn btn-success">Save</button>
                        @endpermission
                    </div>
                </div>
            </div>
        </div>

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

                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Reference Comment</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                               <div id="view-reference-comment"></div>
                            </div>
                        </div>
                    </div>
                </div>

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

                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Patient History</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12">
                               <div id="view-patient-history"></div>
                            </div>
                        </div>
                    </div>
                </div>

            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
    @include('operations.layout.modals.confirm_result')
@endsection

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

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

        // Search button click handler - triggers table reload
        $(document).on('click', '#approval-search-btn', function(e) {
            e.preventDefault();
            var table = $('#approval-table').DataTable();
            if (table) {
                table.draw();
            }
        });

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

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

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

        // Hospital change handler with AJAX for loading locations
        $(document).on('change', "#approval-hospital-id", 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);
            });
            ApprovalfilterChanged = true;
        });

        // Initial group-by state - wait for DataTable to be ready
        setTimeout(function() {
            var table = $('#approval-table').DataTable();
            if (table && $('#approval-group-by').is(':checked')){
                table.columns([11, 12, 13, 14]).visible(false);
                table.rowGroup().enable();
            }
        }, 100);

        if($('#approval-group-by').is(':checked')){
            var table = $('#approval-table').DataTable();
            table.columns([11, 12, 13, 14]).visible(false);
            table.rowGroup().enable();
        }

        $("#approval-group-by").change(function(){
            var table = $('#approval-table').DataTable();
            $('#approval-group-by-test').prop('checked', false);
            table.columns([3]).visible(true);
            if($('#approval-group-by').is(':checked')){
                table.columns([ 11, 12, 13, 14]).visible(false);
                table.rowGroup().enable().draw();
            }else {
                table.columns([ 11, 12, 13, 14]).visible(true);
                table.rowGroup().disable().draw();
            }
        });

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

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

            var data = {
                sample_ids:sample_ids
            }
            var 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/approve/all",
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify(data),
            }).done(function(data ) {
                table.draw();
                toastr.success("All Samples approved successfully");
                approve_button.html('Approve All Selected').attr('disabled', false);

            }).fail(function(jqXHR, textStatus, errorThrown) {
                approve_button.html('Approve All Selected').attr('disabled', false);
                if(jqXHR && jqXHR.responseJSON && jqXHR.responseJSON.errorMessage) toastr.error(jqXHR.responseJSON.errorMessage)
                else toastr.error("Internal error encountered")
                table.draw();
            });
            return false;
        });
    });

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

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

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

</script>

@endsection