@if(isset($assessmentVariable->assessmentVariablesField) && !empty($assessmentVariable->assessmentVariablesField))
    <input type="hidden" name="id" id="id" value="{{$assessmentVariable->id}}">
    @foreach($assessmentVariable->assessmentVariablesField as $key => $employeeVariable)
        <input type="hidden" name="edit_variable_id[{{$index + $key}}]" value="{{$employeeVariable->id}}">
        <div class="row variable-block mb-2">
            <div class="container-fluid">
                <div id="accordion">
                    <div class="card mb-3">
                        <div class="card-header d-flex align-items-center justify-content-between" data-bs-toggle="collapse" href="#collapseOne{{$index + $key + 1}}">
                            <a class="card-link newheading{{$index + $key + 1}} nav-link d-inline">
                            {{$index + $key + 1}}. {{ isset($employeeVariable->question_relating_performance_measurement) ? $employeeVariable->question_relating_performance_measurement : '' }}
                            </a>
                            <a href="javascript:void(0);" class="btn btn-danger remove-variable text-white" style="float: right;">
                                <i class="fa-solid fa-minus text-white"></i> Remove Variable
                            </a>
                        </div>
                        <div id="collapseOne{{$index + $key +1}}" class="collapse in" data-parent="#accordion">
                            <div class="card-body">
                                <div class="col-md-12 mb-4">
                                    <label for="">Enter a time period for when each variable must be scored </label>
                                    <select class="form-control month_period" name="time_period[{{$index + $key +1}}]" id="time_period{{$index + $key +1}}" required="" data-id="{{$index + $key +1}}" onchange="recalculateMaxScore()">
                                        <option value="">select</option>
                                        @if($assessmentEvaluationType == 0)
                                            <option value="1" {{ (isset($employeeVariable->time_period) && $employeeVariable->time_period == 1) ? 'selected' : '' }}>Every 1 Month</option>
                                        @else
                                            <option value="1" {{ (isset($employeeVariable->time_period) && $employeeVariable->time_period == 1) ? 'selected' : '' }}>Every 1 Month</option>
                                            <option value="2" {{ (isset($employeeVariable->time_period) && $employeeVariable->time_period == 2) ? 'selected' : '' }}>Every 2 Month</option>
                                            <option value="3" {{ (isset($employeeVariable->time_period) && $employeeVariable->time_period == 3) ? 'selected' : '' }}>Every 3 Month</option>
                                            <option value="4" {{ (isset($employeeVariable->time_period) && $employeeVariable->time_period == 4) ? 'selected' : '' }}>Every 6 Month</option>
                                            <option value="5" {{ (isset($employeeVariable->time_period) && $employeeVariable->time_period == 5) ? 'selected' : '' }}>Every 9 Month</option>
                                            <option value="6" {{ (isset($employeeVariable->time_period) && $employeeVariable->time_period == 6) ? 'selected' : '' }}>Every 12 Month</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-md-12 mb-4">
                                    <label for="">Enter a description of performance measured </label>
                                    <textarea name="description_of_performance_measured[{{$index + $key +1}}]" class="form-control" rows="2" placeholder="Enter" required="" > {{ isset($employeeVariable->description_of_performance_measured) ? $employeeVariable->description_of_performance_measured : '' }} </textarea>
                                </div>
                                <div class="col-md-12 mb-4">
                                    <label for="">Enter the question relating to this performance measurement?</label>
                                    <input type="text" name="question_relating_performance_measurement[{{$index + $key +1}}]" class="form-control" placeholder="Enter" value="{{ isset($employeeVariable->question_relating_performance_measurement) ? $employeeVariable->question_relating_performance_measurement : '' }}" autocomplete="off" >
                                </div>
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-6 mb-4">
                                            <p class="pt-2">If Answer  = ‘Yes’</p>
                                        </div>
                                        <div class="col-lg-3 col-md-6  mb-4">
                                            <div class="input-group unique-input-group">
                                                <input type="text" name="yes_score[{{$index + $key +1}}]" class="form-control unique-input  score-point" data-id="{{$index + $key +1}}" id="scoreyes{{$index + $key +1}}" placeholder="Enter Point" value="{{ isset($employeeVariable->yes_score) ? $employeeVariable->yes_score : '' }}" >
                                                <div class="input-group-append unique-append m-0">
                                                    <select name="yes_calculat[{{$index + $key +1}}]" id="calyes{{$index + $key +1}}" class="form-control unique-select selectpicker" onchange="recalculateMaxScore()">
                                                        <option data-content="<i class='fa-solid fa-plus'></i>" value="1" {{ (isset($employeeVariable->yes_calculat) && $employeeVariable->yes_calculat == 1) ? 'selected' : '' }}></option>
                                                        <option data-content="<i class='fa-solid fa-minus'></i>" value="0" {{ (isset($employeeVariable->yes_calculat) && $employeeVariable->yes_calculat == 0) ? 'selected' : '' }}></option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-12">
                                    <div class="row">
                                        <div class="col-lg-2 col-md-6 mb-4">
                                            <p class="pt-2">If Answer = ‘No’</p>
                                        </div>
                                        <div class="col-lg-3 col-md-6 mb-4">
                                            <div class="input-group unique-input-group">
                                                <input type="text" name="no_score[{{$index + $key +1}}]" class="form-control unique-input score-point" data-id="{{$index + $key +1}}" id="scoreno{{$index + $key +1}}" placeholder="Enter Point" value="{{ isset($employeeVariable->no_score) ? $employeeVariable->no_score : '' }}" >
                                                <div class="input-group-append unique-append">
                                                    <select name="no_calculat[{{$index + $key +1}}]" id="calno{{$index + $key +1}}" class="form-control unique-select selectpicker" onchange="recalculateMaxScore()">
                                                        <option data-content="<i class='fa-solid fa-minus'></i>" value="0" {{ (isset($employeeVariable->no_calculat) && $employeeVariable->no_calculat == 0) ? 'selected' : '' }}></option>
                                                        <option data-content="<i class='fa-solid fa-plus'></i>" value="1" {{ (isset($employeeVariable->no_calculat) && $employeeVariable->no_calculat == 1) ? 'selected' : '' }}></option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-4">
                                    <label for="">Who will be able to update the employee performance record for this variable? </label>
                                    @php
                                        $selectedAllow = explode(',', $employeeVariable['allowed_employees']);
                                    @endphp

                                    <select class="form-control selectpicker custom-user-dropdown" name="allowed_employees[{{$index + $key +1}}][]" data-live-search="true" multiple="" required="" >
                                        <option value="">select</option>
                                        @if(isset($employees))
                                            @foreach($employees as $employee)
                                                <option value="{{ $employee->id }}" @if(isset($employeeVariable['allowed_employees']) && in_array($employee['id'],$selectedAllow)) selected @endif>{{ $employee->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
@endif