@extends('layouts.invoice-center')
@section('inner-content')
    <div id="invoice-transactions">
        <div class="d-flex mb-2 pb-2 align-items-center border-bottom">
            <div class="font-size-14 font-weight-bold">Invoice Transactions</div>
            <div moe class="ml-3">
                <a href="" start show class="btn btn-sm btn-primary font-weight-normal text-white">
                    + Add Manual Plus Transaction
                </a>
                <form url="/api/invoiceTransaction/createManualPlus" class="mcp-theme-1">
                    <p class="mb-2 text-secondary font-weight-bold text-nowrap">Add Manual Plus Transaction</p>
                    <div class="mb-2">
                        <label class="text-sm text-secondary mb-1">Customer</label>
                        <input type="text"
                               name="customerName"
                               autocomplete="off"
                               class="form-control form-control-sm customer-select"
                               stag-suggest
                               stag-suggest-ep="/customer-suggest"
                               required>
                    </div>
                    <div class="mb-2">
                        <label class="text-sm text-secondary mb-1">Invoice</label>
                        <select name="invoiceUid"
                               class="form-control form-control-sm"
                               required>
                            <option value="">-- select --</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="text-sm text-secondary mb-1">Amount</label>
                        <input type="text"
                               name="amount"
                               autocomplete="off"
                               class="form-control form-control-sm"
                               required>
                    </div>
                    <div class="mb-2">
                        <label class="text-sm text-secondary mb-1">Memo</label>
                        <textarea rows="2"
                                  name="customMemo"
                                  autocomplete="off"
                                  class="form-control form-control-sm"></textarea>
                    </div>
                    <div>
                        <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
                        <button cancel class="btn btn-sm btn-default border">Cancel</button>
                    </div>
                </form>
            </div>
            <div moe class="ml-3">
                <a href="" start show class="btn btn-sm btn-primary font-weight-normal text-white">
                    + Add Manual Minus Transaction
                </a>
                <form url="/api/invoiceTransaction/createManualMinus" class="mcp-theme-1">
                    <p class="mb-2 text-secondary font-weight-bold text-nowrap">Add Manual Minus Transaction</p>
                    <div class="mb-2">
                        <label class="text-sm text-secondary mb-1">Customer</label>
                        <input type="hidden" name="customerUid">
                        <input type="text"
                               name="customerName"
                               autocomplete="off"
                               class="form-control form-control-sm customer-select"
                               stag-suggest
                               stag-suggest-ep="/customer-suggest"
                               required>
                    </div>
                    <div class="mb-2">
                        <label class="text-sm text-secondary mb-1">Invoice</label>
                        <select name="invoiceUid"
                                class="form-control form-control-sm"
                                required>
                            <option value="">-- select --</option>
                        </select>
                    </div>
                    <div class="mb-2">
                        <label class="text-sm text-secondary mb-1">Amount</label>
                        <input type="text"
                               name="amount"
                               autocomplete="off"
                               class="form-control form-control-sm"
                               required>
                    </div>
                    <div class="mb-2">
                        <label class="text-sm text-secondary mb-1">Memo</label>
                        <textarea rows="2"
                                  name="customMemo"
                                  autocomplete="off"
                                  class="form-control form-control-sm"></textarea>
                    </div>
                    <div>
                        <button submit class="btn btn-sm btn-primary mr-2">Submit</button>
                        <button cancel class="btn btn-sm btn-default border">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
        @if(count($records))
            <table class="table table-sm table-bordered table-striped">
                <thead>
                <tr>
                    <th class="border-bottom-0">Created</th>
                    <th class="border-bottom-0">Customer</th>
                    <th class="border-bottom-0">Plus / Minus</th>
                    <th class="border-bottom-0">Amount</th>
                    <th class="border-bottom-0">Memo</th>
                    <th class="border-bottom-0">Starting<br>Balance</th>
                    <th class="b1order-bottom-0">Resulting<br>Balance</th>
                </tr>
                </thead>
                <tbody>
                @foreach($records as $record)
                    <tr>
                        <td>{{ friendly_date_time_with_seconds($record->created_at) }}</td>
                        <td>
                            @if($record->invoice && $record->invoice->customer && $record->invoice->customer->client)
                                <a href="{{route('patients.view.dashboard', $record->invoice->customer->client)}}">
                                    {{$record->invoice->customer->client->displayName()}}
                                </a>
                            @else
                                -
                            @endif
                        </td>
                        <td>{{ sanitize_state_name($record->plus_or_minus) }}</td>
                        <td>${{ is_null($record->amount) ? 0 : $record->amount }}</td>
                        <td>{{ $record->custom_memo ?: '' }}</td>
                        <td>${{ is_null($record->starting_balance) ? 0 : $record->starting_balance }}</td>
                        <td>${{ is_null($record->resulting_balance) ? 0 : $record->resulting_balance }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
            {{$records->withQueryString()->links()}}
        @else
            <div class="text-secondary">No customer transactions yet!</div>
        @endif
    </div>
    <script>
        (function () {
            function init() {
                initStagSuggest();
                let parentSegment = $('#invoice-transactions');
                parentSegment.find('input.customer-select')
                    .off('stag-suggest-selected')
                    .on('stag-suggest-selected', (_e, _input, _data) => {
                        _input = $(_input);
                        let select = _input.closest('form').find('select[name="invoiceUid"]').empty();
                        select.append('<option value="">-- select --</option>');
                        select.prop('disabled', true);
                        $.get('/customer/invoicesJSON/' + _data.uid, _data => {
                             if(!hasResponseError(_data)) {
                                 for (let i = 0; i < _data.data.length; i++) {
                                     select.append($('<option/>').attr('value', _data.data[i].uid).text(_data.data[i].text));
                                 }
                             }
                        }, 'json').then(() => {
                            select.prop('disabled', false);
                        });
                    });
            }
            addMCInitializer('invoice-transactions', init, '#invoice-transactions')
        }).call(window);
    </script>
@endsection