@extends ('layouts/template')

@section('content')
    <div id="process-claims" class="px-3 mcp-theme-1 mt-3" v-cloak>
        <div class="row">
            <div class="col-9">
                <div class="d-flex align-items-end">
                    <div class="font-weight-bold py-3 font-size-14 text-secondary">
                        To Do
                    </div>
                    <form class="ml-4 d-inline-flex align-items-center py-3" v-on:submit.prevent="doFilter()">
                        <div class="width-150px mr-2">
                            <label class="mb-1 text-sm text-secondary">Search</label>
                            <input type="text" v-model="filter.q"
                                   class="form-control form-control-sm w-100 min-width-unset"
                                   :class="filter.q ? 'bg-aliceblue' : ''"
                                   placeholder="Name/MCN/Chart #">
                        </div>
                        <div class="width-150px min-width-unset mr-2">
                            <label class="mb-1 text-sm text-secondary">HCP</label>
                            <select class="form-control form-control-sm mr-2 filter-hcp" provider-search
                                    v-model="filter.hcp">
                                <option value="">-- HCP --</option>
                            </select>
                        </div>
                        <div class="width-150px mr-2">
                            <label class="mb-1 text-sm text-secondary">From Date</label>
                            <input type="date" v-model="filter.from"
                                   class="form-control form-control-sm w-100 min-width-unset"
                                   :class="filter.from ? 'bg-aliceblue' : ''">
                        </div>
                        <div class="width-150px mr-2">
                            <label class="mb-1 text-sm text-secondary">To Date</label>
                            <input type="date" v-model="filter.to"
                                   class="form-control form-control-sm w-100 min-width-unset"
                                   :class="filter.to ? 'bg-aliceblue' : ''">
                        </div>
                        <div class="">
                            <label class="mb-1 text-sm text-secondary">&nbsp;</label>
                            <div class="d-flex align-items-center">
                                <button class="btn btn-sm btn-primary mr-2">Filter</button>
                                <button class="btn btn-sm btn-default border" v-on:click.prevent="resetFilter()">Reset</button>
                            </div>
                        </div>
                    </form>
                    <div class="py-3 ml-auto">Unsubmitted: <b>@{{ numUnsubmitted }}</b></div>
                </div>
                <div v-for="(claim, claimIndex) in claims"
                     v-if="!claim.status || claim.status === 'NEW' || (claim.status === 'PICKED_UP' && claim.status_pro_id === proId)">
                    <div class="border rounded mb-3 border rounded mb-3 overflow-hidden"
                         :class="currentClaim && currentClaim.uid === claim.uid ? 'border-info bg-white' : (claim.status === 'PICKED_UP' ? 'border-warning' : 'bg-light text-secondary')"
                         v-on:click.prevent="setCurrentClaim(claimIndex)">
                        <div class="d-flex align-items-center c-pointer">

                            <b class="p-2 border-right mr-2 bg-aliceblue" :class="claim.status === 'PICKED_UP' ? 'text-dark' : 'text-secondary'">@{{ claim.created }}</b>

                            <span class="text-secondary text-sm mr-1">Patient</span>
                            <span class="click-to-copy" title="Click to copy">@{{ claim.client }}</span>

                            <span class="mx-2 text-secondary">/</span>
                            <span class="text-secondary text-sm mr-1">Pro</span>
                            <span class="click-to-copy" title="Click to copy">@{{ claim.claim_pro }}</span>

                            <span class="mx-2 text-secondary">/</span>
                            <span class="text-secondary text-sm mr-1">CPT</span>
                            <span class="click-to-copy" title="Click to copy">@{{ claim.cpts }}</span>

                            <span class="mx-2 text-secondary">/</span>
                            <span>@{{ claim.icds }} ICDs</span>

                            <span class="mx-2 text-secondary">/</span>
                            <div class="d-inline-flex align-items-center font-weight-bold text-secondary">
                                <span class="text-sm mr-1">$</span>
                                <span class="click-to-copy" title="Click to copy">@{{ claim.expected_total ? claim.expected_total : 0 }}</span>
                            </div>
                            <div class="ml-auto px-2" v-if="currentClaim && currentClaim.uid === claim.uid">
                                <button v-if="claim.status !== 'PICKED_UP'"
                                        v-on:click.prevent="updateClaimStatus(claimIndex, 'PICKED_UP')"
                                        class="btn btn-sm btn-info py-1 text-sm font-weight-bold">Pick Up</button>
                                <button v-if="claim.status === 'PICKED_UP'"
                                        v-on:click.prevent="updateClaimStatus(claimIndex, 'NEW')"
                                        class="btn btn-sm btn-warning py-1 text-sm font-weight-bold">
                                    <i class="fa fa-undo"></i>
                                    Put Back
                                </button>
                                <button v-if="claim.status === 'PICKED_UP'"
                                        v-on:click.prevent="updateClaimStatus(claimIndex, 'SUBMITTED')"
                                        class="btn btn-sm btn-success py-1 text-sm font-weight-bold">
                                    <i class="fa fa-arrow-right"></i>
                                    Mark Done
                                </button>
                            </div>
                        </div>
                        <div class="border-top" v-if="currentClaim && currentClaim.uid === claim.uid">
                            <div v-if="!currentMBClaim" class="p-2 text-secondary text-sm">Please wait ...</div>
                            <div v-else>

                                <div class="p-2">

                                    <!--payer-->
                                    <div class="d-flex align-items-center mb-1">
                                        <div class="text-secondary mr-3 min-width-140px">Payer</div>
                                        <b class="text-secondary"><span class="click-to-copy" title="Click to copy">@{{ currentMBClaim.payer_name }}</span></b>
                                        <div class="ml-auto d-inline-flex align-items-center">
                                            <textarea class="copy-source opacity-0" v-html="jsonCopySource()"></textarea>
                                            <button class="btn btn-sm btn-success on-hover-opaque text-sm font-weight-bold"
                                                    v-on:click.prevent="fastCopy()">
                                                <i class="fa fa-copy"></i>
                                                Copy All
                                            </button>
                                        </div>
                                    </div>

                                    <hr class="my-2">

                                    <!--patient/subscriber-->
                                    <div class="d-flex align-items-center mb-1">
                                        <div class="text-secondary mr-3 min-width-140px">Subscriber</div>
                                        <b class="text-secondary"><span class="click-to-copy" title="Click to copy">@{{ claim.client }}</span></b>
                                        <span class="mx-1 text-secondary text-sm">/</span>
                                        <span class=" click-to-copy" title="Click to copy">@{{ currentMBClaim.subscriber_dob }}</span>
                                        <span class="mx-1 text-secondary text-sm">/</span>
                                        <span class=" click-to-copy" title="Click to copy">@{{ currentMBClaim.subscriber_gender }}</span>
                                    </div>
                                    <div class="mb-2 pl-3">
                                        <div class="d-flex align-items-center">
                                            <span class="text-secondary text-sm min-width-140px text-right pr-3">Chart #</span>
                                            <span class="click-to-copy" title="Click to copy">@{{ claim.client_chart_number }}</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="text-secondary text-sm min-width-140px text-right pr-3">MCN</span>
                                            <span class="click-to-copy" title="Click to copy">@{{ currentMBClaim.subscriber_identifier }}</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="text-secondary text-sm min-width-140px text-right pr-3">Address</span>
                                            <span class="click-to-copy" title="Click to copy">
                                            @{{ currentMBClaim.subscriber_address_street_line1 }}
                                            @{{ currentMBClaim.subscriber_address_street_line2 }}
                                            @{{ currentMBClaim.subscriber_address_city }}
                                            @{{ currentMBClaim.subscriber_address_state }}
                                            @{{ currentMBClaim.subscriber_address_zip }}
                                            </span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="text-secondary text-sm min-width-140px text-right pr-3">Phone</span>
                                            <span class="click-to-copy" title="Click to copy">@{{ claim.client_phone }}</span>
                                        </div>
                                    </div>

                                    <hr class="my-2">

                                    <!--billing provider-->
                                    <div class="d-flex align-items-center mb-1">
                                        <div class="text-secondary mr-3 min-width-140px">Billing Provider</div>
                                        <b class="text-secondary"><span class="click-to-copy" title="Click to copy">@{{ currentMBClaim.billing_provider_entity }}</span></b>
                                    </div>
                                    <div class="mb-2 pl-3">
                                        <div class="d-flex align-items-center">
                                            <span class="text-secondary text-sm min-width-140px text-right pr-3">NPI</span>
                                            <span class="click-to-copy" title="Click to copy">@{{ currentMBClaim.billing_provider_npi }}</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="text-secondary text-sm min-width-140px text-right pr-3">Tax ID / Type</span>
                                            <span class="click-to-copy" title="Click to copy">@{{ currentMBClaim.billing_provider_tax_id }}</span>
                                            <span class="text-secondary mx-1">/</span>
                                            <span class="click-to-copy" title="Click to copy">@{{ currentMBClaim.billing_provider_tax_id_type }}</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="text-secondary text-sm min-width-140px text-right pr-3">Taxonomy Code</span>
                                            <span class="click-to-copy" title="Click to copy">@{{ currentMBClaim.billing_provider_taxonomy_code }}</span>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="text-secondary text-sm min-width-140px text-right pr-3">Address</span>
                                            <span class="click-to-copy" title="Click to copy">
                                            @{{ currentMBClaim.billing_provider_address_street_line1 }}
                                            @{{ currentMBClaim.billing_provider_address_street_line2 }}
                                            @{{ currentMBClaim.billing_provider_address_city }}
                                            @{{ currentMBClaim.billing_provider_address_state }}
                                            @{{ currentMBClaim.billing_provider_address_zip }}
                                            </span>
                                        </div>
                                    </div>

                                    <hr class="my-2">

                                    <!--attending provider-->
                                    <div class="d-flex align-items-center mb-1">
                                        <div class="text-secondary mr-3 min-width-140px">Attending Provider</div>
                                        <b class="text-secondary"><span class="click-to-copy" title="Click to copy">@{{ currentMBClaim.attending_provider_first_name }} @{{ currentMBClaim.attending_provider_last_name }}</span></b>
                                    </div>
                                    <div class="mb-2 pl-3">
                                        <div class="d-flex align-items-center">
                                            <span class="text-secondary text-sm min-width-140px text-right pr-3">NPI</span>
                                            <span class="click-to-copy" title="Click to copy">@{{ currentMBClaim.attending_provider_npi }}</span>
                                        </div>
                                    </div>

                                    <hr class="my-2">

                                    <!--visit/note-->
                                    <div class="d-flex align-items-center mb-1">
                                        <div class="text-secondary mr-3 min-width-140px">Note</div>
                                        <div v-if="claim.note_uid">
                                            <a :href="'/patients/view/' + claim.client_uid + '/notes/view/' + claim.note_uid + '?popupmode=1'"
                                               native target="_blank"
                                               class="note-popup-trigger text-nowrap mt-1 mr-1">
                                                View Note
                                            </a>
                                            <span class="ml-1 text-secondary">(@{{ claim.method }})</span>
                                        </div>
                                    </div>

                                    <hr class="my-2">

                                    <!--total-->
                                    <div class="d-flex align-items-center mb-1">
                                        <div class="text-secondary mr-3 min-width-140px">Claim Total</div>
                                        <b class="text-secondary">$ <span class="click-to-copy" title="Click to copy">@{{ claim.expected_total ? claim.expected_total : 0 }}</span></b>
                                    </div>

                                    <hr class="my-2">

                                    <!--cpt, doc, icd-->
                                    <div class="d-flex align-items-start mb-1">
                                        <div class="text-secondary mr-3 min-width-140px">CPT Codes</div>
                                        <div>
                                            <table class="table table-sm table-condensed mb-0 table-bordered">
                                                <thead>
                                                <tr class="bg-light">
                                                    <th class="border-0 width-100px">CPT</th>
                                                    <th class="border-0 width-100px">Modifier</th>
                                                    <th class="border-0 width-100px">DOS</th>
                                                    <th class="border-0 width-100px">Amount</th>
                                                    <th class="border-0 width-100px">POS</th>
                                                    <th class="border-0 text-nowrap">ICDs</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr class="claim-line" v-for="(claimLine) in currentClaimLines">
                                                    <td class="width-100px"><span class="click-to-copy" title="Click to copy">@{{ claimLine.cpt }}</span></td>
                                                    <td class="text-nowrap width-100px"><span class="click-to-copy" title="Click to copy">95</span></td>
                                                    <td class="text-nowrap width-100px"><span class="click-to-copy" title="Click to copy">@{{ claimLine.date_of_service }}</span></td>
                                                    <td class="text-nowrap width-100px">$ <span class="click-to-copy" title="Click to copy">@{{ claimLine.expected_total }}</span></td>
                                                    <td class="text-nowrap width-100px"><span class="click-to-copy" title="Click to copy">11</span></td>
                                                    <td class="">
                                                        <span v-for="(claimLineICD) in claimLine.claim_line_icds"
                                                              class="c-pointer border-secondary border-bottom mr-2"
                                                              :title="claimLineICD.description">
                                                            <span class="click-to-copy" title="Click to copy">@{{ claimLineICD.code }}</span>
                                                        </span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-3 border-left">
                <div class="d-flex align-items-center">
                    <div class="font-weight-bold py-3 font-size-14 text-success text-nowrap">
                        <i class="fa fa-check mr-2"></i>Other
                    </div>
                    <select class="form-control form-control-sm ml-auto width-200px" v-model="doneStatus">
                        <option value="ALL">All</option>
                        <option value="PICKED_UP">Picked Up</option>
                        <option value="SUBMITTED">Submitted</option>
                        <option value="IN_PROCESS">In Process</option>
                        <option value="ACCEPTED">Accepted</option>
                        <option value="REJECTED">Rejected</option>
                        <option value="ABANDONED">Abandoned</option>
                    </select>
                </div>
                <div v-for="(claim, claimIndex) in claims"
                     v-if="!(!claim.status || claim.status === 'NEW' || (claim.status === 'PICKED_UP' && claim.status_pro_id === proId)) && (doneStatus === 'ALL' || doneStatus === claim.status)">
                    <div class="border rounded border rounded mb-2 overflow-hidden text-secondary">
                        <div class="d-flex align-items-center position-relative flex-nowrap">

                            <span class="text-secondary text-sm pl-2 py-2 font-weight-bold text-nowrap">@{{ claim.created }}</span>
                            <span class="mx-1 text-secondary text-sm">/</span>
                            <span class="text-sm text-nowrap">@{{ claim.client }}</span>
                            <span class="mx-1 text-secondary text-sm">/</span>

                            <div class="d-inline-flex align-items-center text-sm text-secondary">
                                <span class="mr-1">$</span>
                                <span>@{{ claim.expected_total ? claim.expected_total : 0 }}</span>
                            </div>

                            <div class="rhs-absolute-fh-link border-left bg-white d-inline-flex h-100 align-items-center">
                                <a href="#" v-on:click.prevent="updateClaimStatus(claimIndex, 'NEW')"
                                        class="py-1 text-sm font-weight-bold">
                                    <i class="fa fa-undo"></i>
                                </a>
                            </div>
                        </div>
                        <div class="border-top px-2 py-1">
                            <span class="text-sm text-dark">@{{ claim.status }}</span>
                            <span class="text-sm" v-if="claim.status_pro_id"> by @{{ claim.status_pro }}</span>
                            <span class="text-sm" v-if="claim.status_updated_at"> on @{{ claim.status_updated_at }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="stag-popup stag-popup-lg mcp-theme-1" stag-popup-key="note-popup">
        <form method="POST" action="" class="p-0">
            <h3 class="stag-popup-title mb-0 mt-3 mx-3 pb-0 border-bottom-0">
                <span>Note Details</span>
                <a href="#" class="ml-auto text-secondary"
                   onclick="return closeStagPopup()"><i class="fa fa-times-circle"></i></a>
            </h3>
            <div class="pb-3 note-popup-content">
                <div class="px-3 pt-3 text-secondary font-italic">Loading ...</div>
            </div>
        </form>
    </div>
    <script>
        (function() {
            function init() {

                window.processClaimsApp = new Vue({
                    el: '#process-claims',
                    delimiters: ['@{{', '}}'],
                    data: {
                        claims: {!! json_encode($claims) !!},
                        currentClaim: null,
                        currentMBClaim: null,
                        currentClaimLines: null,
                        proId: {{$pro->id}},
                        proName: '{{$pro->name_first}} {{$pro->name_last}}',
                        isAdmin: {{$pro->pro_type === 'ADMIN' ? 'true' : 'false'}},
                        doneStatus: 'ALL',
                        filter: {
                            q: '',
                            from: '',
                            to: '',
                            hcp: '',
                        },
                        numUnsubmitted: 0
                    },
                    methods: {
                        hasError: function (_data) {
                            let msg = 'Unknown error!';
                            if (_data) {
                                if (_data.success) return false;
                                else if (_data.message) msg = _data.message;
                            }
                            toastr.error(msg);
                            return true;
                        },
                        setCurrentClaim: function(_index) {
                            let claim = this.claims[_index];
                            if(this.currentClaim && this.currentClaim.uid === claim.uid) return;
                            this.currentMBClaim = null;
                            this.currentClaimLines = null;
                            $.get('/claims/current-mb-claim/' + claim.uid, (_data) => {
                                if(!_data || _data === 'null') {
                                    alert('Please generate a submission for this claim');
                                    return false;
                                }
                                this.currentMBClaim = _data;
                                this.currentClaim = this.claims[_index];
                                $.get('/claims/current-claim-lines/' + claim.uid + '?json=1', (_data) => {
                                    this.currentClaimLines = _data;
                                }, 'json');
                            }, 'json');
                        },
                        updateClaimStatus: function(_index, _status) {
                            let claim = this.claims[_index];
                            $.post('/api/claim/updateStatus', {
                                uid: claim.uid,
                                status: _status,
                            }, (_data) => {
                                if(!this.hasError(_data)) {
                                    claim.status = _status;
                                    claim.status_pro_id = this.proId;
                                    claim.status_pro = this.proName;
                                    this.claims.splice(_index, 1, claim);
                                    if(_status === 'SUBMITTED') {
                                        this.resetCurrentClaim();
                                    }
                                    this.recalculateNumUnsubmitted();
                                }
                            }, 'json');
                        },
                        resetCurrentClaim: function() {
                            if(this.claims && this.claims.length) {
                                for (let i = 0; i < this.claims.length; i++) {
                                    if (!this.claims[i].status || this.claims[i].status === 'NEW' ||
                                        (this.claims[i].status === 'PICKED_UP' && this.claims[i].status_pro_id === this.proId)) {
                                        this.setCurrentClaim(i);
                                        break;
                                    }
                                }
                            }
                        },
                        doFilter: function() {
                            showMask();
                            let ql = ['json=1'];
                            if($.trim(this.filter.q)) ql.push('q=' + encodeURIComponent($.trim(this.filter.q)));
                            if($.trim(this.filter.from)) ql.push('from=' + encodeURIComponent($.trim(this.filter.from)));
                            if($.trim(this.filter.to)) ql.push('to=' + encodeURIComponent($.trim(this.filter.to)));
                            if($.trim(this.filter.hcp)) ql.push('hcp=' + encodeURIComponent($.trim(this.filter.hcp)));
                            ql = ql.join('&');
                            $.get('{{route('practice-management.process-claims')}}?' + ql, _data => {
                                this.claims = _data;
                                this.resetCurrentClaim();
                                this.recalculateNumUnsubmitted();
                                hideMask();
                            }, 'json');
                        },
                        resetFilter: function() {
                            this.filter.q = '';
                            this.filter.from = '';
                            this.filter.to = '';
                            this.filter.hcp = '';
                            this.doFilter();
                        },
                        recalculateNumUnsubmitted: function() {
                            let count = 0;
                            if(this.claims && this.claims.length) {
                                for (let i = 0; i < this.claims.length; i++) {
                                    if (!this.claims[i].status || this.claims[i].status === 'NEW' ||
                                        (this.claims[i].status === 'PICKED_UP' && this.claims[i].status_pro_id === this.proId)) {
                                        count++;
                                    }
                                }
                            }
                            this.numUnsubmitted = count;
                        },
                        jsonCopySource: function() {
                            if(!this.currentClaim || !this.currentMBClaim || !this.currentClaimLines) return '';
                            return JSON.stringify({
                                claim: this.currentClaim,
                                mbClaim: this.currentMBClaim,
                                claimLines: this.currentClaimLines
                            }, null, 2);
                        },
                        fastCopy: function() {
                            copyTextToClipboard($('.copy-source').first().val());
                        }
                    },
                    mounted: function() {
                        let self = this;
                        this.resetCurrentClaim();
                        this.recalculateNumUnsubmitted();
                        window.setTimeout(() => {
                            $('[pro-suggest-initialized]').removeAttr('pro-suggest-initialized');
                            $('.pro-suggest-input').remove();
                            $('.pro-suggestions-container').remove();
                            window.initProSuggest();
                        }, 500);
                        $(document).on('pro-changed', '.filter-hcp', function() {
                            self.filter.hcp = this.value;
                        });
                        $('#process-claims')
                            .off('click', '.note-popup-trigger')
                            .on('click', '.note-popup-trigger', function() {
                                showMask();
                                window.noMc = true;
                                $.get(this.href, (_data) => {
                                    $('.note-popup-content').html(_data);
                                    $('.note-popup-content')
                                        .find('a, button, input, select')
                                            .attr('disabled', 'disabled')
                                            .attr('tabindex', '-1')
                                            .css('pointer-events', 'none');
                                    showStagPopup('note-popup');
                                    // run note single initer and allow edits
                                    // runMCInitializer('note-single');
                                    hideMask();
                                });
                                return false;
                            });
                    }
                })

            }
            addMCInitializer('process-claims', init, '#process-claims');
        }).call(window);
    </script>
@endsection
