@extends('operations.layout.mainlayout')

@section('content')
{{--    @if(session('role') != 4)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
<style>
     .select2-container--default .select2-selection--multiple .select2-selection__choice__display{
            color:black;
        }
</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;">@if(!empty($test->NAME_EN)){{$test->NAME_EN}} @else Add Package @endif</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">Package Details</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 -->

                    <div class="card">

                        <!-- /.card-header -->
                        <div class="card-body">

                            <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;@if(empty($test->NAME_EN)) color:#a9a9a9 !important; @endif" 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">Package Information</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link @if(empty($test->NAME_EN)) disabled @endif" style="color: #007bff !important;@if(empty($test->NAME_EN)) color:#a9a9a9 !important; @endif" id="custom-content-below-messages-tab" data-toggle="pill" href="#custom-content-below-messages" role="tab" aria-controls="custom-content-below-messages" aria-selected="false">Package Items</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link @if(empty($test->NAME_EN)) disabled @endif" style="color: #007bff !important;@if(empty($test->NAME_EN)) color:#a9a9a9 !important; @endif" 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">Package Branch</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link @if(empty($test->NAME_EN)) disabled @endif" style="color: #007bff !important;@if(empty($test->NAME_EN)) color:#a9a9a9 !important; @endif" id="custom-content-clients-tab" data-toggle="pill" href="#custom-content-clients" role="tab" aria-controls="custom-content-clients" aria-selected="false">Clients Configuration</a>
                                </li>

                            </ul>

                            <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">
                                    <form method="post" action="/operations/test" enctype="multipart/form-data">
                                        <input id="test_id" type="hidden" name="test_id" value="@if(!empty($test->ID)){{$test->ID}}@endif">
                                        <input id="indivisual_test_id" type="hidden" name="indivisual_test_id" value="@if(!empty($test->ID)){{$test->ID}}@endif">

                                    <div class="row">
                                        <div class="col-md-3">
                                            <p><b>Card Image (EN)</b></p>
                                            @if(!empty($test->IMAGE_URL))
                                                <img src="{{$test->IMAGE_URL}}?t={{rand()}}" style="width:100%"/><br /><br />
                                            @endif
                                            <div class="input-group">
                                                <div class="input-group-append">
                                                    <span class="input-group-text"><i class="fas fa-image"></i></span>
                                                </div>
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="exampleInputFile" name="test_image">
                                                    <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <p><b>Card Image (AR)</b></p>
                                            @if(!empty($test->IMAGE_URL_AR))
                                                <img src="{{$test->IMAGE_URL_AR}}?t={{rand()}}" style="width:100%"/><br /><br />
                                            @endif
                                            <div class="input-group">
                                                <div class="input-group-append">
                                                    <span class="input-group-text"><i class="fas fa-image"></i></span>
                                                </div>
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="exampleInputFile2" name="test_image_ar">
                                                    <label class="custom-file-label" for="exampleInputFile2">Choose file</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <p><b>Mobile Image (EN)</b></p>
                                            @if(!empty($test->MOBILE_IMAGE_URL_EN))
                                                <img src="{{$test->MOBILE_IMAGE_URL_EN}}?t={{rand()}}" style="width:100%"/><br /><br />
                                            @endif
                                            <div class="input-group">
                                                <div class="input-group-append">
                                                    <span class="input-group-text"><i class="fas fa-image"></i></span>
                                                </div>
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="exampleInputFile" name="mobile_image_en">
                                                    <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <p><b>Mobile Image (AR)</b></p>
                                            @if(!empty($test->MOBILE_IMAGE_URL_AR))
                                                <img src="{{$test->MOBILE_IMAGE_URL_AR}}?t={{rand()}}" style="width:100%"/><br /><br />
                                            @endif
                                            <div class="input-group">
                                                <div class="input-group-append">
                                                    <span class="input-group-text"><i class="fas fa-image"></i></span>
                                                </div>
                                                <div class="custom-file">
                                                    <input type="file" class="custom-file-input" id="exampleInputFile" name="mobile_image_ar">
                                                    <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                                </div>

                                            </div>
                                        </div>
                                    </div><br />
                                    <p><b>Name</b></p>
                                    <div class="row">
                                        <div class="col">

                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">EN</span>
                                                </div>
                                                <input required type="text" class="form-control" name="name_en" value="@if(!empty($test->NAME_EN)){{$test->NAME_EN}}@endif" />
                                            </div>
                                        </div>
                                        <div class="col">

                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">AR</span>
                                                </div>
                                                <input style="direction: rtl" required type="text" class="form-control" name="name_ar" value="@if(!empty($test->NAME_AR)){{$test->NAME_AR}}@endif" />
                                            </div>
                                        </div>
                                    </div>
                                        <p><b>Short Description</b></p>
                                        <div class="row">
                                            <div class="col">

                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">EN</span>
                                                    </div>
                                                    <input required type="text" class="form-control" name="short_desc_en" value="@if(!empty($test->DESC_EN)){{$test->DESC_EN}}@endif" />
                                                </div>
                                            </div>
                                            <div class="col">

                                                <div class="input-group mb-3">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">AR</span>
                                                    </div>
                                                    <input style="direction: rtl" required type="text" class="form-control" name="short_desc_ar" value="@if(!empty($test->DESC_AR)){{$test->DESC_AR}}@endif" />
                                                </div>
                                            </div>
                                        </div>
                                        <p><b>Description</b></p>
                                        <div class="row">
                                            <div class="col">

                                                <textarea class="form-control" rows="3" placeholder="English Description" name="long_desc_en">{{$test->LONG_DESC_EN??''}}</textarea>
                                            </div>
                                            <div class="col">

                                                <textarea style="direction: rtl" class="form-control" rows="3" placeholder="Arabic Description" name="long_desc_ar">{{$test->LONG_DESC_AR??''}}</textarea>
                                            </div>
                                        </div>
                                    <p><b>Price</b></p>
                                    <div class="row">

                                        <div class="col">
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">@if(isset($global_symbol['is_html']) && $global_symbol['is_html'] && isset($global_symbol['currency']))
                                                            {!! $global_symbol['currency'] !!}
                                                        @else
                                                            {{ $global_symbol['currency'] ?? 'SAR' }}
                                                        @endif</span>
                                                </div>
                                                <input required step="0.01" type="number" class="form-control" name="price" value="@if(!empty($test->PRICE)){{$test->PRICE}}@endif" /><br />

                                            </div>
                                         </div>
                                    </div>
                                    <div class="row">
                                    <div class="col-6 mb-5">
                                         <p><b>Sub Category</b></p>
                                         @if(!empty($profile->ENABLE_CATEGORY_TYPE))
                                         <select class="form-control multi" multiple name="category[]" id="category">
                                                    @foreach($categories as $category)
                                                    <option @if(!empty($test) && in_array($category->ID,$selected_sub_categories) ) selected @endif value="{{$category->ID}}">{{$category->NAME_EN}}</option>
                                                     @endforeach
                                           </select>
                                         @else
                                         <select class="form-control" name="category" id="category">
                                                 <option value="">Select Sub Category</option>
                                                    @foreach($categories as $category)
                                                        <option @if(!empty($test) && $category->ID == $test->LAB_CATEGORY_ID) selected @endif value="{{$category->ID}}">{{$category->NAME_EN}}</option>
                                                     @endforeach
                                           </select>
                                         @endif
                                         </div>
                                        <div class="col-6">
                                            <p><b>Test Code</b></p>
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" name="test_code" value="@if(!empty($test->CODE)){{$test->CODE}}@endif" />
                                            </div>
                                        </div>
                                    </div>

                                        <div class="row">
                                            <div class="col-6">
                                                <p><b>Integration Code</b></p>
                                                <div class="input-group mb-3">
                                                    <input type="text" class="form-control" name="integration_code" value="@if(!empty($test->INTEGRATION_CODE)){{$test->INTEGRATION_CODE}}@endif" />
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <p><b>Website Priority</b></p>
                                                <div class="input-group mb-3">
                                                    <input type="number" step="0.01" class="form-control" name="priority" value="@if(!empty($test->PRIORITY)){{$test->PRIORITY}}@endif" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <p><b>HIS Code</b></p>
                                                <div class="input-group mb-3">
                                                    <input type="text" class="form-control" name="his_code" value="@if(!empty($test->HIS_CODE)){{$test->HIS_CODE}}@endif" />
                                                </div>
                                            </div>
                                            <div class="col">
                                                <p><b>Package Type</b></p>
                                                <select class="form-control" name="package_type">
                                                    <option value="both" @if(($test->PACKAGE_TYPE ?? 'both') == 'both') selected @endif>Both</option>
                                                    <option value="outpatient" @if(($test->PACKAGE_TYPE ?? 'both') == 'outpatient') selected @endif>Outpatient</option>
                                                    <option value="contracts" @if(($test->PACKAGE_TYPE ?? 'both') == 'contracts') selected @endif>Contracts</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <p><b>Start Date</b></p>
                                                <div class="input-group mb-3">
                                                    <input type="date" class="form-control" name="package_start_date" value="@if(!empty($test->PACKAGE_START_DATE)){{\Carbon\Carbon::parse($test->PACKAGE_START_DATE)->toDateString()}}@endif" />
                                                </div>
                                            </div>
                                            <div class="col">
                                                <p><b>End Date</b></p>
                                                <div class="input-group mb-3">
                                                    <input type="date" class="form-control" name="package_end_date" value="@if(!empty($test->PACKAGE_END_DATE)){{\Carbon\Carbon::parse($test->PACKAGE_END_DATE)->toDateString()}}@endif" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <div class="custom-control custom-switch custom-switch-on-info" style="margin-top:7px;">
                                                    <input type="checkbox" class="custom-control-input" @if(!empty($test->ACTIVE_STATUS) && $test->ACTIVE_STATUS==1) checked="checked" @endif id="customSwitch1" name="active_status">
                                                    <label class="custom-control-label" for="customSwitch1"> Active</label>
                                                </div>
                                                <div class="custom-control custom-switch custom-switch-on-info" style="margin-top:7px;">
                                                    <input type="checkbox" class="custom-control-input" @if(!empty($test->IS_URGENT) && $test->IS_URGENT==1) checked="checked" @endif id="is-urgent" name="is_urgent">
                                                    <label class="custom-control-label" for="is-urgent"> Urgent</label>
                                                </div>
                                                <div class="custom-control custom-switch custom-switch-on-info" style="margin-top:7px;">
                                                    <input type="checkbox" class="custom-control-input" @if(!empty($test->IS_OFFER) && $test->IS_OFFER==1) checked="checked" @endif id="is-offer" name="is_offer">
                                                    <label class="custom-control-label" for="is-offer"> Is Offer</label>
                                                </div>
                                            </div>
                                        </div>
                                    <div class="row">
                                        <div class="col" style="text-align: center">
                                            @permission('mange_administration_packages')
                                                <input style="width:130px" type="submit" class="btn btn-info" value="@if(!empty($test->NAME_EN)) Edit Package @else Add Package @endif" />
                                            @endpermission
                                        </div>
                                    </div>
                                    </form>
                                </div>

                                <div class="tab-pane fade" id="custom-content-below-profile" role="tabpanel" aria-labelledby="custom-content-below-profile-tab">
                                    <div class="row">
                                        <div class="col">
                                           <table id="test-hospital-table" class="table table-bordered table-striped">
                                                <thead>
                                                <tr>
                                                    <th>Branch</th>
                                                    <th>Type</th>
                                                    <th>Price</th>
                                                    <th>Cost Price</th>
                                                    <th>Operation Disable Booking</th>
                                                    <th>Website Disable Booking</th>
                                                    <th>Mobile Disable Booking</th>
                                                    <th>Reference Range</th>
                                                    <th>Template</th>
                                                    <th style="width: 130px;">Action</th>
                                                </tr>
                                                </thead>
                                               @permission('mange_administration_tests')
                                               <tfoot>
                                               <tr>
                                                   <td colspan="9"></td>
                                                   <td>
                                                       <button  class="btn btn-danger btn-block rounded" style="display: none"  id="confirmDeleteAllTests" test-id="{{$test->ID??null}}" title="remove all tests">Remove All</button>
                                                   </td>
                                               </tr>
                                               </tfoot>
                                               @endpermission
                                            </table>
                                        </div>
                                    </div>
                                    @permission('mange_administration_packages')
                                    <div class="row">
                                        <div class="col" style="text-align: center">
                                            <button style="width:130px;color:#fff" data-toggle="modal" data-target="#modal-lg" id="add-test" class="btn btn-info">Add Branch</button>
                                        </div>
                                    </div>
                                    @endpermission
                                </div>
                                <div class="tab-pane fade" id="custom-content-clients" role="tabpanel" aria-labelledby="custom-content-clients-tab">
                                    <div class="row">
                                        <div class="col">
                                                <table id="test-client-table" class="table table-bordered table-striped table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>Client</th>
                                                        <th>Type</th>
                                                        <th>Price</th>
                                                        <th>Cost Price</th>
                                                        <th>Exclude</th>
                                                        <th>QTY Limit</th>
                                                        <th>Client Group</th>
                                                        <th>Contract Type</th>
                                                        <th>Client Code</th>
                                                        <th style="width: 130px;">Action</th>
                                                    </tr>
                                                    </thead>
                                                </table>

                                        </div>
                                    </div>
                                    @permission('mange_administration_tests')
                                    <div class="row">
                                        <div class="col" style="text-align: center">
                                            <button style="width:130px;color:#fff" data-toggle="modal" data-target="#modal-lg-client" id="add-test-client" class="btn btn-info">Add Client</button>
                                            <button style="width:130px;color:#fff" id="remove-all-clients" class="btn btn-danger">Remove All</button>
                                        </div>
                                    </div>
                                    @endpermission
                                </div>
                                <div class="tab-pane fade" id="custom-content-below-messages" role="tabpanel" aria-labelledby="custom-content-below-messages-tab">
                                    <div class="row">
                                        <div class="col">
                                            <table id="test-item-table" class="table table-bordered table-striped">
                                                <thead>
                                                <tr>
                                                    <th>Test English Name</th>
                                                    <th>Test Arabic name</th>
                                                    <th>Test Percentage</th>
                                                    <th style="width: 130px;">Action</th>
                                                </tr>
                                                </thead>
                                                @permission('mange_administration_tests')
                                                <tfoot>
                                                <tr>
                                                    <td colspan="3"></td>
                                                    <td>
                                                        <button  class="btn btn-danger btn-block rounded" style="display: none"  id="confirmDeleteAllPackageTests"  test-id="{{$test->ID??null}}" title="remove all tests">Remove All</button>
                                                    </td>
                                                </tr>
                                                </tfoot>
                                                @endpermission
                                            </table>
                                        </div>
                                    </div>
                                    @permission('mange_administration_packages')
                                    <div class="row">
                                        <div class="col" style="text-align: center">
                                            <button style="width:130px;color:#fff" data-toggle="modal" data-target="#modal-item" id="add-test-item" class="btn btn-info">Add Item</button>
                                            <button style="width:156px;color:#fff" data-toggle="modal"  id="add-percentage-test-item" class="btn btn-info">Test Percentage</button>
                                        </div>
                                    </div>
                                    @endpermission
                                </div>
                            </div>





                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
    <div class="modal fade" id="modal-lg">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Branch</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form" method="post"  action="/operations/samples/">
                    <div class="modal-body">

                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-hospital" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Hospital</p>
                                <select  class="form-control rhospital_id" multiple id="test-hospital-id" name="test_hospital_id[]" >
                                    @foreach($hospitals as $hospital)
                                        <option class="hospital-option" value="{{$hospital->ID}}" >{{$hospital->NAME_EN}}</option>
                                    @endforeach
                                </select>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input"  id="select-all">
                                    <label class="custom-control-label" for="select-all" style="margin-right: 10px;font-weight: 300;">Select All</label>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Type</p>
                                <select  class="form-control" id="test-type" name="test_type">
                                    <option value="1" >Normal</option>
                                    <option value="2" >Home Visit</option>
                                </select>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Price</p>
                                <input style="padding:15px" class="form-control" required step="0.01" type="number" id="test-price" name="test_price" />
                            </div>
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Cost Price</p>
                                <input style="padding:15px" class="form-control" required step="0.01" value="0" type="number" id="test-cost-price" name="cost_price" />
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-6">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="disable-booking" name="disable_booking">
                                    <label class="custom-control-label" for="disable-booking" style="margin-right: 10px;font-weight: 300;">Operation Disable Booking</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="website-disable-booking" name="disable_booking">
                                    <label class="custom-control-label" for="website-disable-booking" style="margin-right: 10px;font-weight: 300;">Website Disable Booking</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="mobile-disable-booking" name="disable_booking">
                                    <label class="custom-control-label" for="mobile-disable-booking" style="margin-right: 10px;font-weight: 300;">Mobile Disable Booking</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="auto-calculate-cost" name="auto_calculate_cost">
                                    <label class="custom-control-label" for="auto-calculate-cost" style="margin-right: 10px;font-weight: 300;">Auto Calculate Cost Price</label>
                                </div>
                            </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="add-new-hospital-package"  type="button" class="btn btn-info">Save</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-item">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Item</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-item" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Select Test</p>
                                <select  class="form-control rhospital_id" multiple id="test-id" name="test_id[]" >
                                    @foreach($packages as $package)
                                        <option value="{{$package->ID}}" >{{$package->NAME_EN}} - {{$package->CODE}}</option>
                                    @endforeach
                                </select>
                            </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="add-new-item-package"  type="button" class="btn btn-info">Save</button>
                    </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-lg-client">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Client</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="collection-form-client" method="post"  action="/operations/samples/">
                    <div class="modal-body">

                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-client" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col-4">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Client Group</p>
                                <select class="form-control" id="client-group-filter" name="client_group_filter">
                                    <option value="">All Groups</option>
                                    @foreach($clientGroups as $group)
                                        <option value="{{$group->ID}}">{{$group->NAME}}-{{$group->CODE}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-4">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Contract Type</p>
                                <select class="form-control" id="contract-type-filter" name="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-4">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Type</p>
                                <select  class="form-control" id="test-client-type" name="test_type">
                                    <option value="1" >Normal</option>
                                    <option value="2" >Home Visit</option>
                                </select>
                            </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;">Client</p>
                                <select class="form-control rhospital_id" multiple id="test-client-id" name="test_client_id[]">
                                    @foreach($clients as $client)
                                        <option class="client-option" value="{{$client->ID}}" data-group-id="{{$client->CLIENT_GROUP_ID}}" data-contract-type-id="{{$client->CONTRACT_TYPE_ID}}">{{$client->CLIENT_NAME}}</option>
                                    @endforeach
                                </select>
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input"  id="select-all-clients">
                                    <label class="custom-control-label" for="select-all-clients" style="margin-right: 10px;font-weight: 300;">Select All</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Price</p>
                                <input style="padding:15px" class="form-control" required step="0.01" value="0" type="number" id="test-client-price" name="test_price" />
                            </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;">Cost Price</p>
                                <input style="padding:15px" class="form-control" required step="0.01" value="0" type="number" id="test-client-cost-price" name="test_cost_price" />
                            </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="add-new-client-package"  type="button" class="btn btn-info">Save</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


<div class="modal fade" id="modal-percentage-item">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">Test Percentage</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-percentage-item" role="alert" style="display: none;"></div>
                    </div>
                </div>

                <div id="tests-container"></div>
                <div class="row unit-price-fields" style="margin-top:20px">
                    <div class="col-md-6"></div>
                    <div class="col-md-6"></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="update-percentage-item-package"  type="button" class="btn btn-info">Save</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

@endsection
@section('footer-scripts')
    <script>
        $('#select-all').on("click", function (e) {
            if($("#select-all").is(':checked'))
            {
                $(".rhospital_id > .hospital-option").prop("selected","selected");
                $(".rhospital_id").trigger("change");
            }
            else{
                $(".rhospital_id > .hospital-option").prop("selected","");
                $(".rhospital_id").trigger("change");
            }

        });
        $('#select-all-clients').on("click", function (e) {
            if($("#select-all-clients").is(':checked'))
            {
                $(".rhospital_id > .client-option").prop("selected","selected");
                $(".rhospital_id").trigger("change");
            }
            else{
                $(".rhospital_id > .client-option").prop("selected","");
                $(".rhospital_id").trigger("change");
            }

        });
        $('#client-group-filter').on("change", function (e) {
            var groupId = $(this).val();
            $(".rhospital_id > .client-option").prop("selected","");
            if(groupId) {
                $(".rhospital_id > .client-option[data-group-id='" + groupId + "']").prop("selected", "selected");
            }
            $(".rhospital_id").trigger("change");
        });

        // Selects by contract type the way the group filter selects by group:
        // each dropdown is its own shortcut for picking a set of clients.
        $('#contract-type-filter').on("change", function (e) {
            var contractTypeId = $(this).val();
            $(".rhospital_id > .client-option").prop("selected","");
            if(contractTypeId) {
                $(".rhospital_id > .client-option[data-contract-type-id='" + contractTypeId + "']").prop("selected", "selected");
            }
            $(".rhospital_id").trigger("change");
        });
    </script>
@endsection