@extends('frontend.organization.organization_layouts')
@section('member-content')
    <style>
        .transactions-container {
            margin: 30px 20px;
            background: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .transactions-title {
            color: #60666d;
            font-weight: 700;
            margin-bottom: 25px;
            text-align: center;
        }

        .transactions-table th {
            background-color: #fff;
            color: #60666d;
            font-size: 13px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .transactions-table td {
            vertical-align: middle;
            font-size: 14px;
            border-top: 1px solid #eee;
        }

        .status-pill {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            text-transform: capitalize;
        }

        .status-pill.paid {
            background-color: #28a745;
        }

        .status-pill.unpaid {
            background-color: #ffc107;
            color: #000;
        }

        @media (max-width: 767.98px) {
            .transactions-container {
                padding: 15px;
                margin: 0;
                border-radius: 0;
                box-shadow: none;
            }
        }

        .card {
            border: 1px solid #ddd;
        }

        @media (max-width: 767px) {
            html, body {
                background-color: #fff;
            }
            .card {
                border: 0;
                box-shadow: none;
            }
        }
    </style>

    <div class="transactions-container">
        <h3 class="transactions-title">Your Transactions</h3>

        {{-- Desktop Table --}}
        <div class="d-none d-md-block">
            <table class="table transactions-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Invoice No</th>
                        <th>Date</th>
                        <th>Amount</th>
                        <th>Transaction No</th>
                        <th>Payment By</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($transactions as $transaction)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $transaction->invoice_no }}</td>
                            <td>{{ $transaction->payment_date?->format('d M Y') }}</td>
                            <td>{{ number_format($transaction->amount, 2) }}</td>
                            <td>{{ $transaction->transaction_no }}</td>
                            <td>{{ ucfirst($transaction->payment_type) }}</td>
                            <td>
                                <span class="status-pill {{ $transaction->payment_status === 'paid' ? 'paid' : 'unpaid' }}">
                                    {{ ucfirst($transaction->payment_status) }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted">No transactions found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{-- Mobile stacked cards --}}
        <div class="d-block d-md-none">
            @forelse ($transactions as $transaction)
                <div class="card mb-3 shadow-sm border-0 rounded-4">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="fw-bold mb-0 text-primary">#{{ $transaction->invoice_no }}</h6>
                            <span class="badge rounded-pill
                                bg-{{ $transaction->payment_status === 'paid' ? 'success' : 'warning text-dark' }}">
                                {{ ucfirst($transaction->payment_status) }}
                            </span>
                        </div>
                        <div class="mb-2 fs-5 text-dark fw-semibold">
                            {{ number_format($transaction->amount, 2) }}
                        </div>
                        <div class="small text-muted mb-1">
                            <i class="fa fa-calendar me-1"></i>
                            {{ $transaction->payment_date?->format('d M Y') }}
                        </div>
                        <div class="small text-muted mb-1">
                            Transaction No: <strong>{{ $transaction->transaction_no }}</strong>
                        </div>
                        <div class="small text-muted mb-1">
                            Payment By: <strong>{{ ucfirst($transaction->payment_type) }}</strong>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center text-muted">No transactions found.</div>
            @endforelse
        </div>
    </div>
@endsection