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 >
< link href = " https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css " rel = " stylesheet " >
< link rel = " stylesheet " href = " { { asset('css/app.css') }} " >
< link rel = " preconnect " href = " https://fonts.googleapis.com " >
2024-07-16 19:58:18 +00:00
< link href = " https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css " rel = " stylesheet " >
2024-07-15 06:24:05 +00:00
< link rel = " preconnect " href = " https://fonts.gstatic.com " crossorigin >
2024-07-18 11:43:20 +00:00
< link href = " https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap "
rel = " stylesheet " >
2024-07-15 06:24:05 +00:00
< 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 >
2024-07-16 19:58:18 +00:00
< body class = " bg-light " >
2024-07-17 06:39:33 +00:00
< nav class = " bg-white p-1 shadow-md " >
< div class = " container mx-auto flex justify-between items-center " >
2024-07-18 11:43:20 +00:00
< 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 >
2024-07-17 06:39:33 +00:00
< 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
2024-07-18 11:43:20 +00:00
< button type = " submit "
class = " block px-4 py-2 text-gray-700 hover:bg-gray-200 w-full text-left " > Logout </ button >
2024-07-17 06:39:33 +00:00
</ form >
</ div >
</ div >
2024-07-16 19:58:18 +00:00
</ div >
2024-07-17 06:39:33 +00:00
</ nav >
2024-07-16 19:58:18 +00:00
< div style = " max-width: 700px " class = " container " >
2024-07-18 11:43:20 +00:00
< form id = " edit-form " method = " POST " action = " { { route('forms.update', $form ) }} "
class = " bg-white p-4 rounded shadow-sm " >
2024-07-15 06:24:05 +00:00
@ csrf
@ method ( 'PUT' )
< div class = " form-group " >
2024-07-18 11:43:20 +00:00
< input type = " text " id = " form-title " name = " title " class = " form-control form-control-lg text-black "
placeholder = " Untitled Form " value = " { { $form->title }} " />
2024-07-15 06:24:05 +00:00
</ div >
< div class = " form-group " >
2024-07-18 11:43:20 +00:00
< input type = " text " name = " description " id = " form-description "
class = " form-control form-control-sm text-black " placeholder = " Form Description "
value = " { { $form->description }} " />
2024-07-15 06:24:05 +00:00
</ div >
< div id = " questions-section " >
@ foreach ( $questions as $index => $question )
2024-07-16 19:58:18 +00:00
< div class = " question mb-4 p-3 border rounded bg-light " data - index = " { { $index }} " >
< div class = " form-group " >
2024-07-18 11:43:20 +00:00
< 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 >
2024-07-16 19:58:18 +00:00
</ select >
2024-07-15 06:24:05 +00:00
</ div >
2024-07-16 19:58:18 +00:00
< div class = " form-group " >
2024-07-18 11:43:20 +00:00
< input type = " text " id = " question-text- { { $index }} "
name = " questions[ { { $index }}][text] " class = " form-control question-input "
value = " { { $question->question_text }} " required >
2024-07-16 19:58:18 +00:00
</ div >
< div class = " form-group options-container " >
< label > Options </ label >
2024-07-18 11:43:20 +00:00
@ if ( is_array ( $question -> options ))
2024-07-16 19:58:18 +00:00
@ foreach ( $question -> options as $optionIndex => $option )
< div class = " option d-flex align-items-center mb-2 " >
2024-07-18 11:43:20 +00:00
< 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>
2024-07-16 19:58:18 +00:00
</ div >
@ endforeach
@ endif
2024-07-18 11:43:20 +00:00
< 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 >
2024-07-16 19:58:18 +00:00
</ div >
2024-07-15 06:24:05 +00:00
</ div >
@ endforeach
2024-07-18 11:43:20 +00:00
< 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 >
2024-07-15 06:24:05 +00:00
</ div >
2024-07-16 19:58:18 +00:00
< button type = " button " class = " btn btn-primary mb-4 " onclick = " addNewQuestion() " > Add New Question </ button >
< button type = " submit " class = " btn btn-success mb-4 " > Save </ button >
2024-07-15 06:24:05 +00:00
</ form >
</ div >
2024-07-16 19:58:18 +00:00
2024-07-15 06:24:05 +00:00
< 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 >
` ;
optionsContainer . append ( optionHtml );
2024-07-18 11:43:20 +00:00
updateAddButtonPosition ();
2024-07-15 06:24:05 +00:00
}
function deleteOption ( button ) {
$ ( button ) . closest ( '.option' ) . remove ();
2024-07-18 11:43:20 +00:00
updateAddButtonPosition ();
2024-07-15 06:24:05 +00:00
}
function addNewQuestion () {
const questionsSection = $ ( '#questions-section' );
const questionIndex = questionsSection . find ( '.question' ) . length ;
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 " >
< select class = " form-control question-type " id = " question-type- ${ questionIndex } " name = " questions[ ${ questionIndex } ][type] " >
< option value = " multiple_choice " > Multiple Choice </ option >
< option value = " checkbox " > Checkbox </ option >
< option value = " dropdown " > Dropdown </ option >
</ 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 >
< div class = " form-group options-container " >
< label > Options </ label >
< button type = " button " class = " btn btn-secondary " onclick = " addOption(this) " > Add Option </ button >
</ div >
2024-07-18 11:43:20 +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 >
` ;
questionsSection . append ( questionHtml );
2024-07-18 11:43:20 +00:00
updateAddButtonPosition ();
2024-07-15 06:24:05 +00:00
}
function deleteQuestion ( button ) {
$ ( button ) . closest ( '.question' ) . remove ();
2024-07-18 11:43:20 +00:00
updateAddButtonPosition ();
}
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 ) {
2024-07-18 13:01:31 +00:00
sidebar . style . transform = `translateY(${newPosition + 75}px)` ;
console . log ( `Moving sidebar to: ${newPosition + 75}px` );
2024-07-18 11:43:20 +00:00
} else {
2024-07-18 13:01:31 +00:00
sidebar . style . transform = `translateY(${containerHeight - sidebarHeight + 75}px)` ;
2024-07-18 11:43:20 +00:00
console . log ( `Moving sidebar to bottom of container` );
}
} else {
sidebar . style . transform = `translateY(0px)` ;
console . log ( " No questions, moving sidebar to top " );
}
2024-07-15 06:24:05 +00:00
}
$ ( document ) . ready ( function () {
2024-07-18 11:43:20 +00:00
$ ( '#profileMenuButton' ) . on ( 'click' , function () {
$ ( '#profileMenu' ) . toggleClass ( 'hidden' );
2024-07-15 06:24:05 +00:00
});
2024-07-18 11:43:20 +00:00
$ ( document ) . on ( 'click' , function ( e ) {
if ( ! $ ( e . target ) . closest ( '#profileMenuButton' ) . length && ! $ ( e . target ) . closest (
'#profileMenu' ) . length ) {
$ ( '#profileMenu' ) . addClass ( 'hidden' );
}
});
updateAddButtonPosition ();
2024-07-15 06:24:05 +00:00
});
</ script >
</ body >
</ html >
