Notes

<?php

namespace AppHttpControllers;

use AppModelsstudent;
use AppModelsemployee;
use AppModelspayload;
use IlluminateHttpRequest;
use IlluminateSupportFacadesSchema;
use IlluminateSupportFacadesDB;
use IlluminateSupportFacadesLog;
use IlluminateSupportFacadesAuth;

class StudentController extends Controller
{
public function index()
{
// $tables = Schema::getConnection()->getDoctrineSchemaManager()->listTableNames();
// dd($tables);
$columns = Schema::getColumnListing('students');
$filteredColumns = array_diff($columns, ['id', 'created_at', 'updated_at']);
// dd($columns);
return view('index', compact('filteredColumns'));
}

public function fetchFieldMarkup(Request $request)
{


$columnName = $request->input('column');
$html = '';
$options = ['input', 'select', 'checkbox'];

$html .= '<div id="field-group-' . $columnName . '">';
$html .= '<span>' . ucfirst(str_replace('_', ' ', $columnName)) . ':</span><br>';

foreach ($options as $index => $option) {
$optionId = strtolower($option) . '_' . $index . '_' . $columnName;
$html .= '<input type="radio" id="' . $optionId . '" name="' . $columnName . '_field_type" value="' . strtolower($option) . '">';
$html .= '<label for="' . $optionId . '">' . $option . '</label><br>';
}

$html .= '<div id="actual-field-container-' . $columnName . '"></div>';
$html .= '</div>';

return response()->json(['html' => $html, 'cname' => $columnName]);
}




public function fetchActualField(Request $request)
{
$buttonId = 'addOptionBtn';
$selectId = 'actual_field';
$columnName = $request->input('column_name') ?? 'default_column';
$fieldType = $request->input('field_type') ?? 'select';
$btn_id = 'aditya';

$html = '';
$placeholderText = ucfirst(str_replace('_', ' ', $columnName));

switch ($fieldType) {
case 'select':
$html .= '<label for="' . $selectId . '">Select Option:</label>';
$html .= '<select id="' . $selectId . '" name="' . $columnName . '">';
$html .= '<option value="">-- Select an option --</option>';
$html .= '</select><br>';
$html .= '<input type="text" id="newOptionValueInput" placeholder="Enter new option text">';
$html .= '<button type="button" id="' . $btn_id . '">Add Option to Dropdown</button>';
break;
case 'checkbox':
$html .= '<input type="checkbox" id="' . $selectId . '" name="' . $columnName . '" value="1">';
$html .= '<label for="' . $selectId . '">Is Active?</label><br>';
break;
case 'input':
$html .= '<label for="' . $selectId . '">' . $placeholderText . ':</label>';
$html .= '<input type="text" id="' . $selectId . '" name="' . $columnName . '" placeholder="' . $placeholderText . '" ><br>';
break;
}

return response()->json(['html' => $html]);
}






public function submitForm(Request $request)
{
$formData = $request->all();
$formName = $request->input('form_name');
// dd($formData);
unset($formData['_token']);
payload::create([
'form_name' => $formName,
'field_attributes' => $formData,
]);
// dd($formData);
Log::info('Dynamic form submitted:', ['form_name' => $formName, 'attributes' => $formData]);
return redirect()->back()->with('success', 'Form data submitted successfully!');
}


public function form_dashboard()
{
$forms = payload::all();
// $formData = explode(',',$forms);
$formsdata = json_decode($forms, true);
// $stringResult = explode(', ', $forms);
// dd($stringResult);


// dd($formsdata);
return view('form_dashboard', compact('forms'));
}

public function deleteForm($id)
{
$form = Payload::find($id);
if ($form) {
$form->delete();
return redirect()->route('form_dashboard')->with('success', 'Record deleted successfully.');
}

return redirect()->route('form_dashboard')->with('error', 'Failed to delete record. Form not found.');
}


public function formView(Request $request, $id)
{
$submission = Payload::findOrFail($id);
$formData = json_encode($submission->field_attributes);
return view('form_view', compact('submission', 'formData'));
}
}



// $container.append('<button type="submit" class="btn btn-primary">Submit</button>');


$(document).ready(function() {
// $('.add_col').on('click', function(event) {
// event.preventDefault();
// var columnName = $(this).data('column-name');
// });

$(document).ready(function() {
$( "#columnsTable tbody .column-row" ).draggable({
cursor: "move",
revert: "invalid",

start: function(event, ui) {
var $clickedRow = $(this);
var columnName = $clickedRow.data('column-name');

$clickedRow.toggleClass('selected-row');
var inputExists = $('#dynamicform').find('input[name="' + columnName + '"]').length === 0;
console.log("Input exists (corrected check): " + inputExists);

fetchFormField(columnName, $clickedRow);
$('#dynamicform').droppable({
accept: ".column-row",
drop: function(event, ui) {
ui.draggable.remove();
$(this).append(ui.helper);
}
});

}

});

});

function fetchFormField(columnName, fieldType, $rowElement) {
$.ajax({
url: '/fetch-field-markup',
type: 'POST',
data: {
column: columnName
},
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
$('#dynamicform').append(response.html);
console.log(response);
// $('#dynamicform').droppable({
// accept: ".column-row",
// drop: function(event, ui) {
// ui.draggable.remove();
// $(this).append(ui.helper);
// }



$('input[name="' + response.cname + '_field_type"]').on('change', function() {
let selectedFieldType = $(this).val();
let targetColumnName = response.cname;

swapActualFormField(targetColumnName, selectedFieldType);
});


swapActualFormField(response.cname, 'input');

},
error: function(xhr, status, error) {
}
});
}

function swapActualFormField(columnName, fieldType) {
$.ajax({
url: '/fetch-actual-field',
type: 'POST',
data: {
column_name: columnName,
field_type: fieldType
},
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success: function(response) {
let containerId = '#actual-field-container-' + columnName;
$(containerId).html(response.html);
console.log(containerId);
},
error: function(xhr, status, error) {
console.error("Error swapping form field:", error);
}
});
}

$(document).on('click', '#aditya', function(event) {
alert("option added succesfully");
const valueInput = $(this).siblings('#newOptionValueInput');
const selectElement = $(this).siblings('select#actual_field');

console.log("valueInput inside handler:", valueInput);

const newOptionText = valueInput.val().trim();

if (newOptionText === "") {
alert("Please enter text for the new option.");
return;
}

const newOption = $('<option>', {
value: newOptionText.toLowerCase().replace(/s/g, '_'),
text: newOptionText
});

selectElement.append(newOption);

valueInput.val('').focus();
});
// ==============================================
$(document).ready(function() {
var formFieldAttributes = [];
console.log(formFieldAttributes);

$('#dynamicform :input').each(function() {
var $input = $(this);
console.log(input);
if ($input.is('button') || $input.attr('id') === 'newOptionValueInput') {
return true;
}
var attributes = {
name: $input.attr('name'),
type: $input.attr('type') || this.type,
id: $input.attr('id'),
placeholder: $input.attr('placeholder') || undefined,
// required: typeof $input.attr('required') !== 'undefined'
};

formFieldAttributes.push(attributes);
});

console.log("Collected Form Field Attributes:", formFieldAttributes);
});



<!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 id="title_name">Student Database Columns</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('adminlte/assets/css/alt/index.css') }}">
<style>
table {
border-collapse: collapse;
width: 50%;
margin: 20px;
}

th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

th {
background-color: #f2f2f2;
}

#btn {
background-color: #4CAF50;
height: 40px;
margin-top: 5px;
color: white;
padding: 10px 15px;
text-align: center;
text-decoration: none;
display: 5px;
font-size: 10px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>

<body>
<div class="container-wrapper">
<h1>Make form by selecting fields</h1>
<a id="btn" href="{{ route('dashboard.index') }}" class="btn btn-secondary">dashboard</a>
</div>
<div class="container-wrapper">

{{-- <div class="table-selection-wrapper">
<label for="table-select">Select a Table:</label>
<select id="table-select" name="table_name">
<option value="">-- Choose a table --</option>
@foreach ($tables as $table)
<option value="{{ $table }}">{{ $table }}</option>
@endforeach
</select>
</div> --}}


<div class="column " id="available-fields-column">
<h2 class="text text-center">Available Fields</h2>
<table id="columnsTable">
<thead>
<tr>
<th>Column Name</th>
</tr>
</thead>
<tbody>
{{-- {{ dd($columns)}} --}}
@foreach ($filteredColumns as $column)
<tr class="column-row " data-column-name="{{ $column }}">
<td class="add_col">{{ $column }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>

<div class="column" id="dynamic-form-column">
<h2>Dynamic Form Fields</h2>
<form id="myForm" action="{{ route('submit.dynamic.form') }}" method="POST">
@csrf

<div id="dynamicform" class="form-field-wrapper">
<!-- Dynamic inputs will be appended here by JavaScript -->
</div>

<button type="submit">Submit Form</button>
</form>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="{{ asset('adminlte/assets/js/pages/index.js') }}"></script>


</body>

</html>