<?php
if(!$contentData) {
    $contentData = [
        "items" => [
            [
                "name" => "",
                "specialty" => "",
                "organization" => "",
                "phone" => "",
                "fax" => "",
                "date" => "",
                "memo" => "",
            ]
        ]
    ];
}

if(!isset($contentData['items'])){
    $contentData['items'] =  [
        [
            "name" => "",
            "specialty" => "",
            "organization" => "",
            "phone" => "",
            "fax" => "",
            "date" => "",
            "memo" => "",
        ]
    ];
}

$formID = rand(0, 100000);
?>
<div id="careTeamSection">
    <h3 class="stag-popup-title mb-2 border-bottom-0 pb-1 hide-if-note">
        <span>Care Team</span>
        <a href="#" onclick="return closeStagPopup()"
           class="ml-auto text-secondary">
            <i class="fa fa-times-circle"></i>
        </a>
    </h3>

    <input type="hidden" name="data" value="{{json_encode($contentData)}}">

    <table class="table table-sm table-bordered mb-2 table-edit-sheet">
        <thead>
        <tr class="bg-light">
            <th class="px-2 text-secondary border-bottom-0 width-30px text-center">#</th>
            <th class="px-2 text-secondary border-bottom-0 w-25">Name</th>
            <th class="px-2 text-secondary border-bottom-0">Specialty</th>
            <th class="px-2 text-secondary border-bottom-0">Organization</th>
            <th class="px-2 text-secondary border-bottom-0">Phone</th>
            <th class="px-2 text-secondary border-bottom-0">Fax</th>
            <th class="px-2 text-secondary border-bottom-0">Date</th>
            <th class="px-2 text-secondary border-bottom-0">Memo</th>
            <th class="px-2 text-secondary border-bottom-0"></th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in items">
            <td class="px-2 pt-2 text-center text-sm font-weight-bold">@{{ index + 1 }}</td>
            <td>
                <input type="text" :data-index="index"
                       class="form-control form-control-sm canvas-care-team-title"
                       data-field="name" v-model="item.name" autofocus required>
            </td>
            <td>
                <input type="text" :data-index="index"
                       class="form-control form-control-sm"
                       data-field="specialty" v-model="item.specialty">
            </td>
            <td>
                <input type="text" :data-index="index"
                       class="form-control form-control-sm"
                       data-field="organization" v-model="item.organization">
            </td>
            <td>
                <input type="text" :data-index="index"
                       class="form-control form-control-sm"
                       data-field="phone" v-model="item.phone">
            </td>
            <td>
                <input type="text" :data-index="index"
                       class="form-control form-control-sm"
                       data-field="fax" v-model="item.fax">
            </td>
            <td>
                <input type="date" :data-index="index"
                       class="form-control form-control-sm"
                       data-field="date" v-model="item.date">
            </td>
            <td>
                <input type="text" :data-index="index"
                       class="form-control form-control-sm"
                       data-field="memo" v-model="item.memo">
            </td>
            <td class="px-2">
                <a 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>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="form-group my-2">
    <button type="button" class="btn btn-sm btn-default text-primary border border-primary mr-2"
            v-on:click.prevent="addItem()"
    >+ New Entry</button>
    </div>

</div>
<script>
    (function() {
        function init() {
            window.clientCareTeamApp = new Vue({
                el: '#careTeamSection',
                data: {
                    items: <?= json_encode($contentData['items']) ?>
                },
                mounted: function() {

                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            $(this.$el).closest('#careTeamSection').find('[name="data"]').val(JSON.stringify({
                                items: this.cleanArray(this.items)
                            }));
                        },
                        deep: true
                    }
                },
                methods: {
                    addItem: function() {
                        let self = this;
                        this.items.push({
                            name: '',
                            specialty: '',
                            organization: '',
                            phone: '',
                            fax: '',
                            date: '',
                            memo: '',
                        });
                        Vue.nextTick(function() {
                            $('.canvas-care-team-title').last().focus();
                        });
                    },
                    removeItem: function(_index) {
                        this.items.splice(_index, 1);
                    },
                    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-care-team', init, '#careTeamSection');
    })();
</script>
