@php(
    $headerOption = [
        'title' => '',
        'noCardView' => true,
    ]
)
@extends('front.layouts.layout', $headerOption)

@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0 font-size-18">Controls In Scope</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Settings</a></li>
                        <li class="breadcrumb-item active">Controls In Scope</li>
                    </ol>
                </div>

            </div>

            <div class="d-flex justify-content-end mb-3">
                <div class="d-flex align-items-center">
                    <a href="javascript:void(0);"
                        class="btn btn-primary btn-rounded waves-effect waves-light mod-btn right-bar-toggle">Create New
                        Control</a>

                </div>
            </div>

        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="connections-main-wrapper">
                <!-- Left sidebar -->
                <div class="email-leftbar card">
                    <!-- <button type="button" class="btn btn-danger btn-block waves-effect waves-light" data-toggle="modal" data-target="#composemodal">
                            Compose
                        </button> -->
                    <h4 class="card-title mb-0">All Controls</h4>
                    <hr>
                    <h6 class="mt-2">Frameworks</h6>

                    <div class="mail-list">
                        @if (count($framework_data) > 0)
                            @foreach ($framework_data as $key => $val)
                                <a href="#" class="active"><i class="mdi mdi-compass-outline mr-2"></i>
                                    {{ $val->name }}</a>
                            @endforeach
                        @endif
                    </div>
                    <hr>
                    <h6 class="mt-2">Readiness</h6>
                    <div class="mail-list ">
                        <a href="#" class="active"><i class="mdi mdi-check-circle-outline mr-2"></i> Ready</a>
                        <a href="#"><i class="mdi mdi-close-circle-outline mr-2"></i>Not Ready</a>
                    </div>
                    <hr>
                    <h6 class="mt-2">Monitoring</h6>
                    <div class="mail-list ">
                        <a href="#" class="active"><i class="mdi mdi-account-multiple-check-outline mr-2"></i>
                            Monitored</a>
                        <a href="#"><i class="mdi mdi-account-multiple-remove-outline mr-2"></i>Not Monitored</a>
                    </div>
                    <hr>
                    <h6 class="mt-2">Evidance</h6>
                    <div class="mail-list ">
                        <a href="#" class="active"><i class="mdi mdi-magnify mr-2"></i> Evidance Linked</a>
                        <a href="#"><i class="mdi mdi-magnify-remove-outline mr-2"></i>No Evidance</a>
                    </div>
                    <hr>
                    <h6 class="mt-2">Control Owners</h6>
                    <div class="mail-list ">
                        <a href="#" class="active align-items-center"><i
                                class="mdi mdi-account-plus-outline mr-2"></i> Owners Assigned</a>
                        <a href="#" class="align-items-center"><i class="mdi mdi-account-remove-outline mr-2"></i>No
                            Owners Assigned</a>
                    </div>
                    <hr>
                    <h6 class="mt-2">Filter by Control Owners</h6>
                    <div class="w-100 mt-2">
                        <select class="form-control border-radius-100">
                            <option>Search by name</option>
                        </select>
                    </div>
                </div>
                <!-- End Left sidebar -->


                <!-- Right Sidebar -->
                <div class="email-rightbar">

                    <div class="card">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs nav-tabs-custom nav-justified pt-2" role="tablist">
                            <li class="nav-item w-10">
                                <a class="nav-link active" data-toggle="tab" href="#home1" role="tab">
                                    <span class="d-block d-sm-none"><i class="bx bx-check-circle"></i></span>
                                    <span class="d-none d-sm-block nowrap"><i class="bx bx-check-circle"></i> In
                                        Scope</span>
                                </a>
                            </li>
                            <li class="nav-item w-10">
                                <a class="nav-link" data-toggle="tab" href="#profile1" role="tab">
                                    <span class="d-block d-sm-none"><i class="bx bx-layout"></i></span>
                                    <span class="d-none d-sm-block nowrap"><i class="bx bx-layout"></i> Out of Scope</span>
                                </a>
                            </li>
                            <li class="w-80 ml-2 d-flex align-items-center">
                                <!-- <a class="nav-link" data-toggle="tab" href="#messages1" role="tab">
                                        <span class="d-block d-sm-none"><i class="bx bx-search"></i></span>
                                        <span class="d-none d-sm-block nowrap"><i class="bx bx-search"></i> Search Connections</span>
                                    </a> -->
                                <div class="input-group cnt-frm">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="option-date"><i class="bx bx-search"></i></span>
                                    </div>
                                    <input type="text" class="form-control" name="date" value=""
                                        aria-describedby="option-date"
                                        placeholder="Search controls by name , description code , or requirments...">
                                </div>
                                <a href="#"
                                    class="btn btn-primary btn-rounded waves-effect waves-light mod-btn ml-2 text-white mb-1"><i
                                        class="bx bx-download"></i></a>
                            </li>
                            {{-- <li class="w-10 text-center ">

                            </li> --}}
                        </ul>

                        <div class="tab-content p-0 text-muted">
                            <div class="tab-pane active" id="home1" role="tabpanel">
                                <div class="card-body connection-block-wrapper p-0">
                                    <div class="table-responsive policy-table contr-table-sec ">
                                        <table class="table table-striped">
                                            <tbody>

                                                <tr>
                                                    <td>
                                                        <div class="custom-control custom-checkbox ">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton" value="checked">
                                                            <label class="custom-control-label" for="closeButton"></label>
                                                        </div>
                                                    </td>
                                                    <td class="d-flex align-items-center">
                                                        <div class="d-flex align-items-center text-muted">
                                                            <i class="mdi mdi-gift-outline mr-2"></i> In Scoops
                                                        </div>

                                                    </td>
                                                    <td>

                                                    </td>
                                                </tr>
                                                @if (count($data) > 0)
                                                    @foreach ($data as $key => $val)
                                                        <tr>
                                                            <td class="w-5">

                                                                <div class="custom-control custom-checkbox mb-2">
                                                                    <input type="checkbox"
                                                                        class="custom-control-input input-mini"
                                                                        id="closeButton{{ $val->id }}"
                                                                        value="checked">
                                                                    <label class="custom-control-label"
                                                                        for="closeButton{{ $val->id }}"></label>
                                                                </div>
                                                                <!-- <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                                    </div> -->

                                                            </td>

                                                            <td class="right-bar-toggle d-flex align-items-center inscope-open-modal"
                                                                data-id="{{ $val->id }}">
                                                                <div class="h3 mb-0 mr-4">
                                                                    @if (in_array($val->id, $assigned_ctrls))
                                                                        <span class="badge badge-soft-success "><i
                                                                            class="mdi mdi-checkbox-marked-circle "></i></span>
                                                                    @else
                                                                        <span class="badge badge-soft-danger "><i
                                                                            class="mdi mdi-close-circle-outline "></i></span>
                                                                    @endif
                                                                </div>
                                                                <div class="media-body overflow-hidden">

                                                                    <h5 class="  font-size-14 mb-1"><span
                                                                            style="background-color: lightgrey;
                                                                                border: 1px solid darkgray;
                                                                                border-radius: 20px;
                                                                                /* border-top: 44px; */
                                                                                /* padding-top: 20px; */
                                                                                padding-left: 8px;
                                                                                padding-right: 8px;
                                                                                margin-top: 25px;
                                                                                font-size: 11px;">{{ $val->code }}</span>
                                                                        {{ $val->name }}</h5>
                                                                    <p class="  mb-1 text-muted font-size-14">
                                                                        {{ $val->description }}</p>
                                                                    <div class="media">
                                                                        <div class="h5 mr-2 mb-0"><span
                                                                                class="badge badge-soft-info ">POPIA</span>
                                                                        </div>
                                                                        <div class="h5 d-none"><span
                                                                                class="badge badge-soft-warning ">SOC
                                                                                2</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td class="w-20">
                                                                <div class="media justify-content-end">
                                                                    <button type="button"
                                                                        class="btn btn-info btn-rounded @if ($val->control_policy_id) @else d-none @endif waves-effect waves-light mr-2 "
                                                                        data-id="{{ $val->id }}"><i
                                                                            class="mdi mdi-attachment font-size-15"></i></button>
                                                                    <button type="button"
                                                                        class="btn btn-warning btn-rounded waves-effect waves-light"><i
                                                                            class="mdi mdi-resistor font-size-15"></i></button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="profile1" role="tabpanel">
                                <div class="card-body connection-block-wrapper p-0">
                                    <div class="table-responsive policy-table contr-table-sec ">
                                        <table class="table table-striped">
                                            <tbody>

                                                <tr>
                                                    <td>
                                                        <div class="custom-control custom-checkbox ">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton30" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton30"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center text-muted">
                                                            <i class="mdi mdi-gift-outline mr-2"></i> Out of Scoops
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div
                                                            class="d-flex align-items-center text-muted justify-content-end">
                                                            <i class="mdi mdi-tree-outline mr-2"></i> Agreeculture Set
                                                            Control
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton31" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton31"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">3rd Parents and Vendors Given
                                                                Instructions on Beach Reporting</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">
                                                        <div class="media justify-content-end">
                                                            <button type="button"
                                                                class="btn btn-info btn-rounded waves-effect waves-light mr-2"><i
                                                                    class="mdi mdi-attachment font-size-15"></i></button>
                                                            <!-- <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light"><i class="mdi mdi-email-outline font-size-15"></i></button> -->
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton32" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton32"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accept the Privacy Policy</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton33" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton33"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class=" d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">

                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">
                                                        <div class="media justify-content-end">
                                                            <button type="button"
                                                                class="btn btn-info btn-rounded waves-effect waves-light mr-2"><i
                                                                    class="mdi mdi-attachment font-size-15"></i></button>
                                                            <button type="button"
                                                                class="btn btn-warning btn-rounded waves-effect waves-light"><i
                                                                    class="mdi mdi-email-outline font-size-15"></i></button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media justify-content-end">
                                                            <div class="custom-control custom-checkbox mb-2">
                                                                <input type="checkbox"
                                                                    class="custom-control-input input-mini"
                                                                    id="closeButton34" value="checked">
                                                                <label class="custom-control-label"
                                                                    for="closeButton34"></label>
                                                            </div>
                                                            <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->
                                                        </div>
                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accepting The Terms of Service
                                                            </h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton35" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton35"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>
                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accept the Privacy Policy</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton36" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton36"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">3rd Parents and Vendors Given
                                                                Instructions on Beach Reporting</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">
                                                        <div class="media justify-content-end">
                                                            <button type="button"
                                                                class="btn btn-info btn-rounded waves-effect waves-light mr-2"><i
                                                                    class="mdi mdi-attachment font-size-15"></i></button>
                                                            <!-- <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light"><i class="mdi mdi-email-outline font-size-15"></i></button> -->
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media">
                                                            <div class="custom-control custom-checkbox mb-2">
                                                                <input type="checkbox"
                                                                    class="custom-control-input input-mini"
                                                                    id="closeButton37" value="checked">
                                                                <label class="custom-control-label"
                                                                    for="closeButton37"></label>
                                                            </div>
                                                            <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->
                                                        </div>
                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accepting The Terms of Service
                                                            </h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media">
                                                            <div class="custom-control custom-checkbox mb-2">
                                                                <input type="checkbox"
                                                                    class="custom-control-input input-mini"
                                                                    id="closeButton38" value="checked">
                                                                <label class="custom-control-label"
                                                                    for="closeButton38"></label>
                                                            </div>
                                                            <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->
                                                        </div>
                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accepting The Terms of Service
                                                            </h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton39" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton39"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accept the Privacy Policy</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton40" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton40"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">3rd Parents and Vendors Given
                                                                Instructions on Beach Reporting</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">
                                                        <div class="media justify-content-end">
                                                            <button type="button"
                                                                class="btn btn-info btn-rounded waves-effect waves-light mr-2"><i
                                                                    class="mdi mdi-attachment font-size-15"></i></button>
                                                            <!-- <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light"><i class="mdi mdi-email-outline font-size-15"></i></button> -->
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media">
                                                            <div class="custom-control custom-checkbox mb-2">
                                                                <input type="checkbox"
                                                                    class="custom-control-input input-mini"
                                                                    id="closeButton41" value="checked">
                                                                <label class="custom-control-label"
                                                                    for="closeButton41"></label>
                                                            </div>
                                                            <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->
                                                        </div>
                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1 ">Accepting The Terms of Service
                                                            </h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="messages1" role="tabpanel">
                                <div class="card-body connection-block-wrapper p-0">
                                    <div class="table-responsive policy-table contr-table-sec ">
                                        <table class="table table-striped">
                                            <tbody>

                                                <tr>
                                                    <td>
                                                        <div class="custom-control custom-checkbox ">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton12" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton12"></label>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center text-muted">
                                                            <i class="mdi mdi-gift-outline mr-2"></i> Search Scoops
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div
                                                            class="d-flex align-items-center text-muted justify-content-end">
                                                            <i class="mdi mdi-tree-outline mr-2"></i> Agreeculture Set
                                                            Control
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton13" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton13"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">3rd Parents and Vendors Given
                                                                Instructions on Beach Reporting</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">
                                                        <div class="media justify-content-end">
                                                            <button type="button"
                                                                class="btn btn-info btn-rounded waves-effect waves-light mr-2"><i
                                                                    class="mdi mdi-attachment font-size-15"></i></button>
                                                            <!-- <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light"><i class="mdi mdi-email-outline font-size-15"></i></button> -->
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton14" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton14"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accept the Privacy Policy</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton15" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton15"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class=" d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">

                                                            <h5 class="  font-size-14 mb-1">Acceptable User Policy</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">
                                                        <div class="media">
                                                            <button type="button"
                                                                class="btn btn-info btn-rounded waves-effect waves-light mr-2"><i
                                                                    class="mdi mdi-attachment font-size-15"></i></button>
                                                            <button type="button"
                                                                class="btn btn-warning btn-rounded waves-effect waves-light"><i
                                                                    class="mdi mdi-email-outline font-size-15"></i></button>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media justify-content-end">
                                                            <div class="custom-control custom-checkbox mb-2">
                                                                <input type="checkbox"
                                                                    class="custom-control-input input-mini"
                                                                    id="closeButton16" value="checked">
                                                                <label class="custom-control-label"
                                                                    for="closeButton16"></label>
                                                            </div>
                                                            <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->
                                                        </div>
                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accepting The Terms of Service
                                                            </h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton17" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton17"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>
                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accept the Privacy Policy</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton18" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton18"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">3rd Parents and Vendors Given
                                                                Instructions on Beach Reporting</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">
                                                        <div class="media justify-content-end">
                                                            <button type="button"
                                                                class="btn btn-info btn-rounded waves-effect waves-light mr-2"><i
                                                                    class="mdi mdi-attachment font-size-15"></i></button>
                                                            <!-- <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light"><i class="mdi mdi-email-outline font-size-15"></i></button> -->
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media">
                                                            <div class="custom-control custom-checkbox mb-2">
                                                                <input type="checkbox"
                                                                    class="custom-control-input input-mini"
                                                                    id="closeButton19" value="checked">
                                                                <label class="custom-control-label"
                                                                    for="closeButton19"></label>
                                                            </div>
                                                            <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->
                                                        </div>
                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span></div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accepting The Terms of Service
                                                            </h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media">
                                                            <div class="custom-control custom-checkbox mb-2">
                                                                <input type="checkbox"
                                                                    class="custom-control-input input-mini"
                                                                    id="closeButton20" value="checked">
                                                                <label class="custom-control-label"
                                                                    for="closeButton20"></label>
                                                            </div>
                                                            <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->
                                                        </div>
                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span>
                                                        </div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accepting The Terms of Service
                                                            </h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton21" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton21"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span>
                                                        </div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">Accept the Privacy Policy</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">

                                                        <div class="custom-control custom-checkbox mb-2">
                                                            <input type="checkbox" class="custom-control-input input-mini"
                                                                id="closeButton22" value="checked">
                                                            <label class="custom-control-label"
                                                                for="closeButton22"></label>
                                                        </div>
                                                        <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->

                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span>
                                                        </div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1">3rd Parents and Vendors Given
                                                                Instructions on Beach Reporting</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">
                                                        <div class="media justify-content-end">
                                                            <button type="button"
                                                                class="btn btn-info btn-rounded waves-effect waves-light mr-2"><i
                                                                    class="mdi mdi-attachment font-size-15"></i></button>
                                                            <!-- <button type="button" class="btn btn-warning btn-rounded waves-effect waves-light"><i class="mdi mdi-email-outline font-size-15"></i></button> -->
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="w-5">
                                                        <div class="media">
                                                            <div class="custom-control custom-checkbox mb-2">
                                                                <input type="checkbox"
                                                                    class="custom-control-input input-mini"
                                                                    id="closeButton23" value="checked">
                                                                <label class="custom-control-label"
                                                                    for="closeButton23"></label>
                                                            </div>
                                                            <!-- <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">

                                                              </div> -->
                                                        </div>
                                                    </td>

                                                    <td class="right-bar-toggle d-flex align-items-center  ">
                                                        <div class="h3 mb-0 mr-4"><span
                                                                class="badge badge-soft-danger "><i
                                                                    class="mdi mdi-close-circle-outline "></i></span>
                                                        </div>
                                                        <div class="media-body overflow-hidden">
                                                            <h5 class="  font-size-14 mb-1 ">Accepting The Terms of
                                                                Service</h5>
                                                            <p class="  mb-1 text-muted"> Lorem ipsum dolor sit amet
                                                                consectetur adipisicing elit. Quaerat labore ipsa
                                                                repudiandae perspiciatis et.</p>
                                                            <div class="media">
                                                                <div class="h5 mr-2 mb-0"><span
                                                                        class="badge badge-soft-info ">ISO
                                                                        270001-2002</span></div>
                                                                <div class="h5"><span
                                                                        class="badge badge-soft-warning ">SOC 2</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="w-20">

                                                    </td>
                                                </tr>

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

                        </div>







                    </div> <!-- card -->


                </div> <!-- end Col-9 -->
            </div>
        </div>

    </div><!-- End row -->
    <div class="right-bar right-bar-xl">
        <div data-simplebar class="h-100">
            <div class="rightbar-title px-3 py-4">
                <a href="javascript:void(0);" class="right-bar-toggle float-right">
                    <i class="mdi mdi-close noti-icon"></i>
                </a>
                <h5 class="m-0">Create new Control</h5>
            </div>

            <div class="px-3 pt-4">
                <h2 class="card-title mb-2">Control Info</h2>
                <hr>
                <form class="mt-4">

                    <div class="form-group">
                        <label for="formrow-firstname-input">Control Name <sup class="text-danger">*</sup></label>
                        <input type="text" class="form-control" id="formrow-firstname-input">
                    </div>

                    <div class="row">

                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="formrow-email-input">Control Code <sup class="text-danger">*</sup></label>
                                <input type="text" class="form-control" id="formrow-email-input">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="formrow-password-input">Control Description <sup
                                        class="text-danger">*</sup></label>
                                <textarea type="text" id="con-desc" class="form-control heg-adj"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="formrow-password-input">Control Question <sup
                                        class="text-danger">*</sup></label>
                                <textarea type="text" id="con-question" class="form-control " rows="5"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="formrow-password-input">Control Activities <sup
                                        class="text-danger">*</sup></label>
                                <textarea type="text" id="con-activity" class="form-control " rows="5"></textarea>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h2 class="card-title mb-2 mt-4">Control Owners</h2>
                        <hr>
                        @php($controlownerlist = ['' => '---Select Control Owners---'] + $controlownerlist)
                        {!! Form::select('control_owner[]', $controlownerlist, null, [
                            'class' => 'form-control',
                            'id' => 'control_owners',
                            'multiple' => false
                        ]) !!}
                    </div>
                    <div class="connection-block-wrapper">
                        <h2 class="card-title mb-2 mt-4">Mapped Requirments</h2>
                        <hr>

                        <input type="hidden" id="requirmentid" value="" />
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="mr-3">
                                        <img src="https://biz-file.com/c/1410/233500.jpg" alt=""
                                            class="avatar-md h-auto d-block rounded">
                                    </div>

                                    <div class="align-self-center overflow-hidden mr-auto">
                                        <div>
                                            <h5 class="font-size-14 m-0 py-2"><a href="javascript:void(0)"
                                                    class="text-dark framework_name" id="framework_name1"> </a><span
                                                    class="ml-2 text-success p-1 rounded-circle bg-light font-weight-light"
                                                    id="framework_id"></span></h5>
                                            <div class="media livebrowsecontrol-el" id="mapedrequirment">
                                                <!--<div class="p mr-2 mb-0"><span class="badge badge-soft-info ">A5.15</span></div>
                                            <div class="p mb-0 mr-2"><span class="badge badge-soft-warning ">SOC 2</span></div>
                                             <div class="p mr-2 mb-0"><span class="badge badge-soft-info ">A5.15</span></div> -->
                                            </div>
                                        </div>
                                    </div>

                                    <div class="dropdown ml-2">
                                        <a class="text-muted dropdown-toggle font-size-14 browse-control-openr"
                                            href="javascript:void(0);" role="button" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            Add
                                        </a>
                                        <i class="mdi mdi-chevron-right font-size-14 text-muted"></i>
                                    </div>
                                </div>
                            </div>
                        </div>




                    </div>



                    <div class="connection-block-wrapper">
                        <h2 class="card-title mb-2 mt-4">Mapped Risks</h2>
                        <hr>


                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="mr-3">
                                        <img src="https://biz-file.com/c/1410/233500.jpg" alt=""
                                            class="avatar-md h-auto d-block rounded">
                                    </div>

                                    <div class="align-self-center overflow-hidden mr-auto">
                                        <div>
                                            <h5 class="font-size-14 m-0 py-2"><a href="javascript:void(0)"
                                                    class="text-dark framework_name" id="framework_name"> </a><span
                                                    class="ml-2 text-success p-1 rounded-circle bg-light font-weight-light"
                                                    id="framework_id"></span></h5>
                                            <div class="media livebrowsecontrol-elrisk" id="mapedrisk">

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

                                    <div class="dropdown ml-2">
                                        <a class="text-muted dropdown-toggle font-size-14 browse-control-openr-risk"
                                            href="javascript:void(0);" role="button" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            Add
                                        </a>
                                        <i class="mdi mdi-chevron-right font-size-14 text-muted"></i>
                                    </div>
                                </div>
                            </div>
                        </div>




                    </div>



                    <div class="connection-block-wrapper ">
                        <div class="d-flex align-items-center justify-content-between">
                            <h2 class="card-title mb-2">Control Evidence</h2>

                        </div>
                        <hr>
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-xs mr-3">
                                        <div class="avatar-title rounded-circle bg-light text-primary">
                                            <i class="bx bxs-user"></i>
                                        </div>
                                    </div>

                                    <div class="align-self-center overflow-hidden mr-auto">
                                        <div>
                                            <h5 class="font-size-14 m-0 py-2"><a href="#" class="text-dark">Link
                                                    Policy</a></h5>
                                            <div class="media livebrowsecontrol-elpolicy" id="mapepolicy">

                                            </div>

                                        </div>
                                    </div>

                                    <div class="dropdown ml-2">
                                        <a class="text-muted dropdown-toggle font-size-14 browse-control-openr-policy"
                                            href="javascript:void(0);" role="button" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            Add
                                        </a>
                                        <i class="mdi mdi-chevron-right font-size-14 text-muted"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-xs mr-3">
                                        <div class="avatar-title rounded-circle bg-light text-primary">
                                            <i class="bx bxs-user"></i>
                                        </div>
                                    </div>

                                    <div class="align-self-center overflow-hidden mr-auto">
                                        <div>
                                            <h5 class="font-size-14 m-0 py-2"><a href="#" class="text-dark">Link
                                                    Reports & Documents</a></h5>

                                        </div>
                                    </div>

                                    <div class="dropdown ml-2">
                                        <a class="text-muted dropdown-toggle font-size-14 upload-control-evidence-modal"
                                            href="javascript:void(0)" role="button" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">
                                            Add
                                        </a>
                                        <i class="mdi mdi-chevron-right font-size-14 text-muted"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="avatar-xs mr-3">
                                        <div class="avatar-title rounded-circle bg-light text-primary">
                                            <i class="bx bxs-user"></i>
                                        </div>
                                    </div>

                                    <div class="align-self-center overflow-hidden mr-auto">
                                        <div>
                                            <h5 class="font-size-14 m-0 py-2"><a href="#" class="text-dark">Link
                                                    External Evidence</a></h5>

                                        </div>
                                    </div>

                                    <div class="dropdown ml-2">
                                        <a class="text-muted dropdown-toggle font-size-14" href="#" role="button"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Add
                                        </a>
                                        <i class="mdi mdi-chevron-right font-size-14 text-muted"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
                <div class="d-flex justify-content-end gap-10 border-top pt-4 pb-4">
                    <a href="javascript:void(0)" id="req_submit_btn" onclick="onSetCompanyMap()"
                        data-loading-text="<i class='bx bx-loader-alt bx-spin'></i> Processing..."
                        class="btn btn-success btn-rounded px-5 py-2">Ready to audit</a>
                    <a href="#"
                        class="btn btn-outline-primary btn-rounded waves-effect waves-light px-5 py-2">Cancel</a>
                    <a href="javascript:void(0)" id="req_submit_btn" onclick="onUpdateRequirement()"
                        data-loading-text="<i class='bx bx-loader-alt bx-spin'></i> Processing..."
                        class="btn btn-primary btn-rounded px-5 py-2">Save</a>
                </div>
            </div>



        </div> <!-- end slimscroll-menu-->
    </div>

    <!-- Modal -->
    <div class="modal fade consider-not-sidebar-outside" id="uploadModal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 99999;">
        <form action="{{ route('control.upload-evidence') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Upload Control Evidence</h5>
                        <button type="button" onclick="dismissControlUploadModal();" class="close"
                            data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="control_id" id="control_id" value="" />
                        <label for="formFileMultiple" class="form-label">Multiple files input example</label>
                        <input class="form-control" name="upload_file[]" type="file" id="formFileMultiple"
                            multiple style="height: 27px;padding: 0px;" required />
                    </div>
                    <div class="modal-footer">
                        <button type="button" onclick="dismissControlUploadModal();" class="btn btn-secondary"
                            data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Upload</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@props([
    'requirement' => '',
])
<div class="modal fade consider-not-sidebar-outside" id="controlbrowsermodal" tabindex="-1"
    aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 99999;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Requirments</h5>
                <button type="button" class="close" onclick="dismissControlBrowserModal();"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 my-1">
                        <label class="sr-only" for="controlsearch">Search Requirments</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text"><i class='bx bx-search'></i></div>
                            </div>
                            <input type="text" class="form-control" id="controlsearch"
                                placeholder="Type here to search requirments"
                                onkeyup="onFilterBrowseControlByName();" onblur="onFilterBrowseControlByName();" />
                        </div>
                    </div>
                    <div class="col-12" style="max-height: calc(100vh - 275px); overflow: auto;">
                        <div class="py-3" id="controls-body-el">
                            <div class="text-center pt-3 pb-2" style="font-size: 24px;">
                                <i class='bx bx-loader-alt bx-spin'></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    onclick="dismissControlBrowserModal();">Close</button>
                <button type="button" onclick="onFinalizeBrowseControlItems();"
                    class="btn btn-primary">Okay</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade consider-not-sidebar-outside" id="controlbrowsermodalrisk" tabindex="-1"
    aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 99999;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Risk</h5>
                <button type="button" class="close" onclick="dismissControlBrowserModalrisk();"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 my-1">
                        <label class="sr-only" for="controlsearch">Search Risks</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text"><i class='bx bx-search'></i></div>
                            </div>
                            <input type="text" class="form-control" id="controlsearchrisk"
                                placeholder="Type here to search risks" onkeyup="onFilterBrowseControlByNamerisk();"
                                onblur="onFilterBrowseControlByNamerisk();" />
                        </div>
                    </div>
                    <div class="col-12" style="max-height: calc(100vh - 275px); overflow: auto;">
                        <div class="py-3" id="controls-body-elrisk">
                            <div class="text-center pt-3 pb-2" style="font-size: 24px;">
                                <i class='bx bx-loader-alt bx-spin'></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    onclick="dismissControlBrowserModalrisk();">Close</button>
                <button type="button" onclick="onFinalizeBrowseControlItemsrisk();"
                    class="btn btn-primary">Okay</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade consider-not-sidebar-outside" id="controlbrowsermodalpolicy" tabindex="-1"
    aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 99999;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Policy</h5>
                <button type="button" class="close" onclick="dismissControlBrowserModalpolicy();"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 my-1">
                        <label class="sr-only" for="controlsearch">Search Policy</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text"><i class='bx bx-search'></i></div>
                            </div>
                            <input type="text" class="form-control" id="controlsearchpolicy"
                                placeholder="Type here to search policy"
                                onkeyup="onFilterBrowseControlByNamepolicy();"
                                onblur="onFilterBrowseControlByNamepolicy();" />
                        </div>
                    </div>
                    <div class="col-12" style="max-height: calc(100vh - 275px); overflow: auto;">
                        <div class="py-3" id="controls-body-elpolicy">
                            <div class="text-center pt-3 pb-2" style="font-size: 24px;">
                                <i class='bx bx-loader-alt bx-spin'></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    onclick="dismissControlBrowserModalpolicy();">Close</button>
                <button type="button" onclick="onFinalizeBrowseControlItemspolicy();"
                    class="btn btn-primary">Okay</button>
            </div>
        </div>
    </div>
</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
    var cc_items = [];
    var cc_itemsrisk = [];
    var cc_itemspolicy = [];

    var refids = {};
    var refidsrisk = {};
    var refidspolicy = {};

    var full_set_of_data = null;
    var full_set_of_datarisk = null;
    var full_set_of_datapolicy = null;

    var app_url = "