@extends('admin.layout.master')
@section('title', __('admin.inputs'))

@section('content')
    <div class="container">

        <h2>{{ __('labels.question') }}</h2>
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.questions.store') }}" method="POST">
                    @csrf
                    <div class="row">
                    {{-- إدخال السؤال لكل لغة --}}
                    @foreach(Config::get('laravellocalization.supportedLocales') as $key => $lang)
                            <div class="col-sm-12 col-md-6">
                                <label>{{ __('labels.question') }} ({{ $lang['native'] }})</label>
                                <input type="text" name="question[{{ $key }}]" class="form-control" required>
                            </div>
                    @endforeach
                    </div>


                    <hr>
                    <h4>{{ __('labels.option') }}</h4>

                    <div id="options-container">
                        <div class="option-item border rounded p-3 mb-3">
                            <div class="row mb-2 align-items-end justify-content-between">
                            @foreach(Config::get('laravellocalization.supportedLocales') as $key => $lang)
                                <div class="col-sm-12 col-md-6">
                                    <label>{{ __('labels.option') }} ({{ $lang['native'] }})</label>
                                    <input type="text" name="options[0][option][{{ $key }}]" class="form-control" required>
                                </div>
                            @endforeach
                            <div class="col-sm-6 col-md-3 mb-2">
                                <label>{{ __('labels.value') }}</label>
                                <input type="number" name="options[0][value]" class="form-control" required>
                            </div>

                                <div class="col-sm-6 col-md-3 mb-2">
                                    <button type="button" class="btn btn-danger btn-sm remove-option">{{ __('labels.remove') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <button type="button" id="add-option" class="btn btn-secondary">{{ __('labels.add_option') }}</button>

                    <br><br>
                    <button type="submit" class="btn btn-primary">{{ __('labels.save') }}</button>
                </form>
            </div>
        </div>

    </div>
@endsection

@section('scripts')
   <script>
       let optionIndex = 1;
       const locales = @json(Config::get('laravellocalization.supportedLocales'));
       const optionLabel = @json(__('labels.option'));
       const valueLabel = @json(__('labels.value'));
       const removeLabel = @json(__('labels.remove'));


       document.getElementById('add-option').addEventListener('click', function () {
           let optionHTML = `<div class="option-item border rounded p-3 mb-3"><div class="row mb-2 align-items-end justify-content-between">`;

           // هنا نستخدم forEach مع (locale, key) حيث key هو الـ index
           Object.entries(locales).forEach((locale) => {
               console.log(locale[1], locale[0])
               optionHTML += `
        <div class="col-sm-12 col-md-6">
            <label>${optionLabel} (${locale[1]['native']})</label>
            <input type="text" name="options[${optionIndex}][option][${locale[0]}]" class="form-control" required>
        </div>`;
           });

           optionHTML += `
        <div class="col-sm-6 col-md-3 mb-2">
            <label>${valueLabel}</label>
            <input type="number" name="options[${optionIndex}][value]" class="form-control" required>
        </div>
        <div class="col-sm-6 col-md-3 mb-2">
            <button type="button" class="btn btn-danger btn-sm remove-option">${removeLabel}</button>
        </div>
    </div></div>`;

           document.getElementById('options-container').insertAdjacentHTML('beforeend', optionHTML);
           optionIndex++;
       });

       document.addEventListener('click', function (e) {
           if (e.target.classList.contains('remove-option')) {
               e.target.closest('.option-item').remove();
           }
       });

   </script>
@endsection