<vn-crud-model
    vn-id="model"
    url="Defaulters/filter"
    filter="::$ctrl.filter"
    limit="20"
    order="amount DESC"
    data="$ctrl.defaulters"
    on-data-change="$ctrl.reCheck()"
    auto-load="true">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        vn-focus
        placeholder="Search client"
        info="Search client by id or name"
        auto-state="false"
        model="model">
    </vn-searchbar>
</vn-portal>
<vn-card>
    <smart-table
        model="model"
        options="$ctrl.smartTableOptions"
        expr-builder="$ctrl.exprBuilder(param, value)">
        <slot-actions>
            <div>
                <div class="totalBox" style="text-align: center;">
                    <h6 translate>Total</h6>
                    <vn-label-value
                        label="Balance due"
                        value="{{$ctrl.balanceDueTotal | currency: 'EUR': 2}}">
                    </vn-label-value>
                </div>
            </div>
            <div class="vn-pa-md">
                <vn-button
                    disabled="$ctrl.checked.length == 0"
                    ng-click="notesDialog.show()"
                    name="notesDialog"
                    vn-tooltip="Add observation"
                    icon="icon-notes">
                </vn-button>
            </div>
        </slot-actions>
        <slot-table>
            <table>
                <thead>
                    <tr>
                        <th shrink>
                            <vn-multi-check
                                model="model">
                            </vn-multi-check>
                        </th>
                        <th field="clientFk">
                            <span translate>Client</span>
                        </th>
                        <th>
                            <span translate>Es trabajador</span>
                        </th>
                        <th field="salesPersonFk">
                            <span translate>Comercial</span>
                        </th>
                        <th field="countryFk">
                            <span translate>Country</span>
                        </th>
                        <th field="payMethod"
                            vn-tooltip="Pay Method">
                            <span translate>P.Method</span>
                        </th>
                        <th
                            field="amount"
                            vn-tooltip="Balance due">
                            <span translate>Balance D.</span>
                        </th>
                        <th
                            field="workerFk"
                            vn-tooltip="Worker who made the last observation">
                            <span translate>Author</span>
                        </th>
                        <th field="observation" expand>
                            <span translate>Last observation</span>
                        </th>
                        <th
                            vn-tooltip="Last observation date"
                            field="created">
                            <span translate>L. O. Date</span>
                        </th>
                        <th
                            vn-tooltip="Credit insurance"
                            field="creditInsurance"
                            shrink>
                            <span translate>Credit I.</span>
                        </th>
                        <th field="defaulterSinced">
                            <span translate>From</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="defaulter in $ctrl.defaulters">
                        <td shrink>
                            <vn-check
                                ng-model="defaulter.checked"
                                on-change="$ctrl.saveChecked(defaulter.clientFk)"
                                vn-click-stop>
                            </vn-check>
                        </td>
                        <td title="{{::defaulter.clientName}}">
                            <span
                                vn-click-stop="clientDescriptor.show($event, defaulter.clientFk)"
                                title ="{{::defaulter.clientName}}"
                                class="link">
                                {{::defaulter.clientName}}
                            </span>
                        </td>
                        <td>
                            <vn-check
                                ng-model="defaulter.isWorker"
                                disabled="true">
                            </vn-check>
                        </td>
                        <td>
                            <span
                                title="{{::defaulter.salesPersonName}}"
                                vn-click-stop="workerDescriptor.show($event, defaulter.salesPersonFk)"
                                class="link">
                                {{::defaulter.salesPersonName | dashIfEmpty}}
                            </span>
                        </td>
                        <td>
                            {{::defaulter.country}}
                        </td>
                        <td>
                            {{::defaulter.payMethod}}
                        </td>
                        <td>{{::defaulter.amount | currency: 'EUR': 2}}</td>
                        <td>
                            <span
                                title="{{::defaulter.workerName}}"
                                vn-click-stop="workerDescriptor.show($event, defaulter.workerFk)"
                                class="link">
                                {{::defaulter.workerName | dashIfEmpty}}
                            </span>
                        </td>
                        <td expand>
                            <vn-textarea
                                vn-three
                                disabled="true"
                                ng-model="defaulter.observation">
                            </vn-textarea>
                        </td>
                        <td shrink-date>
                            <span class="chip {{::$ctrl.chipColor(defaulter.created)}}">
                                {{::defaulter.created | date: 'dd/MM/yyyy'}}
                            </span>
                        </td>
                        <td shrink>{{::defaulter.creditInsurance | currency: 'EUR': 2}}</td>
                        <td shrink-date>{{::defaulter.defaulterSinced | date: 'dd/MM/yyyy'}}</td>
                    </tr>
                </tbody>
            </table>
        </slot-table>
    </smart-table>
</vn-card>
<vn-client-descriptor-popover
    vn-id="client-descriptor">
</vn-client-descriptor-popover>
<vn-worker-descriptor-popover
    vn-id="worker-descriptor">
</vn-worker-descriptor-popover>
<vn-popup vn-id="dialog-summary-client">
    <vn-client-summary
        client="$ctrl.clientSelected">
    </vn-client-summary>
</vn-popup>

<!-- Dialog of add notes button -->
<vn-dialog
    vn-id="notesDialog"
    on-accept="$ctrl.onResponse()">
    <tpl-body>
        <section class="SMSDialog">
            <h5 class="vn-py-sm">{{$ctrl.$t('Add observation to all selected clients', {total: $ctrl.checked.length})}}</h5>
            <vn-horizontal>
                <vn-textarea vn-one
                    vn-id="message"
                    label="Message"
                    ng-model="$ctrl.defaulter.observation"
                    rows="3"
                    required="true"
                    rule>
                </vn-textarea>
            </vn-horizontal>
        </section>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Save</button>
    </tpl-buttons>
</vn-dialog>