@extends(backpack_view('blank'))

@section('content')
<style>
.question-card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.toggle-question {
    cursor: pointer;
    font-size: 1.2rem;
    color: #333;
}
.toggle-question:hover {
    color: #007bff;
}
.toggle-question i {
    transition: transform 0.2s ease;
}
.question-card.dragging {
    opacity: 0.5;
}
.question-drag-handle {
    cursor: move;
    color: #6c757d;
    margin-right: 0.5rem;
    font-size: 1.3rem;
}
.question-drag-handle:hover {
    color: #495057;
}
.option-item {
    position: relative;
}
.option-item.dragging {
    opacity: 0.5;
}
.drag-handle {
    cursor: move;
    padding: 0.375rem 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-right: none;
    display: flex;
    align-items: center;
    color: #6c757d;
}
.drag-handle:hover {
    background-color: #e9ecef;
    color: #495057;
}
.drag-handle i {
    font-size: 1.2rem;
}
.image-preview-container {
    margin-bottom: 10px;
}
.existing-image, .new-image-preview {
    position: relative;
    display: none;
    padding: 15px;
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
}
.existing-image.show, .new-image-preview.show {
    display: inline-block;
}
.existing-image img, .new-image-preview img {
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-height: 200px;
    object-fit: contain;
}
.existing-image .btn-container,
.new-image-preview .btn-container {
    position: absolute;
    top: 8px;
    right: 8px;
}
.existing-image .btn,
.new-image-preview .btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    background-color: rgba(220, 53, 69, 0.9);
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.existing-image .btn:hover,
.new-image-preview .btn:hover {
    transform: scale(1.1);
    background-color: #dc3545;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}
.existing-image .btn i,
.new-image-preview .btn i {
    font-size: 1.2rem;
    margin: 0;
}
.existing-image .btn span,
.new-image-preview .btn span {
    display: none;
}
.form-control-file {
    margin-top: 10px;
    padding: 8px 0;
}
.form-text.text-muted i {
    margin-right: 5px;
}
</style>

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3>{{ $title }}</h3>
            </div>
            <div class="card-body">
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>{{ __('surveys.validation_errors') }}</strong>
                        <ul class="mb-0 mt-2">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                <form method="POST" action="{{ $survey ? url($crud->route.'/'.$survey->id) : url($crud->route) }}"
                      id="survey-form" enctype="multipart/form-data">
                    @csrf
                    @if($survey)
                        @method('PUT')
                    @endif

                    <div class="form-group">
                        <label>{{ __('surveys.survey_name') }}</label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ $survey->name ?? old('name') }}"
                               required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label>{{ __('surveys.reward_uuid') }}</label>
                        <input type="text" name="reward_uuid" class="form-control @error('reward_uuid') is-invalid @enderror"
                               value="{{ $survey->reward_uuid ?? old('reward_uuid') }}">
                        @error('reward_uuid')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">{{ __('surveys.reward_uuid_optional') }}</small>
                    </div>

                    <div class="form-group">
                        <label>
                            <input type="checkbox" name="is_active"
                                   value="1" {{ ($survey->is_active ?? true) ? 'checked' : '' }}>
                            {{ __('surveys.is_active') }}
                        </label>
                    </div>

                    <hr>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h4 class="mb-0">{{ __('surveys.questions') }}</h4>
                        <button type="button" class="btn btn-sm btn-secondary"
                                id="toggle-all">{{ __('surveys.collapse_all') }}</button>
                    </div>
                    <div id="questions-container"></div>

                    <button type="button" class="btn btn-success"
                            id="add-question">{{ __('surveys.add_question') }}</button>

                    <hr>
                    <button type="submit" class="btn btn-primary">{{ __('surveys.save') }}</button>
                    <a href="{{ url($crud->route) }}" class="btn btn-secondary">{{ __('surveys.cancel') }}</a>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
@php
    $surveyData = null;
    if (old('questions')) {
        $surveyData = [
            'name' => old('name'),
            'reward_uuid' => old('reward_uuid'),
            'is_active' => old('is_active'),
            'questions' => collect(old('questions'))->map(function($question, $index) {
                return [
                    'id' => $question['id'] ?? null,
                    'title' => $question['title'] ?? '',
                    'description' => $question['description'] ?? '',
                    'image_path' => $question['existing_image'] ?? null,
                    'position' => $question['position'] ?? $index,
                    'options' => collect($question['options'] ?? [])->map(function($option, $oIndex) {
                        return [
                            'text' => $option['text'] ?? '',
                            'position' => $option['position'] ?? $oIndex,
                        ];
                    })->values()->toArray(),
                ];
            })->values()->toArray(),
        ];
    } elseif ($survey) {
        $surveyData = [
            'name' => $survey->name,
            'reward_uuid' => $survey->reward_uuid,
            'is_active' => $survey->is_active,
            'questions' => $survey->questions->map(function($question) {
                return [
                    'id' => $question->id,
                    'title' => $question->title,
                    'description' => $question->description,
                    'image_path' => $question->image_path,
                    'position' => $question->position,
                    'options' => $question->options->map(function($option) {
                        return [
                            'text' => $option->text,
                            'position' => $option->position,
                        ];
                    })->values()->toArray(),
                ];
            })->values()->toArray(),
        ];
    }
@endphp
const existingSurvey = @json($surveyData);
const translations = {
    question: '{{ __('surveys.question') }}',
    deleteQuestion: '{{ __('surveys.delete_question') }}',
    questionTitle: '{{ __('surveys.question_title') }}',
    description: '{{ __('surveys.description') }}',
    image: '{{ __('surveys.image') }}',
    imageHelp: '{{ __('surveys.image_help') }}',
    answerOptions: '{{ __('surveys.answer_options') }}',
    addOption: '{{ __('surveys.add_option') }}',
    optionText: '{{ __('surveys.option_text') }}',
    delete: '{{ __('surveys.delete') }}',
    minOptionsAlert: '{{ __('surveys.min_options_alert') }}',
    collapseAll: '{{ __('surveys.collapse_all') }}',
    expandAll: '{{ __('surveys.expand_all') }}',
    removeImage: '{{ __('surveys.remove_image') }}'
};
let questionIndex = 0;
let optionIndexes = {};

document.addEventListener('DOMContentLoaded', function() {
    if (existingSurvey) {
        existingSurvey.questions.forEach((question, qIndex) => {
            addQuestion(question, qIndex);
        });
        // Обновляем questionIndex для следующих новых вопросов
        questionIndex = existingSurvey.questions.length;
    } else {
        addQuestion();
    }

    document.getElementById('add-question').addEventListener('click', function() {
        addQuestion();
    });

    const questionsContainer = document.getElementById('questions-container');

    questionsContainer.addEventListener('dragover', function(e) {
        e.preventDefault();
        const afterElement = getDragAfterElement(questionsContainer, e.clientY);
        const dragging = document.querySelector('.question-card.dragging');

        if (afterElement == null) {
            questionsContainer.appendChild(dragging);
        } else {
            questionsContainer.insertBefore(dragging, afterElement);
        }
    });

    document.getElementById('toggle-all').addEventListener('click', function() {
        const allExpanded = checkAllExpanded();

        if (allExpanded) {
            document.querySelectorAll('.question-body').forEach(body => {
                body.style.display = 'none';
            });
            document.querySelectorAll('.toggle-question i').forEach(icon => {
                icon.classList.remove('la-angle-down');
                icon.classList.add('la-angle-right');
            });
        } else {
            document.querySelectorAll('.question-body').forEach(body => {
                body.style.display = 'block';
            });
            document.querySelectorAll('.toggle-question i').forEach(icon => {
                icon.classList.remove('la-angle-right');
                icon.classList.add('la-angle-down');
            });
        }

        updateToggleButton();
    });
});

function addQuestion(questionData = null, qIndex = null) {
    const index = qIndex !== null ? qIndex : questionIndex++;
    optionIndexes[index] = 0;

    const questionHtml = `
        <div class="card mb-3 question-card" data-question-index="${index}">
            <div class="card-header">
                <div>
                    <i class="la la-grip-vertical question-drag-handle"></i>
                    <button type="button" class="btn btn-sm btn-link toggle-question p-0" style="text-decoration: none;">
                        <i class="la la-angle-down"></i>
                    </button>
                    <strong>${translations.question} ${index + 1} <span class="question-title-preview">${questionData?.title ? '(' + questionData.title + ')' : ''}</span></strong>
                </div>
                <button type="button" class="btn btn-sm btn-danger remove-question">${translations.deleteQuestion}</button>
            </div>
            <div class="card-body question-body">
                ${questionData?.id ? `<input type="hidden" name="questions[${index}][id]" value="${questionData.id}">` : ''}
                <div class="form-group">
                    <label>${translations.questionTitle}</label>
                    <input type="text" name="questions[${index}][title]" class="form-control" value="${questionData?.title || ''}" required>
                    <input type="hidden" name="questions[${index}][position]" value="${index}">
                </div>
                <div class="form-group">
                    <label>${translations.description}</label>
                    <textarea name="questions[${index}][description]" class="form-control">${questionData?.description || ''}</textarea>
                </div>
                <div class="form-group">
                    <label class="font-weight-bold">${translations.image}</label>
                    <div class="image-preview-container" data-question-index="${index}">
                        ${questionData?.image_path ? `
                            <div class="existing-image show">
                                <img src="/storage/${questionData.image_path}" alt="Завантажене зображення">
                                <div class="btn-container">
                                    <button type="button" class="btn btn-sm btn-danger remove-existing-image">
                                        <i class="la la-trash"></i>
                                        <span>${translations.removeImage}</span>
                                    </button>
                                </div>
                            </div>
                        ` : ''}
                        <div class="new-image-preview">
                            <img src="" alt="Попередній перегляд">
                            <div class="btn-container">
                                <button type="button" class="btn btn-sm btn-danger remove-new-image">
                                    <i class="la la-trash"></i>
                                    <span>${translations.removeImage}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <input type="file" name="questions[${index}][image]" class="form-control-file image-input" accept="image/*" data-question-index="${index}">
                    <input type="hidden" name="questions[${index}][existing_image]" class="existing-image-input" value="${questionData?.image_path || ''}">
                    <input type="hidden" name="questions[${index}][remove_image]" class="remove-image-flag" value="0">
                    <small class="form-text text-muted">
                        <i class="la la-info-circle"></i> ${translations.imageHelp}
                    </small>
                </div>
                <hr>
                <h6>${translations.answerOptions}</h6>
                <div class="options-container" data-question-index="${index}"></div>
                <button type="button" class="btn btn-sm btn-success add-option" data-question-index="${index}">${translations.addOption}</button>
            </div>
        </div>
    `;

    document.getElementById('questions-container').insertAdjacentHTML('beforeend', questionHtml);

    const questionCard = document.querySelector(`[data-question-index="${index}"]`);

    questionCard.querySelector('.remove-question').addEventListener('click', function() {
        questionCard.remove();
        updatePositions();
    });

    questionCard.querySelector('.toggle-question').addEventListener('click', function() {
        const body = questionCard.querySelector('.question-body');
        const icon = this.querySelector('i');

        if (body.style.display === 'none') {
            body.style.display = 'block';
            icon.classList.remove('la-angle-right');
            icon.classList.add('la-angle-down');
        } else {
            body.style.display = 'none';
            icon.classList.remove('la-angle-down');
            icon.classList.add('la-angle-right');
        }

        updateToggleButton();
    });

    questionCard.querySelector('.add-option').addEventListener('click', function() {
        addOption(index);
    });

    questionCard.querySelector('input[name*="[title]"]').addEventListener('input', function() {
        const preview = questionCard.querySelector('.question-title-preview');
        preview.textContent = this.value ? '(' + this.value + ')' : '';
    });

    const questionDragHandle = questionCard.querySelector('.question-drag-handle');

    questionDragHandle.addEventListener('mousedown', function(e) {
        questionCard.setAttribute('draggable', 'true');
    });

    questionCard.addEventListener('dragstart', function(e) {
        this.classList.add('dragging');
    });

    questionCard.addEventListener('dragend', function(e) {
        this.classList.remove('dragging');
        this.setAttribute('draggable', 'false');
        updatePositions();
    });

    const imageInput = questionCard.querySelector('.image-input');
    const previewContainer = questionCard.querySelector('.image-preview-container');
    const newImagePreview = previewContainer.querySelector('.new-image-preview');
    const existingImageDiv = previewContainer.querySelector('.existing-image');
    const removeImageFlag = questionCard.querySelector('.remove-image-flag');

    imageInput.addEventListener('change', function(e) {
        const file = e.target.files[0];

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                newImagePreview.querySelector('img').src = e.target.result;
                newImagePreview.classList.add('show');
                if (existingImageDiv) {
                    existingImageDiv.classList.remove('show');
                }
            };
            reader.readAsDataURL(file);
        }
    });

    const removeNewImageBtn = newImagePreview.querySelector('.remove-new-image');
    removeNewImageBtn.addEventListener('click', function() {
        imageInput.value = '';
        newImagePreview.classList.remove('show');
        if (existingImageDiv) {
            existingImageDiv.classList.add('show');
        }
    });

    if (existingImageDiv) {
        const removeExistingImageBtn = existingImageDiv.querySelector('.remove-existing-image');
        removeExistingImageBtn.addEventListener('click', function() {
            existingImageDiv.classList.remove('show');
            removeImageFlag.value = '1';
            questionCard.querySelector('.existing-image-input').value = '';
        });
    }

    if (questionData?.options) {
        questionData.options.forEach((option, oIndex) => {
            addOption(index, option, oIndex);
        });
        optionIndexes[index] = questionData.options.length;
    } else {
        addOption(index);
    }
}

function addOption(questionIndex, optionData = null, oIndex = null) {
    const optionIndex = oIndex !== null ? oIndex : optionIndexes[questionIndex]++;

    const optionHtml = `
        <div class="input-group mb-2 option-item">
            <div class="drag-handle">
                <i class="la la-grip-vertical"></i>
            </div>
            <input type="text" name="questions[${questionIndex}][options][${optionIndex}][text]" class="form-control" placeholder="${translations.optionText}" value="${optionData?.text || ''}" required>
            <input type="hidden" name="questions[${questionIndex}][options][${optionIndex}][position]" value="${optionIndex}">
            <div class="input-group-append">
                <button type="button" class="btn btn-danger remove-option">${translations.delete}</button>
            </div>
        </div>
    `;

    const container = document.querySelector(`.options-container[data-question-index="${questionIndex}"]`);
    container.insertAdjacentHTML('beforeend', optionHtml);

    const optionItem = container.lastElementChild;

    optionItem.querySelector('.remove-option').addEventListener('click', function() {
        if (container.querySelectorAll('.option-item').length > 1) {
            this.closest('.option-item').remove();
            updateOptionPositions(questionIndex);
        } else {
            alert(translations.minOptionsAlert);
        }
    });

    const dragHandle = optionItem.querySelector('.drag-handle');

    dragHandle.addEventListener('mousedown', function(e) {
        optionItem.setAttribute('draggable', 'true');
    });

    optionItem.addEventListener('dragstart', function(e) {
        this.classList.add('dragging');
    });

    optionItem.addEventListener('dragend', function(e) {
        this.classList.remove('dragging');
        this.setAttribute('draggable', 'false');
        updateOptionPositions(questionIndex);
    });

    if (!container.hasAttribute('data-dragover-attached')) {
        container.setAttribute('data-dragover-attached', 'true');
        container.addEventListener('dragover', function(e) {
            e.preventDefault();
            const afterElement = getDragAfterElementOption(container, e.clientY);
            const dragging = container.querySelector('.option-item.dragging');

            if (afterElement == null) {
                container.appendChild(dragging);
            } else {
                container.insertBefore(dragging, afterElement);
            }
        });
    }
}

function updatePositions() {
    document.querySelectorAll('.question-card').forEach((card, index) => {
        card.querySelector('input[name*="[position]"]').value = index;
        const titlePreview = card.querySelector('.question-title-preview');
        const titleText = titlePreview.textContent;
        const headerStrong = card.querySelector('.card-header strong');
        headerStrong.innerHTML = `${translations.question} ${index + 1} <span class="question-title-preview">${titleText}</span>`;
    });
    updateToggleButton();
}

function updateOptionPositions(questionIndex) {
    const container = document.querySelector(`.options-container[data-question-index="${questionIndex}"]`);
    container.querySelectorAll('.option-item').forEach((item, index) => {
        item.querySelector('input[name*="[position]"]').value = index;
    });
}

function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.question-card:not(.dragging)')];

    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;

        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child };
        } else {
            return closest;
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element;
}

function getDragAfterElementOption(container, y) {
    const draggableElements = [...container.querySelectorAll('.option-item:not(.dragging)')];

    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;

        if (offset < 0 && offset > closest.offset) {
            return { offset: offset, element: child };
        } else {
            return closest;
        }
    }, { offset: Number.NEGATIVE_INFINITY }).element;
}

function checkAllExpanded() {
    const bodies = document.querySelectorAll('.question-body');
    if (bodies.length === 0) return true;

    let expandedCount = 0;
    bodies.forEach(body => {
        if (body.style.display !== 'none') {
            expandedCount++;
        }
    });

    return expandedCount === bodies.length;
}

function updateToggleButton() {
    const button = document.getElementById('toggle-all');
    const allExpanded = checkAllExpanded();

    button.textContent = allExpanded ? translations.collapseAll : translations.expandAll;
}
</script>
@endsection