{{--@foreach($packages as $package)--}}
{{--        @if($package->result)--}}
{{--            {{dd($package)}}--}}
{{--            @endif--}}
{{--    @else--}}
{{--        {{dd('sd')}}--}}
{{--    @endif--}}
{{--@endforeach--}}

@extends('operations.layout.mainlayout')

@section('content')
{{--    @if(session('role') != 4 && session('role') != 3 && session('role') != 9)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
    @if(!empty($control->HOSPITAL_ID) && $control->HOSPITAL_ID != session('hospital_id'))
        {{exit("<h1>Unauthorized access</h1>")}}
    @endif
    <!-- 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: #e35a80!important;">Control Details</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="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: #e35a80 !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">QC
                                            Information</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link @if(empty($control->NAME)) disabled @endif"
                                           style="color: #e35a80 !important;@if(empty($control->NAME)) 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">QC
                                            Tests</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link @if(empty($control->NAME)) disabled @endif"
                                           style="color: #e35a80 !important;@if(empty($control->NAME)) color:#a9a9a9 !important; @endif"
                                           id="custom-content-below-profile-tab" data-toggle="pill"
                                           href="#custom-content-below-profile2" role="tab"
                                           aria-controls="custom-content-below-profile" aria-selected="false">QC
                                            Analyzer</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link @if(empty($control->NAME)) disabled @endif"
                                           style="color: #e35a80 !important;@if(empty($control->NAME)) color:#a9a9a9 !important; @endif"
                                           id="custom-content-below-profile-tab" data-toggle="pill"
                                           href="#custom-content-below-profile3" role="tab"
                                           aria-controls="custom-content-below-profile" aria-selected="false">QC Lot</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/control" id="qc-control-form">
                                            <input required type="hidden" id="control_id" name="control_id"
                                                   value="@if(!empty($control->ID)){{$control->ID}}@endif">
                                            <p><b>Name</b></p>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                        </div>
                                                        <input required type="text" class="form-control" name="NAME"
                                                               value="@if(!empty($control->NAME)){{$control->NAME}}@endif"/>
                                                    </div>
                                                </div>
                                            </div>
                                            <p><b>STABILITY</b></p>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="input-group mb-3">
                                                        <div class="input-group-prepend">
                                                        </div>
                                                        <input required type="text" class="form-control"
                                                               name="STABILITY"
                                                               value="@if(!empty($control->STABILITY)){{$control->STABILITY}}@endif"/>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col col-2">
                                                    <div class="custom-control custom-switch custom-switch-on-info" style="margin-top:7px;">
                                                        <input type="checkbox" class="custom-control-input" @if(!empty($control->IS_ACTIVE) && $control->IS_ACTIVE==1) checked="checked" @endif id="customSwitch1" name="IS_ACTIVE">
                                                        <label class="custom-control-label" for="customSwitch1"> Active</label>
                                                    </div>
                                                </div>
                                            </div>
                                            @permission('add_qc_controls')
                                            <div class="row">
                                                <div class="col" style="text-align: center">
                                                        <button type="submit" class="btn btn-info" id="control-add">
                                                            <span>@if(!empty($control->NAME)) Edit Control @else Add Control @endif </span>
                                                        </button>
                                                </div>
                                            </div>
                                            @endpermission
                                        </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="control-test-table"
                                                       class="table table-bordered table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Test</th>
                                                        <th>Action</th>
                                                    </tr>
                                                    </thead>

                                                </table>
                                            </div>
                                        </div>
                                        @permission('add_qc_package')
                                        <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 Test
                                                </button>
                                            </div>
                                        </div>
                                        @endpermission
                                    </div>

                                    <div class="tab-pane fade" id="custom-content-below-profile2" role="tabpanel"
                                         aria-labelledby="custom-content-below-profile-tab">
                                        <div class="row">
                                            <div class="col">
                                                <table id="control-analyzer-table"
                                                       class="table table-bordered table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Name</th>
                                                        <th>Action</th>
                                                    </tr>
                                                    </thead>

                                                </table>
                                            </div>
                                        </div>
                                        @permission('add_qc_analyzer')
                                        <div class="row">
                                            <div class="col" style="text-align: center">
                                                <button style="width:130px;color:#fff" data-toggle="modal"
                                                        data-target="#modal-an" id="add-analyzer" class="btn btn-info">
                                                    Add Analyzer
                                                </button>
                                            </div>
                                        </div>
                                        @endpermission
                                    </div>


                                    <div class="tab-pane fade" id="custom-content-below-profile3" role="tabpanel"
                                         aria-labelledby="custom-content-below-profile-tab">
                                        <div class="row">
                                            <div class="col">
                                                <table id="control-lot-table"
                                                       class="table table-bordered table-striped">
                                                    <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Name</th>
                                                        <th>SID</th>
                                                        <th>Created By</th>
                                                        <th>Created At</th>
                                                        <th>Active</th>
                                                        <th>Test List</th>
                                                    </tr>
                                                    </thead>

                                                </table>
                                            </div>
                                        </div>
                                        @permission('edit_qc_lot')
                                        <div class="row">
                                            <div class="col" style="text-align: center">
                                                <button style="width:130px;color:#fff" data-toggle="modal"
                                                        data-target="#modal-lo" id="add-lot" class="btn btn-info">Add
                                                    Lot
                                                </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 Test</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-control" 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;">
                                    Tests</p>
                                <select class="form-control qc-package rhospital_id"  id="control-test-id" name="control_test_id" multiple>
                                    @foreach($packages as $package)
                                        @if($package->result->count()>0)
                                            <optgroup label="{{$package->NAME_EN}}" multiple>
                                                @foreach($package->result as $packageResult)
                                                    <option  value="{{$package->ID}}" test-result-id="{{$packageResult->ID}}">{{$packageResult->NAME_EN}}</option>
                                                @endforeach
                                            </optgroup>
                                            @else
                                        <option value="{{$package->ID}}">{{$package->NAME_EN}}</option>
                                        @endif
                                    @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-package-control" type="button"
                                class="btn btn-info">Save
                        </button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-an">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Add Analyzer</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">
                    <div class="modal-body">

                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-control" 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;">
                                    Analyzers</p>
                                <select class="form-control rhospital_id" id="control-analyzer-id"
                                        name="control_analyzer_id">
                                    @foreach($analyzers as $analyzer)
                                        <option value="{{$analyzer->ID}}">{{$analyzer->NAME_EN}}</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-analyzer-control" type="button"
                                class="btn btn-info">Save
                        </button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-lo">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="lot-modal-title">Add Lot</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">
                    <input type="hidden" id="lot-id" value="">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col" style="text-align: center;">
                                <div class="alert alert-danger alert-danger-lot" role="alert"
                                     style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col-md-6">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">Name</p>
                                <input style="padding:15px" class="form-control" required type="text" id="lot-name"
                                       name="lot-name"/>
                            </div>
                            <div class="col-md-6">
                                <p style="font-size:15px;color:#1F3E61;font-weight: 600;margin-bottom: 10px;">SID</p>
                                <input style="padding:15px" class="form-control" required type="text" id="lot-sid"
                                       name="lot-sid"/>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col-md-6">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" name="lot-active"
                                           id="lot-active">
                                    <label class="custom-control-label" for="lot-active"
                                           style="margin-right: 10px;font-weight: 300;">Active</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-lot-control" type="button" class="btn btn-info">
                            Save
                        </button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-test-list">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">Test List</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-test-list" role="alert" style="display: none;"></div>
                            </div>
                        </div>
                        <div class="row" style="margin-top:20px">
                            <div class="col">
                                <table id="lot-test-list-table" class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th>Test</th>
                                        <th>Target Mean</th>
                                        <th>Target SD</th>
                                        <th>Target CV %</th>
                                        <th>MIN</th>
                                        <th>MAX</th>
                                    </tr>
                                    </thead>

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

                    </div>
                    <div class="modal-footer justify-content-between">
                        <button style="width:130px;" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

@endsection

@section("warehouse_scripts")
    <script>
        $('.rhospital_id').select2({
        });
        $(document).ready(function() {
            // Initialize Select2

            $(document).on('click', '.select2-results__group', function() {
                    var groupTitle = $(this).text().trim();
                    var options = $('#control-test-id').find('optgroup[label="' + groupTitle + '"]').find('option');

                    var values = options.map(function() {
                        return $(this).val();
                    }).get();

                    var currentValues = $('#control-test-id').val() || [];
                    var newValues = currentValues.slice();

                    var allSelected = values.every(function(value) {
                        return currentValues.includes(value);
                    });

                    if (allSelected) {
                        newValues = currentValues.filter(function(value) {
                            return !values.includes(value);
                        });
                    } else {
                        values.forEach(function(value) {
                            if (!currentValues.includes(value)) {
                                newValues.push(value);
                            }
                        });
                    }

                    $('#control-test-id').val(newValues).trigger('change');
            });
        });


    </script>
@endsection