@if(auth()->user()->hasRole('admin') || auth()->user()->can('Can Create Review Cycle'))
<style>
    tr.group,
    tr.group:hover {
        background-color: #ddd !important;
    }
    .font-weight-bold label {
        color: red !important;
        font-size: 15px !important;
    }
    .cdk-textarea-autosize{
        min-height: 21px;
        height: 21px;
        display: block;
        width: 100%;
        resize: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow: hidden;
        box-sizing: content-box;
        word-break: break-word;
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
        font-size: 18px;
        font-weight: bolder;
        line-height: 1.3em;
        color: #111;
        resize: none;
        border: 0;
        outline: none;
        background: transparent;
        padding: 0 4px 0 0;
    }
    .dropdown-item.active, .dropdown-item:active{
        background-color: #FFFFFF;
    }
    .multiselect-container.dropdown-menu.show {

        -webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.75);
        box-shadow: 0px -2px 5px 0px rgba(0,0,0,0.75);
    }
</style>

<button type="button" class="btn btn-sm btn-primary m-1" data-toggle="modal" data-target=".create_new_modal"> <i class="fa-solid fa-plus"></i> Create A New Review Cycle</button>


<div class="modal fade create_new_modal" id="one_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form action="{{route('reviews.store_cycle')}}" method="post" name="frmOne" class="create-items needs-validation ajaxSubmit" novalidate>
                @csrf
                <input type="hidden" name="action" id="action" value="create">
                <div class="modal-body">
                    <textarea rows="1" tabindex="0" name="title" required="required" id="title" data-test="draft-view__title-task" cuslashcommandinput="" cdktextareaautosize="" cdkautosizeminrows="1" data-gramm="false" autocomplete="off" data-1p-ignore="" data-form-type="other" class="cdk-textarea-autosize" placeholder="Start typing a review cycle title here"></textarea>
                    <div class="invalid-feedback">The Title is required.</div>
                    <div class="clearfix">&nbsp;</div>
                    <div class="row">
                        <div class="col-md-12 form-group mb-3">
                            <label for="frequencyId">Frequency</label>
                            <select name="frequency_id" id="frequencyId" class="form-control" required>
                                @if(is_array($frequencies) && count($frequencies)>0)
                                    @foreach($frequencies as $frID=>$frequency)
                                    <option value="{{$frID}}">{{$frequency}}</option>
                                    @endforeach
                                @else
                                    <option value="">-NONE FOUND-</option>
                                @endif
                            </select>
                        </div>
                        <div class="col-md-12 form-group mb-3">
                            <label for="meetDate">Start date</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <input id="review_date"  class="form-control" placeholder="date..." name="review_date" required="required">
                                    <div class="invalid-feedback">The DATE field is required.</div>
                                </div>
                                <div class=" col-md-6">
                                    <input id="review_time"  class="form-control" placeholder="time..." name="review_time" required="required">
                                    <div class="invalid-feedback">The TIME field is required.</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 form-group mb-3">
                            <label for="staffs">Who are you reviewing?</label>
                            <select name="staffs[]" class="form-control mutiselect search_init" style="display: none" id="staffs" multiple required="required">
                                @if(isset($deptUsers))
                                @foreach($deptUsers as $userGroup=>$userArr)
                                <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                    @foreach($userArr as $userID=>$userName)
                                    <option value="{{$userID}}" >{{$userName}}</option>
                                    @endforeach
                                </optgroup>
                                @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-12 form-group mb-3">
                            <label for="staffs">Which review template would you like to select</label>
                            <select name="review" class="form-control" id="reviews_id" required="required">
                                @if(isset($reviewList))
                                @foreach($reviewList as $reviewID=>$review)
                                <option value="{{$reviewID}}" >{{$review}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-12 form-group mb-3" id="todo_wrap"><ul id="show-todo-items"></ul></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-success">Create Review Cycle</button>
                </div>
            </form>
        </div>
    </div>
</div>
@section('bottom-js')
<script>
    $(document).ready(function () {
//formsubmit
        fromSubmit({formElement: ".ajaxSubmit", has_modal: ".create_new_modal", reloadLocation: 'y'});
    });
</script>
@endsection
@endif