@extends('operations.layout.mainlayout')

@section('content')

    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display{
            color:black;
        }
        #modal-control-linked-tests .control-linked-test-form-row{
            align-items:flex-start;
        }
        #modal-control-linked-tests .control-linked-test-price-field{
            display:flex;
            align-items:center;
            gap:12px;
            flex-wrap:nowrap;
            min-height:38px;
        }
        #modal-control-linked-tests .control-linked-test-price-field .custom-control{
            min-height:38px;
            display:flex;
            align-items:center;
            flex:0 0 auto;
        }
        #modal-control-linked-tests #control-linked-test-other-price{
            height:38px;
            width:150px;
            flex:0 0 150px;
        }
        @media (max-width: 767px){
            #modal-control-linked-tests .control-linked-test-price-field{
                flex-wrap:wrap;
            }
            #modal-control-linked-tests #control-linked-test-other-price{
                width:100%;
                flex:1 1 100%;
            }
        }
    </style>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Tests List</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="/operations">Home</a></li>
                        <li class="breadcrumb-item active">Tests List</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="mx-auto col-md-8">

                    <!-- /.card -->

                    <ul class="nav nav-tabs" id="custom-content-below-tab" role="tablist" style="margin-bottom: 15px;">
                                <li class="nav-item">
                                    <a class="nav-link active"  style="color: #007bff !important;" id="custom-content-below-home-tab" data-toggle="pill" href="#custom-content-below-home" role="tab" aria-controls="custom-content-below-home" aria-selected="true">View Tests</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" style="color: #007bff !important;" id="custom-content-below-profile-tab" data-toggle="pill" href="#custom-content-below-profile" role="tab" aria-controls="custom-content-below-profile" aria-selected="false">Control Analysis Tests</a>
                                </li>

                            </ul>
                    <div class="card">

                    <div class="tab-content" id="custom-content-below-tabContent">
                    <div class="tab-pane fade active show" id="custom-content-below-home" role="tabpanel" aria-labelledby="custom-content-below-home-tab">
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="col-12 col-sm-12 col-md-12">
                                <div class="card bg-light">
                                    <div class="card-footer">
                                        <div class="text-right">
                                            <button class="btn btn-sm btn-info" id="import-loinc-code">
                                                <i class="fas fa-file-import"></i> Import Excel
                                            </button>
                                            <a  href="/operations/test-list/export" id="export-tat" class="btn btn-sm btn-success">
                                                <i class="fas fa-download"></i> Export Excel
                                            </a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Test ID</th>
                                    <th>Test Name (EN)</th>
                                    <th>Test Name (AR)</th>
                                    <th>Minimum Price</th>
                                    <th>Report Priority</th>
                                    <th>Active Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($tests as $test)
                                <tr>
                                    <td><a href="/operations/individual-test/{{$test->ID}}">{{$test->ID}}</a></td>
                                    <td>{{$test->NAME_EN}}</td>
                                    <td>{{$test->NAME_AR}}</td>
                                    <td>{{$test->PRICE}}</td>
                                    <td>{{$test->REPORT_PRIORITY}}</td>
                                    <td>@if($test->ACTIVE_STATUS) <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-danger">InActive</span>
                                        @endif</td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <div class="row">
                                <div class="col" style="text-align: center">
                                    @permission('mange_administration_tests')
                                    <a class="btn btn-info" href="/operations/individual-test/0">Add New Test</a>
                                    @endpermission
                                </div>
                            </div>
                            <div class="modal fade" id="import-loinc-code-modal">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h3 class="modal-title">Import Test List</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">
                                                    <input type="hidden" name="list_id" id="list_id" value=""/>
                                                    <div class="col" style="text-align: center;">
                                                        <div class="alert alert-danger alert-danger-hospital" role="alert" style="display: none;"></div>
                                                    </div>
                                                </div>
                                                <div class="row" style="margin-top:20px">
                                                    <div class="col-6">
                                                        <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Upload Test List</p>
                                                        <input style="padding:3px" class="form-control" name="import-file" id="import-file" type="file" />
                                                    </div>
                                                </div>

                                            </div>


                                            <div class="modal-footer justify-content-between">
                                                <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                                                <button style="width:130px;color:#fff" id="import-loinc-list"  type="button" class="btn btn-info">Import</button>
                                            </div>
                                        </form>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>

                        </div>
                        <!-- /.card-body -->
                    </div>
                    <div class="tab-pane fade" id="custom-content-below-profile" role="tabpanel" aria-labelledby="custom-content-below-profile-tab">
                    <div class="card-body">
                            <div class="col-12 col-sm-12 col-md-12">
                                <div class="card bg-light">
                                    <div class="card-footer">
                                        <div class="text-right">
                                            <a href="/operations/control-analysis-tests/export" class="btn btn-sm btn-success">
                                                <i class="fas fa-download"></i> Export Excel
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <table id="control-analysis-table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Test Name (EN)</th>
                                    <th>Test Name (AR)</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($analysis_tests as $analysis_test)
                                <tr>
                                    <td>{{$analysis_test->ID}}</td>
                                    <td style="max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{$analysis_test->NAME_EN}}">{{$analysis_test->NAME_EN}}</td>
                                    <td style="max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{$analysis_test->NAME_AR}}">{{$analysis_test->NAME_AR}}</td>
                                    <td>
                                        <button class="btn btn-sm btn-info control-results" data-id="{{$analysis_test->ID}}" data-is-analysis="{{$analysis_test->IS_ANALYSIS ?? 0}}" style="border-radius:20px;padding:5px 12px;"><i class="fas fa-flask mr-1"></i>Control Result</button>
                                        <button class="btn btn-sm btn-outline-dark control-branches-settings" data-id="{{$analysis_test->ID}}" data-name="{{$analysis_test->NAME_EN}}" data-is-analysis="{{$analysis_test->IS_ANALYSIS ?? 0}}" title="Manage Branches" style="border-radius:20px;padding:5px 12px;"><i class="fas fa-code-branch mr-1"></i>Branches</button>
                                        <button class="btn btn-sm btn-outline-info control-linked-tests-settings" data-id="{{$analysis_test->ID}}" data-name="{{$analysis_test->NAME_EN}}" title="Manage Linked Tests" style="border-radius:20px;padding:5px 12px;"><i class="fas fa-link mr-1"></i>Linked Test</button>
                                        <button class="btn btn-sm btn-outline-secondary control-linked-results-settings" data-id="{{$analysis_test->ID}}" data-name="{{$analysis_test->NAME_EN}}" title="Manage Linked Results" style="border-radius:20px;padding:5px 12px;"><i class="fas fa-vials mr-1"></i>Linked Results</button>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                            </div>
                    </div>
                    </div>
                    </div>
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<div class="modal fade" id="modal-control-results">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Control Results</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-hospital" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" id="control-results" style="margin-top:20px">
</div>
                    </div>

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

<div class="modal fade" id="modal-control-linked-tests">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content" style="border:none;border-radius:8px;overflow:hidden;">
            <div class="modal-header" style="background:var(--blazma-primary);color:#fff;border:none;padding:15px 20px;">
                <h5 class="modal-title" style="font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 40px);"><i class="fas fa-link mr-2"></i>Manage Linked Tests - <span id="control-linked-test-name"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#fff;opacity:.9;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding:18px;background:#f4f6f9;">
                <div class="card" style="border:none;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:18px;">
                    <div class="card-header" style="background:#fff;border-bottom:1px solid #eee;padding:14px 20px;border-radius:8px 8px 0 0;">
                        <h6 class="mb-0" style="font-weight:600;color:#1F3E61;"><i class="fas fa-list mr-1"></i> Assigned Linked Tests</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="control-linked-test-table" class="table table-hover mb-0" style="width:100%;">
                                <thead style="background:#1F3E61;color:#fff;">
                                <tr>
                                    <th>Test</th>
                                    <th>Enable Other Price</th>
                                    <th>Other Price</th>
                                    <th>Hide Result</th>
                                    <th style="width:100px;text-align:center;">Action</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                @permission('mange_administration_tests')
                <div class="card" style="border:none;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);border-top:3px solid var(--blazma-primary);">
                    <div class="card-header" style="background:#fff;border-bottom:1px solid #eee;padding:14px 20px;">
                        <h6 class="mb-0" style="font-weight:600;color:#1F3E61;"><i class="fas fa-plus-circle mr-1"></i> Add Linked Test</h6>
                    </div>
                    <div class="card-body" style="padding:20px;">
                        <div class="row">
                            <div class="col" style="text-align:center;">
                                <div class="alert alert-danger alert-danger-control-linked-test" role="alert" style="display:none;border-radius:6px;"></div>
                            </div>
                        </div>
                        <div class="row control-linked-test-form-row">
                            <div class="col-lg-6 col-md-12 mb-3">
                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Test <span class="text-danger">*</span></label>
                                <select class="form-control rhospital_id" id="control-linked-test-id" style="width:100%;">
                                    <option value="">Select Test</option>
                                    @foreach($tests as $package)
                                        <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Other Price</label>
                                <div class="control-linked-test-price-field">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="control-linked-test-other-price-enabled">
                                        <label class="custom-control-label" for="control-linked-test-other-price-enabled">Enable</label>
                                    </div>
                                    <input type="number" class="form-control" id="control-linked-test-other-price" step="0.01" placeholder="Price" style="display:none;">
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6 mb-3">
                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Hide Result</label>
                                <div class="custom-control custom-switch custom-switch-on-info">
                                    <input type="checkbox" class="custom-control-input" id="control-linked-test-disable-report">
                                    <label class="custom-control-label" for="control-linked-test-disable-report">On</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-center" style="background:#fff;border-top:1px solid #eee;padding:15px;border-radius:0 0 8px 8px;">
                        <button class="btn btn-info px-5" id="add-control-linked-test" style="border-radius:20px;font-weight:600;">
                            <i class="fas fa-plus mr-1"></i> Add Linked Test
                        </button>
                    </div>
                </div>
                @endpermission
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-control-linked-results">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content" style="border:none;border-radius:8px;overflow:hidden;">
            <div class="modal-header" style="background:var(--blazma-primary);color:#fff;border:none;padding:15px 20px;">
                <h5 class="modal-title" style="font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 40px);"><i class="fas fa-vials mr-2"></i>Manage Linked Results - <span id="control-linked-result-test-name"></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#fff;opacity:.9;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="padding:18px;background:#f4f6f9;">
                <div class="card" style="border:none;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:18px;">
                    <div class="card-header" style="background:#fff;border-bottom:1px solid #eee;padding:14px 20px;border-radius:8px 8px 0 0;">
                        <h6 class="mb-0" style="font-weight:600;color:#1F3E61;"><i class="fas fa-list mr-1"></i> Assigned Linked Results</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="control-linked-result-table" class="table table-hover mb-0" style="width:100%;">
                                <thead style="background:#1F3E61;color:#fff;">
                                <tr>
                                    <th>Test</th>
                                    <th style="width:100px;text-align:center;">Action</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                @permission('mange_administration_tests')
                <div class="card" style="border:none;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);border-top:3px solid var(--blazma-primary);">
                    <div class="card-header" style="background:#fff;border-bottom:1px solid #eee;padding:14px 20px;">
                        <h6 class="mb-0" style="font-weight:600;color:#1F3E61;"><i class="fas fa-plus-circle mr-1"></i> Add Linked Results</h6>
                    </div>
                    <div class="card-body" style="padding:20px;">
                        <div class="row">
                            <div class="col" style="text-align:center;">
                                <div class="alert alert-danger alert-danger-control-linked-result" role="alert" style="display:none;border-radius:6px;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Tests <span class="text-danger">*</span></label>
                                <select class="form-control rhospital_id" multiple id="control-linked-result-test-id" style="width:100%;">
                                    @foreach($active_tests ?? $tests as $package)
                                        <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-center" style="background:#fff;border-top:1px solid #eee;padding:15px;border-radius:0 0 8px 8px;">
                        <button class="btn btn-info px-5" id="add-control-linked-result" style="border-radius:20px;font-weight:600;">
                            <i class="fas fa-plus mr-1"></i> Add Linked Results
                        </button>
                    </div>
                </div>
                @endpermission
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-control-branches">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content" style="border:none;border-radius:8px;overflow:hidden;">
            <div class="modal-header" style="background:var(--blazma-primary);color:#fff;border:none;padding:15px 20px;">
                <h5 class="modal-title" style="font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 40px);">
                    <i id="control-branch-title-icon" class="fas fa-code-branch mr-2"></i>
                    Manage <span id="control-branch-entity">Branches</span> — <span id="control-branch-test-name"></span>
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#fff;opacity:.9;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-header" style="background:#f4f6f9;padding:8px 20px;border-top:1px solid #e5e5e5;">
                <ul class="nav nav-pills" id="control-tab" role="tablist" style="margin:0;">
                    <li class="nav-item">
                        <a class="nav-link active" id="control-branches-tab" data-toggle="pill" href="#control-branches-pane" role="tab" aria-controls="control-branches-pane" aria-selected="true"><i class="fas fa-code-branch mr-1"></i> Branches</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="control-clients-tab" data-toggle="pill" href="#control-clients-pane" role="tab" aria-controls="control-clients-pane" aria-selected="false"><i class="fas fa-user-tie mr-1"></i> Clients</a>
                    </li>
                </ul>
            </div>
            <div class="modal-body" style="padding:18px;background:#f4f6f9;">
                <div class="tab-content" id="control-tab-content">

                    {{-- ======================== BRANCHES TAB ======================== --}}
                    <div class="tab-pane fade show active" id="control-branches-pane" role="tabpanel" aria-labelledby="control-branches-tab">

                        {{-- Current Branches Card --}}
                        <div class="card" style="border:none;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:18px;">
                            <div class="card-header" style="background:#fff;border-bottom:1px solid #eee;padding:14px 20px;border-radius:8px 8px 0 0;">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0" style="font-weight:600;color:#1F3E61;"><i class="fas fa-list mr-1"></i> Assigned Branches</h6>
                                    @permission('mange_administration_tests')
                                    <button class="btn btn-outline-danger btn-sm" id="remove-all-control-branches" title="Remove All Branches">
                                        <i class="fas fa-trash-alt mr-1"></i> Remove All
                                    </button>
                                    @endpermission
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive" >
                                    <table id="control-branch-table" class="table table-hover mb-0" style="width:100%;">
                                        <thead></thead>
                                    </table>
                                </div>
                            </div>
                        </div>

                        @permission('mange_administration_tests')
                        {{-- Add Branch Card --}}
                        <div class="card" style="border:none;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);border-top:3px solid var(--blazma-primary);">
                            <div class="card-header" style="background:#fff;border-bottom:1px solid #eee;padding:14px 20px;">
                                <h6 class="mb-0" style="font-weight:600;color:#1F3E61;"><i class="fas fa-plus-circle mr-1"></i> Add Branch</h6>
                            </div>
                            <div class="card-body" style="padding:20px;">
                                <div class="row">
                                    <div class="col" style="text-align:center;">
                                        <div class="alert alert-danger alert-danger-control-branch" role="alert" style="display:none;border-radius:6px;"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-5 col-md-12 mb-3">
                                        <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Branch <span class="text-danger">*</span></label>
                                        <select class="form-control rhospital_id" multiple id="control-branch-hospital-id" style="width:100%;">
                                            @foreach($hospitals as $hospital)
                                                <option value="{{$hospital->ID}}">{{$hospital->NAME_EN}}</option>
                                            @endforeach
                                        </select>
                                        <div class="mt-2">
                                            <button class="btn btn-xs btn-outline-info rounded-pill px-3" id="select-all-branches" type="button"><i class="fas fa-check-double mr-1"></i>Select All</button>
                                            <button class="btn btn-xs btn-outline-secondary rounded-pill px-3 ml-1" id="deselect-all-branches" type="button"><i class="fas fa-times mr-1"></i>Clear</button>
                                        </div>
                                    </div>
                                    <div class="col-lg-7 col-md-12">
                                        <div class="row">
                                            <div class="col-md-3 col-6 mb-3">
                                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Type</label>
                                                <select class="form-control" id="control-branch-type">
                                                    <option value="1">Normal</option>
                                                    <option value="2">Home Visit</option>
                                                </select>
                                            </div>
                                            <div class="col-md-2 col-6 mb-3">
                                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Price</label>
                                                <input class="form-control" step="0.01" type="number" value="0" id="control-branch-price" />
                                            </div>
                                            <div class="col-md-4 col-6 mb-3">
                                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Cost Price</label>
                                                <input class="form-control" step="0.01" type="number" value="0" id="control-branch-cost-price" />
                                            </div>
                                            <div class="col-md-3 col-6 mb-3" id="control-branch-ref-range-wrap" style="display:none;">
                                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Reference Range</label>
                                                <select class="form-control" id="control-branch-ref-range">
                                                    <option value="">— None —</option>
                                                    @foreach($ref_ranges ?? [] as $rr)
                                                        <option value="{{ $rr->ID }}">{{ $rr->NAME_EN }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer text-center" style="background:#fff;border-top:1px solid #eee;padding:15px;border-radius:0 0 8px 8px;">
                                <button class="btn btn-info px-5" id="add-control-branch" style="border-radius:20px;font-weight:600;">
                                    <i class="fas fa-plus mr-1"></i> Add to Branches
                                </button>
                            </div>
                        </div>
                        @endpermission

                    </div>

                    {{-- ======================== CLIENTS TAB ======================== --}}
                    <div class="tab-pane fade" id="control-clients-pane" role="tabpanel" aria-labelledby="control-clients-tab">

                        {{-- Assigned Clients Card --}}
                        <div class="card" style="border:none;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);margin-bottom:18px;">
                            <div class="card-header" style="background:#fff;border-bottom:1px solid #eee;padding:14px 20px;border-radius:8px 8px 0 0;">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0" style="font-weight:600;color:#1F3E61;"><i class="fas fa-list mr-1"></i> Assigned Clients</h6>
                                    @permission('mange_administration_tests')
                                    <button class="btn btn-outline-danger btn-sm" id="remove-all-control-clients" title="Remove All Clients">
                                        <i class="fas fa-trash-alt mr-1"></i> Remove All
                                    </button>
                                    @endpermission
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-danger alert-danger-control-client" role="alert" style="display:none;border-radius:6px;"></div>
                                <div class="table-responsive">
                                    <table id="control-client-table" class="table table-hover mb-0" style="width:100%;">
                                        <thead></thead>
                                    </table>
                                </div>
                            </div>
                        </div>

                        @permission('mange_administration_tests')
                        {{-- Add Client Card --}}
                        <div class="card" style="border:none;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.06);border-top:3px solid var(--blazma-primary);">
                            <div class="card-header" style="background:#fff;border-bottom:1px solid #eee;padding:14px 20px;">
                                <h6 class="mb-0" style="font-weight:600;color:#1F3E61;"><i class="fas fa-plus-circle mr-1"></i> Add Client</h6>
                            </div>
                            <div class="card-body" style="padding:20px;">
                                <div class="row">
                                    <div class="col-lg-5 col-md-12 mb-3">
                                        <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Client <span class="text-danger">*</span></label>
                                        <select class="form-control rhospital_id" multiple id="control-client-id" style="width:100%;">
                                            @foreach($clients as $client)
                                                <option class="control-client-option" value="{{$client->ID}}" data-contract-type-id="{{$client->CONTRACT_TYPE_ID}}">{{$client->CLIENT_NAME}}</option>
                                            @endforeach
                                        </select>
                                        <div class="mt-2">
                                            <button class="btn btn-xs btn-outline-info rounded-pill px-3" id="select-all-control-clients" type="button"><i class="fas fa-check-double mr-1"></i>Select All</button>
                                            <button class="btn btn-xs btn-outline-secondary rounded-pill px-3 ml-1" id="deselect-all-control-clients" type="button"><i class="fas fa-times mr-1"></i>Clear</button>
                                        </div>
                                    </div>
                                    <div class="col-lg-7 col-md-12">
                                        <div class="row">
                                            <div class="col-md-3 col-6 mb-3">
                                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Contract Type</label>
                                                <select class="form-control" id="control-contract-type-filter">
                                                    <option value="">All Contract Types</option>
                                                    @foreach($contractTypes as $contractType)
                                                        <option value="{{$contractType->ID}}">{{$contractType->NAME}}-{{$contractType->CODE}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3 col-6 mb-3">
                                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Type</label>
                                                <select class="form-control" id="control-client-type">
                                                    <option value="1">Normal</option>
                                                    <option value="2">Home Visit</option>
                                                </select>
                                            </div>
                                            <div class="col-md-2 col-6 mb-3">
                                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Price</label>
                                                <input class="form-control" step="0.01" type="number" value="0" id="control-client-price" />
                                            </div>
                                            <div class="col-md-4 col-6 mb-3">
                                                <label class="mb-1" style="font-size:13px;font-weight:600;color:#1F3E61;">Cost Price</label>
                                                <input class="form-control" step="0.01" type="number" value="0" id="control-client-cost-price" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer text-center" style="background:#fff;border-top:1px solid #eee;padding:15px;border-radius:0 0 8px 8px;">
                                <button class="btn btn-info px-5" id="add-control-client" style="border-radius:20px;font-weight:600;">
                                    <i class="fas fa-plus mr-1"></i> Add to Clients
                                </button>
                            </div>
                        </div>
                        @endpermission

                    </div>

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

@endsection
@section('footer-scripts')
    <script>
        $('#import-loinc-code').click(function () {
            $("#import-loinc-code-modal").modal("show");
        });
        $("#import-loinc-list").on("click",function () {

            $('#import-loinc-list').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').attr('disabled', true);

            var fd = new FormData();
            var files = $('#import-file')[0].files;

            fd.append('file',files[0]);
            $.ajax({
                type: "POST",
                url: "/operations/loinc-code-list/import",
                data: fd,
                contentType: false,
                processData: false,
            }).done(function(data ) {
                $('#import-tat-modal').modal('hide');
                $(".alert-danger-hospital").html("");
                $(".alert-danger-hospital").slideUp( "slow", function() {});
                $("#import-file").val('');
                $('#import-loinc-list').html('Import').attr('disabled', false);
                $("#import-loinc-code-modal").modal("hide");
            }).fail(function(jqXHR, textStatus, errorThrown) {
                $(".alert-danger-hospital").html(jqXHR.responseJSON.errorMessage);
                $(".alert-danger-hospital").slideDown( "slow", function() {});
                $("#import-file").val('');
                $('#import-loinc-list').html('Import').attr('disabled', false);
            });

            return false;
        });

        // Build ref-range select template once at page load
        var _refRanges = @json($ref_ranges ?? []);
        var _refRangeOptionsHtml = '<option value="">— None —</option>'
            + _refRanges.map(function(r){ return '<option value="' + r.ID + '">' + r.NAME_EN + '</option>'; }).join('');
        var $refSelectTemplate = $('<select class="form-control form-control-sm branch-ref-range-select" style="min-width:150px;"></select>').html(_refRangeOptionsHtml);

        $("#control-analysis-table tbody").on('click', '.control-linked-tests-settings', function () {
            var testId = $(this).attr("data-id");
            var testName = $(this).attr("data-name");
            $("#control-linked-test-name").text(testName);
            $("#modal-control-linked-tests").attr("data-test-id", testId);
            $(".alert-danger-control-linked-test").slideUp();
            if ($.fn.DataTable.isDataTable('#control-linked-test-table')) {
                $('#control-linked-test-table').DataTable().clear().destroy();
            }
            loadControlLinkedTestTable(testId);
            $('#modal-control-linked-tests').modal('show');
        });

        function loadControlLinkedTestTable(testId) {
            $("#control-linked-test-table").DataTable({
                "responsive": true,
                "autoWidth": false,
                "searching": true,
                "paging": true,
                "bInfo": true,
                "lengthChange": false,
                "pageLength": 10,
                "language": {
                    "emptyTable": "<div class='text-center py-3'><i class='fas fa-inbox fa-2x text-muted mb-2'></i><br><span class='text-muted'>No linked tests assigned yet</span></div>",
                    "processing": "<i class='fas fa-spinner fa-spin fa-2x text-muted'></i>"
                },
                serverSide: true,
                processing: true,
                ajax: '/operations/data/individual-test/' + testId + '/link',
                "order": [[0, "desc"]],
                columns: [
                    { data: "LabCategoryPackage.NAME_EN", name: "LabCategoryPackage.NAME_EN" },
                    { data: "IS_PRICE_EMPTY", name: "IS_PRICE_EMPTY", className: "text-center" },
                    { data: "PRICE", name: "PRICE", className: "text-center" },
                    { data: "DISABLE_REPORT", name: "DISABLE_REPORT", className: "text-center" },
                    { data: "LabCategoryPackage.ID", name: "LabCategoryPackage.ID", className: "text-center", orderable: false },
                ],
                "rowCallback": function(row, data) {
                    var disableReportValue = data["DISABLE_REPORT"] == 1 ? 1 : 0;
                    var disableReport = disableReportValue ? 'ON' : 'OFF';
                    var emptyPriceValue = data["IS_PRICE_EMPTY"] == 1 ? 1 : 0;
                    var emptyPrice = emptyPriceValue ? 'ON' : 'OFF';
                    var linkedTestId = data["LabCategoryPackage"] ? data["LabCategoryPackage"]["ID"] : '';

                    @permission('mange_administration_tests')
                    $('td:eq(1)', row).html('<a href="#" class="control-xedit-linked-test-empty-price" data-pk="' + data["ID"] + '" data-title="Toggle Empty Price" data-value="' + emptyPriceValue + '">' + emptyPrice + '</a>');
                    $('td:eq(2)', row).html('<a href="#" class="control-xedit-linked-test-other-price" data-pk="' + data["ID"] + '" data-title="Toggle Other Price" data-value="' + data["PRICE"] + '">' + data["PRICE"] + '</a>');
                    $('td:eq(3)', row).html('<a href="#" class="control-xedit-linked-test-disable-report" data-pk="' + data["ID"] + '" data-title="Toggle Disable Report" data-value="' + disableReportValue + '">' + disableReport + '</a>');
                    $('td:eq(4)', row).html('<button class="btn btn-outline-danger btn-sm remove-control-linked-test" data-id="' + linkedTestId + '" title="Remove"><i class="fas fa-times"></i></button>');
                    @else
                    $('td:eq(1)', row).html(emptyPrice);
                    $('td:eq(2)', row).html(data["PRICE"]);
                    $('td:eq(3)', row).html(disableReport);
                    @endpermission
                },
                "drawCallback": function() {
                    $(".control-xedit-linked-test-disable-report").editable({
                        type: 'select',
                        url: '/operations/test-linked/disable-report',
                        source: [
                            {value: 0, text: "Off"},
                            {value: 1, text: "On"}
                        ],
                    });
                    $(".control-xedit-linked-test-empty-price").editable({
                        type: 'select',
                        url: '/operations/test-linked/empty-price',
                        source: [
                            {value: 0, text: "Off"},
                            {value: 1, text: "On"}
                        ],
                    });
                    $(".control-xedit-linked-test-other-price").editable({
                        type: 'number',
                        step: 'any',
                        url: '/operations/test-linked/other-price',
                    });
                }
            });
        }

        $("#control-linked-test-other-price-enabled").on('change', function () {
            if ($(this).is(':checked')) {
                $("#control-linked-test-other-price").show();
            } else {
                $("#control-linked-test-other-price").val('').hide();
            }
        });

        $("#add-control-linked-test").on('click', function () {
            var testId = $("#modal-control-linked-tests").attr("data-test-id");
            var linkedTestId = $("#control-linked-test-id").val();
            var otherPrice = $("#control-linked-test-other-price-enabled").is(':checked') ? $("#control-linked-test-other-price").val() : null;
            var disableReport = $("#control-linked-test-disable-report").is(':checked');
            if (!linkedTestId) {
                $(".alert-danger-control-linked-test").html("Linked Test is required").slideDown("slow");
                return;
            }
            $('#add-control-linked-test').html('<span class="spinner-border spinner-border-sm mr-2" role="status"></span>Loading...').attr('disabled', true);
            $.ajax({
                type: "POST",
                url: "/operations/individual-test/" + testId + "/link",
                data: JSON.stringify({
                    test_id: linkedTestId,
                    other_price: otherPrice,
                    disable_report: disableReport,
                }),
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $(".alert-danger-control-linked-test").slideUp();
                $('#control-linked-test-table').DataTable().clear().destroy();
                loadControlLinkedTestTable(testId);
                $("#control-linked-test-id").val('').trigger('change');
                $("#control-linked-test-other-price-enabled").prop("checked", false);
                $("#control-linked-test-other-price").val('').hide();
                $("#control-linked-test-disable-report").prop("checked", false);
                $('#add-control-linked-test').html('<i class="fas fa-plus mr-1"></i> Add Linked Test').attr('disabled', false);
                toastr.success('Linked test added successfully');
            }).fail(function (jqXHR) {
                $(".alert-danger-control-linked-test").html(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error adding linked test').slideDown("slow");
                $('#add-control-linked-test').html('<i class="fas fa-plus mr-1"></i> Add Linked Test').attr('disabled', false);
            });
        });

        $("#modal-control-linked-tests").on('click', '.remove-control-linked-test', function () {
            var linkedTestId = $(this).attr("data-id");
            var testId = $("#modal-control-linked-tests").attr("data-test-id");
            if (!linkedTestId) return;
            $.ajax({
                type: "DELETE",
                url: "/operations/individual-test/" + testId + "/link/" + linkedTestId,
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $('#control-linked-test-table').DataTable().clear().destroy();
                loadControlLinkedTestTable(testId);
                toastr.success('Linked test removed successfully');
            }).fail(function (jqXHR) {
                toastr.error(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error removing linked test');
            });
        });

        $("#control-analysis-table tbody").on('click', '.control-linked-results-settings', function () {
            var testId = $(this).attr("data-id");
            var testName = $(this).attr("data-name");
            $("#control-linked-result-test-name").text(testName);
            $("#modal-control-linked-results").attr("data-test-id", testId);
            $(".alert-danger-control-linked-result").slideUp();
            if ($.fn.DataTable.isDataTable('#control-linked-result-table')) {
                $('#control-linked-result-table').DataTable().clear().destroy();
            }
            loadControlLinkedResultTable(testId);
            $('#modal-control-linked-results').modal('show');
        });

        function loadControlLinkedResultTable(testId) {
            $("#control-linked-result-table").DataTable({
                "responsive": true,
                "autoWidth": false,
                "searching": true,
                "paging": true,
                "bInfo": true,
                "lengthChange": false,
                "pageLength": 10,
                "language": {
                    "emptyTable": "<div class='text-center py-3'><i class='fas fa-inbox fa-2x text-muted mb-2'></i><br><span class='text-muted'>No linked result tests assigned yet</span></div>",
                    "processing": "<i class='fas fa-spinner fa-spin fa-2x text-muted'></i>"
                },
                serverSide: true,
                processing: true,
                ajax: '/operations/data/individual-test/' + testId + '/linked-results',
                "order": [[0, "desc"]],
                columns: [
                    { data: "linkedTest.NAME_EN", name: "linkedTest.NAME_EN" },
                    { data: "linkedTest.ID", name: "linkedTest.ID", className: "text-center", orderable: false },
                ],
                "rowCallback": function(row, data) {
                    var linkedResultTestId = data["linkedTest"] ? data["linkedTest"]["ID"] : '';
                    @permission('mange_administration_tests')
                    $('td:eq(1)', row).html('<button class="btn btn-outline-danger btn-sm remove-control-linked-result" data-id="' + linkedResultTestId + '" title="Remove"><i class="fas fa-times"></i></button>');
                    @endpermission
                }
            });
        }

        $("#add-control-linked-result").on('click', function () {
            var testId = $("#modal-control-linked-results").attr("data-test-id");
            var linkedResultTestIds = $("#control-linked-result-test-id").val();
            if (!linkedResultTestIds || linkedResultTestIds.length === 0) {
                $(".alert-danger-control-linked-result").html("Please select at least one test").slideDown("slow");
                return;
            }
            $('#add-control-linked-result').html('<span class="spinner-border spinner-border-sm mr-2" role="status"></span>Loading...').attr('disabled', true);
            $.ajax({
                type: "POST",
                url: "/operations/individual-test/" + testId + "/linked-result",
                data: JSON.stringify({
                    test_ids: linkedResultTestIds,
                }),
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $(".alert-danger-control-linked-result").slideUp();
                $('#control-linked-result-table').DataTable().clear().destroy();
                loadControlLinkedResultTable(testId);
                $("#control-linked-result-test-id").val(null).trigger('change');
                $('#add-control-linked-result').html('<i class="fas fa-plus mr-1"></i> Add Linked Results').attr('disabled', false);
                toastr.success('Linked results added successfully');
            }).fail(function (jqXHR) {
                $(".alert-danger-control-linked-result").html(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error adding linked results').slideDown("slow");
                $('#add-control-linked-result').html('<i class="fas fa-plus mr-1"></i> Add Linked Results').attr('disabled', false);
            });
        });

        $("#modal-control-linked-results").on('click', '.remove-control-linked-result', function () {
            var linkedResultTestId = $(this).attr("data-id");
            var testId = $("#modal-control-linked-results").attr("data-test-id");
            if (!linkedResultTestId) return;
            $.ajax({
                type: "DELETE",
                url: "/operations/individual-test/" + testId + "/linked-result/" + linkedResultTestId,
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $('#control-linked-result-table').DataTable().clear().destroy();
                loadControlLinkedResultTable(testId);
                toastr.success('Linked result removed successfully');
            }).fail(function (jqXHR) {
                toastr.error(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error removing linked result');
            });
        });

        $("#control-analysis-table tbody").on('click', '.control-branches-settings', function () {
            var testId = $(this).attr("data-id");
            var testName = $(this).attr("data-name");
            var isAnalysis = parseInt($(this).attr("data-is-analysis") || 0);
            $("#control-branch-test-name").text(testName);
            $("#modal-control-branches").attr("data-test-id", testId).attr("data-is-analysis", isAnalysis);
            // Show ref range field only when isAnalysis !== 1
            if (isAnalysis !== 1) {
                $('#control-branch-ref-range-wrap').show();
                $('#control-branch-ref-range').val('');
            } else {
                $('#control-branch-ref-range-wrap').hide();
                $('#control-branch-ref-range').val('');
            }
            $(".alert-danger-control-branch").slideUp();
            if ($.fn.DataTable.isDataTable('#control-branch-table')) {
                $('#control-branch-table').DataTable().clear().destroy();
            }
            loadControlBranchTable(testId, isAnalysis);
            $('#modal-control-branches').modal('show');
        });

        function loadControlBranchTable(testId, isAnalysis) {

            var theadHtml = '<tr>'
                + '<th>Branch</th>'
                + '<th style="width:100px;">Type</th>'
                + '<th style="width:100px;">Price</th>'
                + '<th style="width:100px;">Cost Price</th>';
            if (isAnalysis !== 1) {
                theadHtml += '<th style="width:180px;">Reference Range</th>';
            }
            theadHtml += '<th style="width:100px;text-align:center;">Action</th></tr>';
            $('#control-branch-table thead').attr('style', 'background:#1F3E61;color:#fff;').html(theadHtml);

            var columns = [
                { data: "NAME_EN", name: "HOSPITAL.NAME_EN" },
                { data: "TYPE", name: "TYPE", className: "text-center" },
                { data: "PRICE", name: "PRICE", className: "text-center" },
                { data: "COST_PRICE", name: "COST_PRICE", className: "text-center" },
            ];
            if (isAnalysis !== 1) {
                columns.push({ data: "PROFILE_REFERENCE_RANGE_ID", name: "LAB_CATEGORY_PACKAGE_HOSPITAL.PROFILE_REFERENCE_RANGE_ID", orderable: false });
            }
            columns.push({ data: "ID", name: "ID", className: "text-center", orderable: false });

            var refIdx = isAnalysis !== 1 ? 4 : -1;
            var actIdx = isAnalysis !== 1 ? 5 : 4;

            $("#control-branch-table").DataTable({
                "responsive": true,
                "autoWidth": false,
                "searching": true,
                "paging": true,
                "bInfo": true,
                "lengthChange": false,
                "pageLength": 10,
                "language": {
                    "emptyTable": "<div class='text-center py-3'><i class='fas fa-inbox fa-2x text-muted mb-2'></i><br><span class='text-muted'>No branches assigned yet</span></div>",
                    "processing": "<i class='fas fa-spinner fa-spin fa-2x text-muted'></i>"
                },
                serverSide: true,
                processing: true,
                ajax: '/operations/data/test-hospitals/' + testId,
                "order": [[0, "asc"]],
                columns: columns,
                "rowCallback": function(row, data) {
                    var typeBadge = data["TYPE"] == 1
                        ? '<span class="badge badge-success px-2 py-1">Normal</span>'
                        : (data["TYPE"] == 2 ? '<span class="badge badge-warning px-2 py-1">Home Visit</span>' : '<span class="badge badge-secondary px-2 py-1">Unknown</span>');
                    $('td:eq(1)', row).html(typeBadge);
                    @permission('mange_administration_tests')
                    $('td:eq(2)', row).html('<a href="#" class="xedit-branch-price" data-pk="' + data["ID"] + '" data-title="Enter Price">' + parseFloat(data["PRICE"] || 0).toFixed(2) + '</a>');
                    $('td:eq(3)', row).html('<a href="#" class="xedit-branch-cost-price" data-pk="' + data["ID"] + '" data-title="Enter Cost Price">' + parseFloat(data["COST_PRICE"] || 0).toFixed(2) + '</a>');
                    @else
                    $('td:eq(2)', row).html('<strong>' + parseFloat(data["PRICE"] || 0).toFixed(2) + '</strong>');
                    $('td:eq(3)', row).html(parseFloat(data["COST_PRICE"] || 0).toFixed(2));
                    @endpermission
                    if (refIdx !== -1) {
                        var $sel = $refSelectTemplate.clone().attr('data-id', data["ID"]);
                        $sel.val(data["PROFILE_REFERENCE_RANGE_ID"] || '').data("prev-val", data["PROFILE_REFERENCE_RANGE_ID"] || '');
                        $('td:eq(' + refIdx + ')', row).empty().append($sel);
                    }
                    @permission('mange_administration_tests')
                    $('td:eq(' + actIdx + ')', row).html(
                        '<button class="btn btn-outline-danger btn-sm remove-control-branch" data-id="' + data["ID"] + '" title="Remove"><i class="fas fa-times"></i></button>'
                    );
                    @endpermission
                },
                "drawCallback": function() {
                    $(".xedit-branch-price").editable({
                        type: 'number',
                        step: 'any',
                        url: "/operations/test_hospitals/price",
                    });
                    $(".xedit-branch-cost-price").editable({
                        type: 'number',
                        step: 'any',
                        url: "/operations/test_hospitals/cost-price",
                    });
                }
            });
        }

        $("#modal-control-branches").on('click', '.remove-control-branch', function () {
            var branchId = $(this).attr("data-id");
            var testId = $("#modal-control-branches").attr("data-test-id");
            var isAnalysis = parseInt($("#modal-control-branches").attr("data-is-analysis") || 0);
            $.ajax({
                type: "DELETE",
                url: "/operations/test_hospitals/" + branchId,
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $('#control-branch-table').DataTable().clear().destroy();
                loadControlBranchTable(testId, isAnalysis);
                toastr.success('Branch removed successfully');
            }).fail(function (jqXHR) {
                toastr.error(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error removing branch');
            });
        });

        $("#add-control-branch").on('click', function () {
            var testId = $("#modal-control-branches").attr("data-test-id");
            var isAnalysis = parseInt($("#modal-control-branches").attr("data-is-analysis") || 0);
            var hospitalIds = $("#control-branch-hospital-id").val();
            var testType = $("#control-branch-type").val();
            var testPrice = $("#control-branch-price").val();
            var costPrice = $("#control-branch-cost-price").val();
            var refRangeId = (isAnalysis !== 1) ? ($("#control-branch-ref-range").val() || null) : null;
            if (!hospitalIds || hospitalIds.length === 0) {
                $(".alert-danger-control-branch").html("Please select at least one branch").slideDown("slow");
                return;
            }
            $('#add-control-branch').html('<span class="spinner-border spinner-border-sm mr-2" role="status"></span>Loading...').attr('disabled', true);
            $.ajax({
                type: "POST",
                url: "/operations/tests/" + testId + "/hospitals",
                data: JSON.stringify({
                    hospital_id: hospitalIds,
                    test_type: testType,
                    test_price: testPrice,
                    test_cost_price: costPrice,
                    profile_reference_range_id: refRangeId,
                    disable_booking: 0,
                    website_disable_booking: 1,
                    mobile_disable_booking: 1,
                }),
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $(".alert-danger-control-branch").slideUp();
                $('#control-branch-table').DataTable().clear().destroy();
                loadControlBranchTable(testId, isAnalysis);
                $("#control-branch-hospital-id").val(null).trigger('change');
                $('#control-branch-ref-range').val('');
                $('#add-control-branch').html('<i class="fas fa-plus"></i> Add').attr('disabled', false);
                toastr.success('Branch added successfully');
            }).fail(function (jqXHR) {
                $(".alert-danger-control-branch").html(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error adding branch').slideDown("slow");
                $('#add-control-branch').html('<i class="fas fa-plus"></i> Add').attr('disabled', false);
            });
        });

        $("#control-branch-hospital-id").select2({
            theme: 'bootstrap-5',
            placeholder: 'Select Branch',
            allowClear: true,
            dropdownParent: $('#modal-control-branches')
        });

        $("#control-linked-test-id").select2({
            theme: 'bootstrap-5',
            placeholder: 'Select Test',
            allowClear: true,
            dropdownParent: $('#modal-control-linked-tests')
        });

        $("#control-linked-result-test-id").select2({
            theme: 'bootstrap-5',
            placeholder: 'Select Tests',
            allowClear: true,
            dropdownParent: $('#modal-control-linked-results')
        });

        $("#select-all-branches").on('click', function () {
            $("#control-branch-hospital-id > option").prop("selected", true);
            $("#control-branch-hospital-id").trigger("change");
        });

        $("#deselect-all-branches").on('click', function () {
            $("#control-branch-hospital-id").val(null).trigger("change");
        });

        $("#remove-all-control-branches").on('click', function () {
            var testId = $("#modal-control-branches").attr("data-test-id");
            var isAnalysis = parseInt($("#modal-control-branches").attr("data-is-analysis") || 0);
            if (!confirm("Are you sure you want to remove all branches? This action cannot be undone.")) return;
            $.ajax({
                type: "DELETE",
                url: "/operations/test_hospitals-all/" + testId,
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $('#control-branch-table').DataTable().clear().destroy();
                loadControlBranchTable(testId, isAnalysis);
                toastr.success('All branches removed successfully');
            }).fail(function (jqXHR) {
                toastr.error(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error removing branches');
            });
        });

        $("#modal-control-branches").on('change', '.branch-ref-range-select', function () {
            var $sel = $(this);
            var id = $sel.attr("data-id");
            var val = $sel.val();
            var prevVal = $sel.data("prev-val") || '';
            $sel.data("prev-val", val);
            $sel.prop("disabled", true);
            $.post("/operations/test_hospitals/reference_range_change", { pk: id, value: val })
                .done(function () {
                    $sel.prop("disabled", false);
                    toastr.success('Reference range updated');
                })
                .fail(function (jqXHR) {
                    $sel.val(prevVal).prop("disabled", false);
                    toastr.error(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error updating reference range');
                });
        });

        // ===== Clients Tab =====

        var _controlClientTableLoaded = false;

        $('#control-tab a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
            var target = $(e.target).attr('href');
            var testId = $("#modal-control-branches").attr("data-test-id");
            if (target === '#control-clients-pane') {
                $("#control-branch-entity").text("Clients");
                $("#control-branch-title-icon").removeClass("fa-code-branch").addClass("fa-user-tie");
                if (!_controlClientTableLoaded) {
                    loadControlClientTable(testId);
                    _controlClientTableLoaded = true;
                }
            } else if (target === '#control-branches-pane') {
                $("#control-branch-entity").text("Branches");
                $("#control-branch-title-icon").removeClass("fa-user-tie").addClass("fa-code-branch");
            }
        });

        $('#modal-control-branches').on('hidden.bs.modal', function () {
            _controlClientTableLoaded = false;
            $('#control-branches-tab').tab('show');
            $(document.activeElement).trigger('blur');
        });

        function loadControlClientTable(testId) {
            if ($.fn.DataTable.isDataTable('#control-client-table')) {
                $('#control-client-table').DataTable().clear().destroy();
            }
            var theadHtml = '<tr>'
                + '<th>Client</th>'
                + '<th style="width:100px;">Type</th>'
                + '<th style="width:100px;">Price</th>'
                + '<th style="width:100px;">Cost Price</th>'
                + '<th style="width:100px;text-align:center;">Action</th></tr>';
            $('#control-client-table thead').attr('style', 'background:#1F3E61;color:#fff;').html(theadHtml);

            $("#control-client-table").DataTable({
                "responsive": true,
                "autoWidth": false,
                "searching": true,
                "paging": true,
                "bInfo": true,
                "lengthChange": false,
                "pageLength": 10,
                "language": {
                    "emptyTable": "<div class='text-center py-3'><i class='fas fa-inbox fa-2x text-muted mb-2'></i><br><span class='text-muted'>No clients assigned yet</span></div>",
                    "processing": "<i class='fas fa-spinner fa-spin fa-2x text-muted'></i>"
                },
                serverSide: true,
                processing: true,
                ajax: '/operations/data/test-clients/' + testId,
                "order": [[0, "desc"]],
                columns: [
                    { data: "CLIENT_NAME", name: "CLIENT_NAME" },
                    { data: "TYPE", name: "LAB_CATEGORY_PACKAGE_END_USER.TYPE", className: "text-center" },
                    { data: "PRICE", name: "LAB_CATEGORY_PACKAGE_END_USER.PRICE", className: "text-center" },
                    { data: "COST_PRICE", name: "LAB_CATEGORY_PACKAGE_END_USER.COST_PRICE", className: "text-center" },
                    { data: "ID", name: "LAB_CATEGORY_PACKAGE_END_USER.ID", className: "text-center", orderable: false },
                ],
                "rowCallback": function (row, data) {
                    var typeBadge = data["TYPE"] == 1
                        ? '<span class="badge badge-success px-2 py-1">Normal</span>'
                        : (data["TYPE"] == 2 ? '<span class="badge badge-warning px-2 py-1">Home Visit</span>'
                                             : '<span class="badge badge-secondary px-2 py-1">Unknown</span>');
                    $('td:eq(1)', row).html(typeBadge);
                    @permission('mange_administration_tests')
                    $('td:eq(2)', row).html('<a href="#" class="xedit-client-price" data-pk="' + data["ID"] + '" data-title="Enter Price">' + parseFloat(data["PRICE"] || 0).toFixed(2) + '</a>');
                    $('td:eq(3)', row).html('<a href="#" class="xedit-client-cost-price" data-pk="' + data["ID"] + '" data-title="Enter Cost Price">' + parseFloat(data["COST_PRICE"] || 0).toFixed(2) + '</a>');
                    $('td:eq(4)', row).html('<button class="btn btn-outline-danger btn-sm remove-control-client" data-id="' + data["ID"] + '" title="Remove"><i class="fas fa-times"></i></button>');
                    @else
                    $('td:eq(2)', row).html('<strong>' + parseFloat(data["PRICE"] || 0).toFixed(2) + '</strong>');
                    $('td:eq(3)', row).html(parseFloat(data["COST_PRICE"] || 0).toFixed(2));
                    @endpermission
                },
                "drawCallback": function () {
                    $(".xedit-client-price").editable({
                        type: 'number', step: 'any',
                        url: "/operations/test-clients/price",
                    });
                    $(".xedit-client-cost-price").editable({
                        type: 'number', step: 'any',
                        url: "/operations/test-clients/cost-price",
                    });
                }
            });
        }

        $("#add-control-client").on('click', function () {
            var testId = $("#modal-control-branches").attr("data-test-id");
            var clientIds = $("#control-client-id").val();
            var testType = $("#control-client-type").val();
            var testPrice = $("#control-client-price").val();
            var costPrice = $("#control-client-cost-price").val();
            if (!clientIds || clientIds.length === 0) {
                $(".alert-danger-control-client").html("Please select at least one client").slideDown("slow");
                return;
            }
            $('#add-control-client').html('<span class="spinner-border spinner-border-sm mr-2" role="status"></span>Loading...').attr('disabled', true);
            $.ajax({
                type: "POST",
                url: "/operations/tests/" + testId + "/clients",
                data: JSON.stringify({
                    end_user_id: clientIds,
                    test_type: testType,
                    test_price: testPrice,
                    test_cost_price: costPrice,
                }),
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $(".alert-danger-control-client").slideUp();
                $('#control-client-table').DataTable().clear().destroy();
                loadControlClientTable(testId);
                $("#control-client-id").val(null).trigger('change');
                $('#add-control-client').html('<i class="fas fa-plus mr-1"></i> Add to Clients').attr('disabled', false);
                toastr.success('Client added successfully');
            }).fail(function (jqXHR) {
                $(".alert-danger-control-client").html(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error adding client').slideDown("slow");
                $('#add-control-client').html('<i class="fas fa-plus mr-1"></i> Add to Clients').attr('disabled', false);
            });
        });

        $("#modal-control-branches").on('click', '.remove-control-client', function () {
            var clientId = $(this).attr("data-id");
            var testId = $("#modal-control-branches").attr("data-test-id");
            $.ajax({
                type: "DELETE",
                url: "/operations/test-clients/" + clientId,
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $('#control-client-table').DataTable().clear().destroy();
                loadControlClientTable(testId);
                toastr.success('Client removed successfully');
            }).fail(function (jqXHR) {
                toastr.error(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error removing client');
            });
        });

        $("#remove-all-control-clients").on('click', function () {
            var testId = $("#modal-control-branches").attr("data-test-id");
            if (!confirm("Are you sure you want to remove all clients? This action cannot be undone.")) return;
            $.ajax({
                type: "DELETE",
                url: "/operations/test-clients-all/" + testId,
                contentType: "application/json; charset=utf-8",
            }).done(function () {
                $('#control-client-table').DataTable().clear().destroy();
                loadControlClientTable(testId);
                toastr.success('All clients removed successfully');
            }).fail(function (jqXHR) {
                toastr.error(jqXHR.responseJSON ? jqXHR.responseJSON.errorMessage : 'Error removing clients');
            });
        });

        $("#control-client-id").select2({
            theme: 'bootstrap-5',
            placeholder: 'Select Client',
            allowClear: true,
            dropdownParent: $('#modal-control-branches')
        });

        // Picks every client on the chosen contract type, the same shortcut the
        // client group dropdown gives on the test and package screens.
        $("#control-contract-type-filter").on("change", function () {
            var contractTypeId = $(this).val();
            $("#control-client-id > .control-client-option").prop("selected", "");
            if (contractTypeId) {
                $("#control-client-id > .control-client-option[data-contract-type-id='" + contractTypeId + "']").prop("selected", "selected");
            }
            $("#control-client-id").trigger("change");
        });

        $("#select-all-control-clients").on('click', function () {
            $("#control-client-id > option").prop("selected", true);
            $("#control-client-id").trigger("change");
        });

        $("#deselect-all-control-clients").on('click', function () {
            $("#control-client-id").val(null).trigger("change");
        });

    </script>

@endsection