@extends('operations.layout.mainlayout')

@section('content')

{{--    @if(session('role') == 15)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
<style>
.comment-success {
    font-size: 20px;
    background: transparent;
    border: none;
    color: green;
}

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

.contain-filters > div {
    display: flex;
}

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

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

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

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

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

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

.reservations-search-bar-btn:active {
    transform: translateY(0);
    outline: none;
}
.filters-toggle-btn {
    background: #F9FAFB;
    box-shadow: 0px 2px 30px 0px #0000000F;
    color: var(--blazma-primary);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 30px;
    padding: 7px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    line-height: 1;
}
.filters-toggle-btn:hover {
    background: var(--blazma-primary);
    color: #fff0f4;
    box-shadow: 0 5px 18px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}
.filters-toggle-btn:focus {
    outline: none;
}
</style>
<link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header p-0">
        <div class="container-fluid card m-0">
            <div class="row">
                <div class="col-sm-6 m-0 card ">
                    <h1 class="card-body m-0 text-dark mb-2" style="color: var(--blazma-text)!important;">Samples Report</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">
                    <!-- /.card -->



                        <div class="card bg-light mr-0">
                                <div class="card-body">
                                    <div class="row justify-content-between contain-filters" id="reservations-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"><i class="fa fa-eye"></i></span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text" placeholder="Reservation ID" class="form-control search-input" id="res-no"  />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" id="reservation-status-id-report" >
                                                        <option value="">Reservation Status</option>
                                                        @foreach($statuses as $status)
                                                            <option value="{{$status->ORDER_STATUS_ID}}">{{$status->LAB_DESC_EN}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" name="reservation_type" id="reservation_type">
                                                        <option value="">Reservation Type</option>
                                                        <option value="1">Normal</option>
                                                        <option value="2">Home Visit</option>
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="reservation-date-from-reservation-report" class="form-control search-input" type="text" placeholder="Date From" value="{{$start_date}}">
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="reservation-date-to-reservation-report" class="form-control search-input"  type="text" 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"  class="form-control search-input" id="intend-no" placeholder="Internal No." />
                                            </div>
                                            @endif
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <select class="form-control rhospital_id search-input" id="report-booking-source" name="bsource">
                                                    <option value="">Booking Source</option>
                                                    <option value="1">B2B Outreach</option>
                                                    <option value="2">B2B Operations</option>
                                                    <option value="3">B2C Operations</option>
                                                    <option value="4">Website</option>
                                                    <option value="5">Mobile App</option>
                                                </select>
                                            </div>

                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <select class="form-control search-input" id="report-reference-doctor-id" name="reference_doctor_id">
                                                    <option value="">Reference Doctor</option>
                                                    @foreach($doctors as $doctor)
                                                        <option value="{{$doctor->ID}}">{{$doctor->NAME}}</option>
                                                    @endforeach
                                                </select>
                                            </div>


                                        </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"><i class="fa fa-eye"></i></span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text"  placeholder="ID" class="form-control search-input" id="sample-identification" />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                             <input type="text"  placeholder="NAME" class="form-control search-input" id="sample-name"  />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  placeholder="Mobile No." class="form-control search-input" id="sample-mobile"  />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                             <input type="text"  placeholder="Passport" class="form-control search-input" id="sample-passport" />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  placeholder="MRN" class="form-control search-input" id="mrn-no"  />
                                            </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 class="d-flex justify-content-between align-items-center mt-2">
                                                <select class="form-control col-md-2 rhospital_id search-input" id="report-released" style="width: auto">
                                                    <option value="">SMS Released Status </option>
                                                    <option value="released">Released</option>
                                                    <option value="not_released">Not Released</option>
                                                </select>
                                            </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"><i class="fa fa-eye"></i></span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text"  placeholder="Sample ID" class="form-control search-input" id="sample-id" />
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control report-sample-status-id search-input" multiple id="report-sample-status-id" >
                                                        <option value="">Sample Status</option>
                                                        <option value="-1">Rejected</option>
                                                        <option value="1">Order Confirmed</option>
                                                        <option value="13">Pre Analytical</option>
                                                        <option value="2">Sample Collected</option>
                                                        <option value="6">In Transit</option>
                                                        <option value="7">Dropped off</option>
                                                        <option value="5">Outsourced</option>
                                                        <option value="3">Received</option>
                                                        <option value="4">Ready</option>
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <select required class="form-control search-input" id="report-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">
                                                <input id="report-date-from" placeholder="Collection Date From" autocomplete="off" class="form-control date-from-reservation-report search-input" type="text">
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="report-date-to" autocomplete="off" placeholder="Collection Date To" class="form-control date-to-reservation-report search-input"  type="text">
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="reciveing-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="reciveing-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"><i class="fa fa-eye"></i></span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <input type="text"  class="form-control search-input" id="reservation-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="report-status-id" name="status">
                                                <option value="">Test Status</option>
                                                <option value="-5">Pending</option>
                                                <option value="1">Confirmed</option>
                                                <option value="2">Collected</option>
                                                <option value="13">Pre-analytical</option>
                                                <option value="3">Received</option>
                                                <option value="19">Preformed</option>
                                                <option value="8">Validated</option>
                                                <option value="4">Ready</option>
                                                <option value="-3">Cancelled</option>
                                                <option value=-2"">Refunded</option>
                                                <option value="-1">Rejected</option>
                                            </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control col-md-2 select_test search-input" placeholder="Test Name" multiple="multiple" id="samples-category-id" name="package_id" style="width: auto">
                                            <option></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">
                                                <select class="form-control col-md-2 select_package search-input" multiple="multiple" id="reservation-packages" name="package_id" style="width: auto">
                                                    <option></option>
                                                    @foreach($packagesLists as $package)
                                                        <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            @if(empty(session('is_primary')) || !empty(session('org_id')) || session('role') == 17)
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" id="report-result" name="result">
                                                            <option value="">Result Status</option>
                                                            <option value="-1">Pending</option>
                                                            <option value="1">Negative</option>
                                                            <option value="2">Positive</option>
                                                            <option value="3">Pending Release</option>
                                                        </select>
                                            </div>
                                            @endif

                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="report-r-date-from" autocomplete="off" class="form-control collect-from-reservation-report search-input" type="text" name="date_from" value="@if(!empty($date_from)){{$date_from}}@endif" placeholder="Result Date From">
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input id="report-r-date-to" autocomplete="off" class="form-control collect-to-reservation-report search-input" type="text" name="date_from" value="@if(!empty($date_from)){{$date_from}}@endif" placeholder="Result Date To">
                                            </div>

                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  class="form-control search-input" id="report-r-test-word" placeholder="Word of Template" />
                                            </div>

                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <input type="text"  class="form-control search-input" id="reservation-ng-code" placeholder="NG Code" />
                                            </div>

                                        </div>
                                        </div>

                                        <div class="mb-2">
                                        <div class="filter">
                                        <div class="d-flex justify-content-between align-items-center">
                                                <span class="filter-name">Branch</span>
                                                <span id="branches-number" class="filter-number"><i class="fa fa-eye"></i></span>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-3" @if(empty(session('is_primary')) || !empty(session('org_id')) || session('role') == 17) style="display: none" @endif>
                                                 <select class="form-control select_branch search-input" id="report-hospital-id" multiple name="hospital[]">
                                                        <option value="">Registration Branch</option>
                                                        @foreach($hospitals as $ehospital)
                                                            <option @if((!empty($hospital) && $hospital == $ehospital->ID) || (!empty(session('role'))  && session('role') == 1 && session('hospital_id') == $ehospital->ID)) selected @endif value="{{$ehospital->ID}}">{{$ehospital->NAME_EN}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2" @if(empty(session('is_primary')) || !empty(session('org_id')) || session('role') == 17) style="display: none" @endif>
                                            <select class="form-control rhospital_id search-input" id="processing-hospital-id" name="processing_hospital">
                                                        <option value="">Processing Branch</option>
                                                        @foreach($processing_hospitals as $phospital)
                                                            <option @if(!empty($hospital) && $hospital == $phospital->ID) selected @endif value="{{$phospital->ID}}">{{$phospital->NAME_EN}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <select class="form-control rhospital_id search-input" id="reservation_collection_branch_id" name="collection_branch">
                                                    <option value="">Collection Branch</option>
                                                    @foreach($hospitals as $ehospital)
                                                        <option @if((!empty($hospital) && $hospital == $ehospital->ID) || (!empty(session('role'))  && session('role') == 1 && session('hospital_id') == $ehospital->ID)) selected @endif value="{{$ehospital->ID}}">{{$ehospital->NAME_EN}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control search-input" id="reservation-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="reservation-unit-category-id" name="unit_category">
                                                    <option value="">Unit Category</option>
                                                    @foreach($unit_categories as $unitCategory)
                                                        <option value="{{$unitCategory->ID}}">{{$unitCategory->NAME_EN}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2" @if(!empty(session('org_id')) || session('role') == 17) style="display: none" @endif>
                                            <select required id="report-org-id" class="form-control select_client search-input" multiple name="org_id[]">
                                                            <option value="all">Select All</option>
                                                            @foreach($companies as $company)
                                                                <option @if(!empty(session('role'))  && (!empty(session('org_id')) || session('role') == 17) && !empty(session('org_id')) && session('org_id') == $company->ID) selected @endif value="{{$company->ID}}">{{$company->COMPANY_NAME}}{{!empty($company->CLIENT_CODE)?' ('.$company->CLIENT_CODE.')':''}}</option>
                                                            @endforeach
                                                        </select>
                                            </div>

                                            <div class="d-flex justify-content-between align-items-center mt-2" @if(!empty(session('org_id')) || session('role') == 17) style="display: none" @endif>
                                                <select required id="report-exclude-org-id" class="form-control select_exclude_client search-input" multiple name="exclude_org_id[]">
                                                    <option value="all">Select All</option>
                                                    @foreach($companies as $company)
                                                        <option value="{{$company->ID}}">{{$company->COMPANY_NAME}}{{!empty($company->CLIENT_CODE)?' ('.$company->CLIENT_CODE.')':''}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                            <select class="form-control rhospital_id search-input" id="report-location-id" name="location">
                                                        <option value="">Location</option>
                                                        @if(count($locations) > 0)
                                                            @foreach($locations as $location)
                                                                <option @if(!empty(session('location_id')) && session('location_id') == $location->ID) selected @endif value="{{$location->ID}}">{{$location->NAME_EN}}</option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center mt-2">
                                                <select class="form-control col-md-2 rhospital_id search-input" id="report-read-result" style="width: auto">
                                                    <option value=""> Read by Client</option>
                                                    <option value="read">Read</option>
                                                    <option value="not_read">Not Read</option>
                                                </select>
                                            </div>
                                            @if(!session()->has('org_id') || empty(session('org_id')))
                                                <div class="d-flex justify-content-between align-items-center mt-2">
                                                    <select class="form-control col-md-2 rhospital_id search-input" id="reservation-approved-user" style="width: auto">
                                                        <option value="">Approval User</option>
                                                        @foreach($users as $user)
                                                            <option value="{{$user->ID}}">{{$user->USERNAME}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            @endif
                                        </div>
                                        </div>
                                </div>

                            <div class="card-footer mt-3" id="reservation-report-filters-footer">



                                <div class="row">



                                    <div class="@if(session('role') == 4) col-md-6 @else col-md-6 @endif">
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input search-input" checked name="group-by-reservation" value="urgent" id="group-by-reservation">
                                            <label class="custom-control-label" for="group-by-reservation" style="margin-right: 10px;font-weight: 300;"> Group by Reservation ID</label>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 text-right d-flex justify-content-end align-items-center">
                                        <input type="checkbox" class="rounded-checkbox search-input" value="is_urgent_stat" id="report-is-urgent-stat">
                                        <label for="report-is-urgent-stat" style="margin-right: 10px;font-weight: 300;"> IS Urgent </label>

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

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

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

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

                                        <input type="checkbox" class="rounded-checkbox search-input" value="on_time" id="report-on-time">
                                        <label for="report-on-time" style="margin-right: 10px;font-weight: 300;"> On Time</label>
                                    </div>
                                    @permission('print_samples_results**')
                                    {{-- <div class="col-md-1">
                                             <a style="width: 100%;color:white !important;margin-top:2px;" id="print-all-results" href="" type="button" class="btn btn-sm btn-info">
                                                 Print All Results
                                             </a>
                                     </div>--}}
                                    @endpermission
                                    @permission('print_samples_barcodes**')
                                    {{--<div class="col-md-1">
                                        <a style="width: 100%;color:white !important;margin-top:2px;" id="print-all-barcodes" href="" type="button" class="btn btn-sm btn-info">
                                            Print All Barcodes
                                        </a>
                                    </div>--}}
                                    @endpermission
                                </div>
                            </div>
                            <div class="reservations-search-bar mt-3">
                                <div class="reservations-search-bar-left">
                                    <i class="fa fa-filter mr-2"></i>
                                    <span id="active-filters-label">Ready to search</span>
                                </div>
                                <div class="d-flex align-items-center">
                                    <button type="button" class="filters-toggle-btn mr-3" title="Toggle Filters">
                                        <i class="fa fa-chevron-up"></i>
                                    </button>
                                    <button type="button" id="reservations-search-btn" class="reservations-search-bar-btn">
                                        <i class="fa fa-search mr-2"></i> Search
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>

                    <div class="card">
                    <div class="card-body pt-0">
                    <table id="reservation-report-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Reservation ID</th>
                                    <th>Sample ID</th>
                                   <!-- <th>Test ID</th>-->
                                    <th>Test Name</th>
                                    <th>Patient</th>
                                    <th>Identification ID</th>
                                    <!-- <th>Nationality</th> -->
                                    <th>Regestrated Branch</th>
                                    <th>Processing Branch</th>
                                    <th>Processing Unit</th>
                                    <th>Regestrated at</th>
                                    <th>Collected at</th>
                                    <th>Received at</th>
                                    <th>Expected Result Time</th>
                                    <th>Is On Hold</th>
                                    <th>Test Status</th>
                                    <th>Result</th>
{{--                                    <th>HESN No.</th>--}}
                                    <th>Time Log</th>
                                    <th>Action</th>
                                </tr>
                                </thead>

                            </table>
                    </div>

                    </div>


                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->

<div class="modal fade" id="modal-comments">
    <div class="modal-dialog modal-lg">
        <form id="comment-form">
            <div class="modal-content">
                <div class="modal-header">
                    <div id="sample-id"></div>
                    <h3 class="modal-title">Test 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_sample_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>
                        </div>
                    </div>
                    @endpermission
                </div>
            </div>
        </form>
        <!-- /.card -->
    </div>
    <!-- /.col -->
</div>

<div class="modal fade" id="modal-lg-release">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Release Report</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col">
                        <p>Would you like to send all results or only this test ?</p>
                    </div>
                </div>
            </div>

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

                    <a single-test="1" test-id="" id="release-single-report" style="color:#fff !important;background-color: #6c757d !important; border-color: #6c757d !important; display:inline;" class="btn btn-danger release-report single-test" target="_blank"  href="#">
                        Only this test
                    </a>
                </div>

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


<div class="modal fade" id="modal-view-result">
        <div class="modal-dialog modal-lg">
            <form>
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="sample-id"></div>
                        <h3 class="modal-title">View Results</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="patient-info-result"></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>
                    </div>
                    <div class="row">
                            <div class="modal-footer justify-content-between">
                            </div>
                        </div>
                </div>
</div>
</div>

<div class="modal fade" id="modal-mc-values">
        <div class="modal-dialog modal-md">
            <form id="validate-mc-form">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="result-id"></div>
                        <h3 class="modal-title">Fill MIC Values</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div id="mc-results" class="row">
                        </div>
                        <br>
                        <div class="row">
                            <div class="modal-footer justify-content-between">
                                <button id="save-mc-results"  style="border-radius: 20px;padding:10px;font-size:15px;min-width:150px;" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
<div class="modal fade" id="modal-items-template">
    <div class="modal-dialog modal-xl">
        <form id="template-form" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <div id="template-sample-id"></div>
                    <h3 class="modal-title">Fill Template Results</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="alert alert-danger alert-danger-validate" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col" style="text-align: center;">
                            <div class="alert alert-danger alert-danger-package" role="alert" style="display: none;"></div>
                        </div>
                    </div>
                    <div id="template-results-specimens" class="row">
                    </div>
                    <div id="template-results-options" class="row">
                    </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">Sample Time 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>


@endsection

@section('footer-scripts')
    <script>
        // Function to get filter request data for reservations report
        function getReservationsAnalysisReportRequestData() {
            return {
                reservation_date_from : $('#reservation-date-from-reservation-report').val(),
                reservation_date_to : $('#reservation-date-to-reservation-report').val(),
                reservation_status_id : $('#reservation-status-id-report').val(),
                reservation_package_id : $('#reservation-packages').val(),
                reservation_test_id : $('#reservation-test-id').val(),
                sample_status_id : $('#report-sample-status-id').val(),
                date_from : $('#report-date-from').val(),
                date_to : $('#report-date-to').val(),
                reciveing_date_from : $('#reciveing-date-from').val(),
                reciveing_date_to : $('#reciveing-date-to').val(),
                processing_hospital_id : $('#processing-hospital-id').val(),
                collection_branch_id : $('#reservation_collection_branch_id').val(),
                result_from : $('#report-r-date-from').val(),
                result_to : $('#report-r-date-to').val(),
                result_word_template : $('#report-r-test-word').val(),
                hospital_id : $('#report-hospital-id').val(),
                status_id : $('#report-status-id').val(),
                org_id : $('#report-org-id').val(),
                exclude_org_id : $('#report-exclude-org-id').val(),
                run_id : $('#report-run-id').val(),
                only_seha : $('#only-seha-pending').is(':checked'),
                result : $('#report-result').val(),
                location : $('#report-location-id').val(),
                test_category : $('#samples-category-id').val(),
                res_id : $('#res-no').val(),
                sample_id : $('#sample-id').val(),
                sample_mobile : $('#sample-mobile').val(),
                sample_identification : $('#sample-identification').val(),
                sample_name : $('#sample-name').val(),
                sample_passport : $('#sample-passport').val(),
                patient_id : $('#patient-id').val(),
                mrn : $('#mrn-no').val(),
                exceed_tat : $('#report-exceed-tat').is(':checked'),
                is_post_pone : $('#report-is-post-pone').is(':checked'),
                is_urgent_stat : $('#report-is-urgent-stat').is(':checked'),
                is_not_normal : $('#report-is-not-normal').is(':checked'),
                on_time : $('#report-on-time').is(':checked'),
                intend : $('#intend-no').val(),
                unit_id : $('#reservation-unit-id').val(),
                unit_category_id : $('#reservation-unit-category-id').val(),
                reference_id : $('#reference-id').val(),
                group_by_reservation : $('#group_by_reservation').is(':checked'),
                user_id : $('#reservation-approved-user').val(),
                is_released : $('#report-released').val(),
                is_read_result : $('#report-read-result').val(),
                is_on_hold : $('#report-is-on-hold').is(':checked'),
                reservation_type : $('#reservation_type').val(),
                booking_source : $('#report-booking-source').val(),
                reference_doctor_id : $('#report-reference-doctor-id').val(),
                reservation_ng_code : $('#reservation-ng-code').val()
            };
        }

        $(document).ready(function() {
            // Filters toggle
            $(document).on('click', '.filters-toggle-btn', function() {
                var $btn     = $(this);
                var $icon    = $btn.find('i');
                var $filters = $('#reservations-filters-row');
                var $footerFilters = $('#reservation-report-filters-footer');
                var hidden   = $btn.data('hidden') || false;
                if (!hidden) {
                    $filters.hide();
                    $footerFilters.hide();
                    $icon.removeClass('fa-chevron-up').addClass('fa-chevron-down');
                    $btn.data('hidden', true);
                } else {
                    $filters.css('display', 'flex');
                    $footerFilters.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;
                $('#res-no, #sample-identification, #sample-name, #sample-mobile, #sample-passport, #mrn-no, #reference-id, #sample-id, #reservation-test-id, #report-r-test-word, #reservation-ng-code, #intend-no').each(function() {
                    if ($(this).val() && $(this).val().trim() !== '') count++;
                });
                $('select[id]').filter(function() {
                    var id = $(this).attr('id');
                    return ['reservation-status-id-report','reservation_type','report-booking-source','report-reference-doctor-id','report-sample-status-id','report-run-id','report-status-id','samples-category-id','reservation-packages','report-result','report-hospital-id','processing-hospital-id','reservation_collection_branch_id','reservation-unit-id','reservation-unit-category-id','report-org-id','report-exclude-org-id','report-location-id','report-read-result','reservation-approved-user','report-released'].indexOf(id) !== -1;
                }).each(function() {
                    var val = $(this).val();
                    if (val && val !== '' && val !== null && !(Array.isArray(val) && val.length === 0)) count++;
                });
                $('input[type=text]').filter('#reservation-date-from-reservation-report, #reservation-date-to-reservation-report, #report-date-from, #report-date-to, #reciveing-date-from, #reciveing-date-to, #report-r-date-from, #report-r-date-to').each(function() {
                    if ($(this).val() && $(this).val().trim() !== '') count++;
                });
                if (count === 0) {
                    $('#active-filters-label').html('Ready to search');
                } else {
                    $('#active-filters-label').html('<strong>' + count + '</strong> filter' + (count > 1 ? 's' : '') + ' applied');
                }
            }

            // Listen to any filter change
            $(document).on('change keyup', '.filter input, .filter select', function() {
                updateActiveFiltersCount();
            });
            updateActiveFiltersCount();

            // Search button click handler - triggers table reload
            $(document).on('click', '#reservations-search-btn', function(e) {
                $('.filter-number').html('<i class="fa fa-eye"></i>');
                e.preventDefault();
                $('.filter-reservation-number').html("<i class='fa fa-eye'></i>");
                var table = $('#reservation-report-table').DataTable();
                if (table) {
                    table.draw();
                }
            });

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

            // Filter totals click handler - update filter counts
            $('.filter-number').click(function () {
                $('.filter-number').html('<span class="spinner-border spinner-border-sm"  aria-hidden="true"></span>').attr('disabled', true);
                $.ajax({
                    async:true,
                    url: '/operations/reservations-report-analysis-totals',
                    data: getReservationsAnalysisReportRequestData(),
                    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)
                        // ReservationfilterChanged = false;
                    }
                });
            });

            // Filter change handlers - set flag but don't trigger search (prevent default handlers in footer-scripts)

            // Initial group-by state - wait for DataTable to be ready
            setTimeout(function() {
                var table = $('#reservation-report-table').DataTable();
                if (table && $('#group-by-reservation').is(':checked')){
                    table.columns([0,3,4,5,6,7]).visible(false);
                    table.rowGroup().enable();
                }
            }, 100);

            // Group by change handler
            $(document).on('change', "#group-by-reservation", function(){
                $('.filter-number').html('<i class="fa fa-eye"></i>');
                ReservationfilterChanged = false;
                var table = $('#reservation-report-table').DataTable();
                if (table) {
                    if($('#group-by-reservation').is(':checked')){
                        table.columns([0,3,4,5,6,7]).visible(false);
                        table.rowGroup().enable().draw();
                    } else {
                        table.columns([0,3,4,5,6,7]).visible(true);
                        table.rowGroup().disable().draw();
                    }
                }
            });
        });

        /*$('#report-date-from,#report-date-to,#report-r-date-from,#report-r-date-to').daterangepicker({
            singleDatePicker: true,
            timePicker: true,
            timePicker24Hour: true,
            autoUpdateInput: false,
            locale: {
                format: 'YYYY-MM-DD HH:mm'
            },
        })*/

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

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

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

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


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

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

        $('.select_test').select2({
            placeholder: "Test Name",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });
        $('.select_package').select2({
            placeholder: "Package Name",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });
        $('.select_branch').select2({
            placeholder: "Registration Branch",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });
        $('.select_client').select2({
            placeholder: "Client",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });
        $('.select_exclude_client').select2({
            placeholder: "Exclude Client",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });
        $('.report-sample-status-id').select2({
            placeholder: "Sample Status",
            theme: 'bootstrap-5',
            containerCssClass: "select2--small-container", // For Select2 v4.0
            selectionCssClass: "select2--small", // For Select2 v4.1
            dropdownCssClass: "select2--small-drop",
        });
        $('.select_client').on('change', function () {
                var selectedValues = $(this).val();
                if (selectedValues.includes('all')) {
                    // If "Select All" is selected, select all other options
                    selectedValues = $('.select_client option').map(function () {
                        if(this.value == 'all') return
                        return this.value;
                    }).get();
                }
                $(this).val(selectedValues).trigger('change.select2');
            });
    </script>
@endsection