<?php $parsed = $page->data ? json_decode($page->data) : false; ?>
@if(!!$parsed)
<div class="p-3 border-top mt-3 mcp-theme-1" id="edit-medication-container-{{$page->id}}">
    <form action="">
        <div class="mb-2">
            <label class="mb-1 text-secondary text-sm">Title *</label>
            <input type="text" class="form-control form-control-sm" name="title" value="{{$page->key}}" readonly>
        </div>
        <div class="row mb-2">
            <div class="col-6">
                <label class="mb-1 text-secondary text-sm">Strength/Form *</label>
                <input type="text" class="form-control form-control-sm" name="strength" value="{{$parsed->strength}}" required>
            </div>
            <div class="col-6 pl-0">
                <label class="mb-1 text-secondary text-sm">Frequency</label>
                <input type="text" class="form-control form-control-sm" name="frequency" value="{{$parsed->frequency}}">
            </div>
        </div>
        <div class="mb-2">
            <label class="mb-1 text-secondary text-sm">Detail</label>
            <textarea class="form-control form-control-sm" name="detail">{!! $parsed->detail  !!}</textarea>
        </div>
        <hr class="m-neg-4">
        <div class="">
            <label class="mb-1 text-secondary d-flex align-items-center">
                <input type="checkbox" name="was_existing_at_visit_start" {{@$parsed->was_existing_at_visit_start ? 'checked' : ''}}>
                <span class="ml-2">Patient is already on this medication</span>
            </label>
        </div>
        <hr class="m-neg-4">
        <div class="d-flex align-items-center justify-content-center">
            <button class="btn btn-sm btn-primary px-3 mr-2 btn-save" type="button">Save</button>
            <button class="btn btn-sm btn-default border btn-close-stag-popup" type="button">Cancel</button>
        </div>
    </form>
</div>
<script>
    (function() {
        function init() {
            let parent = $('#edit-medication-container-{{$page->id}}'),
                form = parent.find('form').first();
            parent.find('.btn-save')
                .off('click')
                .on('click', function() {
                    if(!form[0].checkValidity()) {
                        form[0].reportValidity();
                        return false;
                    }
                    showMask();
                    let payload = {
                        uid: '{{$page->uid}}',
                        newData: JSON.stringify({
                            title: form.find('[name="title"]').val(),
                            strength: form.find('[name="strength"]').val(),
                            frequency: form.find('[name="frequency"]').val(),
                            detail: form.find('[name="detail"]').val(),
                            was_existing_at_visit_start: form.find('[name="was_existing_at_visit_start"]').is(':checked'),
                        })
                    };
                    $.post('/api/page/change', payload, _data => {
                        if(!hasResponseError(_data)) {
                            toastr.success('Medication updated!');
                            closeStagPopup();
                        }
                    }, 'json');
                    return false;
                });
        }
        addMCInitializer('edit-medication-{{$page->id}}', init, '#edit-medication-container-{{$page->id}}');
    }).call(window);
</script>
@else
    <div class="p-3 border-top mt-3 mcp-theme-1" id="edit-medication-container-{{$page->id}}">
        <div class="text-secondary">Invalid/corrupt input!</div>
    </div>
@endif