@php
    $layout =
        auth()->check() && auth()->user()->type == 'donar'
            ? 'frontend.donar.user_layouts'
            : 'frontend.member.user_layouts';
@endphp
@extends($layout)
@section('member-content')
    <style>
        .transactions-container {
            margin: 30px 20px;
            background: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 1px 1px rgba(46, 46, 46, 0.1);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

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

        .transactions-table {
            border-radius: 10px;
            overflow: hidden;
        }

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

        .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;
        }

        .action-button {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background-color: #0d6efd;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 5px 10px;
            font-size: 13px;
            transition: background-color 0.3s;
        }

        .action-button:hover {
            background-color: #0a58ca;
        }


        @media (max-width: 767.98px) {
            .transactions-container {
                padding: 20px;
            }

            .transactions-table {
                font-size: 12px;
            }
        }

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

        .card h6 {
            color: #0d6efd;
        }

        @media (max-width: 767px) {

            html,
            body {
                background-color: #fff;
            }

            .transactions-container {
                background-color: #fff;
                width: 100% !important;
                margin: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 15px !important;
            }

            .card {
                border: 0px;
                box-shadow: none !important;
            }
        }
    </style>
    <div class="transactions-container">
        <h3 class="transactions-title">Your Donaition</h3>
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="d-none d-md-block">
            {{-- Desktop: keep table --}}
            <table class="table transactions-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Invoice No</th>
                        <th>Amount</th>
                        <th>Payment Type</th>
                        <th>Account Info</th>
                        <th>Transaction No</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($items as $donation)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $donation->invoice_no }}</td>
                            <td>{{ number_format($donation->donation_amount, 2) }}</td>
                            <td>{{ ucfirst(str_replace('_', ' ', $donation->payment_type)) }}</td>
                            <td>
                                @if ($donation->account)
                                    @if ($donation->account->gateway_type == 'Mobile Bank')
                                        <strong>{{ $donation->account->company_name }}</strong><br>
                                        <small>{{ $donation->account->mobile_number }}</small>
                                    @elseif ($donation->account->gateway_type == 'Bank')
                                        <strong>{{ $donation->account->bank_name }}</strong><br>
                                        <small>Acc: {{ $donation->account->account_number }}</small>
                                    @endif
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td>{{ $donation->transaction_no ?? '-' }}</td>
                            <td>
                                <span class="status-pill {{ $donation->payment_status === 'paid' ? 'paid' : 'unpaid' }}">
                                    {{ ucfirst($donation->payment_status) }}
                                </span>
                            </td>
                            <td>
                                <a href="{{ route('donation.invoice', Crypt::encryptString($donation->id)) }}"
                                    class="btn btn-sm btn-info" target="_blank">
                                    <i class="fa fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="no-data">No donation records found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{-- Mobile stacked cards --}}
        <div class="d-block d-md-none">
            @forelse ($items as $donation)
                <div class="card mb-3 shadow 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">#{{ $donation->invoice_no }}</h6>
                            <span
                                class="badge rounded-pill bg-{{ $donation->payment_status === 'paid' ? 'success' : 'warning' }}">
                                {{ ucfirst($donation->payment_status) }}
                            </span>
                        </div>
                        <div class="mb-2 fs-5 text-dark fw-semibold">
                            {{ number_format($donation->donation_amount, 2) }}
                        </div>
                        <div class="mb-2 small text-secondary">
                            <strong>Payment Type:</strong> {{ ucfirst(str_replace('_', ' ', $donation->payment_type)) }}
                        </div>
                        <div class="mb-2 small text-secondary">
                            <strong>Account:</strong>
                            @if ($donation->account)
                                @if ($donation->account->gateway_type == 'Mobile Bank')
                                    {{ $donation->account->company_name }} ({{ $donation->account->mobile_number }})
                                @elseif ($donation->account->gateway_type == 'Bank')
                                    {{ $donation->account->bank_name }} (Acc: {{ $donation->account->account_number }})
                                @endif
                            @else
                                N/A
                            @endif
                        </div>
                        <div class="mb-2 small text-secondary">
                            <strong>Transaction:</strong> {{ $donation->transaction_no ?? '-' }}
                        </div>
                        <div class="mt-3 d-flex justify-content-between gap-2">
                            <a href="{{ route('donation.invoice', Crypt::encryptString($donation->id)) }}" target="_blank"
                                class="btn btn-outline-primary btn-sm w-50 rounded-3">
                                <i class="fa fa-eye me-1"></i> View
                            </a>
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center text-muted">No donation records found.</div>
            @endforelse
        </div>
    </div>
@endsection