@php
    // $kpi is null on create, an existing Kpi (with ->questions loaded) on edit.
    $isEdit = isset($kpi) && $kpi->exists;
    $oldQuestions = old('questions');
    $oldQuestionIds = old('question_ids');
@endphp

<div class="form-group">
    <label for="kpi-title">@lang('Title')</label>
    <input
        type="text"
        name="title"
        id="kpi-title"
        class="form-control @error('title') is-invalid @enderror"
        value="{{ old('title', $kpi->title ?? '') }}"
        maxlength="255"
        required
    >
    @error('title')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

<div class="form-group">
    <label for="kpi-description">@lang('Description')</label>
    <textarea
        name="description"
        id="kpi-description"
        class="form-control @error('description') is-invalid @enderror"
        rows="3"
    >{{ old('description', $kpi->description ?? '') }}</textarea>
    @error('description')
        <div class="invalid-feedback">{{ $message }}</div>
    @enderror
</div>

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label for="kpi-type">@lang('Type')</label>
            <select name="type" id="kpi-type" class="form-control @error('type') is-invalid @enderror" required>
                <option value="individual" @selected(old('type', $kpi->type ?? 'individual') === 'individual')>
                    @lang('Individual')
                </option>
                <option value="departmental" disabled @selected(old('type', $kpi->type ?? '') === 'departmental')>
                    @lang('Departmental (coming soon)')
                </option>
            </select>
            @error('type')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
            <small class="form-text text-muted">
                @lang('Only individual KPIs can be assigned to users and scored right now.')
            </small>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="kpi-status">@lang('Status')</label>
            <select name="status" id="kpi-status" class="form-control @error('status') is-invalid @enderror" required>
                @foreach(['draft' => __('Draft'), 'active' => __('Active'), 'archived' => __('Archived')] as $value => $label)
                    <option value="{{ $value }}" @selected(old('status', $kpi->status ?? 'draft') === $value)>
                        {{ $label }}
                    </option>
                @endforeach
            </select>
            @error('status')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>
</div>

<hr>

<div class="form-group">
    <label>@lang('Questions')</label>
    <small class="form-text text-muted mb-2">
        @lang('Each question is scored 0-100 during an evaluation; the KPI\'s avgScore is the average across them.')
    </small>

    <div id="kpi-questions-list">
        @if($oldQuestions)
            @foreach($oldQuestions as $index => $text)
                <div class="kpi-question-row form-group d-flex align-items-start mb-2" style="gap:.5rem">
                    <input type="hidden" data-role="question-id" name="question_ids[]" value="{{ $oldQuestionIds[$index] ?? '' }}">
                    <textarea class="form-control" data-role="question-text" name="questions[]" rows="1" required>{{ $text }}</textarea>
                    <button type="button" class="btn btn-outline-danger btn-remove-question" title="@lang('Remove question')">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            @endforeach
        @elseif($isEdit)
            @foreach($kpi->questions as $question)
                <div class="kpi-question-row form-group d-flex align-items-start mb-2" style="gap:.5rem">
                    <input type="hidden" data-role="question-id" name="question_ids[]" value="{{ $question->id }}">
                    <textarea class="form-control" data-role="question-text" name="questions[]" rows="1" required>{{ $question->question }}</textarea>
                    <button type="button" class="btn btn-outline-danger btn-remove-question" title="@lang('Remove question')">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
            @endforeach
        @else
            <div class="kpi-question-row form-group d-flex align-items-start mb-2" style="gap:.5rem">
                <input type="hidden" data-role="question-id" name="question_ids[]" value="">
                <textarea class="form-control" data-role="question-text" name="questions[]" rows="1" placeholder="@lang('Question text')" required></textarea>
                <button type="button" class="btn btn-outline-danger btn-remove-question" title="@lang('Remove question')">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
        @endif
    </div>

    <button type="button" class="btn btn-outline-secondary btn-sm mt-2" id="kpi-add-question">
        <i class="fa fa-plus mr-1"></i> @lang('Add Question')
    </button>

    @error('questions')
        <div class="text-danger small mt-2">{{ $message }}</div>
    @enderror
</div>

@push('scripts')
    <script src="{{ asset('js/kpi-question-rows.js') }}"></script>
@endpush