@extends('layouts.default')

@section('styles')
@stop

@section('scripts')
    <script type="text/javascript" src="/assets/js/pages/hoa/association-fees/payment-history.js"></script>
@stop

@section('panel-heading')
    <strong>Payment History</strong>
@stop

@section('panel-presentation')
@stop

@section('content')
    <div class="row info-row">
        <div class="col-12">
            <p>
                The table below includes all monthy dues payments that you have made online.  This list does not include any payments that you have not made
                online.  This information only dispalays the payments which you have made on this site.
            </p>
            <p>
                If you have any discrepancies with the information provided below, please contact your homeowner's association treasurer.
            </p>
        </div>
    </div>
    <div class="row mt-5">
        <div class="col-12">
            <h5 class="text-center">Payment History for {{ auth()->user()->first_name . " " . auth()->user()->last_name }}<br/>{{ auth()->user()
            ->associationUnit->address
            }}</h5>
        </div>
    </div>
    <div class="row payment-history-row my-3">
        <div class="col-12">
            @if($paymentHistory)
            <table class="datatable w-100">
                <thead>
                    <tr>
                        <th class="ui-state-default px-1">Created at</th>
                        <th class="ui-state-default px-1">Payment Type</th>
                        <th class="ui-state-default px-1">Payment Description</th>
                        <th class="ui-state-default px-1">Itemized Breakdown</th>
                        <th class="ui-state-default px-1">Status</th>
                        <th class="ui-state-default px-1">Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($paymentHistory as $payment)
                        <tr>
                            <td class="px-1">{{ Carbon::createFromTimestamp($payment->created)->format("M d, Y h:m a") }}</td>
                            <td class="px-1">{{ $payment->object }}</td>
                            <td class="px-1">{{ $payment->metadata->chargeName }}</td>
                            <td class="px-1">
                                <div
                                    data-toggle="popover"
                                    data-trigger="hover"
                                    data-html="true"
                                    data-container="body"
                                    data-placement="left"
                                    data-content="{{ $payment->itemization }}"
                                    >
                                    <em><small>(Hover to see itemization)</small></em>
                                </div>
                            </td>
                            <td class="px-1">{{ $payment->status }}</td>
                            <td class="px-1 text-right">${{ number_format($payment->amount / 100.0, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            @else
                <h6 class="text-center ui-priority-primary ui-state-error-text">You have not yet made any online payments</h6>
            @endif
        </div>
    </div>

@stop