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

@section('content')
    <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">Risk Groups</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active">Risk Groups</li>
                    </ol>
                </div>

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

    <div class="card">
        <div class="card-body">
            <div class="d-flex justify-content-between mb-3">
                <div class="w-f-150">
                    <select class="form-control border-radius-100">
                        <option>All Status</option>
                    </select>
                </div>
                <div class="d-flex align-items-center gap-10">
                    <div class="search-box">
                        <div class="position-relative">
                            <input type="text" class="form-control" placeholder="Search...">
                            <i class="bx bx-search-alt search-icon"></i>
                        </div>
                    </div>
                    <a href="javascript:void(0);" class="btn btn-light btn-rounded waves-effect">Download All</a>
                    <a href="javascript:void(0);"
                        class="btn btn-primary btn-rounded waves-effect waves-light right-bar-toggle"><span
                            id="heading-tag">Create Group</span></a>

                </div>
            </div>
            <div class="table-responsive policy-table mb-0" data-pattern="priority-columns">
                <table id="tech-companies-1" class="table table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name <i class="bx bx-chevron-up ml-1"></i></th>
                            <th data-priority="3">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (count($data))
                            @foreach ($data as $key => $val)
                                <tr>
                                    <td>
                                        {{-- @if ($val->creator_id == auth()->user()->id || $val->owner_id == auth()->user()->id) --}}
                                            <a href="javascript:void(0);" data-id="{{ $val->id }}"
                                            class="right-bar-toggle company" data-mode="company"><i
                                                class="bx bx-edit font-size-20"></i></a>
                                        {{-- @endif --}}

                                        {{-- <a href="javascript:void(0);" data-id="{{ $val->id }}" class="del-company"><i
                                            class="bx bx-copy-alt font-size-20 ml-1 mr-1"></i></a> --}}
                                    </td>
                                    <td>{{ $val->title }}</td>
                                    <td><span class="badge badge-pill badge-soft-{{ $val->statuses[$val->status]['badge'] }} font-size-12">{!! $val->statuses[$val->status]['name'] !!}</span></td>
                                    <td class="w-20">
                                        <div class="media justify-content-end">
                                            <button type="button"
                                                class="btn btn-warning btn-rounded waves-effect waves-light del-company"
                                                data-id="{{ $val->id }}"><i
                                                    class="mdi mdi-delete font-size-15"></i></button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                        <tr>
                            <td colspan="4" class="text-center">No Data Found</td>
                        </tr>
                        @endif

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

    <!-- modal -->
    <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" id="close-modal">
                    <i class="mdi mdi-close noti-icon"></i>
                </a>
                <h5 class="m-0">Create Group</h5>
            </div>

            <div class="px-3 pt-4">
                <div id="formrow-plantitle">
                    <h2 class="card-title mb-2">Group Info</h2>
                    <hr>
                </div>

                <form class="mt-4" id="riskGroupForm">
                    <input type="hidden" id="requirmentid" value="" />

                    <div class="form-group" id="formrow-firstname">
                        <label for="formrow-firstname-input">Group Name <sup class="text-danger">*</sup></label>
                        <input type="text" class="form-control" id="formrow-firstname-input" data-parsley-required="true">
                    </div>





                    <div class="row">

                        <div class="col-md-12" id="formrow-companydesc">
                            <div class="form-group">
                                <label for="formrow-companydesc-input">Description </label>
                                <textarea type="text" id="con-desc" class="form-control heg-adj" rows="7"></textarea>
                            </div>
                        </div>
                    </div>



                </form>
                <div class="d-flex justify-content-end gap-10 border-top pt-4 pb-4">
                    <a href="javascript:void(0)"
                        class="btn btn-outline-primary btn-rounded waves-effect waves-light px-5 py-2"
                        onclick="closeCreateModal()">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>
    </div>



    </div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
    var app_url = "