Processing bills matrix - single and bulk pay feature

resources/views/app/practice-management/processing-bill-matrix.blade.php

@@ -2,7 +2,7 @@
 
 @section('content')
 
-    <div class="p-3 mcp-theme-1">
+    <div class="p-3 mcp-theme-1" id="processing-bill-matrix">
 
         <div class="card">
 
@@ -14,7 +14,7 @@
                 <span class="mx-2">for</span>
                 <div class="width-200px">
                     <select provider-search data-pro-uid="{{ @$targetPro->uid }}"
-                            name="proUid" class="form-control form-control-sm mr-auto width-200px"
+                            name="proUid" class="form-control form-control-sm mr-auto width-200px min-width-unset"
                             onchange="fastLoad('/practice-management/processing-bill-matrix/' + this.value + '?f={{request()->input('f')}}&t={{request()->input('t')}}&bs={{request()->input('bs')}}&be={{request()->input('be')}}')">
                         <option value="" {{!@$targetPro ? 'selected' : ''}}>All Pros</option>
                     </select>
@@ -22,8 +22,8 @@
                 @if(@$targetPro)
                     <a href="/practice-management/processing-bill-matrix" class="ml-2">Clear Filter</a>
                 @endif
-                <div class="width-200px ml-2">
-                    <select name="filter" class="form-control form-control-sm mr-auto width-200px"
+                <div class="width-100px ml-2">
+                    <select name="filter" class="form-control form-control-sm mr-auto width-100px"
                             onchange="fastLoad('/practice-management/processing-bill-matrix/{{@$targetPro ? $targetPro->uid : ''}}?f=' + this.value + '&t={{request()->input('t')}}&bs={{request()->input('bs')}}&be={{request()->input('be')}}')">
                         <option {{request()->input('f') === '' ? 'selected' : ''}} value="">All Bills</option>
                         <option {{request()->input('f') === 'verified' ? 'selected' : ''}} value="verified">Verified
@@ -34,8 +34,8 @@
                         </option>
                     </select>
                 </div>
-                <div class="width-200px ml-2">
-                    <select name="filter" class="form-control form-control-sm mr-auto width-200px"
+                <div class="width-100px ml-2">
+                    <select name="filter" class="form-control form-control-sm mr-auto width-100px"
                             onchange="fastLoad('/practice-management/processing-bill-matrix/{{@$targetPro ? $targetPro->uid : ''}}?f={{request()->input('f')}}&bs={{request()->input('bs')}}&be={{request()->input('be')}}&t=' + this.value)">
                         <option {{!request()->input('t') || request()->input('t') === 'hcp' ? 'selected' : ''}} value="hcp">
                             HCP Bills
@@ -43,7 +43,7 @@
                         <option {{request()->input('t') === 'na' ? 'selected' : ''}} value="na">NA Bills</option>
                     </select>
                 </div>
-                <div class="ml-auto d-inline-flex align-items-center">
+                <div class="ml-3 d-inline-flex align-items-center">
                     <b class="mr-2">Bal Post Date</b>
                     <input type="date"
                            value="{{request()->input('bs')}}"
@@ -55,12 +55,17 @@
                            onchange="fastLoad('/practice-management/processing-bill-matrix/{{@$targetPro ? $targetPro->uid : ''}}?f={{request()->input('f')}}&t={{request()->input('t')}}&bs={{request()->input('bs')}}&be=' + this.value)"
                            class="form-control form-control-sm width-150px" name="bpdTo">
                 </div>
+                <button class="ml-auto btn btn-sm btn-primary pay-selected-pros px-3 font-weight-bold" disabled>Pay Selected</button>
             </div>
             <div class="card-body p-0">
-                <table class="table table-sm table-condensed p-0 m-0">
+                <table class="table table-sm table-condensed table-hover p-0 m-0">
                     <thead class="bg-light">
                     <tr>
-                        <th><input type="checkbox"/> All</th>
+                        <th>
+                            <label class="d-flex align-items-center m-0">
+                                <input type="checkbox" class="chk-all-bills" /> <span class="ml-2">All</span>
+                            </label>
+                        </th>
                         <th>Context</th>
                         <td>Effective Date</td>
                         <td>Balance Post Date</td>
@@ -79,13 +84,16 @@
                             <td>NA Expected Amount</td>
                         @endif
                         <td>Pro Signed?</td>
+                        <td></td>
                     </tr>
                     </thead>
                     <tbody>
                     @foreach ($bills as $row)
-                        <tr class="">
-                            <td>
-                                <input type="checkbox"/>
+                        <tr>
+                            <td class="align-middle">
+                                @if($row->is_verified)
+                                    <input type="checkbox" data-uid="{{$row->uid}}" class="chk-bill align-middle" />
+                                @endif
                             </td>
                             <td>
                                 @if($row->note)
@@ -116,7 +124,7 @@
                             <td>{{str_contains($row->code, 'Treatment Services') || str_contains($row->code, 'Administrative Services') ? ceil((float) $row->number_of_units * 60) . ' mins' : $row->number_of_units}}</td>
                             <td>{{$row->is_verified ? 'Verified: ' . friendly_date($row->marked_verified_at, true) : 'Not Verified'}} </td>
                             @if(!request()->input('t') || request()->input('t') === 'hcp')
-                                <td>{{$row->hcp_expected_payment_amount}}</td>
+                                <td><b>${{$row->hcp_expected_payment_amount}}</b></td>
                             @elseif(request()->input('t') === 'na')
                                 <td><b>${{number_format($row->generic_pro_expected_payment_amount, 2)}}</b></td>
                             @endif
@@ -125,6 +133,11 @@
                             @elseif(request()->input('t') === 'na')
                                 <td>{{$row->is_signed_by_generic_pro ? 'Yes' : 'No'}}</td>
                             @endif
+                            <td>
+                                @if($row->is_verified)
+                                    <a href="#" data-uid="{{$row->uid}}" class="pay-bill font-weight-bold">Pay</a>
+                                @endif
+                            </td>
                         </tr>
                     @endforeach
                     </tbody>
@@ -135,5 +148,66 @@
             {{$bills->withQueryString()->links()}}
         </div>
     </div>
-
+    <script>
+        (function() {
+            function init() {
+                $('.pay-bill')
+                    .off('click')
+                    .on('click', function () {
+                        showMask();
+                        $.post('/api/bill/payUnpaidProsOnBillExpectedAmount', {
+                            uid: $(this).attr('data-uid')
+                        }, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Bill paid successfully');
+                                fastReload();
+                            }
+                        }).then(function() {
+                            hideMask();
+                        });
+                        return false;
+                    });
+                $('.pay-selected-pros')
+                    .off('click')
+                    .on('click', function () {
+                        if(!$('.chk-bill:checked').length) return false;
+                        showMask();
+                        let uids = [];
+                        $('.chk-bill:checked').each(function() {
+                            uids.push($(this).attr('data-uid'));
+                        });
+                        $.post('/api/bill/bulkPayUnpaidProsOnBillExpectedAmount', {
+                            billUids: uids.join('|')
+                        }, _data => {
+                            if(!hasResponseError(_data)) {
+                                toastr.success('Selected bills paid successfully');
+                                fastReload();
+                            }
+                        }).then(function() {
+                            hideMask();
+                        });
+                        return false;
+                    });
+                $('.chk-bill')
+                    .off('change')
+                    .on('change', function() {
+                        console.log('123')
+                         $('.pay-selected-pros').prop('disabled', !$('.chk-bill:checked').length);
+                         $('.chk-all-bills').prop('checked', ($('.chk-bill:checked').length === $('.chk-bill').length));
+                         return false;
+                    });
+                $('.chk-all-bills')
+                    .off('change')
+                    .on('change', function() {
+                        console.log('12')
+                        $('.chk-bill')
+                            .prop('checked', this.checked)
+                            .first()
+                                .trigger('change');
+                        return false;
+                    });
+            }
+            addMCInitializer('processing-bill-matrix', init, '#processing-bill-matrix');
+        }).call(window);
+    </script>
 @endsection