@extends('layouts.app')

@section('title', __('New Performance'))

@section('content')
<div class="content-wrapper">
    @include('partials.messages')

    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">{{ __('New Performance') }}</h4>
        <a href="{{ route('performance.performances.index') }}" class="btn btn-outline-secondary">
            <i class="fa fa-arrow-left mr-1"></i> {{ __('Back to Performances') }}
        </a>
    </div>

    <div class="card mb-3">
        <div class="card-body">
            {{-- Step 1: pick a contract. Plain GET reload. --}}
            <form method="GET" action="{{ route('performance.performances.create') }}" class="form-row align-items-end">
                <div class="col-md-8">
                    <label for="contract_id">{{ __('Contract') }}</label>
                    <select name="contract_id" id="contract_id" class="form-control" required onchange="this.form.submit()">
                        <option value="">{{ __('Select a contract...') }}</option>
                        @foreach($contracts as $option)
                            <option value="{{ $option->id }}" @selected($contract && $contract->id === $option->id)>
                                {{ $option->title }} ({{ ucfirst($option->contract_category) }})
                            </option>
                        @endforeach
                    </select>
                    @if($contracts->isEmpty())
                        <small class="form-text text-danger">
                            {{ __('No published contracts without a performance yet.') }}
                        </small>
                    @endif
                </div>
            </form>

            @if($contract)
                {{-- Step 2: pick a department. Plain GET reload, keeps contract_id. --}}
                <form method="GET" action="{{ route('performance.performances.create') }}" class="form-row align-items-end mt-3">
                    <input type="hidden" name="contract_id" value="{{ $contract->id }}">
                    <div class="col-md-8">
                        <label for="department_id">{{ __('Department (for picking the appraisor)') }}</label>
                        <select name="department_id" id="department_id" class="form-control" required onchange="this.form.submit()">
                            <option value="">{{ __('Select a department...') }}</option>
                            @foreach($departments as $option)
                                <option value="{{ $option->id }}" @selected($department && $department->id === $option->id)>
                                    {{ $option->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </form>
            @endif
        </div>
    </div>

    @if($contract && $department)
        @if($department->users->isEmpty())
            <div class="alert alert-warning">
                {{ __('":name" has no members to pick an appraisor from.', ['name' => $department->name]) }}
            </div>
        @else
            <form method="POST" action="{{ route('performance.performances.store') }}" id="performance-form" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="contract_id" value="{{ $contract->id }}">
                <input type="hidden" name="department_id" value="{{ $department->id }}">

                <div class="card mb-3">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="appraisor_id">{{ __('Appraisor') }}</label>
                            <select name="appraisor_id" id="appraisor_id" class="form-control @error('appraisor_id') is-invalid @enderror" required>
                                <option value="">{{ __('Select the appraisor...') }}</option>
                                @foreach($department->users as $member)
                                    <option value="{{ $member->id }}" @selected(old('appraisor_id') == $member->id)>
                                        {{ trim($member->first_name . ' ' . $member->last_name) }}
                                    </option>
                                @endforeach
                            </select>
                            @error('appraisor_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">
                                {{ __('This person reviews every user covered by the contract.') }}
                            </small>
                        </div>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body">
                        <h6 class="card-title">{{ __('Components & KPIs') }}</h6>
                        <small class="form-text text-muted mb-2">
                            {{ __('Each KPI is scored 0-5 during a review. Weights default to 1 - leave them as-is for a plain average, or raise the weight of anything that should count for more.') }}
                        </small>

                        <div id="components-list"></div>

                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-add-component">
                            <i class="fa fa-plus mr-1"></i> {{ __('Add Component') }}
                        </button>

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

                <div class="card mb-3">
                    <div class="card-body">
                        <h6 class="card-title">{{ __('Review Schedule') }}</h6>
                        <small class="form-text text-muted mb-2">
                            {{ __('One due date per review cycle - e.g. quarterly reviews would be four dates.') }}
                        </small>

                        <div id="due-dates-list"></div>

                        <button type="button" class="btn btn-outline-secondary btn-sm" id="btn-add-due-date">
                            <i class="fa fa-plus mr-1"></i> {{ __('Add Review Date') }}
                        </button>

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

                <button type="submit" class="btn btn-primary">{{ __('Create Performance') }}</button>
                <a href="{{ route('performance.performances.index') }}" class="btn btn-link">{{ __('Cancel') }}</a>
            </form>
        @endif
    @endif
</div>
@endsection

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