376 lines
17 KiB
PHP
376 lines
17 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>Edit Form - {{ $form->title }}</title>
|
|
<link href="https:
|
|
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
|
<link rel="preconnect" href="https:
|
|
<link href="https: <link rel="preconnect" href="https:
|
|
<script src="https:
|
|
<link rel=" stylesheet" href="https:
|
|
<link href=" https: rel="stylesheet">
|
|
< style >
|
|
.shadow - custom {
|
|
box - shadow: 0 10 px 15 px - 3 px rgba(0, 0, 0, 0.1), 0 4 px 6 px - 2 px rgba(0, 0, 0, 0.05);
|
|
} <
|
|
/style> < /
|
|
head >
|
|
|
|
<
|
|
body class = "bg-purple-100" >
|
|
<
|
|
nav class = "bg-white p-1 shadow-md" >
|
|
<
|
|
div class = "container mx-auto flex justify-between items-center" >
|
|
<
|
|
span style = "color: rgb(103,58,183)"
|
|
class = "text-3xl font-bold font-sans" > < a href = "{{ url('/') }}"
|
|
style = "color: rgb(103,58,183)"
|
|
class = "text-3xl font-bold font-sans" > LaraForms < /a> - Edit</span >
|
|
<
|
|
div class = "relative dropdown" >
|
|
<
|
|
button id = "profileMenuButton"
|
|
class = "flex items-center focus:outline-none" >
|
|
<
|
|
img src = "{{ asset('images/user.png') }}"
|
|
alt = "Profile"
|
|
class = "w-10 h-10 rounded-full border-2 border-white" >
|
|
<
|
|
/button> <
|
|
div id = "profileMenu"
|
|
class = "dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2" >
|
|
<
|
|
form method = "POST"
|
|
action = "{{ route('logout') }}" >
|
|
@csrf <
|
|
button type = "submit"
|
|
class = "block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left" > Logout < /button> < /
|
|
form > <
|
|
/div> < /
|
|
div > <
|
|
/div> < /
|
|
nav >
|
|
|
|
<
|
|
div style = "max-width: 700px"
|
|
class = "container" >
|
|
<
|
|
form id = "edit-form"
|
|
method = "POST"
|
|
action = "{{ route('forms.update', $form) }}"
|
|
class = "bg-white p-4 rounded shadow-sm" >
|
|
@csrf
|
|
@method('PUT')
|
|
<
|
|
div class = "form-group" >
|
|
<
|
|
input type = "text"
|
|
id = "form-title"
|
|
name = "title"
|
|
class = "form-control form-control-lg text-black"
|
|
placeholder = "Untitled Form"
|
|
value = "{{ $form->title }}" / >
|
|
<
|
|
/div> <
|
|
div class = "form-group" >
|
|
<
|
|
input type = "text"
|
|
name = "description"
|
|
id = "form-description"
|
|
class = "form-control form-control-sm text-black"
|
|
placeholder = "Form Description"
|
|
value = "{{ $form->description }}" / >
|
|
<
|
|
/div> <
|
|
div id = "questions-section" >
|
|
@foreach ($questions as $index => $question)
|
|
<
|
|
div class = "question mb-4 p-3 border rounded bg-light"
|
|
data - index = "{{ $index }}" >
|
|
<
|
|
div class = "form-group" >
|
|
<
|
|
select class = "form-control question-type"
|
|
id = "question-type-{{ $index }}"
|
|
name = "questions[{{ $index }}][type]" >
|
|
<
|
|
option value = "multiple_choice"
|
|
{{ $question->type === 'multiple_choice' ? 'selected' : '' }} > Multiple Choice < /option> <
|
|
option value = "checkbox"
|
|
{{ $question->type === 'checkbox' ? 'selected' : '' }} > Checkbox < /option> <
|
|
option value = "dropdown"
|
|
{{ $question->type === 'dropdown' ? 'selected' : '' }} > Dropdown < /option> <
|
|
option value = "text"
|
|
{{ $question->type === 'text' ? 'selected' : '' }} > Text < /option> < /
|
|
select > <
|
|
/div> <
|
|
div class = "form-group" >
|
|
<
|
|
input type = "text"
|
|
id = "question-text-{{ $index }}"
|
|
name = "questions[{{ $index }}][text]"
|
|
class = "form-control question-input"
|
|
value = "{{ $question->question_text }}"
|
|
required >
|
|
<
|
|
/div> <
|
|
div class = "form-group form-check" >
|
|
<
|
|
input type = "checkbox"
|
|
id = "question-required-{{ $index }}"
|
|
name = "questions[{{ $index }}][required]"
|
|
class = "form-check-input"
|
|
{{ $question->required ? 'checked' : '' }} >
|
|
<
|
|
label
|
|
for = "question-required-{{ $index }}"
|
|
class = "form-check-label" > Required < /label> < /
|
|
div > <
|
|
div class = "form-group options-container"
|
|
style = "{{ $question->type === 'text' ? 'display:none;' : '' }}" >
|
|
<
|
|
label > Options < /label>
|
|
@if (is_array($question->options))
|
|
@foreach ($question->options as $optionIndex => $option)
|
|
<
|
|
div class = "option d-flex align-items-center mb-2" >
|
|
<
|
|
input type = "text"
|
|
name = "questions[{{ $index }}][options][{{ $optionIndex }}]"
|
|
class = "form-control option-input"
|
|
value = "{{ $option }}" >
|
|
<
|
|
span class = "delete-option ml-2 text-danger"
|
|
onclick = "deleteOption(this)"
|
|
style = "cursor: pointer;" > & #10005;</span>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
<button type= "button"
|
|
class = "btn btn-secondary"
|
|
onclick = "addOption(this)" > Add Option < /button> <
|
|
button class = "btn btn-md"
|
|
id = "moveUpButton"
|
|
onclick = "deleteQuestion(this);" >
|
|
<
|
|
img src = "{{ asset('images/bin.png') }}"
|
|
alt = ""
|
|
width = "20px"
|
|
height = "20px" / >
|
|
<
|
|
/button> < /
|
|
div > <
|
|
/div>
|
|
@endforeach <
|
|
div class = "sidebar" >
|
|
<
|
|
div id = "moveableDiv" >
|
|
<
|
|
button class = "btn btn-light shadow-sm"
|
|
type = "button"
|
|
onclick = "addNewQuestion();" >
|
|
<
|
|
img src = "{{ asset('images/add.png') }}"
|
|
alt = "ADD"
|
|
width = "20px"
|
|
height = "20px" / >
|
|
<
|
|
/button> < /
|
|
div > <
|
|
/div> < /
|
|
div > <
|
|
button type = "submit"
|
|
class = "btn btn-success mb-4" > Save < /button> < /
|
|
form > <
|
|
/div>
|
|
|
|
<
|
|
script src = "https: <
|
|
script src = "https: <
|
|
script >
|
|
|
|
|
|
$(document).ready(function() {
|
|
$('#edit-form').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
|
|
var form = $(this);
|
|
var url = form.attr('action');
|
|
var formData = form.serialize();
|
|
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: url,
|
|
data: formData,
|
|
success: function(response) {
|
|
|
|
Swal.fire({
|
|
title: 'Success!',
|
|
text: 'Form edited successfully.',
|
|
icon: 'success',
|
|
confirmButtonText: 'OK'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
|
|
window.location.href =
|
|
"{{ route('forms.show', $form) }}";
|
|
}
|
|
});
|
|
},
|
|
error: function(xhr, status, error) {
|
|
|
|
Swal.fire({
|
|
title: 'Error!',
|
|
text: 'An error occurred while editing the form. Please try again.',
|
|
icon: 'error',
|
|
confirmButtonText: 'OK'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
function addOption(button) {
|
|
const optionsContainer = $(button).closest('.options-container');
|
|
const optionIndex = optionsContainer.find('.option').length;
|
|
const questionIndex = optionsContainer.closest('.question').data('index');
|
|
|
|
const optionHtml = `
|
|
<div class="option d-flex align-items-center mb-2">
|
|
<input type="text" name="questions[${questionIndex}][options][${optionIndex}]" class="form-control option-input" placeholder="Option">
|
|
<span class="delete-option ml-2 text-danger" onclick="deleteOption(this)" style="cursor: pointer;">✕</span>
|
|
</div>
|
|
`;
|
|
|
|
optionsContainer.append(optionHtml);
|
|
updateAddButtonPosition();
|
|
}
|
|
|
|
function deleteOption(button) {
|
|
$(button).closest('.option').remove();
|
|
updateAddButtonPosition();
|
|
}
|
|
|
|
function addNewQuestion() {
|
|
const questionsSection = $('#questions-section');
|
|
const questionIndex = questionsSection.find('.question').length;
|
|
|
|
const questionHtml = `
|
|
<div class="question mb-4 p-3 border rounded bg-light" data-index="${questionIndex}">
|
|
<div class="form-group">
|
|
<select class="form-control question-type" id="question-type-${questionIndex}" name="questions[${questionIndex}][type]" onchange="handleQuestionTypeChange(this)">
|
|
<option value="multiple_choice">Multiple Choice</option>
|
|
<option value="checkbox">Checkbox</option>
|
|
<option value="dropdown">Dropdown</option>
|
|
<option value="text">Text</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" id="question-text-${questionIndex}" name="questions[${questionIndex}][text]" class="form-control question-input" placeholder="Type your question here" required>
|
|
</div>
|
|
<div class="form-group form-check">
|
|
<input type="checkbox" id="question-required-{{ $index }}"
|
|
name="questions[{{ $index }}][required]" class="form-check-input"
|
|
{{ $question->required ? 'checked' : '' }}>
|
|
<label for="question-required-{{ $index }}" class="form-check-label">Required</label>
|
|
</div>
|
|
<div class="form-group options-container">
|
|
<label>Options</label>
|
|
<button type="button" class="btn btn-secondary" onclick="addOption(this)">Add Option</button>
|
|
<button class="btn btn-md" id="moveUpButton" onclick="deleteQuestion(this);">
|
|
<img src="{{ asset('images/bin.png') }}" alt="" width="20px" height="20px" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
questionsSection.append(questionHtml);
|
|
updateAddButtonPosition();
|
|
}
|
|
|
|
function deleteQuestion(button) {
|
|
$(button).closest('.question').remove();
|
|
updateQuestionIndices();
|
|
updateAddButtonPosition();
|
|
}
|
|
|
|
function updateQuestionIndices() {
|
|
$('#questions-section .question').each((index, element) => {
|
|
$(element).attr('data-index', index);
|
|
$(element).find('.question-type').attr('name', `questions[${index}][type]`);
|
|
$(element).find('.question-input').attr('name', `questions[${index}][text]`);
|
|
$(element).find('.question-input').attr('id', `question-text-${index}`);
|
|
$(element).find('.form-check-input').attr('name', `questions[${index}][required]`);
|
|
$(element).find('.form-check-input').attr('id', `question-required-${index}`);
|
|
$(element).find('.options-container').find('.option-input').each((optionIndex,
|
|
optionElement) => {
|
|
$(optionElement).attr('name',
|
|
`questions[${index}][options][${optionIndex}]`);
|
|
});
|
|
});
|
|
}
|
|
|
|
function handleQuestionTypeChange(selectElement) {
|
|
const selectedType = $(selectElement).val();
|
|
const optionsContainer = $(selectElement).closest('.question').find('.options-container');
|
|
|
|
if (selectedType === 'text') {
|
|
optionsContainer.hide();
|
|
} else {
|
|
optionsContainer.show();
|
|
}
|
|
}
|
|
|
|
function updateAddButtonPosition() {
|
|
const questions = document.querySelectorAll("#questions-section .question");
|
|
const sidebar = document.getElementById("moveableDiv");
|
|
|
|
if (questions.length > 0) {
|
|
const lastQuestion = questions[questions.length - 1];
|
|
const offsetTop = lastQuestion.offsetTop;
|
|
const sidebarHeight = sidebar.offsetHeight;
|
|
const containerHeight = document.getElementById("questions-section").offsetHeight;
|
|
|
|
const newPosition = offsetTop + lastQuestion.offsetHeight;
|
|
if (newPosition + sidebarHeight <= containerHeight) {
|
|
sidebar.style.transform = `translateY(${newPosition + 75}px)`;
|
|
console.log(`Moving sidebar to: ${newPosition + 75}px`);
|
|
} else {
|
|
sidebar.style.transform = `translateY(${containerHeight - sidebarHeight + 75}px)`;
|
|
console.log(`Moving sidebar to bottom of container`);
|
|
}
|
|
} else {
|
|
sidebar.style.transform = `translateY(0px)`;
|
|
console.log("No questions, moving sidebar to top");
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$('#profileMenuButton').click(function() {
|
|
$('#profileMenu').toggleClass('hidden');
|
|
});
|
|
|
|
$(document).click(function(event) {
|
|
if (!$(event.target).closest('#profileMenuButton, #profileMenu').length) {
|
|
$('#profileMenu').addClass('hidden');
|
|
}
|
|
});
|
|
|
|
$('.question-type').each((index, element) => {
|
|
handleQuestionTypeChange(element);
|
|
});
|
|
|
|
updateAddButtonPosition();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|