465 lines
32 KiB
PHP
465 lines
32 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
@include('layouts.shared/title-meta', ['title' => "Form"])
|
||
@include('layouts.shared/head-css', ["mode" => $mode ?? '', "demo" => $demo ?? ''])
|
||
<link href="{{asset('assets/libs/sweetalert2/sweetalert2.min.css')}}" rel="stylesheet" type="text/css" />
|
||
</head>
|
||
<div id="pageloader">
|
||
<img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
|
||
</div>
|
||
<body class="loading authentication-bg authentication-bg-pattern">
|
||
<div class="account-pages mt-5 mb-5">
|
||
<div class="container">
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-8">
|
||
<div class="card bg-pattern">
|
||
|
||
<div class="card-body p-3 row">
|
||
<div class="text-center w-75 m-auto">
|
||
<div class="auth-logo">
|
||
<a href="/road/register" class="logo logo-dark text-center">
|
||
<span class="logo-lg">
|
||
<img src="{{asset($logo)}}" alt="" height="100">
|
||
</span>
|
||
</a>
|
||
<a href="/road/register" class="logo logo-light text-center">
|
||
<span class="logo-lg">
|
||
<img src="{{asset($logo)}}" alt="" height="100">
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<h4>{{$title}}</h4>
|
||
<h5>{{$session->number}}</h5>
|
||
@foreach($session->dates->date as $i => $date)
|
||
<h5>{{date("d M, Y", strtotime($date) )}} <small>{{date("h:iA", strtotime($session->dates->start[$i]) )}}-{{date("h:iA", strtotime($session->dates->end[$i]) )}}</small></h5>
|
||
@endforeach
|
||
</div>
|
||
|
||
@if(Session::has('error'))<div class="alert alert-danger">{{Session::get('error')}}</div>
|
||
<br>@endif
|
||
@if(session('success'))<div class=" alert alert-success">{{ session('success') }}
|
||
</div>
|
||
<br>@endif
|
||
<div class="col-8">
|
||
<h4 class="page-title">{{$form->title}}</h4>
|
||
</div>
|
||
|
||
|
||
<form method="POST" id="report-form" enctype="multipart/form-data">
|
||
<input type="hidden" name="form_id" value="{{$form_id}}">
|
||
<input type="hidden" name="session_code" value="{{$session->code}}">
|
||
<input type="hidden" name="recipient" value="{{$recipient}}">
|
||
@csrf
|
||
|
||
@if($form_id == '1752828215-ed1f07b7-6355-4ce0-88d6-8fb48cea62d1')
|
||
<div class="alert alert-info" role="alert" style="text-align:left;">
|
||
<h5 class="mb-2">Invitation to Participate in a Brief Survey on the CASPER Programme</h5>
|
||
<p>Dear Doctor,</p>
|
||
<p>
|
||
Thank you for registering for the CASPER programme and joining us in the mission to gift back a normal childhood to every child who suffers from asthma.
|
||
</p>
|
||
<p>
|
||
We are inviting all the registered doctors to participate in this short survey which will help us gain insights into the prevailing knowledge and practices and help us structure the programme accordingly. Please do not miss filling the last bit about your expectations from the CASPER. Your experience and perspectives will help us enhance the programme’s effectiveness in clinical practice.
|
||
</p>
|
||
<p>
|
||
The survey will take only a few minutes of your time, and your responses will contribute significantly to shaping future initiatives.
|
||
</p>
|
||
<p>
|
||
Thank you for your continued commitment to advancing healthcare.
|
||
</p>
|
||
<p class="mb-0">
|
||
Warm regards,<br>
|
||
Team CASPER,<br>
|
||
CREST, Pune
|
||
</p>
|
||
</div>
|
||
<div class="row mb-3 mt-4">
|
||
<div class="col-md-6 mb-2">
|
||
<label for="doctor_name" class="form-label"><span class="text-danger">*</span> Name of the doctor:</label>
|
||
<input type="text" class="form-control" id="doctor_name" name="doctor_name" placeholder="Enter your name" required>
|
||
</div>
|
||
<div class="col-md-6 mb-2">
|
||
<label for="mobile_number" class="form-label"><span class="text-danger">*</span> Mobile Number:</label>
|
||
<input type="text" class="form-control" id="mobile_number" name="mobile_number" placeholder="Enter your mobile number" required>
|
||
</div>
|
||
<div class="col-md-6 mb-2">
|
||
<label for="email" class="form-label"><span class="text-danger">*</span> Email:</label>
|
||
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
|
||
</div>
|
||
<div class="col-md-6 mb-2">
|
||
<label for="specialty" class="form-label"><span class="text-danger">*</span> Specialty:</label>
|
||
<select class="form-control" id="specialty" name="specialty" required>
|
||
<option value="">Select</option>
|
||
<option value="Pediatrician">Pediatrician</option>
|
||
<option value="Post Graduate Student">Post Graduate Student</option>
|
||
<option value="General Practitioner">General Practitioner</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-info" role="alert">
|
||
<p class="mb-1">
|
||
We would like to use this data to evaluate the impact of our training program.<br>
|
||
Participation in this test is entirely voluntary. Your personal details will remain confidential and will not be shared with anyone.<br>
|
||
You are welcome to participate in the training program even if you choose not to take the test.
|
||
</p>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label d-block mb-2">Do you consent to us using your responses for evaluating the impact of our program?</label>
|
||
<div class="form-check form-check-inline">
|
||
<input class="form-check-input" type="checkbox" id="consent_yes" name="consent[]" value="yes">
|
||
<label class="form-check-label" for="consent_yes">Yes</label>
|
||
</div>
|
||
<div class="form-check form-check-inline">
|
||
<input class="form-check-input" type="checkbox" id="consent_no" name="consent[]" value="no">
|
||
<label class="form-check-label" for="consent_no">No</label>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var formFields = document.getElementById('form-fields');
|
||
var consentYes = document.getElementById('consent_yes');
|
||
var consentNo = document.getElementById('consent_no');
|
||
|
||
// Hide form fields initially
|
||
formFields.style.display = 'none';
|
||
|
||
// Helper to get all required fields inside formFields
|
||
function getRequiredFields() {
|
||
return formFields.querySelectorAll('[data-original-required]');
|
||
}
|
||
|
||
// Remove required from all fields and remember which had it
|
||
function removeRequiredAttributes() {
|
||
var fields = formFields.querySelectorAll('input, select, textarea');
|
||
fields.forEach(function(field) {
|
||
if (field.hasAttribute('required')) {
|
||
field.setAttribute('data-original-required', 'true');
|
||
field.removeAttribute('required');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Restore required to fields that originally had it
|
||
function restoreRequiredAttributes() {
|
||
var fields = formFields.querySelectorAll('input, select, textarea');
|
||
fields.forEach(function(field) {
|
||
if (field.getAttribute('data-original-required') === 'true') {
|
||
field.setAttribute('required', 'required');
|
||
}
|
||
});
|
||
}
|
||
|
||
// Remove data-original-required from all fields (cleanup)
|
||
function cleanupRequiredMarkers() {
|
||
var fields = formFields.querySelectorAll('input, select, textarea');
|
||
fields.forEach(function(field) {
|
||
field.removeAttribute('data-original-required');
|
||
});
|
||
}
|
||
|
||
function toggleFormFields() {
|
||
if (consentYes.checked) {
|
||
formFields.style.display = '';
|
||
restoreRequiredAttributes();
|
||
} else {
|
||
formFields.style.display = 'none';
|
||
removeRequiredAttributes();
|
||
}
|
||
}
|
||
|
||
// Make checkboxes mutually exclusive
|
||
consentYes.addEventListener('change', function() {
|
||
if (consentYes.checked) {
|
||
consentNo.checked = false;
|
||
}
|
||
toggleFormFields();
|
||
});
|
||
|
||
consentNo.addEventListener('change', function() {
|
||
if (consentNo.checked) {
|
||
consentYes.checked = false;
|
||
}
|
||
toggleFormFields();
|
||
});
|
||
|
||
// On page load, remove required if "no" is checked, else restore
|
||
if (consentNo.checked) {
|
||
formFields.style.display = 'none';
|
||
removeRequiredAttributes();
|
||
} else if (consentYes.checked) {
|
||
formFields.style.display = '';
|
||
restoreRequiredAttributes();
|
||
} else {
|
||
// Default: hide and remove required
|
||
formFields.style.display = 'none';
|
||
removeRequiredAttributes();
|
||
}
|
||
});
|
||
</script>
|
||
@endif
|
||
<div id="form-fields">
|
||
@foreach($questions as $i => $question)
|
||
<div class="col-md-12 mb-2">
|
||
@if($question->type != 'label')
|
||
<label for="field-{{$question->code}}" class="form-label">
|
||
<b>{{ $i+1 }}. {{$question->question}} {!!$question->required == 'yes' ? '<span class="text-danger">*</span>':''!!}</b>
|
||
</label>
|
||
@endif
|
||
@switch($question->type)
|
||
@case('label')
|
||
<h5>{{$question->question}}</h5>
|
||
@break
|
||
@case('hidden')
|
||
<input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" value="{{isset($question->value)?$question->value:''}}">
|
||
@break
|
||
@case('text')
|
||
@case('email')
|
||
@case('tel')
|
||
@case('date')
|
||
<input type="{{$question->type}}" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" {{$question->required == 'yes'?'required':'' }} value="{{isset($question->value)?$question->value:''}}">
|
||
@break
|
||
@case('number')
|
||
<input type="{{$question->type}}" min="0" max="9999999999" step="1" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" {{$question->required == 'yes'?'required':'' }} value="{{isset($question->value)?$question->value:0}}">
|
||
@break
|
||
@case('textarea')
|
||
<textarea id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" {{$question->required == 'yes'?'required':'' }}>{{isset($question->value)?$question->value:''}}</textarea>
|
||
@break
|
||
@case('dropdown')
|
||
<select class="form-control" id="field-{{$question->code}}" name="{{$question->code}}" {{$question->required == 'yes'?'required':'' }}>
|
||
<option value=""> -- Select -- </option>
|
||
@foreach($question->options as $option)
|
||
<option value="{{$option->value}}" {{isset($question->value) && $question->value == $option->value ? 'selected':''}}>{{$option->display}}</option>
|
||
@endforeach
|
||
</select>
|
||
@php
|
||
$otherOption = null;
|
||
$otherDisplays = ['other', 'others', 'other (please specify)', 'other (please specify)'];
|
||
foreach($question->options as $option) {
|
||
if(in_array(strtolower(trim($option->display)), $otherDisplays)) {
|
||
$otherOption = $option;
|
||
break;
|
||
}
|
||
}
|
||
$otherValue = '';
|
||
if(isset($question->value) && isset($otherOption) && $question->value == $otherOption->value && isset($question->other)) {
|
||
$otherValue = $question->other;
|
||
}
|
||
@endphp
|
||
@if($otherOption)
|
||
<div class="mt-2" id="other-text-{{$question->code}}" style="display: {{ (isset($question->value) && $question->value == $otherOption->value) ? 'block' : 'none' }};">
|
||
<input type="text" class="form-control" name="{{$question->code}}_other" placeholder="Please specify" value="{{ $otherValue }}">
|
||
</div>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var select = document.getElementById('field-{{$question->code}}');
|
||
var otherDiv = document.getElementById('other-text-{{$question->code}}');
|
||
if(select && otherDiv) {
|
||
select.addEventListener('change', function() {
|
||
if(this.value == @json($otherOption->value)) {
|
||
otherDiv.style.display = 'block';
|
||
} else {
|
||
otherDiv.style.display = 'none';
|
||
otherDiv.querySelector('input').value = '';
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
@endif
|
||
@break
|
||
@case('checkbox')
|
||
@foreach($question->options as $option)
|
||
<div class="form-check mb-2 form-check-primary">
|
||
<input class="form-check-input others-checkbox" type="checkbox" id="field-{{$question->code}}-{{$option->value}}" name="{{$question->code}}[]" value="{{$option->value}}" {{isset($question->value) && $question->value != '' && in_array($option->value, $question->value) ? 'checked':''}}>
|
||
<label class="form-check-label" for="field-{{$question->code}}-{{$option->value}}">{{$option->display}}</label>
|
||
</div>
|
||
@if(strtolower(trim($option->display)) == 'others' || strtolower(trim($option->display)) == 'other')
|
||
@php
|
||
$othersValue = '';
|
||
if(isset($question->value) && is_array($question->value)) {
|
||
foreach($question->value as $val) {
|
||
// If value is not in options, treat as "Others" value
|
||
$isOption = false;
|
||
foreach($question->options as $opt) {
|
||
if($opt->value == $val) {
|
||
$isOption = true;
|
||
break;
|
||
}
|
||
}
|
||
if(!$isOption) {
|
||
$othersValue = $val;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
@endphp
|
||
<div class="mb-2" id="others-text-{{$question->code}}" style="display: {{ (isset($question->value) && is_array($question->value) && in_array($option->value, $question->value)) ? 'block' : 'none' }};">
|
||
<input type="text" class="form-control mt-1" name="{{$question->code}}[]" placeholder="Please specify" value="{{ $othersValue }}">
|
||
</div>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var checkbox = document.getElementById('field-{{$question->code}}-{{$option->value}}');
|
||
var othersDiv = document.getElementById('others-text-{{$question->code}}');
|
||
if(checkbox && othersDiv) {
|
||
checkbox.addEventListener('change', function() {
|
||
if(this.checked) {
|
||
othersDiv.style.display = 'block';
|
||
} else {
|
||
othersDiv.style.display = 'none';
|
||
othersDiv.querySelector('input').value = '';
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
@endif
|
||
@endforeach
|
||
@break
|
||
@case('radio')
|
||
<div class="row ps-2">
|
||
@foreach($question->options as $i => $option)
|
||
<div class="form-check col-auto form-check-blue mb-2">
|
||
<input class="form-check-input" type="radio" name="{{$question->code}}" value="{{$option->value}}" id="field-{{$question->code}}-{{$option->value}}" {{($question->required == 'yes' && $i == 0 )?'required':'' }}>
|
||
<label class="form-check-label" for="field-{{$question->code}}-{{$option->value}}">{{$option->display}}</label>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@break
|
||
@case('file')
|
||
<input type="file" id="field-{{$question->code}}" name="{{$question->code}}" class="form-control" value="" accept="image/jpg, image/jpeg, image/png" required>
|
||
@break
|
||
@case('multitextbox')
|
||
<div class="row">
|
||
@foreach($question->options as $option)
|
||
<div class="col-6">{{$option->display}}</div>
|
||
<div class="col-6 mb-1">
|
||
<input type="number" id="field-{{$option->value}}" name="{{$option->value}}" class="form-control" required value="{{isset($option->val)?$option->val:0}}">
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@break
|
||
@case('radiometrix')
|
||
@php
|
||
// Get all x-axis values from the first option
|
||
$x_values = [];
|
||
if(count($question->options) > 0) {
|
||
$first_option = $question->options[0];
|
||
$x_values = json_decode($first_option->value, true) ?? [];
|
||
}
|
||
@endphp
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered align-middle mb-2">
|
||
<thead>
|
||
<tr>
|
||
<th></th>
|
||
@foreach($x_values as $x)
|
||
<th class="text-center">{{ $x }}</th>
|
||
@endforeach
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach ($question->options as $option)
|
||
@php
|
||
$row_values = json_decode($option->value, true) ?? [];
|
||
@endphp
|
||
<tr>
|
||
<td>{{ $option->display }}</td>
|
||
@foreach($x_values as $x)
|
||
<td class="text-center">
|
||
@if(in_array($x, $row_values))
|
||
<input type="radio"
|
||
id="field-{{ $option->display }}-{{ $x }}"
|
||
name="{{ $question->code }}[{{$option->display}}]"
|
||
value="{{$x}}"
|
||
class="form-check-input"
|
||
{{ (isset($question->value) && isset($question->value[$option->display]) && $question->value[$option->display] == $x) ? 'checked' : '' }}>
|
||
@endif
|
||
</td>
|
||
@endforeach
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
@break
|
||
@endswitch
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@if(!isset($form->is_approval) || (isset($form->is_approval) && $form->is_approval != 'yes' ) )
|
||
<div class="text-center d-grid mt-3">
|
||
<button class="btn btn-primary" type="submit" id="submit-btn"> Submit </button>
|
||
</div>
|
||
@endif
|
||
|
||
</form>
|
||
|
||
</div> <!-- end card-body -->
|
||
</div>
|
||
<!-- end card -->
|
||
|
||
<!-- end row -->
|
||
|
||
</div> <!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
</div>
|
||
<!-- end container -->
|
||
</div>
|
||
<!-- end page -->
|
||
<style type="text/css">
|
||
#pageloader {
|
||
background: rgba( 255, 255, 255, 0.8 );
|
||
display: none;
|
||
height: 100%;
|
||
position: fixed;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
}
|
||
|
||
#pageloader img {
|
||
left: 50%;
|
||
margin-left: -32px;
|
||
margin-top: -32px;
|
||
position: absolute;
|
||
top: 50%;
|
||
}
|
||
</style>
|
||
@include('layouts.shared/footer-script')
|
||
<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
|
||
<script type="text/javascript">
|
||
jQuery(document).ready(function($){
|
||
// $('#report-form').on('submit', function(event){
|
||
// event.preventDefault();
|
||
// $("#pageloader").fadeIn();
|
||
// $.ajax({
|
||
// type: "POST",
|
||
// url: '/srvey/ajaxsubmit',
|
||
// data: new FormData($('#report-form')[0]),
|
||
// processData: false,
|
||
// contentType: false,
|
||
// success: function( data ) {
|
||
// $("#pageloader").fadeOut();
|
||
// if(data.status == 'success') {
|
||
// Swal.fire({
|
||
// title: 'Great!',
|
||
// text: 'Your data is successfully submitted!',
|
||
// icon: 'success'
|
||
// })
|
||
// $('#report-form').trigger("reset");
|
||
// } else {
|
||
// Swal.fire({
|
||
// icon: 'error',
|
||
// title: 'Data not submitted',
|
||
// text: 'Something went wrong, please try again after some time!'
|
||
// })
|
||
// }
|
||
// },
|
||
// });
|
||
// });
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html> |