@extends ('layouts.ic')
@section('content')
<div class="container mcp-theme-1">
    <div class="d-flex align-items-baseline mt-3 mb-2">
        <h3 class="font-size-16 font-weight-bold text-dark">Invoice</h3>
        <a href="{{route('icCustomerPortal')}}" class="ml-auto">
            <i class="fa fa-chevron-left"></i>
            Back to Home
        </a>
    </div>
    <hr class="mt-0 mb-3">
    <div class="row">
        <div class="col-md-8">
            <div class="mb-3">Hi <b class="text-dark">{{$customer->client->displayName()}}</b>, please find your invoice below:</div>
            <table class="table table-sm table-bordered">
                <thead>
                <tr>
                    <th class="border-bottom-0 text-secondary bg-light">Date</th>
                    <th class="border-bottom-0 text-secondary bg-light">Company</th>
                    <th class="border-bottom-0 text-secondary bg-light">Particulars</th>
                    <th class="border-bottom-0 text-secondary bg-light">Total</th>
                    <th class="border-bottom-0 text-secondary bg-light">Paid</th>
                    <th class="border-bottom-0 text-secondary bg-light">Due</th>
                </tr>
                </thead>
                <tbody class="font-weight-normal">
                <tr>
                    <td>{{friendly_date($invoice->created_at)}}</td>
                    <td>{{$company->name}}</td>
                    <td>{{$invoice->description}}</td>
                    <td class="font-weight-bold text-dark">${{!is_null($invoice->amount) ? $invoice->amount : 0}}</td>
                    <td class="font-weight-bold text-success">${{!is_null($invoice->paid) ? $invoice->paid : 0}}</td>
                    <td class="font-weight-bold text-warning-dark">${{!is_null($invoice->balance) ? $invoice->balance : 0}}</td>
                </tr>
                <tr>
                    <td class="p-3 text-right" colspan="6">
                        <div class="d-flex justify-content-end align-items-baseline mb-2">
                            <span class="text-secondary">Total Amount: </span>
                            <span class="width-50px text-left text-secondary font-weight-bold pl-2">${{!is_null($invoice->amount) ? $invoice->amount : 0}}</span>
                        </div>
                        <div class="d-flex justify-content-end align-items-baseline mb-2">
                            <span class="text-secondary">Total Paid: </span>
                            <span class="width-50px text-left text-secondary font-weight-bold pl-2">${{!is_null($invoice->paid) ? $invoice->paid : 0}}</span>
                        </div>
                        <div class="d-flex justify-content-end align-items-baseline">
                            <span class="font-weight-bold text-secondary">Total Due: </span>
                            <span class="width-50px text-left font-weight-bold pl-2 font-size-14">${{!is_null($invoice->balance) ? $invoice->balance : 0}}</span>
                        </div>
                        @if($invoice->balance <= 0)
                            <div class="mt-3 border rounded border-success p-2 text-center">
                                <i class="fa fa-check text-success"></i>
                                <span class="text-success">PAID</span>
                            </div>
                        @else
                            <div class="d-flex align-items-start flex-wrap justify-content-end">
                                @if($customer->customer_balance >= $invoice->balance)
                                    <div moe relative class="mt-3">
                                        <a href="#" start show class="btn btn-sm btn-primary text-white font-weight-bold py-2">Pay <b>${{$invoice->balance}}</b> from your current balance (${{$customer->customer_balance}})</a>
                                        <form url="/api/invoiceTransaction/createPlusForCustomerTransaction">
                                            <p class="mb-2 text-left">Confirm Payment?</p>
                                            <input type="hidden" name="invoiceUid" value="{{$invoice->uid}}">
                                            <input type="hidden" name="amount" value="{{$invoice->balance}}">
                                            <input type="hidden" name="customMemo" value="Payment by customer via balance">
                                            <div class="text-left">
                                                <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>
                                @else
                                    <div class="mt-3 border rounded border-secondary p-2 text-left text-warning-dark w-100">
                                        <b>Cannot pay from your balance:</b> Your current balance (${{$customer->customer_balance}}) is less than the due amount (${{$invoice->balance}}). If you have a voucher, use its code on the right hand side to add funds to your balance.
                                    </div>
                                @endif
                                @if(count($customer->paymentMethods))
                                    <div moe relative class="mt-3 text-left ml-2">
                                        <a href="#" start show class="btn btn-sm btn-primary text-white font-weight-bold py-2">Pay <b>${{$invoice->balance}}</b> from your credit card</a>
                                        <form url="/api/financialTransaction/createForInvoice">
                                            <p class="mb-2 text-left">Pay Invoice</p>
                                            <input type="hidden" name="invoiceUid" value="{{$invoice->uid}}">
                                            <input type="hidden" name="amount" value="{{$invoice->balance}}">
                                            <div class="mb-2">
                                                <label class="text-sm text-secondary mb-1">Payment Method</label>
                                                <select name="paymentMethodUid" class="form-control form-control-sm" required>
                                                    <option value="">-- select --</option>
                                                    @foreach($customer->paymentMethods as $paymentMethod)
                                                        <option value="{{$paymentMethod->uid}}">{{strip_tags($paymentMethod->displayName())}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="text-left">
                                                <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>
                                @else
                                    <div class="mt-3 border rounded border-secondary p-2 text-left text-warning-dark w-100">
                                        You have not setup any payment methods yet.
                                        <div class="d-inline-block">
                                            @include('app.invoice-center._ic-add-payment-method-moe', ['label' => 'Click here'])
                                        </div>
                                        to set one up.
                                    </div>
                                @endif
                            </div>
                        @endif
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        @include('app.invoice-center.ic-rhs')
    </div>
</div>
@endsection
