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

        }

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

        .btn-new-request {
            display: inline-block;
            margin-bottom: 20px;
            background-color: #556571;
            color: #fff !important;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 10px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

        .btn-new-request:hover {
            background-color: #1f5e88;
            color: #fff !important;
        }

        .history-table thead th {
            background-color: #fff !important;
            color: #60666d !important;
            font-weight: 600;
            text-align: center;
            vertical-align: middle;
            padding: 12px 10px;
            border-bottom: 2px solid #e9ecef;
        }

        .history-table tbody td {
            vertical-align: middle;
            text-align: center;
            padding: 10px 8px;
            font-size: 0.95rem;
            color: #333 !important;
            word-wrap: break-word;
        }

        .history-table tbody tr:hover {
            background-color: #f1f4f8 !important;
        }

        .history-table .badge {
            border-radius: 12px;
            padding: 5px 12px;
            font-size: 0.85rem;
        }

        .history-table .badge-success {
            background-color: #28a745 !important;
            color: #fff !important;
        }

        .history-table .badge-danger {
            background-color: #dc3545 !important;
            color: #fff !important;
        }

        .history-table .badge-warning {
            background-color: #ffc107 !important;
            color: #212529 !important;
        }

        @media (max-width: 767px) {
            body {
                background-color: #fff !important;
            }

            .history-container {
                margin: 0;
                border-radius: 0;
                padding: 15px;
                box-shadow: none;
                background-color: #fff;
            }
        }
    </style>

    <div class="history-container">
        <h3>Donation Request History</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
        <a href="{{ route('support.new_donation_request') }}" class="btn-new-request">
            <i class="fa fa-plus me-1"></i> Make a New Request
        </a>

        <div class="table-responsive">
            <table class="table align-middle mb-0 history-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Request Date</th>
                        <th>Reference Person</th>
                        <th>Status</th>
                        <th>Payment Status</th>
                        <th>Payment Type</th>
                        <th>Transaction No</th>
                        <th>Payment Date</th>
                        <th>Remark</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($requests as $request)
                        <tr>
                            <td>{{ $request->id }}</td>
                            <td>{{ \Carbon\Carbon::parse($request->created_at)->format('d M Y') }}</td>
                            <td>{{ number_format($request->amount, 2) }}</td>
                            <td>{{ $request->person ?? '-' }}</td>
                            @php
                                $status = $request->status;
                                $badgeClass = match ($status) {
                                    'approved' => 'success',
                                    'rejected' => 'danger',
                                    default => 'warning',
                                };
                            @endphp
                            <td>
                                <span class="badge badge-{{ $badgeClass }}">{{ ucfirst($status) }}</span>
                            </td>

                            {{-- Payment Status --}}
                            @php
                                $paymentStatus = $request->payment_status;
                                $paymentBadgeClass = $paymentStatus === 'paid' ? 'success' : 'warning';
                            @endphp
                            <td>
                                <span class="badge badge-{{ $paymentBadgeClass }}">{{ ucfirst($paymentStatus) }}</span>
                            </td>

                            <td>{{ ucfirst(str_replace('_', ' ', $request->payment_type ?? '-')) }}</td>
                            <td>{{ $request->transaction_no ?? '-' }}</td>
                            <td> {{ \Carbon\Carbon::parse($request->payment_date)->format('d M Y') }}</td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="12" class="text-center text-muted py-4">No Donation Requests Found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection