<?php
if(!$contentData) {
    $contentData = [
        "count" => 1,
        "unknown" => false,
        "items" => [[]]
    ];
}

$formID = rand(0, 100000);
?>
<div id="fancyModule">
    <input type="hidden" name="data" value="">


</div>
<script>
    (function() {
        function init() {
            window.clientFHXApp = new Vue({
                el: '#fhx_{{ $formID }}',
                data: {
                    count: {{ $contentData['count'] }},
                    unknown: {{ $contentData['unknown'] ? 'true' : 'false' }},
                    items: <?= json_encode($contentData['items']) ?>
                },
                mounted: function() {

                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            $(this.$el).closest('form').find('[name="data"]').val(JSON.stringify({
                                count: this.count,
                                unknown: this.unknown,
                                items: this.cleanArray(this.items)
                            }));
                        },
                        deep: true
                    }
                },
                methods: {
                    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;
                    },
                    removeItem: function(_index) {
                        this.items.splice(_index, 1);
                        this.count = this.items.length;
                    },
                    cleanArray: function(_source) {
                        let plItems = [], plObject = {};
                        for (let x=0; x<_source.length; x++) {
                            plObject = {};
                            for (let y in _source[x]) {
                                if(_source[x].hasOwnProperty(y)) {
                                    plObject[y] = _source[x][y];
                                }
                            }
                            plItems.push(plObject);
                        }
                        return plItems;
                    }
                }
            });
        }
        addMCInitializer('client-fancy', init, '#fancyModule');
    })();
</script>
