@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>
                    <h1 class="bs-heading typ-27 typ-800 mb-24 mt-18"> View Maintenance History</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('addmaintenanceIssue',[$propertyId]) }}" class="bs-btn typ-blue-btn typ-export-btn">Request New
                                        Issue</a>
                                </div>
                                <div class="append-search-bar"></div>
                            </div>
                        </div>
                        <div class="bs-table">
                            <table id="tenent-maintenance-history"
                                class="table table-striped display nowrap cell-border"
                                style="width:100%">

                                <thead>
                                    <tr>
                                       <th>Issues</th>
                                       <th>Date</th>
                                       <th>Time</th>
                                       <th>Location</th>
                                       <th>Urgency</th>
                                       <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($myPayments as $myPayment)
                                    <tr>
                                        <td>
                                        <p class="bs-para typ-15 typ-blue2">{{$myPayment->issue_title}}</p>
                                        <p class="bs-para typ-12 typ-grey8">{{ Str::limit($myPayment->description, 15, '...') }}</p>
                                        </td>
                                        <td>{{ \Carbon\Carbon::parse($myPayment->date)->format('d-m-Y') }}</td>
                                        <td>
                                            <p class="bs-para typ-14 typ-blue1">{{\Carbon\Carbon::parse($myPayment->created_at)->format('h:i A')}}</p>
                                        </td>
                                        <td>{{$myPayment->location}}</td>
                                        <td>{{$myPayment->urgency_level}}</td>
                                        <td class="typ-center">
                                            @if ($myPayment->status == 'pending' || $myPayment->status == 'Waiting')
                                            <div class="typ-status typ-red">
                                                {{ $myPayment->status }}
                                            </div>
                                            @endif
                                            @if ($myPayment->status == 'Complete')
                                            <div class="typ-status typ-green">
                                                {{ $myPayment->status }}
                                            </div>
                                            @endif
                                            @if ($myPayment->status == 'In Progress')
                                            <div class="typ-status typ-blue">
                                                {{ $myPayment->status }}
                                            </div>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>
</main>
@endsection