@extends('operations.layout.mainlayout')

@section('content')

{{--    @if(session('role') != 4 && session('role') != 3 && session('role') != 7 && session('role') != 9 && session('role') != 13)--}}
{{--        {{exit("<h1>Unauthorized access</h1>")}}--}}
{{--    @endif--}}
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            color: black;
        }

        .item {
            background-color: rgb(18 221 24 / 13%) !important;
        }

        table.dataTable tr.dtrg-group td {
            background-color: white;
            border-bottom: 1px solid #e7e7e7 !important;
            font-size: 15px;
        }


        .btn-blz {
            color: var(--blazma-primary);
            border-color: var(--blazma-primary);
            width: 20%;
            margin: 2px;
        }

        .btn-blz:hover {
            color: #fff;
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
        }

        .active {
            color: #fff;
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
        }


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

        .btn-qc-approval {
            white-space: nowrap;
            text-align: center;
        }

        /*canvas{*/

        /*    width:1000px !important;*/
        /*    height:500px !important;*/

        /*}*/

    </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;">Quality Control Approval Results</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">

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

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <!-- /.card -->
                        <div class="col-12 col-sm-12 col-md-12">
                            <br/>
                            <div class="card bg-light">
                                <div class="card-header text-muted border-bottom-0">
                                </div>
                                <form method="get" action="" style="width:100%;">
                                    <div class="card-body pt-0">
                                        <div class="row">
                                            <div class="col-12">


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

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

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

                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Status</b></span>
                                                        <select class="form-control"
                                                                id="qc-result-status">
                                                            <option value="1" >Approved</option>
                                                            <option value="2" selected>Pendding</option>
                                                            <option value="-1">Rejectd</option>
                                                        </select>
                                                    </div>

                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Date From</b></span>
                                                        <input type="date" class="form-control" name="date" id="qc-filter-date-from">
                                                    </div>

                                                    <div class="col-md-4">
                                                        <span class="text-muted text-sm"><b>Date To</b></span>
                                                        <input type="date" class="form-control" name="date" id="qc-filter-date-to">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                                <div class="card-footer">
                                    <div class="text-right">
                                        <button id="qc-approve-all" style="color:white !important;max-width:170px" class="form-control btn btn-sm btn-success"> Approve All Selected</button>
                                        <button id="qc-reject-all" style="color:white !important;max-width:170px" class="form-control btn btn-sm btn-danger"> Reject All Selected</button>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="card">
                            <div class="card-body">
                                <table id="qc-result-approval-table"
                                       class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th id="select_all"></th>
                                        <th>QC Name</th>
                                        <th>LOT Name</th>
                                        <th>Test Name</th>
                                        <th>MEAN</th>
                                        <th>SD</th>
                                        <th>Normal Range</th>
                                        <th>Result Time</th>
                                        <th>Result Value</th>
                                        <th>Justification</th>
                                        <th>Created By</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div>

                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container-fluid -->
            </div>
        </section>
        <!-- /.content -->
    </div>
@endsection