@if($pro->pro_type === 'ADMIN')
    <div id="cptAlertComponent" v-cloak>
        <div v-if="errorCodes.length" class="alert alert-danger p-0 rounded-0 text-center mb-0">
            <div style="font-size: 14px;">
            <i class="fas fa-exclamation-triangle fa-fw"></i>
            <b>@{{ errorCodes.join(', ') }}</b> @{{ errorCodes.length > 1 ? 'codes have ':'code has ' }} never been submitted for this patient!</div>
        </div>
    </div>
    <script>
        (function() {
            function init() {
                var cptAlertComponent = new Vue({
                    el: '#cptAlertComponent',
                    data: {
                        codesToCheck: ['G0506'],
                        errorCodes:[]
                    },
                    methods:{
                        checkForUnbilledCodes: function(){
                            var self = this;
                            for(var i in self.codesToCheck){
                                code = self.codesToCheck[i];
                                $.get('{{ route("check-if-cpt-code-is-submitted") }}', {clientUid: "{{ $patient->uid }}", code: code}, function(response){
                                    if(response.success){
                                        if(response.data === 'NOT_SUBMITTED'){
                                            self.errorCodes.push(code);
                                        }
                                    }
                                }, 'json');
                            }

                        },
                        init: function(){
                            this.checkForUnbilledCodes();
                        }
                    },
                    mounted: function(){
                        this.init();
                    }
                });
            }
            addMCInitializer('cptAlertComponent', init, '#cptAlertComponent');
        })();
    </script>
@endif