first commit
This commit is contained in:
218
resources/views/crud/generated/options/create.blade.php
Normal file
218
resources/views/crud/generated/options/create.blade.php
Normal file
@ -0,0 +1,218 @@
|
||||
@extends('backend.template')
|
||||
|
||||
@section('content')
|
||||
<!-- start page title -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-sm-0">Add Options</h4>
|
||||
<div class="page-title-right">
|
||||
<ol class="breadcrumb m-0">
|
||||
<li class="breadcrumb-item"><a href="javascript: void(0);">Dashboards</a></li>
|
||||
<li class="breadcrumb-item active">Add Options</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end page title -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-md-4">
|
||||
|
||||
<form action="{{ route('options.store') }}" id="storeCustomForm" method="POST">
|
||||
@csrf
|
||||
<div class="card">
|
||||
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
{{ createCustomSelect('tbl_students', 'name', 'student_id', '', 'Student Name', 'students_id', 'form-control select2', 'status<>-1') }}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
{{ createCustomSelect('tbl_programs', 'title', 'program_id', '', 'Program', 'programs_id', 'form-control select2', 'status<>-1') }}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
{{ createText('advices', 'advice', 'Advice') }}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
{{ createText('descriptions', 'description', 'Description') }}
|
||||
</div>
|
||||
<button type="button" id="btn-add-item" class="btn btn-success btn-add-item">
|
||||
<i class="fas fa-plus"></i> Add More
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card-footer">
|
||||
<div class="col-md-12">
|
||||
<button type="button" id="btn-submit" class="btn btn-primary btn-store">Submit</button>
|
||||
<a href="{{ route('options.index') }}" class="btn btn-danger btn-cancel">Cancel</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="programsData" id="programsData[]" value="-1">
|
||||
<input type="hidden" name="advicesData" id="advicesData[]" value="-1">
|
||||
<input type="hidden" name="descriptionsData" id="descriptionsData[]" value="-1">
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-9 col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Added Options</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>S.N.</th>
|
||||
<th>Programs</th>
|
||||
<th>Advice</th>
|
||||
<th>Description</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="addedItemTableBody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
w
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var addButton = document.getElementById('btn-add-item');
|
||||
var studentsId = document.querySelector('input[name="students_id"]');
|
||||
var addedItemTableBody = document.querySelector('#addedItemTableBody');
|
||||
var programsSelect = document.querySelector('select[name="programs_id"]');
|
||||
|
||||
var advicesInput = document.querySelector('input[name="advices"]');
|
||||
var descriptionsInput = document.querySelector('input[name="descriptions"]');
|
||||
var submitButton = document.getElementById('btn-submit');
|
||||
// Add hidden fields for JavaScript arrays
|
||||
var programsDataField = document.getElementById('programsData[]');
|
||||
var advicesDataField = document.getElementById('advicesData[]');
|
||||
var descriptionsDataField = document.getElementById('descriptionsData[]');
|
||||
|
||||
|
||||
var programsData = [];
|
||||
var advicesData = [];
|
||||
var descriptionsData = [];
|
||||
|
||||
|
||||
addButton.addEventListener('click', function() {
|
||||
var programsId = programsSelect.value;
|
||||
var programsTitle = programsSelect.options[programsSelect.selectedIndex].text || "N/A";
|
||||
var advice = advicesInput.value || "N/A";
|
||||
var description = descriptionsInput.value || "N/A";
|
||||
|
||||
programsData.push(programsId);
|
||||
advicesData.push(advice);
|
||||
descriptionsData.push(description);
|
||||
|
||||
var newRow = document.createElement('tr');
|
||||
|
||||
var serialNumber = addedItemTableBody.querySelectorAll('tr').length + 1;
|
||||
var serialCell = document.createElement('td');
|
||||
serialCell.textContent = serialNumber;
|
||||
newRow.appendChild(serialCell);
|
||||
|
||||
var programsCell = document.createElement('td');
|
||||
programsCell.textContent = programsTitle;
|
||||
newRow.appendChild(programsCell);
|
||||
|
||||
var adviceCell = document.createElement('td');
|
||||
adviceCell.textContent = advice;
|
||||
newRow.appendChild(adviceCell);
|
||||
|
||||
var descriptionCell = document.createElement('td');
|
||||
descriptionCell.textContent = description;
|
||||
newRow.appendChild(descriptionCell);
|
||||
|
||||
var deleteButton = document.createElement('a');
|
||||
deleteButton.innerHTML = '<i class="ri-delete-bin-fill align-bottom text-muted"></i>';
|
||||
deleteButton.className = 'text-danger d-inline-block remove-item-btn';
|
||||
var deleteCell = document.createElement('td');
|
||||
deleteCell.appendChild(deleteButton);
|
||||
newRow.appendChild(deleteCell);
|
||||
|
||||
deleteButton.addEventListener('click', function() {
|
||||
addedItemTableBody.removeChild(newRow);
|
||||
|
||||
var index = programsData.indexOf(programsId);
|
||||
if (index !== -1) {
|
||||
programsData.splice(index, 1);
|
||||
advicesData.splice(index, 1);
|
||||
descriptionsData.splice(index, 1);
|
||||
}
|
||||
programsDataField.value = JSON.stringify(programsData);
|
||||
advicesDataField.value = JSON.stringify(advicesData);
|
||||
descriptionsDataField.value = JSON.stringify(descriptionsData);
|
||||
|
||||
}, );
|
||||
|
||||
|
||||
|
||||
addedItemTableBody.appendChild(newRow);
|
||||
|
||||
advicesInput.value = '';
|
||||
descriptionsInput.value = '';
|
||||
|
||||
addedItemTableBody.appendChild(newRow);
|
||||
|
||||
programsDataField.value = JSON.stringify(programsData);
|
||||
advicesDataField.value = JSON.stringify(advicesData);
|
||||
descriptionsDataField.value = JSON.stringify(descriptionsData);
|
||||
|
||||
|
||||
});
|
||||
|
||||
submitButton.addEventListener('click', function() {
|
||||
var formData = new FormData();
|
||||
|
||||
// Append each array to the formData
|
||||
programsData.forEach(function(program) {
|
||||
formData.append('programs[]', program);
|
||||
});
|
||||
advicesData.forEach(function(advice) {
|
||||
formData.append('advices[]', advice);
|
||||
});
|
||||
descriptionsData.forEach(function(description) {
|
||||
formData.append('descriptions[]', description);
|
||||
});
|
||||
|
||||
// Append the CSRF token if needed
|
||||
formData.append('_token', '{{ csrf_token() }}');
|
||||
|
||||
// Make an AJAX POST request to the server
|
||||
fetch("{{ route('options.store') }}", {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(responseData => {
|
||||
if (responseData.status === true) {
|
||||
alert(responseData.message);
|
||||
} else {
|
||||
alert('Error: ' + responseData.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
// Prevent the form submission
|
||||
storeCustomForm.submit();
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user