2024-07-15 06:24:05 +00:00
<! 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 >
2024-07-24 05:41:55 +00:00
< link href = " https:
2024-07-15 06:24:05 +00:00
< link rel = " stylesheet " href = " { { asset('css/app.css') }} " >
2024-07-24 05:41:55 +00:00
< 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 - 3 xl font - bold font - sans " > < a href = " {{ url ( '/' ) }} "
style = " color: rgb(103,58,183) "
class = " text - 3 xl 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 = `
2024-07-16 19:58:18 +00:00
< div class = " option d-flex align-items-center mb-2 " >
2024-07-15 06:24:05 +00:00
< input type = " text " name = " questions[ ${ questionIndex}][options][${optionIndex } ] " class = " form-control option-input " placeholder = " Option " >
2024-07-16 19:58:18 +00:00
< span class = " delete-option ml-2 text-danger " onclick = " deleteOption(this) " style = " cursor: pointer; " >& #10005;</span>
2024-07-15 06:24:05 +00:00
</ div >
` ;
2024-07-24 05:41:55 +00:00
optionsContainer . append ( optionHtml );
updateAddButtonPosition ();
}
2024-07-15 06:24:05 +00:00
2024-07-24 05:41:55 +00:00
function deleteOption ( button ) {
$ ( button ) . closest ( '.option' ) . remove ();
updateAddButtonPosition ();
}
2024-07-15 06:24:05 +00:00
2024-07-24 05:41:55 +00:00
function addNewQuestion () {
const questionsSection = $ ( '#questions-section' );
const questionIndex = questionsSection . find ( '.question' ) . length ;
2024-07-15 06:24:05 +00:00
2024-07-24 05:41:55 +00:00
const questionHtml = `
2024-07-16 19:58:18 +00:00
< div class = " question mb-4 p-3 border rounded bg-light " data - index = " ${ questionIndex } " >
2024-07-15 06:24:05 +00:00
< div class = " form-group " >
2024-07-18 21:12:07 +00:00
< select class = " form-control question-type " id = " question-type- ${ questionIndex } " name = " questions[ ${ questionIndex } ][type] " onchange = " handleQuestionTypeChange(this) " >
2024-07-15 06:24:05 +00:00
< option value = " multiple_choice " > Multiple Choice </ option >
< option value = " checkbox " > Checkbox </ option >
< option value = " dropdown " > Dropdown </ option >
2024-07-18 21:12:07 +00:00
< option value = " text " > Text </ option >
2024-07-15 06:24:05 +00:00
</ select >
</ div >
< div class = " form-group " >
2024-07-16 19:58:18 +00:00
< input type = " text " id = " question-text- ${ questionIndex } " name = " questions[ ${ questionIndex } ][text] " class = " form-control question-input " placeholder = " Type your question here " required >
2024-07-15 06:24:05 +00:00
</ div >
2024-07-18 21:12:07 +00:00
< 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 >
2024-07-15 06:24:05 +00:00
< div class = " form-group options-container " >
< label > Options </ label >
< button type = " button " class = " btn btn-secondary " onclick = " addOption(this) " > Add Option </ button >
2024-07-18 21:12:07 +00:00
< button class = " btn btn-md " id = " moveUpButton " onclick = " deleteQuestion(this); " >
< img src = " { { asset('images/bin.png') }} " alt = " " width = " 20px " height = " 20px " />
</ button >
2024-07-15 06:24:05 +00:00
</ div >
</ div >
` ;
2024-07-24 05:41:55 +00:00
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 " );
}
}
2024-07-18 21:12:07 +00:00
2024-07-24 05:41:55 +00:00
$ ( document ) . ready ( function () {
$ ( '#profileMenuButton' ) . click ( function () {
$ ( '#profileMenu' ) . toggleClass ( 'hidden' );
});
2024-07-18 21:12:07 +00:00
2024-07-24 05:41:55 +00:00
$ ( document ) . click ( function ( event ) {
if ( ! $ ( event . target ) . closest ( '#profileMenuButton, #profileMenu' ) . length ) {
$ ( '#profileMenu' ) . addClass ( 'hidden' );
}
});
2024-07-18 21:12:07 +00:00
2024-07-24 05:41:55 +00:00
$ ( '.question-type' ) . each (( index , element ) => {
handleQuestionTypeChange ( element );
});
2024-07-18 21:12:07 +00:00
2024-07-24 05:41:55 +00:00
updateAddButtonPosition ();
});
</ script >
</ body >
2024-07-18 21:12:07 +00:00
2024-07-24 05:41:55 +00:00
</ html >
