Rapport-Laravel/resources/views/form/rapport-team3/1793767249-069bf040-1469-41...

602 lines
27 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">
<div class="account-pages">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8 col-lg-6 col-xl-5 p-0">
<div class="card bg-pattern">
<div class="card-body p-3 row">
@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>
@if(!isset($form->is_approval) || (isset($form->is_approval) && $form->is_approval != 'yes' ) )
<div class="col-4">
@if($form->link_type == 'form')
<a href="/form/history" class="float-end pt-1">View History</a>
@else
<a href="{{url()->previous()}}" class="float-end pt-1">Back</a>
@endif
</div>
@endif
@if(isset($form->user_info))
<div class="col-12">
<h6>Submitted By: {{$form->user_info->name}}</h6>
</div>
@endif
<form method="POST" action="/form/submit" id="report-form" enctype="multipart/form-data">
<input type="hidden" name="form_id" value="{{$form_id}}">
@csrf
@if($id)
<input type="hidden" name="id" value="{{$id}}">
@endif
@if(isset($form->manager_can_submit) && $form->manager_can_submit == true)
<div class="col-md-12 mb-2">
<label for="field-user_id" class="form-label"> Select User / Territory <span class="text-danger">*</span> </label>
<select class="form-control" id="field-user_id" name="user_id" required>
<option value=""> -- Select -- </option>
@foreach($form->users as $option)
<option value="{{$option->value}}" hierarchy="{{$option->hierarchy_id}}" {{isset($question->value) && $question->value == $option->value ? 'selected':''}}>{{$option->display}}</option>
@endforeach
</select>
<input type="hidden" id="field-hierarchy_id" name="hierarchy_id" value="">
</div>
@endif
@php
$multiDoctorFormId = '1793767249-069bf040-1469-4117-b364-e4851e1f4bdf';
$doctorFieldCodes = [
'contact_id',
'legacy_code',
'msl_code',
'speciality'
];
$doctorQuestions = collect($questions)->keyBy('code');
@endphp
@if($form_id == $multiDoctorFormId)
<div class="col-md-12 mb-3" id="doctor-section">
<div id="doctor-wrapper-1" class="doctor-wrapper border rounded p-3 mb-3">
<h5>Doctor 1</h5>
<div class="mb-2">
<label class="form-label">HCP Name <span class="text-danger">*</span></label>
<select name="contact_id[]" class="form-control doctor-contact" required>
<option value="">-- Select Doctor --</option>
</select>
</div>
<div class="mb-2">
<label class="form-label">MSL Code</label>
<input type="text" name="legacy_code[]" class="form-control doctor-legacy-code" readonly>
</div>
<div class="mb-2">
<label class="form-label">Pcode</label>
<input type="text" name="msl_code[]" class="form-control doctor-msl-code" readonly>
</div>
<div class="mb-2">
<label class="form-label">Speciality</label>
<input type="text" name="speciality[]" class="form-control doctor-speciality" readonly>
</div>
</div>
@for($i = 2; $i <= 5; $i++)
<div id="doctor-wrapper-{{ $i }}"
class="doctor-wrapper border rounded p-3 mb-3"
style="display:none;">
<h5>Doctor {{ $i }}</h5>
<div class="mb-2">
<label class="form-label">HCP Name <span class="text-danger">*</span></label>
<select name="contact_id[]" class="form-control doctor-contact">
<option value="">-- Select Doctor --</option>
</select>
</div>
<div class="mb-2">
<label class="form-label">MSL Code</label>
<input type="text" name="legacy_code[]" class="form-control doctor-legacy-code" readonly>
</div>
<div class="mb-2">
<label class="form-label">Pcode</label>
<input type="text" name="msl_code[]" class="form-control doctor-msl-code" readonly>
</div>
<div class="mb-2">
<label class="form-label">Speciality</label>
<input type="text" name="speciality[]" class="form-control doctor-speciality" readonly>
</div>
</div>
@endfor
<button type="button" class="btn btn-secondary" id="add-doctor-btn">
Add Doctor
</button>
</div>
{{-- Render all other questions normally --}}
@foreach($questions as $question)
@if(!in_array($question->code, $doctorFieldCodes))
<div class="col-md-12 mb-2">
<label for="field-{{$question->code}}" class="form-label">
{{$question->question}}
{!!$question->required == 'yes' ? '<span class="text-danger">*</span>':''!!}
</label>
@switch($question->type)
@case('hidden')
<input type="hidden"
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="number"
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>
@break
@case('radio')
@foreach($question->options as $option)
<div class="form-check mb-2 form-check-success">
<input class="form-check-input"
type="radio"
name="{{$question->code}}"
id="field-{{$question->code}}_{{$option->value}}"
value="{{$option->value}}">
<label class="form-check-label"
for="field-{{$question->code}}_{{$option->value}}">
{{$option->display}}
</label>
</div>
@endforeach
@break
@case('checkbox')
@foreach($question->options as $option)
<div class="form-check mb-2 form-check-primary ms-2">
<input class="form-check-input"
type="checkbox"
id="field-{{$question->code}}-{{$option->value}}"
name="{{$question->code}}[]"
value="{{$option->value}}">
<label class="form-check-label"
for="field-{{$question->code}}-{{$option->value}}">
{{$option->display}}
</label>
</div>
@endforeach
@break
@case('file')
<input type="file"
id="field-{{$question->code}}"
name="{{$question->code}}"
class="form-control"
{{$question->required == 'yes'?'required':''}}>
@break
@endswitch
</div>
@endif
@endforeach
@else
{{-- Keep your existing question-rendering code here for all other forms. --}}
@endif
@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%;
}
.form-label {
font-weight:bold;
font-size:16px;
}
</style>
@include('layouts.shared/footer-script')
<script src="{{asset('assets/libs/sweetalert2/sweetalert2.min.js')}}"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
// Store all doctors returned by the API
let allDoctors = [];
// Load doctors using the current form hierarchy
function loadDoctorList(hierarchy) {
if (!hierarchy) {
console.error('Hierarchy is missing');
return;
}
$("#pageloader").fadeIn();
$.ajax({
type: "GET",
url: '/form/getdoctorlist',
data: {
partition: @json($form->partition),
hierarchy: hierarchy
},
success: function(data) {
$("#pageloader").fadeOut();
console.log('Doctors received:', data);
allDoctors = data;
// Populate every doctor dropdown
$('.doctor-contact').each(function() {
let dropdown = $(this);
dropdown.empty();
dropdown.append(
$('<option></option>')
.val('')
.text('-- Select Doctor --')
);
$.each(allDoctors, function(index, itm) {
let contact = itm.contact || {};
let option = $('<option></option>')
.val(itm.value)
.text(itm.display)
.attr('msl_code', contact.msl_code || '')
.attr('legacy_code', contact.legacy_code || '')
.attr('speciality', contact.speciality || '');
dropdown.append(option);
});
});
},
error: function(xhr) {
$("#pageloader").fadeOut();
console.error('Doctor API error:', xhr.responseText);
Swal.fire(
'Error',
'Unable to load doctor list.',
'error'
);
}
});
}
// Load automatically when the form opens
loadDoctorList(@json($form->hierarchy_id ?? ''));
$(document).on('change', '.doctor-contact', function() {
let selectedOption = $(this).find('option:selected');
let wrapper = $(this).closest('.doctor-wrapper');
let mslCode = selectedOption.attr('msl_code') || '';
let legacyCode = selectedOption.attr('legacy_code') || '';
let speciality = selectedOption.attr('speciality') || '';
wrapper.find('.doctor-msl-code').val(mslCode);
wrapper.find('.doctor-legacy-code').val(legacyCode);
wrapper.find('.doctor-speciality').val(speciality);
console.log('Doctor:', selectedOption.text());
console.log('MSL Code:', mslCode);
console.log('Legacy Code:', legacyCode);
console.log('Speciality:', speciality);
});
// If the form has a User/Territory dropdown, load when it changes.
$('#field-user_id').on('change', function () {
let hierarchy = $(this).find(':selected').attr('hierarchy');
$('#field-hierarchy_id').val(hierarchy || '');
if (hierarchy) {
loadDoctorList(hierarchy);
}
});
$(document).on('change', '.doctor-contact', function () {
let selectedOption = $(this).find('option:selected');
let wrapper = $(this).closest('.doctor-wrapper');
let legacyCode = selectedOption.attr('legacy_code') || '';
let mslCode = selectedOption.attr('msl_code') || '';
let speciality = selectedOption.attr('speciality') || '';
wrapper.find('.doctor-legacy-code').val(legacyCode);
wrapper.find('.doctor-msl-code').val(mslCode);
wrapper.find('.doctor-speciality').val(speciality);
console.log('Selected doctor:', selectedOption.text());
console.log('Legacy Code:', legacyCode);
console.log('MSL Code:', mslCode);
console.log('Speciality:', speciality);
});
// Add doctor wrappers one by one
let visibleDoctors = 1;
$('#add-doctor-btn').on('click', function() {
if (visibleDoctors >= 5) {
return;
}
visibleDoctors++;
let wrapper = $('#doctor-wrapper-' + visibleDoctors);
wrapper.slideDown();
if (visibleDoctors === 5) {
$('#add-doctor-btn').hide();
}
});
// Make a newly selected doctor required
$(document).on('change', '.doctor-contact', function () {
let wrapper = $(this).closest('.doctor-wrapper');
$(this).prop('required', true);
if ($(this).val() === '') {
$(this).prop('required', false);
}
});
$(document).on('change', '.doctor-contact', function () {
let selectedValue = $(this).val();
let currentSelect = this;
let isDuplicate = false;
if (!selectedValue) {
return;
}
$('.doctor-contact').not(currentSelect).each(function () {
if ($(this).val() === selectedValue) {
isDuplicate = true;
return false;
}
});
if (isDuplicate) {
Swal.fire(
'Duplicate Doctor',
'This doctor has already been selected. Please select another doctor.',
'warning'
);
$(this).val('').trigger('change');
}
});
$('#report-form').on('submit', function(event) {
event.preventDefault();
let selectedDoctors = [];
$('.doctor-contact').each(function() {
let doctorId = $(this).val();
if (doctorId) {
selectedDoctors.push(doctorId);
}
});
// Exactly 5 doctors must be selected.
if (selectedDoctors.length !== 5) {
Swal.fire({
title: 'Warning',
text: 'Please select all 5 doctors before submitting the form.',
icon: 'warning',
confirmButtonText: 'OK'
});
return false;
}
// Continue with your existing AJAX submission below.
$("#pageloader").fadeIn();
let formData = new FormData(this);
console.log('Submitting form data:');
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
$.ajax({
type: "POST",
url: '/form/ajaxsubmitmultiple',
data: formData,
processData: false,
contentType: false,
success: function(data) {
$("#pageloader").fadeOut();
console.log('Submission response:', data);
if (data.status === 'success') {
Swal.fire({
title: 'Great!',
text: 'Your data is successfully submitted!',
icon: 'success'
}).then(() => {
window.location.reload();
});
} else {
Swal.fire({
icon: 'error',
title: 'Data not submitted',
text: data.message || 'Something went wrong. Please try again.'
});
}
},
error: function(xhr) {
$("#pageloader").fadeOut();
console.error('Submission error:', xhr.responseText);
Swal.fire(
'Error',
'Submission failed. Check the browser console and Network response.',
'error'
);
}
});
});
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0');
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
var plandateField = document.getElementById('field-record_date');
plandateField.setAttribute('max', today);
});
</script>
</body>
</html>