@extends('tenant.layouts.main')
@section('title')
    <title>Add Invoice</title>
@endsection
@section('content')
<main class="main">
    <div class="inner-app-main">
        <section class="section lyt-section">
            <div class="property--height">
                <div>

                    <h2 class="bs-heading typ-27 typ-blue typ-800 mt-18 mb-24">
                        <a href="{{route('tenant-view-property')}}">
                            <span class="icon icon-left-icon"></span>
                        </a>
                        View Payment Transactions
                    </h2>

                    <!-- <h1 class="bs-heading typ-27 typ-800 mb-42"><span class="icon icon-left-icon"></span> View Payment Transactions</h1> -->
                </div>
                <div class="row custom-row-gutter">
                    <div class="bs-card property-card">
                        <div class="append-div">
                            <div class="bs-flex-lyt upper-flex bs-search-box-set">
                            <div class="d-flex gap-24">
                                                    <a href="{{ route('addtenantpayment',[$propertyId]) }}" class="bs-btn typ-blue-btn typ-export-btn">Add Payment
                                                        Details</a>
                                                </div>
                                <div class="d-flex gap-24">
                                    {{-- <select class="form-select input-select"
                                        aria-label="Default select example">
                                        <option selected>Status</option>
                                        <option value="1">One</option>
                                        <option value="2">Two</option>
                                        <option value="3">Three</option>
                                    </select> --}}
                                </div>
                                <!-- <a href="#" class="bs-btn typ-blue-btn typ-export-btn">Export</a> -->
                                <div class="append-search-bar"></div>
                            </div>
                        </div>
                        <div class="bs-table">
                            <table id="orderpayment"
                                class="table table-striped display nowrap cell-border"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Date</th>
                                        <th>Property</th>
                                        <th>Detail</th>
                                        <th>Amount</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($myPayments as $myPayment)
                                    <tr>
                                        <td>{{ $myPayment->first_name }} {{ $myPayment->last_name }}</td>
                                        <td>{{ $myPayment->date }}</td>
                                        <td>{{ $myPayment->property_name }}</td>
                                        <td>{{ $myPayment->detail }}</td>
                                        <td>{{ $myPayment->amount }}</td>
                                        <td class="typ-center">
                                            @if ($myPayment->status == 'pending' || $myPayment->status == 'Unpaid' ||$myPayment->status == 'Waiting' || $myPayment->status == 'Under Background')
                                            <div class="typ-status typ-red">
                                                {{ $myPayment->status }}
                                            </div>
                                            @endif
                                            @if ($myPayment->status == 'Paid')
                                            <div class="typ-status typ-green">
                                                {{ $myPayment->status }}
                                            </div>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>
@endsection