Overhaul fhx section

public/css/style.css

@@ -573,3 +573,9 @@ input.search_field, textarea.search_field {
 [prefix="(-)"] a.minus-trigger {
     color: #a91e1e !important;
 }
+.rspace {
+    width: 20px;
+    display: inline-flex;
+    text-align: center;
+    justify-content: center;
+}

storage/sections/fhx/form.blade.php

@@ -3,26 +3,232 @@ $contentData = false;
 if($section){
     $contentData = json_decode($section->content_data, true);
 }
-if(!$contentData || !isset($contentData['value'])) {
-    $contentData = [
-        'value'=>''
-    ];
+if(!$contentData) {
+    $contentData = [];
+}
+if(!isset($contentData['count'])) {
+    $contentData['count'] = 1;
 }
 $formID = rand(0, 100000);
 ?>
-<form method="POST" action="/process_form_submit" onsubmit="return submitForm_NoteSection_{{ $formID }}(this);">
+<form method="POST" action="/process_form_submit"
+      id="fhx_{{ $formID }}"
+      onsubmit="return submitForm_NoteSection_{{ $formID }}(this);">
+    <input type="hidden" name="count" v-model="count">
     <?php if($section): ?>
         <input type="hidden" name="section_uid" value="<?= $section->uid?>">
     <?php else: ?>
         <input type="hidden" name="note_uid" value="<?= $note->uid?>">
         <input type="hidden" name="section_template_uid" value="<?= $sectionTemplate->uid ?>">
     <?php endif; ?>
-    <div class="form-group mb-2">
-        <textarea rte type="text" class="form-control form-control-sm p-2" name="value" placeholder="Value"><?= $contentData['value'] ?></textarea>
+
+    <div v-for="(item, index) in items" class="note-section-item-row">
+        <hr v-if="index > 0" class="row">
+        <div class="row mb-3">
+            <div class="col-md-3">
+                <label class="text-secondary text-sm mb-1 d-block">Relationship</label>
+                <select class="form-control form-control-sm" :name="'item_' + index + '_relationship'" v-model="item.relationship" required>
+                    <option value="">-- select --</option>
+                        <option value="Father">Father</option>
+                        <option value="Sister (First)">Sister (First)</option>
+                        <option value="Sister (Second)">Sister (Second)</option>
+                        <option value="Sister (Third)">Sister (Third)</option>
+                        <option value="Sister (Fourth)">Sister (Fourth)</option>
+                        <option value="Brother (First)">Brother (First)</option>
+                        <option value="Brother (Second)">Brother (Second)</option>
+                        <option value="Brother (Third)">Brother (Third)</option>
+                        <option value="Brother (Fourth)">Brother (Fourth)</option>
+                        <option value="Daughter (First)">Daughter (First)</option>
+                        <option value="Daughter (Second)">Daughter (Second)</option>
+                        <option value="Daughter (Third)">Daughter (Third)</option>
+                        <option value="Daughter (Fourth)">Daughter (Fourth)</option>
+                        <option value="Son (First)">Son (First)</option>
+                        <option value="Son (Second)">Son (Second)</option>
+                        <option value="Son (Third)">Son (Third)</option>
+                        <option value="Son (Fourth)">Son (Fourth)</option>
+                        <option value="Half-sister">Half-sister</option>
+                        <option value="Half-brother">Half-brother</option>
+                        <option value="Maternal Aunt">Maternal Aunt</option>
+                        <option value="Paternal Aunt">Paternal Aunt</option>
+                        <option value="Maternal Uncle">Maternal Uncle</option>
+                        <option value="Paternal Uncle">Paternal Uncle</option>
+                        <option value="Niece">Niece</option>
+                        <option value="Nephew">Nephew</option>
+                        <option value="Maternal Cousin">Maternal Cousin</option>
+                        <option value="Paternal Cousin">Paternal Cousin</option>
+                        <option value="Maternal Grandmother">Maternal Grandmother</option>
+                        <option value="Maternal Grandfather">Maternal Grandfather</option>
+                        <option value="Paternal Grandmother">Paternal Grandmother</option>
+                        <option value="Paternal Grandfather">Paternal Grandfather</option>
+                        <option value="Granddaughter">Granddaughter</option>
+                        <option value="Grandson">Grandson</option>
+                </select>
+            </div>
+            <div class="col-md-4">
+                <label class="text-secondary text-sm mb-1 d-block">Health Status</label>
+                <label class="my-0 mr-3 d-inline-flex align-items-center">
+                    <input type="radio" :name="'item_' + index + '_status'" v-model="item.status" value="Alive" class="mr-1">
+                    Alive
+                </label>
+                <label class="my-0 mr-3 d-inline-flex align-items-center">
+                    <input type="radio" :name="'item_' + index + '_status'" v-model="item.status" value="Deceased" class="mr-1">
+                    Deceased
+                </label>
+                <label class="my-0 mr-3 d-inline-flex align-items-center">
+                    <input type="radio" :name="'item_' + index + '_status'" v-model="item.status" value="Unknown" class="mr-1">
+                    Unknown
+                </label>
+            </div>
+            <div class="col-md-3">
+                <label class="text-secondary text-sm mb-1 d-block">&nbsp;</label>
+                <a v-if="items.length > 1" href="#" v-on:click.prevent="removeItem(index)"
+                   class="on-hover-opaque text-danger mt-1 d-inline-block">
+                    <i class="fa fa-trash-alt"></i>
+                </a>
+            </div>
+        </div>
+        <div class="row mb-1 font-weight-bold">
+            <div class="col-8">
+                General
+            </div>
+            <div class="col-4">
+                Cancer
+            </div>
+        </div>
+        <div class="row mb-1 font-weight-bold">
+            <div class="col-4">
+                <div class="rspace">+</div>
+                <div class="rspace">-</div>
+            </div>
+            <div class="col-4">
+                <div class="rspace">+</div>
+                <div class="rspace">-</div>
+            </div>
+            <div class="col-4">
+                <div class="rspace">+</div>
+                <div class="rspace">-</div>
+            </div>
+        </div>
+        <div class="row mb-3">
+            <div class="col-4">
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_no_health_concern'" v-model="item.general_no_health_concern"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_no_health_concern'" v-model="item.general_no_health_concern"></div>
+                    <span class="ml-2">No Health Concern</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_arthritis'" v-model="item.general_arthritis"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_arthritis'" v-model="item.general_arthritis"></div>
+                    <span class="ml-2">Arthritis</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_asthma'" v-model="item.general_asthma"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_asthma'" v-model="item.general_asthma"></div>
+                    <span class="ml-2">Asthma</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_bleeding_disorder'" v-model="item.general_bleeding_disorder"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_bleeding_disorder'" v-model="item.general_bleeding_disorder"></div>
+                    <span class="ml-2">Bleeding Disorder</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_cad_lt_age_55'" v-model="item.general_cad_lt_age_55"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_cad_lt_age_55'" v-model="item.general_cad_lt_age_55"></div>
+                    <span class="ml-2">CAD < age 55</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_copd'" v-model="item.general_copd"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_copd'" v-model="item.general_copd"></div>
+                    <span class="ml-2">COPD</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_diabetes'" v-model="item.general_diabetes"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_diabetes'" v-model="item.general_diabetes"></div>
+                    <span class="ml-2">Diabetes</span>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_heart_attack'" v-model="item.general_heart_attack"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_heart_attack'" v-model="item.general_heart_attack"></div>
+                    <span class="ml-2">Heart Attack</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_heart_disease'" v-model="item.general_heart_disease"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_heart_disease'" v-model="item.general_heart_disease"></div>
+                    <span class="ml-2">Heart Disease</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_high_cholesterol'" v-model="item.general_high_cholesterol"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_high_cholesterol'" v-model="item.general_high_cholesterol"></div>
+                    <span class="ml-2">High Cholesterol</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_hypertension'" v-model="item.general_hypertension"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_hypertension'" v-model="item.general_hypertension"></div>
+                    <span class="ml-2">Hypertension</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_mental_illness'" v-model="item.general_mental_illness"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_mental_illness'" v-model="item.general_mental_illness"></div>
+                    <span class="ml-2">Mental Illness</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_osteoporosis'" v-model="item.general_osteoporosis"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_osteoporosis'" v-model="item.general_osteoporosis"></div>
+                    <span class="ml-2">Osteoporosis</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_general_stroke'" v-model="item.general_stroke"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_general_stroke'" v-model="item.general_stroke"></div>
+                    <span class="ml-2">Stroke</span>
+                </div>
+            </div>
+            <div class="col-4">
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_breast_ca'" v-model="item.cancer_breast_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_breast_ca'" v-model="item.cancer_breast_ca"></div>
+                    <span class="ml-2">Breast CA</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_colon_ca'" v-model="item.cancer_colon_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_colon_ca'" v-model="item.cancer_colon_ca"></div>
+                    <span class="ml-2">Colon CA</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_other_ca'" v-model="item.cancer_other_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_other_ca'" v-model="item.cancer_other_ca"></div>
+                    <span class="ml-2">Other CA</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_ovarian_ca'" v-model="item.cancer_ovarian_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_ovarian_ca'" v-model="item.cancer_ovarian_ca"></div>
+                    <span class="ml-2">Ovarian CA</span>
+                </div>
+                <div class="d-flex align-items-center">
+                    <div class="rspace"><input type="radio" value="yes" :name="'item_' + index + '_cancer_uterine_ca'" v-model="item.cancer_uterine_ca"></div>
+                    <div class="rspace"><input type="radio" value="no" :name="'item_' + index + '_cancer_uterine_ca'" v-model="item.cancer_uterine_ca"></div>
+                    <span class="ml-2">Uterine CA</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="row mb-2">
+            <div class="col-md-12">
+                <textarea rte class="form-control form-control-sm" type="text"
+                          data-shortcuts="{{ $shortcuts }}" :name="'item_' + index + '_comments'" v-model="item.comments">
+                </textarea>
+            </div>
+        </div>
+
     </div>
-    <div class="form-group m-0 d-flex">
+
+    <div class="form-group mt-3 mb-0 d-flex">
         <button class="btn btn-sm btn-primary mr-2">Submit</button>
-        <button class="btn btn-sm btn-default border" onclick="return cancelForm_NoteSection_{{ $formID }}(this)">Cancel</button>
+        <button class="btn btn-sm btn-default text-primary border border-primary mr-2"
+                v-on:click.prevent="addItem()"
+            >Add Family Member</button>
+        <button class="btn btn-sm btn-default border" type="button" onclick="return cancelForm_NoteSection_{{ $formID }}(this)">Cancel</button>
     </div>
 </form>
 <script>
@@ -36,4 +242,144 @@ $formID = rand(0, 100000);
         $(_trigger).closest('.note-section').toggleClass('edit');
         return false;
     }
+
+    (function() {
+
+        let count = {{ $contentData['count'] }}, items = [];
+        let input = {!! json_encode($contentData)  !!};
+        for (let i = 0; i < count; i++) {
+            items.push({
+                relationship: input['item_' + i + '_relationship'],
+                status: input['item_' + i + '_status'],
+
+                general_no_health_concern: input['item_' + i + '_general_no_health_concern'],
+                general_arthritis: input['item_' + i + '_general_arthritis'],
+                general_asthma: input['item_' + i + '_general_asthma'],
+                general_bleeding_disorder: input['item_' + i + '_general_bleeding_disorder'],
+                general_cad_lt_age_55: input['item_' + i + '_general_cad_lt_age_55'],
+                general_copd: input['item_' + i + '_general_copd'],
+                general_diabetes: input['item_' + i + '_general_diabetes'],
+                general_heart_attack: input['item_' + i + '_general_heart_attack'],
+                general_heart_disease: input['item_' + i + '_general_heart_disease'],
+                general_high_cholesterol: input['item_' + i + '_general_high_cholesterol'],
+                general_hypertension: input['item_' + i + '_general_hypertension'],
+                general_mental_illness: input['item_' + i + '_general_mental_illness'],
+                general_osteoporosis: input['item_' + i + '_general_osteoporosis'],
+                general_stroke: input['item_' + i + '_general_stroke'],
+
+                cancer_breast_ca: input['item_' + i + '_cancer_breast_ca'],
+                cancer_colon_ca: input['item_' + i + '_cancer_colon_ca'],
+                cancer_other_ca: input['item_' + i + '_cancer_other_ca'],
+                cancer_ovarian_ca: input['item_' + i + '_cancer_ovarian_ca'],
+                cancer_uterine_ca: input['item_' + i + '_cancer_uterine_ca'],
+
+                comments: input['item_' + i + '_comments'],
+            });
+        }
+
+        window.fhxApp = new Vue({
+            el: '#fhx_{{ $formID }}',
+            data: {
+                count: {{ $contentData['count'] }},
+                items: items
+            },
+            methods: {
+                initRTE: function() {
+                    $('textarea[rte]').each(function() {
+
+                        $(this).wrap(
+                            $('<div class="border-left border-right rte-holder"/>')
+                                .attr('data-shortcuts', '{{ $packed }}')
+                        );
+
+                        // give a unique id to this editor instance
+                        var editorID = Math.ceil(Math.random() * 99999),
+                            fieldName = this.name;
+
+                        var ti = $('<input type="hidden" />')
+                            .val(this.value)
+                            .attr('name', this.name)
+                            .insertBefore(this);
+                        var ce = $('<div data-editor-id="' + editorID + '" data-field="' + this.name + '"/>')
+                            .html(this.value)
+                            .insertBefore(this);
+                        $(this).remove();
+
+                        var qe = new Quill('[data-editor-id="' + editorID + '"]', {
+                            theme: 'snow',
+                            modules: {
+                                keyboard: {
+                                    bindings: {
+                                        handleEnter: {
+                                            key: 13,
+                                            handler: function() {
+                                                if(!$('.stag-shortcuts:visible').length) return true;
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        });
+                        var toolbar = $(qe.container).prev('.ql-toolbar');
+
+                        // add button for new shortcut
+                        var newSCButton = $('<button class="btn bg-white btn-sm btn-default text-primary w-auto px-2 border py-0 ' +
+                            'text-sm add-shortcut" data-editor-id="' + editorID + '">+ Shortcut</button>');
+                        toolbar.append(newSCButton);
+
+                        qe.on('text-change', function() {
+                            ti.val(qe.root.innerHTML);
+                        });
+
+                        $(qe.container)
+                            .find('.ql-editor[contenteditable]')
+                            .attr('data-field', fieldName)
+                            .attr('data-editor-id', editorID)
+                            .attr('with-shortcuts', 1);
+
+                    });
+                },
+                addItem: function() {
+                    this.items.push({
+                        relationship: '',
+                        status: '',
+
+                        general_no_health_concern: null,
+                        general_arthritis: null,
+                        general_asthma: null,
+                        general_bleeding_disorder: null,
+                        general_cad_lt_age_55: null,
+                        general_copd: null,
+                        general_diabetes: null,
+                        general_heart_attack: null,
+                        general_heart_disease: null,
+                        general_high_cholesterol: null,
+                        general_hypertension: null,
+                        general_mental_illness: null,
+                        general_osteoporosis: null,
+                        general_stroke: null,
+
+                        cancer_breast_ca: null,
+                        cancer_colon_ca: null,
+                        cancer_other_ca: null,
+                        cancer_ovarian_ca: null,
+                        cancer_uterine_ca: null,
+
+                        comments: '',
+                    });
+                    this.count = this.items.length;
+                    var self = this;
+                    Vue.nextTick(function() {
+                        self.initRTE();
+                    })
+                },
+                removeItem: function(_index) {
+                    this.items.splice(_index, 1);
+                    this.count = this.items.length;
+                }
+            }
+        });
+
+    })();
+
 </script>

storage/sections/fhx/processor.php

@@ -1,4 +1,31 @@
 <?php
-$newContentData = [
-    'value' => $request->get('value')
-];
+$newContentData = [];
+
+$newContentData['count'] = $request->get('count');
+$count = intval($newContentData['count']);
+
+for ($i = 0; $i < $count; $i++) {
+    $newContentData['item_' . $i . '_relationship'] = $request->get('item_' . $i . '_relationship');
+    $newContentData['item_' . $i . '_status'] = $request->get('item_' . $i . '_status');
+    $newContentData['item_' . $i . '_general_no_health_concern'] = $request->get('item_' . $i . '_general_no_health_concern');
+    $newContentData['item_' . $i . '_general_arthritis'] = $request->get('item_' . $i . '_general_arthritis');
+    $newContentData['item_' . $i . '_general_asthma'] = $request->get('item_' . $i . '_general_asthma');
+    $newContentData['item_' . $i . '_general_bleeding_disorder'] = $request->get('item_' . $i . '_general_bleeding_disorder');
+    $newContentData['item_' . $i . '_general_cad_lt_age_55'] = $request->get('item_' . $i . '_general_cad_lt_age_55');
+    $newContentData['item_' . $i . '_general_copd'] = $request->get('item_' . $i . '_general_copd');
+    $newContentData['item_' . $i . '_general_diabetes'] = $request->get('item_' . $i . '_general_diabetes');
+    $newContentData['item_' . $i . '_general_heart_attack'] = $request->get('item_' . $i . '_general_heart_attack');
+    $newContentData['item_' . $i . '_general_heart_disease'] = $request->get('item_' . $i . '_general_heart_disease');
+    $newContentData['item_' . $i . '_general_high_cholesterol'] = $request->get('item_' . $i . '_general_high_cholesterol');
+    $newContentData['item_' . $i . '_general_hypertension'] = $request->get('item_' . $i . '_general_hypertension');
+    $newContentData['item_' . $i . '_general_mental_illness'] = $request->get('item_' . $i . '_general_mental_illness');
+    $newContentData['item_' . $i . '_general_osteoporosis'] = $request->get('item_' . $i . '_general_osteoporosis');
+    $newContentData['item_' . $i . '_general_stroke'] = $request->get('item_' . $i . '_general_stroke');
+    $newContentData['item_' . $i . '_cancer_breast_ca'] = $request->get('item_' . $i . '_cancer_breast_ca');
+    $newContentData['item_' . $i . '_cancer_colon_ca'] = $request->get('item_' . $i . '_cancer_colon_ca');
+    $newContentData['item_' . $i . '_cancer_other_ca'] = $request->get('item_' . $i . '_cancer_other_ca');
+    $newContentData['item_' . $i . '_cancer_ovarian_ca'] = $request->get('item_' . $i . '_cancer_ovarian_ca');
+    $newContentData['item_' . $i . '_cancer_uterine_ca'] = $request->get('item_' . $i . '_cancer_uterine_ca');
+    $newContentData['item_' . $i . '_comments'] = $request->get('item_' . $i . '_comments');
+}
+

storage/sections/fhx/summary.php

@@ -1 +1,41 @@
-<div><?= $newContentData['value']; ?></div>
+<?php
+
+$count = isset($newContentData['count']) ? intval($newContentData['count']) : 0;
+
+for ($i = 0; $i < $count; $i++) { ?>
+
+    <div class="mb-3">
+        <div class="">
+            <b><?= $newContentData['item_' . $i . '_relationship'] ?></b>
+            /
+            <span class="text-secondary"><?= $newContentData['item_' . $i . '_status'] ?></span>
+        </div>
+        <div class="ml-4">
+            <?= isset($newContentData['item_' . $i . '_general_no_health_concern']) ? '<div>No health concern: <b>' . $newContentData['item_' . $i . '_general_no_health_concern'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_arthritis']) ? '<div>Arthritis: <b>' . $newContentData['item_' . $i . '_general_arthritis'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_asthma']) ? '<div>Asthma: <b>' . $newContentData['item_' . $i . '_general_asthma'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_bleeding_disorder']) ? '<div>Bleeding disorder: <b>' . $newContentData['item_' . $i . '_general_bleeding_disorder'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_cad_lt_age_55']) ? '<div>Cad &gt; age 55: <b>' . $newContentData['item_' . $i . '_general_cad_lt_age_55'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_copd']) ? '<div>Copd: <b>' . $newContentData['item_' . $i . '_general_copd'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_diabetes']) ? '<div>Diabetes: <b>' . $newContentData['item_' . $i . '_general_diabetes'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_heart_attack']) ? '<div>Heart attack: <b>' . $newContentData['item_' . $i . '_general_heart_attack'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_heart_disease']) ? '<div>Heart disease: <b>' . $newContentData['item_' . $i . '_general_heart_disease'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_high_cholesterol']) ? '<div>High cholesterol: <b>' . $newContentData['item_' . $i . '_general_high_cholesterol'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_hypertension']) ? '<div>Hypertension: <b>' . $newContentData['item_' . $i . '_general_hypertension'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_mental_illness']) ? '<div>Mental illness: <b>' . $newContentData['item_' . $i . '_general_mental_illness'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_osteoporosis']) ? '<div>Osteoporosis: <b>' . $newContentData['item_' . $i . '_general_osteoporosis'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_general_stroke']) ? '<div>Stroke: <b>' . $newContentData['item_' . $i . '_general_stroke'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_cancer_breast_ca']) ? '<div>Breast cancer: <b>' . $newContentData['item_' . $i . '_cancer_breast_ca'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_cancer_colon_ca']) ? '<div>Colon cancer: <b>' . $newContentData['item_' . $i . '_cancer_colon_ca'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_cancer_other_ca']) ? '<div>Other cancer: <b>' . $newContentData['item_' . $i . '_cancer_other_ca'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_cancer_ovarian_ca']) ? '<div>Ovarian cancer: <b>' . $newContentData['item_' . $i . '_cancer_ovarian_ca'] . '</b></div>' : '' ?>
+            <?= isset($newContentData['item_' . $i . '_cancer_uterine_ca']) ? '<div>Uterine cancer: <b>' . $newContentData['item_' . $i . '_cancer_uterine_ca'] . '</b></div>' : '' ?>
+        </div>
+        <?php if(isset($newContentData['item_' . $i . '_comments']) && !empty($newContentData['item_' . $i . '_comments'])): ?>
+        <div class="text-secondary pb-2 mb-2">
+            <b>Comments: </b><?= $newContentData['item_' . $i . '_comments'] ?>
+        </div>
+        <?php endif; ?>
+    </div>
+
+<?php }