@extends('website.layouts.app')

@section('content')

    <style>
        .card-hover:hover {
            box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.15) !important;
            transform: translateY(-5px);
            transition: all 0.3s ease-in-out;
        }
    </style>

    @include('website.layouts.title_section')

    <section class="py-5 dashboard-data">
        <div class="container py-5">
            
            <div class="row g-4">
                <!-- Membership Info -->
                <div class="col-md-4">
                    <div class="card card-hover border-0 shadow-sm bg-light">
                        <div class="card-body text-center">
                            <i class="bi bi-person-badge text-primary fs-1"></i>
                            <h5 class="mt-3">Membership</h5>
                            <p class="mb-1"><strong>Plan:</strong> {{ $user->membership_plan ?? 'Free' }}</p>
                            <p class="mb-1"><strong>Status:</strong> {{ $user->membership_status ?? 'Inactive' }}</p>
                            <p class="mb-1"><strong>Renewal:</strong> {{ $user->next_renewal_date ?? 'N/A' }}</p>
                        </div>
                    </div>
                </div>

                <!-- Contributions -->
                <div class="col-md-4">
                    <div class="card card-hover border-0 shadow-sm bg-light">
                        <div class="card-body text-center">
                            <i class="bi bi-currency-rupee text-success fs-1"></i>
                            <h5 class="mt-3">My Donations</h5>
                            <p><strong>Total Donated:</strong> ₹{{ $user->total_donations ?? '0.00' }}</p>
                            <a href="{{ route('dashboard.history') }}" class="btn btn-outline-success btn-sm rounded-pill">View History</a>
                        </div>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="col-md-4">
                    <div class="card card-hover border-0 shadow-sm bg-light">
                        <div class="card-body text-center">
                            <i class="bi bi-lightbulb text-warning fs-1"></i>
                            <h5 class="mt-3">Quick Links</h5>
                            <a href="{{ route('products') }}" class="d-block mb-2 text-decoration-none"><i class="bi bi-bag me-1"></i> Shop</a>
                            <a href="{{ route('gallery') }}" class="d-block mb-2 text-decoration-none"><i class="bi bi-image me-1"></i> Gallery</a>
                            <a href="{{ route('donation') }}" class="d-block mb-2 text-decoration-none"><i class="bi bi-heart me-1"></i> Donate Now</a>
                            <a href="{{ route('contact') }}" class="d-block text-decoration-none"><i class="bi bi-telephone me-1"></i> Contact</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Optional: Latest Campaigns or Quote -->
            <div class="mt-5">
                <div class="alert alert-info shadow-sm">
                    <strong>Spiritual Thought:</strong> <em>“The soul is eternal. It neither dies nor is born.” – Bhagavad Gita 2.20</em>
                </div>
            </div>
        </div>
    </section>

    <div class="container py-4">
        <!-- Info Cards -->
        <section class="info-cards-section mb-4 pb-2">
            <div class="row g-3">
                <div class="col-lg-3 col-sm-6">
                    <div
                        class="info-box bg-primary border-bottom border-3 border-primary-subtle text-white rounded-3 p-3">
                        <div class="value fs-4 fw-bold lh-sm">₹5,42,300</div>
                        <div class="label fs-6 fw-light">Total Donations</div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="info-box bg-info border-bottom border-3 border-info-subtle text-white rounded-3 p-3">
                        <div class="value fs-4 fw-bold lh-sm">145</div>
                        <div class="label fs-6 fw-light">Cows Rescued</div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div
                        class="info-box bg-success border-bottom border-3 border-success-subtle text-white rounded-3 p-3">
                        <div class="value fs-4 fw-bold lh-sm">65</div>
                        <div class="label fs-6 fw-light">Volunteers</div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div
                        class="info-box bg-danger border-bottom border-3 border-danger-subtle text-white rounded-3 p-3">
                        <div class="value fs-4 fw-bold lh-sm">12</div>
                        <div class="label fs-6 fw-light">Shelters Operated</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Charts Section (Placeholders) -->
        <section class="mb-4 pb-2">
            <div class="row g-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Donation Trends</h5>
                            <canvas id="donationChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Rescue Locations</h5>
                            <canvas id="rescueMap"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Recent Donation -->
        <section class="mb-4 pb-2">
            <div class="fs-4 fw-bold text-black lh-sm mb-3">Recent Donations -</div>
            <div class="bg-white rounded-3 p-3 table-responsive">
                <div class="table-wrapper overflow-auto" style="min-width: 1000px;">
                    <div class="header-content mb-2 px-3">
                        <div class="text-black fw-bold row flex-nowrap g-2">
                            <div class="col-1">Sr. No</div>
                            <div class="col">Donor</div>
                            <div class="col">Email</div>
                            <div class="col">Amount (₹)</div>
                            <div class="col">Campaign</div>
                            <div class="col">Date</div>
                        </div>
                    </div>

                    <div class="d-flex flex-column gap-2 overflow-auto" style="max-height: 500px;">
                        <div class="bg-secondary bg-opacity-10 rounded-3 p-3">
                            <div class="row flex-nowrap g-2">
                                <div class="col-1">1</div>
                                <div class="col">Amit Sharma</div>
                                <div class="col">amit@email.com</div>
                                <div class="col">₹2,000</div>
                                <div class="col">Medical Aid</div>
                                <div class="col">2025-07-10</div>
                            </div>
                        </div>
                        <div class="bg-secondary bg-opacity-10 rounded-3 p-3">
                            <div class="row flex-nowrap g-2">
                                <div class="col-1">2</div>
                                <div class="col">Seema Verma</div>
                                <div class="col">seema@email.com</div>
                                <div class="col">₹5,000</div>
                                <div class="col">Fodder Supply</div>
                                <div class="col">2025-07-09</div>
                            </div>
                        </div>
                        <div class="bg-secondary bg-opacity-10 rounded-3 p-3">
                            <div class="row flex-nowrap g-2">
                                <div class="col-1">3</div>
                                <div class="col">Ravi Khanna</div>
                                <div class="col">ravi@email.com</div>
                                <div class="col">₹1,200</div>
                                <div class="col">Shelter Expansion</div>
                                <div class="col">2025-07-08</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-4 pb-2">
            <div class="fs-4 fw-bold text-black lh-sm mb-3">Volunteer Activities -</div>
            <div class="bg-white rounded-3 p-3 table-responsive">
                <ul class="list-group">
                    <li class="list-group-item">Neha visited Jaipur shelter, checked 22 cows.</li>
                    <li class="list-group-item">Rohit conducted first-aid training for 15 volunteers.</li>
                    <li class="list-group-item">Grass delivery to Lucknow shelter completed.</li>
                </ul>
            </div>
        </section>

        <!-- Alerts Section -->
        <section class="pb-2">
            <div class="fs-4 fw-bold text-black lh-sm mb-3">Alerts & Notices -</div>
            <div class="alert alert-danger">
                <strong>Urgent:</strong> Immediate vet required at Varanasi shelter (3 cows injured).
            </div>
            <div class="alert alert-info">
                <strong>Reminder:</strong> Volunteer meet-up on 16th July 2025, 10:00 AM.
            </div>
        </section>
    </div>
@endsection