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 >
< 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 >
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 " >
< 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 >
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 " >
< 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-17 06:39:33 +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-17 06:39:33 +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-17 06:39:33 +00:00
{{ -- < label for = " question-type- { { $index }} " > Question Type </ label > -- }}
2024-07-16 19:58:18 +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 >
</ select >
2024-07-15 06:24:05 +00:00
</ div >
2024-07-16 19:58:18 +00:00
< div class = " form-group " >
2024-07-17 06:39:33 +00:00
{{ -- < label for = " question-text- { { $index }} " > Question Text </ label > -- }}
2024-07-16 19:58:18 +00:00
< 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 options-container " >
< 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 >
</ div >
< button type = " button " class = " btn btn-danger btn-sm " onclick = " deleteQuestion(this) " > Delete Question </ button >
2024-07-15 06:24:05 +00:00
</ div >
@ endforeach
</ 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 );
}
function deleteOption ( button ) {
$ ( button ) . closest ( '.option' ) . remove ();
}
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 " >
< label for = " question-type- ${ questionIndex } " > Question Type </ label >
< 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 " >
< label for = " question-text- ${ questionIndex } " > Question Text </ label >
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-16 19:58:18 +00:00
< button type = " button " class = " btn btn-danger btn-sm " onclick = " deleteQuestion(this) " > Delete Question </ button >
2024-07-15 06:24:05 +00:00
</ div >
` ;
questionsSection . append ( questionHtml );
}
function deleteQuestion ( button ) {
$ ( button ) . closest ( '.question' ) . remove ();
}
$ ( document ) . ready ( function () {
$ ( '#edit-form' ) . on ( 'submit' , function ( e ) {
e . preventDefault ();
const formId = '{{ $form->id }}' ;
$ . ajax ({
url : '/forms/' + formId ,
type : 'PUT' ,
headers : {
'X-CSRF-TOKEN' : $ ( 'meta[name="csrf-token"]' ) . attr ( 'content' )
},
data : $ ( this ) . serialize (),
success : function ( response ) {
console . log ( 'Form updated successfully.' );
window . location . href = '/forms/' + formId ;
},
error : function ( xhr ) {
console . error ( 'Error updating form:' , xhr . responseText );
2024-07-16 19:58:18 +00:00
alert ( 'Form Updated!' );
window . location . href = '/forms' ;
2024-07-15 06:24:05 +00:00
}
});
});
});
</ script >
</ body >
</ html >
