<?php

use App\Models\Page;

$medicationsAddedOnIntake = Page::where('client_id', $patient->id)
    ->where('category', 'MEDICATION')
    ->whereRaw("(is_active IS TRUE AND added_during_note_uid = ? AND added_reason_category = 'ADDED_ON_INTAKE') ",[$note->uid])
    ->get();

$medicationsRemovedOnIntake = Page::where('client_id', $patient->id)
    ->where('category', 'MEDICATION')
    ->whereRaw("(is_active IS FALSE AND deactivated_during_note_uid  = ? AND deactivation_reason_category = 'REMOVED_ON_INTAKE')", [$note->uid])
    ->get();


?>
<div id="medicationSection">
    <table>
        <thead>
        <tr>
            <th>Medication</th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        </thead>
        @foreach($medicationsAddedOnIntake as $medOnIntake)
        <tr>
            <td>{{$medOnIntake->key }}</td>
            <td>Dose</td>
            <td>Route</td>
            <td>Frequency</td>
            <td>Description</td>
            <td></td>
        </tr>
        @endforeach
        <tr>
            <td>
                <input type="text" v-model="currentMed.name" placeholder="name">
            </td>
            <td>
                <input type="text" v-model="currentMed.dose" placeholder="dose">
            </td>
            <td>
                <input type="text" v-model="currentMed.route" placeholder="route">
            </td>
            <td>
                <input type="text" v-model="currentMed.frequency" placeholder="frequency">
            </td>
            <td>
                <input type="text" v-model="currentMed.description" placeholder="description">
            </td>
            <td>
                <button class="btn btn-sm btn-outline-primary" @click="save">Submit</button>
            </td>
        </tr>
    </table>
</div>

<script>
    (function() {
        function init() {
            window.clientVitalsApp = new Vue({
                el: '#medicationSection',
                data: {
                    value: '',
                    currentMed: {
                        name:'',
                        dose:'',
                        route:'',
                        frequency:'',
                        description:''
                    }
                },
                mounted: function() {
                    $(this.$el).closest('#medicationSection').find('[name="data"]').val(this.value);
                },
                watch: {
                    value: {
                        handler: function(val, oldVal) {
                            $(this.$el).closest('#medicationSection').find('[name="data"]').val(this.value);
                        },
                        deep: true
                    },
                },
                methods: {

                    save: function(){
                        console.log(this.value);
                        showMask();
                        console.log("DATA", this.value);
                        this.currentMed.isActive = true;
                        this.currentMed.addedReasonCategory = 'ADDED_ON_INTAKE'; // ADDED_BY_HCP_DURING_NOTE, ADDED_ON_INTAKE;
                        this.currentMed.addedReasonCategoryMemo = 'added on intake';
                        var payload = {
                            noteUid:  '{{$note->uid}}',
                            parentPageUid: null,
                            clientUid: '{{$patient->uid}}',
                            category: 'MEDICATION',
                            key: this.currentMed.name,
                            data: JSON.stringify(this.currentMed)
                        }
                        console.log("PAYLOAD:  ", payload);
                        $.post('/api/page/changeOrCreateClientScoped', payload, _data => {
                            if(!hasResponseError(_data)) {
                                toastr.success('Medication updated!');
                                closeStagPopup();
                            }
                        }, 'json');
                        hideMask();
                        fastReload();
                        return false;

                    }
                }
            });
        }
        addMCInitializer('client-medication', init, '#medicationSection');
    })();
</script>

