<?php

use App\Models\Client;
use App\Models\Point;
use App\Models\Note;
/** @var Client $patient */
/** @var Note $note */

if(!@$sessionKey) {
    $sessionKey = request()->cookie('sessionKey');
}

$point = Point::getOrCreateOnlyTopLevelPointOfCategory($note, 'SCREENINGS_HISTORY', $sessionKey, true);

$contentData = $parsed = false;

if ($point->lastChildReview && $point->lastChildReview->data) {
    $point->lastChildReview->data = json_decode($point->lastChildReview->data, true);
    $contentData = $parsed = $point->lastChildReview->data;
}

if(!$contentData) {
    $contentData = [
        "count" => 1,
        "items" => [
            [
                "screening" => '',
                "comments" => '',
            ]
        ]
    ];
}

?>

<hr class="hide-outside-popup mt-3 mb-0">
<div class="p-3 mcp-theme-1">
    <div visit-moe close-on-save close-on-cancel class="d-block">
        <form show url="/api/visitPoint/upsertChildReview" class="mcp-theme-1">
            <input type="hidden" name="segmentUid" value="<?= $segment->uid ?>">
            <input type="hidden" name="uid" value="<?= $point->uid ?>">
            <input type="hidden" name="noteUid" value="<?= $note->uid ?>">
            <input type="hidden" name="data">

            <div id="edit-univ_history_screenings-container">

                <div v-for="(item, index) in items" class="note-section-item-row">
                    <div class="row mb-2">
                        <div class="col-md-3">
                            <label class="text-secondary text-sm mb-1 d-block">Screening</label>
                            <input type="text" class="form-control form-control-sm min-width-unset" v-model="item.screening" required>
                        </div>
                        <div class="col-md-2">
                            <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-2">
                        <div class="col-md-12">
                        <textarea class="form-control form-control-sm" type="text" v-model="item.comments" :model-index="index" placeholder="Additional details (optional)">
                        </textarea>
                        </div>
                    </div>
                    <hr class="m-neg-4">
                </div>

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

            </div>

            @if(!!$segment)
                <div>
                    <button submit class="btn btn-sm btn-primary mr-2"><i class="fa fa-save"></i></button>
                    <div class="d-inline-flex align-self-stretch align-items-center">
                        <span class="autosave-indicator saving text-sm text-secondary">Saving changes &hellip;</span>
                        <span class="autosave-indicator saved text-sm text-secondary">
                            <i class="fa fa-check"></i>
                            Saved
                        </span>
                    </div>
                </div>
            @else
                <div>
                    <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
                    <button cancel class="btn btn-sm btn-default border" {!! @$closeOnSave ? 'onmousedown="return closeStagPopup()"' : '' !!}>Close</button>
                </div>
            @endif

        </form>
    </div>
</div>
<script>
    (function() {

        window.segmentInitializers.<?= $segment->segmentTemplate->internal_name ?> = function() {

            new Vue({
                el: '#edit-univ_history_screenings-container',
                data: {
                    count: {{ $contentData['count'] }},
                    items: <?= json_encode($contentData['items']) ?>
                },
                watch: {
                    $data: {
                        handler: function(val, oldVal) {
                            let parent = $('#edit-univ_history_screenings-container').closest('form');
                            parent.find('[name="data"]').val(JSON.stringify(this.$data));
                        },
                        deep: true
                    }
                },
                methods: {
                    addItem: function() {
                        this.items.push({
                            screening: '',
                            comments: '',
                        });
                        this.count = this.items.length;
                    },
                    removeItem: function(_index) {
                        this.items.splice(_index, 1);
                        this.count = this.items.length;
                    }
                }
            });

        };

    }).call(window);
</script>
