@extends('layout.app')

@section('title')
    {{ __('تعديل بطاقة رصد الإجابات') }}
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="content-body">
            <section class="app-document-list">
                <div class="card">
                    <div class="card-header mb-2">
                        <h4 class="card-title">{{ __('تعديل بطاقة رصد الإجابات') }}</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('Guideline.update', $guideline->id) }}" method="POST">
                            @csrf
                            @method('PUT')

                            <!-- مجموعة الحقول الأولى: المجال والمعيار -->
                            <div class="form-group row">
                                <input type="hidden" name="card_type" value="{{ old('card_type', $guideline->card_type) }}">

                                <div class="col-md-6">
                                    <label for="department">{{ __('المجال') }}</label>
                                    <select name="department_id" id="department" class="form-control select2" required>
                                        <option value="">{{ __('اختر المجال') }}</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}"
                                                {{ old('department_id', $guideline->department_id) == $department->id ? 'selected' : '' }}>
                                                {{ $department->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="standard">{{ __('المعيار') }}</label>
                                    <select name="standard_id" id="standard" class="form-control select2" required>
                                        <option value="">{{ __('اختر المعيار') }}</option>
                                        @if(old('standard_id'))
                                            <!-- سيتم تعبئته بواسطة جافاسكريبت مع تحديد القيمة القديمة -->
                                        @else
                                            <option value="{{ $guideline->standard->id }}" selected>
                                                {{ $guideline->standard->standard_name }}</option>
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <!-- مجموعة الحقول الثانية: المؤشر والفقرة -->
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="indicator">{{ __('المؤشر') }}</label>
                                    <select name="indicator_id" id="indicator" class="form-control select2" required>
                                        <option value="">{{ __('اختر المؤشر') }}</option>
                                        @if(old('indicator_id'))
                                            <!-- سيتم تعبئته بواسطة جافاسكريبت مع تحديد القيمة القديمة -->
                                        @else
                                            <option value="{{ $guideline->indicator->id }}" selected>
                                                {{ $guideline->indicator->name }}</option>
                                        @endif
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="paragraph">{{ __('الفقرة') }}</label>
                                    <select name="paragraph_id" id="paragraph" class="form-control select2" required>
                                        <option value="">{{ __('اختر الفقرة') }}</option>
                                        @if(old('paragraph_id'))
                                            <!-- سيتم تعبئته بواسطة جافاسكريبت مع تحديد القيمة القديمة -->
                                        @else
                                            <option value="{{ $guideline->paragraph->id }}" selected>
                                                {{ $guideline->paragraph->name }}</option>
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <!-- مجموعة الحقول الثالثة: الإجابات المتوقعة -->
                            <div class="form-group">
                                <label>{{ __('الإجابات المتوقعة') }}</label>
                                <div id="answers-container">
                                    @if(old('answers'))
                                        @foreach(old('answers') as $answer)
                                            <div class="input-group mb-2">
                                                <input type="text" name="answers[]" class="form-control"
                                                    placeholder="{{ __('إجابة متوقعة') }}" value="{{ $answer }}" required>
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-danger remove-answer">-</button>
                                                </div>
                                            </div>
                                        @endforeach
                                        <button type="button" class="btn btn-success add-answer mt-2">+</button>
                                    @else
                                        @foreach ($guideline->answers as $answer)
                                            <div class="input-group mb-2">
                                                <input type="text" name="answers[]" class="form-control"
                                                    placeholder="{{ __('إجابة متوقعة') }}" value="{{ $answer->answer_text }}" required>
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-danger remove-answer">-</button>
                                                </div>
                                            </div>
                                        @endforeach
                                        <button type="button" class="btn btn-success add-answer">+</button>
                                    @endif
                                </div>
                            </div>

                            <!-- زر الحفظ -->
                            <div class="form-group text-right">
                                <button type="submit" class="btn btn-primary">{{ __('تحديث') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{ asset('app-assets/vendors/js/forms/select/select2.full.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2();

            // دالة لتحديث الخيارات بشكل صحيح
            function updateSelectOptions(selectElement, data, placeholder, textField = 'name') {
                selectElement.empty().append('<option value="">' + placeholder + '</option>');
                if (data && data.length > 0) {
                    $.each(data, function(key, value) {
                        selectElement.append('<option value="' + value.id + '">' + (value[textField] || value.name) + '</option>');
                    });
                }
                selectElement.trigger('change.select2');
            }

            // تحميل المعايير بناءً على المجال المختار
            $('#department').on('change', function() {
                var departmentID = $(this).val();
                if (departmentID) {
                    $.ajax({
                        url: '{{ route('getStandards', ':id') }}'.replace(':id', departmentID),
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            console.log("Standards data received:", data);
                            var textField = (data.length > 0 && 'standard_name' in data[0]) ? 'standard_name' : 'name';
                            updateSelectOptions($('#standard'), data, '{{ __('اختر المعيار') }}', textField);

                            // تفريغ الحقول التالية
                            updateSelectOptions($('#indicator'), '{{ __('اختر المؤشر') }}', []);
                            updateSelectOptions($('#paragraph'), '{{ __('اختر الفقرة') }}', []);

                            // تحديد القيمة القديمة لمعيار إذا كانت موجودة
                            @if(old('standard_id'))
                                $('#standard').val('{{ old('standard_id') }}').trigger('change');
                            @endif
                        },
                        error: function(xhr, status, error) {
                            console.error("Error loading standards:", xhr.responseText);
                            alert('{{ __('حدث خطأ أثناء تحميل المعايير.') }}');
                        }
                    });
                } else {
                    updateSelectOptions($('#standard'), '{{ __('اختر المعيار') }}', []);
                    updateSelectOptions($('#indicator'), '{{ __('اختر المؤشر') }}', []);
                    updateSelectOptions($('#paragraph'), '{{ __('اختر الفقرة') }}', []);
                }
            });

            // تحميل المؤشرات بناءً على المعيار المختار
            $('#standard').on('change', function() {
                var standardID = $(this).val();
                if (standardID) {
                    $.ajax({
                        url: '{{ route('getIndicators', ':id') }}'.replace(':id', standardID),
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            console.log("Indicators data received:", data);
                            updateSelectOptions($('#indicator'), data, '{{ __('اختر المؤشر') }}', 'name');

                            // تفريغ الحقل التالي
                            updateSelectOptions($('#paragraph'), '{{ __('اختر الفقرة') }}', []);

                            // تحديد القيمة القديمة لمؤشر إذا كانت موجودة
                            @if(old('indicator_id'))
                                $('#indicator').val('{{ old('indicator_id') }}').trigger('change');
                            @endif
                        },
                        error: function(xhr, status, error) {
                            console.error("Error loading indicators:", xhr.responseText);
                            alert('{{ __('حدث خطأ أثناء تحميل المؤشرات.') }}');
                        }
                    });
                } else {
                    updateSelectOptions($('#indicator'), '{{ __('اختر المؤشر') }}', []);
                    updateSelectOptions($('#paragraph'), '{{ __('اختر الفقرة') }}', []);
                }
            });

            // تحميل الفقرات بناءً على المؤشر المختار
            $('#indicator').on('change', function() {
                var indicatorID = $(this).val();
                if (indicatorID) {
                    $.ajax({
                        url: '{{ route('getParagraphs', ':id') }}'.replace(':id', indicatorID),
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            console.log("Paragraphs data received:", data);
                            updateSelectOptions($('#paragraph'), data, '{{ __('اختر الفقرة') }}', 'name');

                            // تحديد القيمة القديمة لفقرة إذا كانت موجودة
                            @if(old('paragraph_id'))
                                $('#paragraph').val('{{ old('paragraph_id') }}').trigger('change');
                            @endif
                        },
                        error: function(xhr, status, error) {
                            console.error("Error loading paragraphs:", xhr.responseText);
                            alert('{{ __('حدث خطأ أثناء تحميل الفقرات.') }}');
                        }
                    });
                } else {
                    updateSelectOptions($('#paragraph'), '{{ __('اختر الفقرة') }}', []);
                }
            });

            // إضافة حقول إجابات متوقعة جديدة
            $('#answers-container').on('click', '.add-answer', function() {
                var answerInput = `
                    <div class="input-group mb-2 pt-1">
                        <input type="text" name="answers[]" class="form-control" placeholder="{{ __('إجابة متوقعة') }}" required>
                        <div class="input-group-append">
                            <button type="button" class="btn btn-danger remove-answer">-</button>
                        </div>
                    </div>
                `;
                $('#answers-container').append(answerInput);
            });

            // إزالة حقل إجابة متوقعة
            $('#answers-container').on('click', '.remove-answer', function() {
                $(this).closest('.input-group').remove();
            });

            // إذا كان هناك قيمة قديمة للمجال عند تحميل الصفحة
            @if(old('department_id'))
                $('#department').trigger('change');
            @endif
        });
    </script>
@endsection