@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('New appraisal instance'))
@section('content')
    <style>
        .select2-selection__rendered { line-height: 31px !important; }
        .select2-container .select2-selection--single { height: 35px !important; }
        .select2-selection__arrow { height: 34px !important; }
        .pa-workflow-step { border-left: 3px solid #007bff; padding-left: 1rem; margin-bottom: 1rem; }
        .pa-workflow-step.is-self { border-left-color: #6c757d; }
    </style>
    <div class="row mt-3 mb-3">
        <div class="col-lg-10 mx-auto">
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="mb-0">{{ __('New appraisal instance') }}</h5>
                    <p class="text-muted small mb-0">{{ __('Assign a staff member and map each workflow stage to the evaluator who will act at that step.') }}</p>
                </div>
                <div class="card-body">
                    <form method="post" action="{{ route('pa.instances.store') }}" id="pa_instance_create_form">
                        @csrf
                        <div class="form-group">
                            <label>{{ __('Staff (appraisee)') }}</label>
                            <select name="staff_id" id="staff_id" class="form-control select2" required>
                                <option value="">{{ __('Select…') }}</option>
                                @foreach($staffList as $s)
                                    <option value="{{ $s->id }}" @selected((string) old('staff_id') === (string) $s->id)>
                                        {{ $s->selectOptionLabel() }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Cycle') }}</label>
                            <select name="appraisal_cycle_id" class="form-control" required>
                                @foreach($cycles as $c)
                                    <option value="{{ $c->id }}" @selected((string) old('appraisal_cycle_id') === (string) $c->id)>{{ $c->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Evaluation form (optional — auto-resolve if empty)') }}</label>
                            <select name="evaluation_form_id" class="form-control">
                                <option value="">{{ __('Auto') }}</option>
                                @foreach($forms as $f)
                                    <option value="{{ $f->id }}" @selected((string) old('evaluation_form_id') === (string) $f->id)>{{ $f->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Period label') }}</label>
                            <input type="text" name="period_label" class="form-control" value="{{ old('period_label') }}">
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label>{{ __('Evaluation period from') }}</label>
                                <input type="date" name="evaluation_period_from" class="form-control" value="{{ old('evaluation_period_from') }}">
                            </div>
                            <div class="form-group col-md-6">
                                <label>{{ __('Evaluation period to') }}</label>
                                <input type="date" name="evaluation_period_to" class="form-control" value="{{ old('evaluation_period_to') }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>{{ __('Due date') }}</label>
                            <input type="date" name="due_at" class="form-control" value="{{ old('due_at') }}">
                        </div>
                        <div class="form-group">
                            <label>{{ __('Period key (optional — unique; auto UUID if empty)') }}</label>
                            <input type="text" name="period_key" class="form-control" value="{{ old('period_key') }}" maxlength="160">
                        </div>

                        <hr>
                        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
                            <div>
                                <h6 class="mb-1">{{ __('Workflow — stage & evaluator assignment') }}</h6>
                                <p class="small text-muted mb-0">{{ __('Required for each stage except self-assessment (always the appraisee).') }}</p>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="btn_fill_supervisor_chain" disabled>
                                {{ __('Suggest from supervisor chain') }}
                            </button>
                        </div>
                        <div id="evaluator_suggest_notice" class="alert alert-info small d-none"></div>

                        @foreach($workflowStages as $step)
                            <div class="pa-workflow-step {{ $step['is_self'] ? 'is-self' : '' }}">
                                <div class="d-flex flex-wrap justify-content-between align-items-baseline mb-1">
                                    <label class="font-weight-bold mb-0">{{ $loop->iteration }}. {{ $step['label'] }}</label>
                                    @if($step['is_self'])
                                        <span class="badge badge-secondary">{{ __('Appraisee') }}</span>
                                    @endif
                                </div>
                                @if($step['is_self'])
                                    <p class="text-muted small mb-0" id="self_evaluator_label">{{ __('Select staff above') }}</p>
                                @else
                                    <select name="evaluators[{{ $step['stage'] }}]" id="evaluator_{{ $step['stage'] }}" class="form-control select2 pa-evaluator-select" required>
                                        <option value="">{{ __('Select evaluator…') }}</option>
                                        @foreach($staffList as $s)
                                            <option value="{{ $s->id }}" @selected((string) old('evaluators.'.$step['stage']) === (string) $s->id)>
                                                {{ $s->selectOptionLabel() }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('evaluators.'.$step['stage'])
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                @endif
                            </div>
                        @endforeach

                        <button type="submit" class="btn btn-primary">{{ __('Create') }}</button>
                        <a href="{{ route('pa.instances.index') }}" class="btn btn-light">{{ __('Back') }}</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
(function () {
    var suggestUrl = @json(route('pa.instances.evaluator_suggestions'));
    var staffNames = @json($staffList->mapWithKeys(fn ($s) => [(string) $s->id => $s->selectOptionLabel()])->all());
    var $staff = $('#staff_id');
    var $btnFill = $('#btn_fill_supervisor_chain');
    var $notice = $('#evaluator_suggest_notice');
    var $selfLabel = $('#self_evaluator_label');

    function updateSelfLabel() {
        var id = $staff.val();
        $selfLabel.text(id && staffNames[id] ? staffNames[id] : @json(__('Select staff above')));
    }

    function toggleFillButton() {
        $btnFill.prop('disabled', !$staff.val());
    }

    $staff.on('change', function () {
        updateSelfLabel();
        toggleFillButton();
        $notice.addClass('d-none').empty();
    });

    $btnFill.on('click', function () {
        var staffId = $staff.val();
        if (!staffId) return;
        $btnFill.prop('disabled', true);
        $.get(suggestUrl, { staff_id: staffId })
            .done(function (data) {
                var evaluators = data.evaluators || {};
                $('.pa-evaluator-select').each(function () {
                    var stage = this.id.replace('evaluator_', '');
                    var val = evaluators[stage];
                    if (val) {
                        $(this).val(String(val)).trigger('change');
                    }
                });
                if (data.warnings && data.warnings.length) {
                    $notice.removeClass('d-none alert-info').addClass('alert-warning')
                        .html('<strong>' + @json(__('Review suggestions')) + ':</strong><ul class="mb-0 pl-3"><li>' + data.warnings.join('</li><li>') + '</li></ul>');
                } else {
                    $notice.removeClass('d-none alert-warning').addClass('alert-info')
                        .text(@json(__('Supervisor chain applied. Adjust any stage if needed.')));
                }
            })
            .fail(function () {
                $notice.removeClass('d-none').addClass('alert-danger')
                    .text(@json(__('Could not load supervisor suggestions.')));
            })
            .always(function () {
                toggleFillButton();
            });
    });

    updateSelfLabel();
    toggleFillButton();
})();
</script>
@endsection