@extends('layouts.shared.admin-data-listing')

@section('title', 'Payments')
@section('shortDesc', 'Made by customers')

@section('filters')
<form method="GET" class="d-flex flex-column gap-3">
    <h5 class="card-title m-0">Filter</h5>

    <select name="status" class="form-select form-select-sm">
        <option disabled selected>By payment status</option>
        <option value="success">Success</option>
        <option value="failed">Failed</option>
    </select>

    <button class="btn-cta text-white fill w-100">Apply</button>
</form>
@endsection

@section('data')
@if($payments->isEmpty())
<p class="text-muted">{{'No recent payments found.'}}</p>
@else
<div class="table-responsive">
    <table class="table align-middle">
        <thead>
            <tr>
                <th>
                    <h6 class="m-0">{{'Customer'}}</h6>
                </th>
                <th>
                    <h6 class="m-0">{{'Plan'}}</h6>
                </th>
                <th>
                    <h6 class="m-0">{{'Amount'}}</h6>
                </th>
                <th>
                    <h6 class="m-0">{{'Date'}}</h6>
                </th>
                <th>
                    <h6 class="m-0">{{'Status'}}</h6>
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach($payments as $payment)
            <tr>
                <td>
                    <a href="#" class="d-flex align-items-center gap-3">
                        @php
                        $initials = strtoupper(substr(($payment->user->name ?? 'User'), 0, 1));
                        @endphp
                        <div class="initials d-flex justify-content-center bg-light border align-items-center rounded-circle text-uppercase small"
                            style="height:2rem; width:2rem; font-size:0.75rem">
                            {{ $initials }}
                        </div>
                        <div>
                            <h6 class="m-0 text-dark">{{ $payment->user->name }}</h6>
                            <span class="small text-muted">{{ $payment->user->email }}</span>
                        </div>
                    </a>
                </td>
                <td>
                    @if($payment->subscription)
                    <span class="plans text-nowrap {{ $payment->subscription->plan->slug }}">{{ $payment->subscription->plan->name }}</span>
                    @else
                    <span class="plans text-nowrap bg-dark">{{ 'Resource Purchase' }}</span>
                    @endif
                </td>
                <td><span class="text-nowrap">{{ number_format($payment->amount, 2) }}</span></td>
                <td><span class="text-muted text-nowrap">{{ $payment->created_at->format('M d, Y')
                                            }}</span></td>
                <td>
                    @if($payment->status == 'completed')
                    <span class="status success">{{'Success'}}</span>
                    @elseif($payment->status == 'pending')
                    <span class="status warning text-dark">{{'Pending'}}</span>
                    @elseif($payment->status == 'failed')
                    <span class="status danger">{{'Failed'}}</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endif
@endsection