@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('NoteCard.update', $noteCard->id) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <!-- مجموعة الحقول الأولى: المجال والمعيار -->
                            <div class="form-group row">
                                <input type="hidden" name="card_type" value="manager">
                                <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 }}"
                                                @if ($department->id == $noteCard->department_id) selected @endif>
                                                {{ $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>
                                        <!-- سيتم تعبئته بواسطة جافاسكريبت -->
                                    </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>
                                        <!-- سيتم تعبئته بواسطة جافاسكريبت -->
                                    </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>
                                        <!-- سيتم تعبئته بواسطة جافاسكريبت -->
                                    </select>
                                </div>
                                <div class="col-md-12 pt-1">
                                    <label for="indicator_discription">{{ __('وصف المؤشر') }}</label>
                                    <textarea name="indicator_discription" id="indicator_discription" class="form-control" rows="3">{{ old('indicator_discription', $noteCard->indicator_discription) }}</textarea>
                                </div>
                            </div>
                            <!-- مجموعة الحقول الثالثة: الإجابات المتوقعة -->
                            <div class="form-group">
                                <label>{{ __('المشاهد الدالة') }}</label>
                                <div id="answers-container">
                                    @foreach ($noteCard->noteScenes as $scene)
                                        <div class="input-group mb-2">
                                            <input type="text" name="answers[]" class="form-control"
                                                value="{{ $scene->scene_description }}" required>
                                            <div class="input-group-append">
                                                <button type="button" class="btn btn-danger remove-answer">-</button>
                                            </div>
                                        </div>
                                    @endforeach
                                    <!-- إزالة خاصية 'required' من الحقل الفارغ لإضافة مشهد دال جديد -->
                                    <div class="input-group mb-2">
                                        <input type="text" name="answers[]" class="form-control"
                                            placeholder="{{ __('مشهد دال') }}">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-success add-answer">+</button>
                                        </div>
                                    </div>
                                </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('css')
    <style>
        .custom-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            direction: rtl;
        }

        .custom-table th,
        .custom-table td {
            border: 2px solid #dee2e6;
            padding: 5px;
            text-align: right !important;
            vertical-align: middle;
        }

        .bg-main {
            background-color: #cce0fc !important;
            color: black;
            font-weight: bold;
        }

        .bg-secondary {
            background-color: #085388 !important;
            color: white;
            font-weight: bold;
        }

        .bg-paragraph-question {
            background-color: #cce0fc !important;
            color: black;
        }

        .bg-indicator-description {
            background-color: #f8f9fa !important;
            font-weight: bold;
            color: #333;
        }

        .bg-evaluation {
            background-color: #D3D3D3 !important;
            font-weight: bold;
        }

        .answer-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
        }

        .answer-list li {
            margin-right: 10px;
            margin-bottom: 5px;
        }

        .styled-checkbox {
            transform: scale(1.2);
            margin-right: 5px;
        }
    </style>
@endsection

@section('js')
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{ asset('app-assets/vendors/js/forms/select/select2.full.min.js') }}"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script>
        $(document).ready(function() {
            // تهيئة Select2
            $('.select2').select2();

            // تعريف القيم المحددة مسبقا
            var selectedDepartment = "{{ $noteCard->department_id }}";
            var selectedStandard = "{{ $noteCard->standard_id }}";
            var selectedIndicator = "{{ $noteCard->indicator_id }}";
            var selectedParagraph = "{{ $noteCard->paragraph_id }}";

            // دالة لتحديث الخيارات مع تحديد القيمة المختارة
            function updateSelectOptions(selectElement, data, placeholder, textField = 'name', selectedValue =
            null) {
                selectElement.empty().append('<option value="">' + placeholder + '</option>');
                $.each(data, function(key, value) {
                    var selected = (value.id == selectedValue) ? 'selected' : '';
                    selectElement.append('<option value="' + value.id + '" ' + selected + '>' + value[
                        textField] + '</option>');
                });
                selectElement.trigger('change.select2');
            }

            // تحميل المعايير بناءً على المجال المختار
            function loadStandards(departmentID, callback) {
                if (departmentID) {
                    $.ajax({
                        url: '{{ route('getStandards', ':id') }}'.replace(':id', departmentID),
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            console.log("Standards data:", data);
                            // تحديد الحقل الصحيح لعرض الاسم
                            var textField = 'standard_name' in data[0] ? 'standard_name' : 'name';
                            updateSelectOptions($('#standard'), data, '{{ __('اختر المعيار') }}',
                                textField, selectedStandard);
                            if (callback) callback();
                        },
                        error: function(xhr, status, error) {
                            console.error("Error loading standards:", xhr.responseText);
                            alert('{{ __('حدث خطأ أثناء تحميل المعايير.') }}');
                        }
                    });
                } else {
                    // إذا لم يتم اختيار مجال، قم بتفريغ الحقول التالية
                    updateSelectOptions($('#standard'), [], '{{ __('اختر المعيار') }}');
                    updateSelectOptions($('#indicator'), [], '{{ __('اختر المؤشر') }}');
                    updateSelectOptions($('#paragraph'), [], '{{ __('اختر الفقرة') }}');
                }
            }

            // تحميل المؤشرات بناءً على المعيار المختار
            function loadIndicators(standardID, callback) {
                if (standardID) {
                    $.ajax({
                        url: '{{ route('getIndicators', ':id') }}'.replace(':id', standardID),
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            console.log("Indicators data:", data);
                            updateSelectOptions($('#indicator'), data, '{{ __('اختر المؤشر') }}',
                                'name', selectedIndicator);
                            if (callback) callback();
                        },
                        error: function(xhr, status, error) {
                            console.error("Error loading indicators:", xhr.responseText);
                            alert('{{ __('حدث خطأ أثناء تحميل المؤشرات.') }}');
                        }
                    });
                } else {
                    // إذا لم يتم اختيار معيار، قم بتفريغ الحقل التالي
                    updateSelectOptions($('#indicator'), [], '{{ __('اختر المؤشر') }}');
                    updateSelectOptions($('#paragraph'), [], '{{ __('اختر الفقرة') }}');
                }
            }

            // تحميل الفقرات بناءً على المؤشر المختار
            function loadParagraphs(indicatorID, callback) {
                if (indicatorID) {
                    $.ajax({
                        url: '{{ route('getParagraphs', ':id') }}'.replace(':id', indicatorID),
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            console.log("Paragraphs data:", data);
                            updateSelectOptions($('#paragraph'), data, '{{ __('اختر الفقرة') }}',
                                'name', selectedParagraph);
                            if (callback) callback();
                        },
                        error: function(xhr, status, error) {
                            console.error("Error loading paragraphs:", xhr.responseText);
                            alert('{{ __('حدث خطأ أثناء تحميل الفقرات.') }}');
                        }
                    });
                } else {
                    // إذا لم يتم اختيار مؤشر، قم بتفريغ الحقل التالي
                    updateSelectOptions($('#paragraph'), [], '{{ __('اختر الفقرة') }}');
                }
            }

            // تحميل المعايير عند تحميل الصفحة للتأكد من تحديد المعيار الحالي
            if (selectedDepartment) {
                $('#department').val(selectedDepartment).trigger('change');
                loadStandards(selectedDepartment, function() {
                    loadIndicators(selectedStandard, function() {
                        loadParagraphs(selectedIndicator);
                    });
                });
            }

            // عند تغيير المجال
            $('#department').on('change', function() {
                var departmentID = $(this).val();
                selectedStandard = null; // إعادة تعيين المعيار المختار
                selectedIndicator = null; // إعادة تعيين المؤشر المختار
                selectedParagraph = null; // إعادة تعيين الفقرة المختارة
                loadStandards(departmentID);
            });

            // عند تغيير المعيار
            $('#standard').on('change', function() {
                var standardID = $(this).val();
                selectedIndicator = null; // إعادة تعيين المؤشر المختار
                selectedParagraph = null; // إعادة تعيين الفقرة المختارة
                loadIndicators(standardID);
            });

            // عند تغيير المؤشر
            $('#indicator').on('change', function() {
                var indicatorID = $(this).val();
                selectedParagraph = null; // إعادة تعيين الفقرة المختارة
                loadParagraphs(indicatorID);
            });

            // إضافة مشاهد دالة جديدة بدون خاصية 'required'
            $('#answers-container').on('click', '.add-answer', function() {
                var answerInput = `
                    <div class="input-group mb-2">
                        <input type="text" name="answers[]" class="form-control" placeholder="{{ __('مشهد دال') }}">
                        <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();
            });
        });
    </script>
    <!-- END: Page JS-->
@endsection