@extends('layouts.membership')

@section('title', 'Donations - The LaLiT Loyalty')

@section('content')
<div class="container px-4 py-5">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="fw-bold mb-0" style="color: #212322; font-size: 2rem;">All Donations</h2>
        </div>
    </div>

    <!-- Donations Grid -->
    <div class="row g-4">
        <!-- Donation Card 1 -->
        <div class="col-xl-3 col-lg-4 col-md-6 col-12">
            <div class="card donation-card h-100 border-0 shadow-sm">
                <div class="position-relative">
                    <img src="{{ asset('assets/images/donation1.jpg') }}" 
                         class="card-img-top donation-image" 
                         alt="Agewell Foundation Food Distribution">
                    
                </div>
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-3" style="color: #212322;">Agewell Foundation-AGEF180503</h5>
                    
                    <div class="mb-3">
                        <p class="text-muted mb-2"><strong>Donation Details:</strong></p>
                        <p class="donation-description text-muted">
                            Distribution of Free Food Ration Packets among Destitute & Needy Elderly Agewell Foundation provides free food 
                            rations to elderly living in slums who lack access to nutritious meals. With your support, we can continue to provide essential food 
                            items like rice, dal, oil, sugar, and more to vulnerable seniors in need.
                        </p>
                    </div>

                    <div class="donation-points d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block">Donate Points:</small>
                            <span class="fw-bold text-warning fs-5">250</span>
                        </div>
                        <div class="text-end">
                            <small class="text-muted d-block">INR Value:</small>
                            <span class="fw-bold fs-5" style="color: #c6aa76;">200</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Donation Card 2 -->
        <div class="col-xl-3 col-lg-4 col-md-6 col-12">
            <div class="card donation-card h-100 border-0 shadow-sm">
                <div class="position-relative">
                    <img src="{{ asset('assets/images/donation1.jpg') }}" 
                         class="card-img-top donation-image" 
                         alt="Agewell Foundation Food Distribution">
                    
                </div>
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-3" style="color: #212322;">Agewell Foundation-AGEF180503</h5>
                    
                    <div class="mb-3">
                        <p class="text-muted mb-2"><strong>Donation Details:</strong></p>
                        <p class="donation-description text-muted">
                            Distribution of Free Food Ration Packets among Destitute & Needy Elderly Agewell Foundation provides free food 
                            rations to elderly living in slums who lack access to nutritious meals. With your support, we can continue to provide essential food 
                            items like rice, dal, oil, sugar, and more to vulnerable seniors in need.
                        </p>
                    </div>

                    <div class="donation-points d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block">Donate Points:</small>
                            <span class="fw-bold text-warning fs-5">625</span>
                        </div>
                        <div class="text-end">
                            <small class="text-muted d-block">INR Value:</small>
                            <span class="fw-bold fs-5" style="color: #c6aa76;">500</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Donation Card 3 -->
        <div class="col-xl-3 col-lg-4 col-md-6 col-12">
            <div class="card donation-card h-100 border-0 shadow-sm">
                <div class="position-relative">
                    <img src="{{ asset('assets/images/donation1.jpg') }}" 
                         class="card-img-top donation-image" 
                         alt="Agewell Foundation Food Distribution">
                    
                </div>
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-3" style="color: #212322;">Agewell Foundation-AGEF180503</h5>
                    
                    <div class="mb-3">
                        <p class="text-muted mb-2"><strong>Donation Details:</strong></p>
                        <p class="donation-description text-muted">
                            Distribution of Free Food Ration Packets among Destitute & Needy Elderly Agewell Foundation provides free food 
                            rations to elderly living in slums who lack access to nutritious meals. With your support, we can continue to provide essential food 
                            items like rice, dal, oil, sugar, and more to vulnerable seniors in need.
                        </p>
                    </div>

                    <div class="donation-points d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block">Donate Points:</small>
                            <span class="fw-bold text-warning fs-5">1250</span>
                        </div>
                        <div class="text-end">
                            <small class="text-muted d-block">INR Value:</small>
                            <span class="fw-bold fs-5" style="color: #c6aa76;">1000</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Donation Card 4 -->
        <div class="col-xl-3 col-lg-4 col-md-6 col-12">
            <div class="card donation-card h-100 border-0 shadow-sm">
                <div class="position-relative">
                    <img src="{{ asset('assets/images/donation1.jpg') }}" 
                         class="card-img-top donation-image" 
                         alt="Agewell Foundation Food Distribution">
                    
                </div>
                <div class="card-body p-4">
                    <h5 class="card-title fw-bold mb-3" style="color: #212322;">Agewell Foundation-AGEF180503</h5>
                    
                    <div class="mb-3">
                        <p class="text-muted mb-2"><strong>Donation Details:</strong></p>
                        <p class="donation-description text-muted">
                            Distribution of Free Food Ration Packets among Destitute & Needy Elderly Agewell Foundation provides free food 
                            rations to elderly living in slums who lack access to nutritious meals. With your support, we can continue to provide essential food 
                            items like rice, dal, oil, sugar, and more to vulnerable seniors in need.
                        </p>
                    </div>

                    <div class="donation-points d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted d-block">Donate Points:</small>
                            <span class="fw-bold text-warning fs-5">875</span>
                        </div>
                        <div class="text-end">
                            <small class="text-muted d-block">INR Value:</small>
                            <span class="fw-bold fs-5" style="color: #c6aa76;">700</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Additional donation cards can be added here following the same pattern -->
        <!-- You can duplicate the above structure for more donation items -->
        
    </div>
</div>

<style>
    .donation-card {
        transition: all 0.3s ease;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #e0e0e0 !important;
    }
    
    .donation-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    }
    
    .donation-image {
        height: 200px;
        object-fit: cover;
        width: 100%;
    }
    
    .donation-overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 8px;
        padding: 5px;
    }
    
    .charity-logo img {
        height: 30px;
        width: auto;
        max-width: 80px;
    }
    
    .donation-description {
        font-size: 0.9rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .donation-points {
        border-top: 1px solid #eee;
        padding-top: 15px;
    }
    
    @media (max-width: 768px) {
        .donation-image {
            height: 180px;
        }
        
        .card-body {
            padding: 1rem !important;
        }
        
        .donation-description {
            -webkit-line-clamp: 3;
        }
    }
    
    @media (max-width: 576px) {
        .donation-image {
            height: 160px;
        }
    }
</style>
@endsection