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

@section('scripts')

    <script>
            function toggleOptions(selectElement) {
                const value = selectElement.value;
                const optionsContainer = document.getElementById('options-container');
                if (['radio', 'checkbox', 'select'].includes(value)) {
                    optionsContainer.style.display = 'block';
                } else {
                    optionsContainer.style.display = 'none';
                }
            }

            document.querySelector('select[name="type"]').addEventListener('change', function () {
                toggleOptions(this);
            });

            // Add option button
            document.getElementById('add-option').addEventListener('click', function () {
                const optionList = document.getElementById('option-list');
                const inputGroup = document.createElement('div');
                inputGroup.classList.add('input-group', 'mb-2');
                inputGroup.innerHTML = `
            <input type="text" name="options[]" class="form-control" placeholder="{{ __('admin.option') }}">
            <button class="btn btn-danger remove-option" type="button">&times;</button>
        `;
                optionList.appendChild(inputGroup);
            });

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

            // Trigger on load
            document.addEventListener('DOMContentLoaded', function () {
                const typeSelect = document.querySelector('select[name="type"]');
                toggleOptions(typeSelect);
            });
        </script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(document).ready(function () {
            // حذف الخيار
            $('.modal').on('click', '.delete-option', function () {
                const optionId = $(this).data('id');
                const li = $(this).closest('div.list-group-item').data('id', optionId);

                $.ajax({
                    url: `{{ route('admin.options.destroy','') }}/${optionId}`,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function () {
                        li.remove();
                    },
                    error: function () {
                        alert('حدث خطأ في حذف الخيار');
                    }
                });
            });

            // إضافة خيار
            $('.modal').on('click', '.add-option', function () {
                const inputId = $(this).data('input-id');
                $('#optionsModal' + inputId).modal('hide');
                Swal.fire({
                    title: 'إضافة خيار',
                    input: 'text',
                    inputLabel: 'اكتب الخيار الجديد:',
                    inputPlaceholder: 'مثلاً: اللون الأحمر',
                    showCancelButton: true,
                    confirmButtonText: 'إضافة',
                    cancelButtonText: 'إلغاء',
                    confirmButtonColor: '#28c76f', // لون زر الإضافة يتماشى مع Vuexy
                    cancelButtonColor: '#ea5455',
                    inputValidator: (value) => {
                        if (!value) {
                            return 'الرجاء كتابة الخيار';
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const newOption = result.value;

                        $.ajax({
                            url: `{{ route('admin.options.store') }}`,
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                input_id: inputId,
                                option: newOption
                            },
                            success: function (response) {
                                const list = $('#option-list-' + inputId);
                                list.append(`
            <div class="list-group-item d-flex justify-content-between align-items-center" data-id="${response.id}">
                <div>
                    <span class="badge bg-secondary me-2">${list.children().length + 1}</span>
                    ${response.option}
                </div>
                <button class="btn btn-sm btn-outline-danger delete-option" data-id="${response.id}">
                    <i class="bi bi-trash"></i> {{ __('admin.delete') }}
                                </button>
                            </div>
`);
                                $('#optionsModal' + inputId).modal('show');
                            },
                            error: function () {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'خطأ',
                                    text: 'حدث خطأ أثناء الإضافة',
                                    position: 'center', // تم وضع الرسالة في منتصف الشاشة
                                    showConfirmButton: true,
                                    confirmButtonText: 'موافق',
                                    customClass: {
                                        popup: 'bg-danger text-white'
                                    }
                                });
                                $('#optionsModal' + inputId).modal('show');

                            }
                        });
                    }
                });
                $('#optionsModal' + inputId).modal('show');
            });
        });
    </script>



@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">{{ __('admin.inputs_for_section', ['section' => $section->title]) }}</h5>
                        <button data-bs-toggle="modal" data-bs-target="#addInputModal" class="btn btn-primary">
                            {{ __('admin.add_input') }}
                        </button>
                    </div>

                    {{-- Add Input Modal --}}
                    <div class="modal fade" id="addInputModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <form action="{{ route('admin.inputs.store') }}" method="POST">
                                    @csrf
                                    <div class="modal-header">
                                        <h5 class="modal-title">{{ __('admin.add_input') }}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body row">
                                        {{-- Title --}}
                                        @foreach (Config::get('laravellocalization.supportedLocales') as $key => $lang)
                                            <div class="mb-3 col-md-6">
                                                <label class="form-label">{{ __('admin.title') . ' (' . $lang['native'] . ')' }}</label>
                                                <input type="text" name="title[{{ $key }}]" class="form-control" placeholder="{{ __('admin.title') }}">
                                                @error("title.$key")
                                                <div class="alert alert-danger mt-1">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        @endforeach

                                        {{-- Type --}}
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label">{{ __('admin.type') }}</label>
                                            <select name="type" class="form-select">
                                                <option value="text">Text</option>
                                                <option value="number">Number</option>
                                                <option value="date">Date</option>
                                                <option value="email">Email</option>
                                                <option value="textarea">Textarea</option>
                                                <option value="select">Select</option>
                                                <option value="checkbox">Checkbox</option>
                                                <option value="radio">Radio</option>
                                            </select>
                                            @error("type")
                                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        {{-- Required --}}
                                        <div class="mb-3 col-md-6">
                                            <label class="form-label">{{ __('admin.required') }}</label>
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" type="checkbox" name="required" value="1" {{ old('required', false) ? 'checked' : '' }}>
                                            </div>
                                            @error("required")
                                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3 col-md-12" id="options-container" style="display: none;">
                                            <label class="form-label">{{ __('admin.options') }}</label>
                                            <div id="option-list">
                                                <div class="input-group mb-2">
                                                    <input type="text" name="options[]" class="form-control" placeholder="{{ __('admin.option') }}">
                                                    <button class="btn btn-danger remove-option" type="button">&times;</button>
                                                </div>
                                            </div>
                                            <button type="button" class="btn btn-sm btn-secondary" id="add-option">{{ __('admin.add_option') }}</button>
                                        </div>

                                        {{-- Section --}}
                                        <input type="hidden" name="section_id" value="{{ $section->id }}">
                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" class="btn btn-primary">{{ __('admin.save') }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {{-- Inputs Table --}}
                    <div class="card-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>{{ __('admin.title') }}</th>
                                <th>{{ __('admin.type') }}</th>
                                <th>{{ __('admin.required') }}</th>
                                <th>{{ __('admin.options') }}></th>
                                <th>{{ __('admin.action') }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($inputs as $input)
                                <tr>
                                    <td>{{ $input->getTranslation('title', app()->getLocale()) }}</td>
                                    <td>{{ $input->type }}</td>
                                    <td>{{ $input->required ? __('admin.yes') : __('admin.no') }}</td>
                                    <td>
                                        @if($input->type == 'select' || $input->type == 'checkbox' || $input->type == 'radio')
                                            <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#optionsModal{{ $input->id }}">
                                                {{ __('admin.show_options') }}
                                            </button>
                                         @endif
                                    </td>
                                    <td>
                                        <button data-bs-toggle="modal" data-bs-target="#editInput{{ $input->id }}" class="btn btn-sm btn-primary">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <form action="{{ route('admin.inputs.destroy', $input->id) }}" method="POST" style="display:inline-block">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-danger delete-confirm"><i class="fa fa-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>

                                {{-- Edit Modal --}}
                                <div class="modal fade" id="editInput{{ $input->id }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <form action="{{ route('admin.inputs.update', $input->id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                <div class="modal-header">
                                                    <h5 class="modal-title">{{ __('admin.edit_input') }}</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body row">
                                                    @foreach (Config::get('laravellocalization.supportedLocales') as $key => $lang)
                                                        <div class="mb-3 col-md-6">
                                                            <label class="form-label">{{ __('admin.title') . ' (' . $lang['native'] . ')' }}</label>
                                                            <input type="text" name="title[{{ $key }}]" class="form-control"
                                                                   value="{{ $input->getTranslation('title', $key) }}">
                                                        </div>
                                                    @endforeach

                                                    <div class="mb-3 col-md-6">
                                                        <label class="form-label">{{ __('admin.type') }}</label>
                                                        <select name="type" class="form-select">
                                                            @foreach(['text','number','date','email','textarea','select','checkbox','radio'] as $type)
                                                                <option value="{{ $type }}" @if($input->type == $type) selected @endif>{{ ucfirst($type) }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div class="mb-3 col-md-6">
                                                        <label class="form-label">{{ __('admin.required') }}</label>
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input" type="checkbox" name="required" value="1" {{ $input->required ? 'checked' : '' }}>
                                                        </div>
                                                    </div>
                                                   <input type="hidden" name="section_id" value="{{ $section->id }}">
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="submit" class="btn btn-primary">{{ __('admin.save') }}</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                @if($input->type == 'select' || $input->type == 'checkbox' || $input->type == 'radio')
                                    {{-- Options Modal --}}
                                    <div class="modal fade" id="optionsModal{{ $input->id }}" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content shadow-sm rounded-3">
                                                <div class="modal-header bg-light">
                                                    <h5 class="modal-title">{{ __('admin.options') }}</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>

                                                <div class="modal-body">
                                                    <div class="list-group" id="option-list-{{ $input->id }}">
                                                        @foreach($input->options as $index => $option)
                                                            <div class="list-group-item d-flex justify-content-between align-items-center" data-id="{{ $option->id }}">
                                                                <div>
                                                                    <span class="badge bg-secondary me-2">{{ $index + 1 }}</span>
                                                                    {{ $option->option }}
                                                                </div>
                                                                <button class="btn btn-sm btn-outline-danger delete-option" data-id="{{ $option->id }}">
                                                                    <i class="bi bi-trash"></i> {{ __('admin.delete') }}
                                                                </button>
                                                            </div>
                                                        @endforeach
                                                    </div>

                                                    <div class="text-center mt-4">
                                                        <button class="btn btn-sm btn-success add-option" data-input-id="{{ $input->id }}">
                                                            <i class="bi bi-plus-lg"></i> {{ __('admin.add_option') }}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                            @endforeach
                            </tbody>
                        </table>

                        <div class="card-footer">
                            {{ $inputs->links() }}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection