@extends('frontend.organization.organization_layouts')
@section('member-content')
    <style>
        /* Global box-sizing */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        .member-dashboard {
            /* max-width: 900px; */
            margin: 2rem auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 0 2rem;
        }

        .welcome-header {
            font-size: 2rem;
            font-weight: 700;
            color: #267bbd;
            margin-bottom: 2rem;
            text-align: center;
        }

        .stats-grid {
            display: flex;
            gap: 1.25rem;
            flex-wrap: wrap;
            margin-bottom: 2.5rem;
            justify-content: center;
        }

        .stat-card {
            flex: 1 1 200px;
            background-color: #f6fafd;
            border-radius: 1rem;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            padding: 1.25rem 1.25rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: default;
            min-width: 180px;
        }

        .stat-card:hover {
            transform: translateY(-0.3rem);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .stat-number {
            font-size: 2.8rem;
            font-weight: 700;
            color: #267bbd;
            margin-bottom: 0.3rem;
        }

        .stat-label {
            font-size: 1.1rem;
            font-weight: 600;
            color: #555;
        }

        .quick-actions {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 2.5rem;
            justify-content: center;
        }

        .btn-action {
            flex: 1 1 200px;
            padding: 0.9rem 1.25rem;
            border-radius: 0.625rem;
            background-color: #267bbd;
            color: #fff;
            font-weight: 600;
            text-align: center;
            text-decoration: none;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            min-width: 180px;
        }

        .btn-action:hover {
            background-color: #1f5e88;
            color: #fff;
            bbox-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .recent-activity {
            background: #fff;
            border-radius: 1rem;
            padding: 1.25rem;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            max-height: 300px;
            overflow-y: auto;
        }

        .recent-activity h4 {
            margin-bottom: 1.25rem;
            color: #267bbd;
            font-weight: 700;
            text-align: center;
        }

        .activity-list {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        .activity-list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #eee;
            color: #444;
            font-size: 0.95rem;
        }

        /* Responsive for smaller devices */
        @media (max-width: 600px) {

            .stats-grid,
            .quick-actions {
                flex-direction: column;
                align-items: center;
            }

            .stat-card,
            .btn-action {
                flex: 1 1 100%;
                max-width: 100%;
                min-width: auto;
            }

            .welcome-header {
                font-size: 1.8rem;
                margin-bottom: 1.25rem;
            }

            .activity-list li {
                padding: 1rem 0;
            }
        }
    </style>

    <div class="member-dashboard">
        <div class="welcome-header">Welcome, {{ auth()->user()->name }}!</div>

        <div class="stats-grid row">
            <div class="stat-card col-12 col-sm-6 col-md-3">
                <div class="stat-number">12</div>
                <div class="stat-label">Total Commeety</div>
            </div>
            <div class="stat-card col-12 col-sm-6 col-md-3">
                <div class="stat-number">8</div>
                <div class="stat-label">Total Member</div>
            </div>
            <div class="stat-card col-12 col-sm-6 col-md-3">
                <div class="stat-number">5</div>
                <div class="stat-label">Donation Request</div>
            </div>
            <div class="stat-card col-12 col-sm-6 col-md-3">
                <div class="stat-number">3</div>
                <div class="stat-label">Events Attended</div>
            </div>
        </div>
        {{--      <div class="quick-actions d-flex flex-wrap gap-3 row">
            <a href="#" class="btn-action flex-fill col-12 col-sm-6 col-md-3">View Profile</a>
            <a href="#" class="btn-action flex-fill col-12 col-sm-6 col-md-3">Make a Donation</a>
            <a href="#" class="btn-action flex-fill col-12 col-sm-6 col-md-3">View Invoices</a>
        </div> --}}
        <div class="recent-activity">
            <h4>Recent Activity</h4>
            <ul class="activity-list">
                <li>Invoice #1234 marked as paid</li>
                <li>Donation of $50 processed</li>
                <li>Registered for Event: Annual Meetup 2025</li>
                <li>Profile updated</li>
                <li>New message from admin</li>
            </ul>
        </div>
    </div>
@endsection