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 06:33:52 +00:00
< link href = " https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css " rel = " stylesheet " >
2024-07-15 06:24:05 +00:00
< link rel = " stylesheet " href = " { { asset('css/app.css') }} " >
2024-07-24 06:33:52 +00:00
< link rel = " preconnect " href = " https://fonts.googleapis.com " >
< link href = " https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css " rel = " stylesheet " >
< link rel = " preconnect " href = " https://fonts.gstatic.com " crossorigin >
< link href = " https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap "
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 style = " border:none; border-bottom:2px solid rgb(103,58,183); border-radius:0 " 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 style = " border:none; border-bottom:2px solid rgb(103,58,183); border-radius:0 " 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://code.jquery.com/jquery-3.5.1.min.js " ></ script >
< script src = " https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js " ></ script >
< script >
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 06:33:52 +00:00
optionsContainer . append ( optionHtml );
updateAddButtonPosition ();
}
2024-07-15 06:24:05 +00:00
2024-07-24 06:33:52 +00:00
function deleteOption ( button ) {
$ ( button ) . closest ( '.option' ) . remove ();
updateAddButtonPosition ();
}
2024-07-15 06:24:05 +00:00
2024-07-24 06:33:52 +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 06:33:52 +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 06:33:52 +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 " );
}
}
$ ( 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 >
2024-07-24 05:41:55 +00:00
2024-07-24 06:33:52 +00:00
</ html >
2024-07-24 05:41:55 +00:00
2024-07-18 21:12:07 +00:00
