@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Thêm mới Cấu hình Exam</h5>
                </div>

                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('exam-configs.store') }}" method="POST">
                        @csrf
                        
                        <div class="mb-3">
                            <label for="exam_id" class="form-label">Exam <span class="text-danger">*</span></label>
                            <select name="exam_id" id="exam_id" class="form-select @error('exam_id') is-invalid @enderror" required>
                                <option value="">-- Chọn Exam --</option>
                                @foreach($exams as $exam)
                                    <option value="{{ $exam->id }}" {{ old('exam_id') == $exam->id ? 'selected' : '' }}>
                                        {{ $exam->name }} ({{ $exam->slug }})
                                    </option>
                                @endforeach
                            </select>
                            @error('exam_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="campaign_id" class="form-label">Campaign</label>
                            <select name="campaign_id" id="campaign_id" class="form-select @error('campaign_id') is-invalid @enderror">
                                <option value="">-- Chọn Campaign (Tùy chọn) --</option>
                                @foreach($campaigns as $campaign)
                                    <option value="{{ $campaign->id }}" {{ old('campaign_id') == $campaign->id ? 'selected' : '' }}>
                                        {{ $campaign->name }} ({{ $campaign->code }})
                                    </option>
                                @endforeach
                            </select>
                            @error('campaign_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                Nếu chọn campaign, cấu hình này chỉ áp dụng cho exam-campaign cụ thể. Nếu để trống, áp dụng cho tất cả campaigns của exam này.
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="field_name" class="form-label">Field Name <span class="text-danger">*</span></label>
                            <input type="text" 
                                   class="form-control @error('field_name') is-invalid @enderror" 
                                   id="field_name" 
                                   name="field_name" 
                                   value="{{ old('field_name') }}" 
                                   placeholder="Ví dụ: student_name, email, phone"
                                   required>
                            <input type="hidden" name="key" id="key" value="">
                            @error('field_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                Tên field để xác định loại thông tin cần thu thập từ user
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="input_type" class="form-label">Input Type</label>
                                    <select class="form-control @error('input_type') is-invalid @enderror" 
                                            id="input_type" 
                                            name="input_type">
                                        <option value="text" {{ old('input_type', 'text') == 'text' ? 'selected' : '' }}>Text</option>
                                        <option value="email" {{ old('input_type') == 'email' ? 'selected' : '' }}>Email</option>
                                        <option value="tel" {{ old('input_type') == 'tel' ? 'selected' : '' }}>Phone</option>
                                        <option value="number" {{ old('input_type') == 'number' ? 'selected' : '' }}>Number</option>
                                        <option value="date" {{ old('input_type') == 'date' ? 'selected' : '' }}>Date</option>
                                        <option value="textarea" {{ old('input_type') == 'textarea' ? 'selected' : '' }}>Textarea</option>
                                        <option value="select" {{ old('input_type') == 'select' ? 'selected' : '' }}>Select</option>
                                    </select>
                                    @error('input_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="placeholder" class="form-label">Placeholder</label>
                                    <input type="text" 
                                           class="form-control @error('placeholder') is-invalid @enderror" 
                                           id="placeholder" 
                                           name="placeholder" 
                                           value="{{ old('placeholder') }}" 
                                           placeholder="Placeholder text">
                                    @error('placeholder')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="field_id" class="form-label">Field ID</label>
                                    <input type="text" 
                                           class="form-control @error('field_id') is-invalid @enderror" 
                                           id="field_id" 
                                           name="field_id" 
                                           value="{{ old('field_id') }}" 
                                           placeholder="Field ID">
                                    @error('field_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="field_class" class="form-label">Field Class</label>
                                    <input type="text" 
                                           class="form-control @error('field_class') is-invalid @enderror" 
                                           id="field_class" 
                                           name="field_class" 
                                           value="{{ old('field_class', 'form-control') }}" 
                                           placeholder="CSS Classes">
                                    @error('field_class')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="required_message" class="form-label">Required Message</label>
                                    <input type="text" 
                                           class="form-control @error('required_message') is-invalid @enderror" 
                                           id="required_message" 
                                           name="required_message" 
                                           value="{{ old('required_message') }}" 
                                           placeholder="Required message">
                                    @error('required_message')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="value" class="form-label">Value</label>
                            <textarea class="form-control @error('value') is-invalid @enderror" 
                                      id="value" 
                                      name="value" 
                                      rows="3" 
                                      placeholder="Mô tả hoặc hướng dẫn cho field này...">{{ old('value') }}</textarea>
                            @error('value')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                Giá trị mặc định hoặc mô tả cho field này
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" 
                                       type="checkbox" 
                                       name="is_required" 
                                       id="is_required" 
                                       value="1" 
                                       {{ old('is_required') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_required">
                                    Bắt buộc
                                </label>
                            </div>
                            <div class="form-text">
                                Nếu checked, field này sẽ bắt buộc user phải nhập
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('exam-configs.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left"></i> Quay lại
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Lưu
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-suggest common keys
    const commonKeys = [
        'student_name', 'student_full_name', 'full_name',
        'email', 'email_address',
        'phone', 'phone_number', 'mobile',
        'date_of_birth', 'birth_date',
        'gender', 'sex',
        'address', 'home_address',
        'school', 'university', 'institution',
        'class', 'grade', 'level',
        'parent_name', 'guardian_name',
        'parent_phone', 'guardian_phone',
        'emergency_contact'
    ];

    const keyInput = document.getElementById('key');
    const datalist = document.createElement('datalist');
    datalist.id = 'key-suggestions';
    
    commonKeys.forEach(key => {
        const option = document.createElement('option');
        option.value = key;
        datalist.appendChild(option);
    });
    
    document.body.appendChild(datalist);
    keyInput.setAttribute('list', 'key-suggestions');
});
</script>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const fieldNameInput = document.getElementById('field_name');
    const keyInput = document.getElementById('key');
    
    fieldNameInput.addEventListener('input', function() {
        keyInput.value = this.value;
    });
    
    // Set initial value
    keyInput.value = fieldNameInput.value;
});
</script>
@endpush