@extends('admin.layouts.app')

@section('title', __('admin/ai-staff.training_create_title'))

@section('content')
<div class="container-fluid px-4">
    @include('admin.ai-staff._nav')

    <x-admin.page-header
        :title="__('admin/ai-staff.training_create_title')"
        :subtitle="__('admin/ai-staff.training_create_subtitle')"
        :buttons="[
            [
                'label' => __('admin/ai-staff.buttons_back'),
                'route' => route('admin.ai-staff.training.index'),
                'icon' => 'fas fa-arrow-left',
                'color' => 'outline-secondary',
            ],
        ]"
    />

    <form id="trainingDatasetForm" method="POST" action="{{ route('admin.ai-staff.training.store') }}">
        @csrf

        <div class="row">
            <!-- Main Form Column -->
            <div class="col-lg-8">
                <x-admin.card :title="__('admin/ai-staff.training_card_details')" icon="fas fa-brain" class="mb-4">
                    <div class="mb-3">
                        <label for="name" class="form-label">{{ __('admin/ai-staff.training_fields_name') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                               id="name" name="name" value="{{ old('name') }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">{{ __('admin/ai-staff.training_fields_description') }}</label>
                        <textarea class="form-control @error('description') is-invalid @enderror"
                                  id="description" name="description" rows="4">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <label for="type" class="form-label">{{ __('admin/ai-staff.training_fields_type') }} <span class="text-danger">*</span></label>
                        <select class="form-select @error('type') is-invalid @enderror"
                                id="type" name="type" required>
                            <option value="">{{ __('admin/ai-staff.training_select_type') }}</option>
                            <option value="qa_pairs" {{ old('type') == 'qa_pairs' ? 'selected' : '' }}>{{ __('admin/ai-staff.training_type_qa_pairs') }}</option>
                            <option value="instructions" {{ old('type') == 'instructions' ? 'selected' : '' }}>{{ __('admin/ai-staff.training_type_instructions') }}</option>
                            <option value="corrections" {{ old('type') == 'corrections' ? 'selected' : '' }}>{{ __('admin/ai-staff.training_type_corrections') }}</option>
                        </select>
                        @error('type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">{{ __('admin/ai-staff.training_help_type') }}</small>
                    </div>
                </x-admin.card>
            </div>

            <!-- Actions Column -->
            <div class="col-lg-4">
                <x-admin.card :title="__('admin/ai-staff.card_actions')">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>{{ __('admin/ai-staff.buttons_save') }}
                        </button>
                        <a href="{{ route('admin.ai-staff.training.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-2"></i>{{ __('admin/ai-staff.buttons_cancel') }}
                        </a>
                    </div>
                </x-admin.card>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    window.trainingConfig = {
        routes: {
            store: '{{ route("admin.ai-staff.training.store") }}'
        },
        translations: {
            validation_error: '{{ __("admin/ai-staff.validation_error") }}',
            created_success: '{{ __("admin/ai-staff.training_created_success") }}'
        }
    };
</script>
@vite('resources/js/admin/ai-staff/training/create.js')
@endpush
