@extends('frontend.layouts.app')
@push('style')
    <style>
        .donation-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px 10px;
            background: transparent;
            min-height: 100vh;
        }

        .donation-title {
            font-size: 3rem;
            font-weight: 800;
            color: #4f46e5;
            text-align: center;
            margin-bottom: 0.5rem;
        }

        .donation-subtitle {
            text-align: center;
            color: #6b7280;
            font-size: 1.1rem;
            margin-bottom: 2.5rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .donation-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
        }

        .donation-card {
            background: #fff;
            border-radius: 24px;
            padding: 32px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: all 0.3s ease-in-out;
        }

        .donation-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
        }

        .donation-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .donation-name {
            font-size: 1.5rem;
            font-weight: 700;
            color: #111827;
        }

        .donation-status {
            font-size: 0.75rem;
            padding: 5px 12px;
            border-radius: 9999px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .donation-status.approved {
            background: #d1fae5;
            color: #065f46;
        }

        .donation-status.pending {
            background: #fef3c7;
            color: #92400e;
        }

        .donation-status.rejected {
            background: #fee2e2;
            color: #991b1b;
        }

        .donation-address {
            font-size: 0.9rem;
            color: #6b7280;
            margin-bottom: 0.75rem;
        }

        .donation-remark {
            font-style: italic;
            color: #4b5563;
            margin-bottom: 1rem;
            font-size: 0.95rem;
        }

        .donation-info {
            font-size: 0.95rem;
            color: #374151;
            margin-bottom: 2rem;
        }

        .button-row {
            display: flex;
            gap: 10px;
            justify-content: space-between;
        }

        .donate-button,
        .details-button {
            flex: 1;
            padding: 12px 16px;
            border-radius: 9999px;
            text-align: center;
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .donate-button {
            background: linear-gradient(90deg, #ec4899, #f59e0b);
            color: white;
        }

        .donate-button:hover {
            background: linear-gradient(90deg, #db2777, #d97706);
        }

        .details-button {
            background: linear-gradient(90deg, #3fdb31, #10b981);
            color: white;
        }

        .details-button:hover {
            background: linear-gradient(90deg, #16a34a, #0f766e);
        }

        .donation-empty {
            text-align: center;
            font-size: 1.2rem;
            color: #9ca3af;
            grid-column: span 3;
        }
    </style>
@endpush

@section('content')
    <div class="donation-container">
        <h2 class="donation-title">❤️ Make a Difference Today</h2>
        <p class="donation-subtitle">Choose a request and bring hope to someone in need. Every contribution counts.</p>
        @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="donation-grid">
            @forelse($donationRequests as $request)
                <div class="donation-card">
                    <div class="donation-card-header">
                        <h3 class="donation-name">{{ $request->name }}</h3>
                        <span class="donation-status {{ $request->status }}">{{ ucfirst($request->status) }}</span>
                    </div>

                    <p class="donation-address">📍 {{ $request->address }}</p>

                    @if ($request->remark)
                        <p class="donation-remark">“{{ Str::limit($request->remark, 100) }}”</p>
                    @endif

                    <div class="donation-info">
                        <p><strong>📞</strong> {{ $request->mobile }}</p>
                        @if ($request->email)
                            <p><strong>✉️</strong> {{ $request->email }}</p>
                        @endif
                    </div>

                    <div class="button-row">
                        <a href="{{ route('donation.donate', $request->request_no) }}" class="donate-button">🤝 Donate</a>
                        <a href="{{ route('donar.donation_request_profile', $request->request_no) }}"
                            class="details-button">🔍 Details</a>
                    </div>
                </div>
            @empty
                <div class="donation-empty">🚫 No donation requests available right now.</div>
            @endforelse
        </div>
    </div>
@endsection