@extends('layouts.dashboard')

@section('title', 'Member Dashboard | AICDS')

@section('dashboard_content')

<div class="row g-4 mb-4">
    <!-- Active Membership Card -->
    <div class="col-12">
        @if($activeMembership)
            <div class="card border-0 rounded-4 shadow-sm text-white overflow-hidden" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
                <div class="p-4 p-md-5">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="badge bg-white text-primary text-uppercase px-3 py-2 fw-bold">Official AICDS Credential</span>
                        <span class="badge bg-success fs-6 px-3 py-1 text-uppercase">Active Standing</span>
                    </div>

                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h3 class="text-white fw-bold mb-1">{{ $user->name }}</h3>
                            <p class="text-white-50 mb-3">{{ $activeMembership->plan->name }} ({{ ucfirst($activeMembership->category) }})</p>
                            <div class="fs-5 fw-bold text-white mb-2 font-monospace">{{ $activeMembership->membership_number }}</div>
                            <div class="small text-white-50">
                                <span>Valid From: {{ $activeMembership->start_date->format('M d, Y') }}</span>
                                @if($activeMembership->expiry_date)
                                    <span class="ms-3">Expires: {{ $activeMembership->expiry_date->format('M d, Y') }}</span>
                                @else
                                    <span class="ms-3 text-warning fw-semibold">Lifetime Senior Standing</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-4 text-md-end mt-4 mt-md-0">
                            <a href="{{ route('dashboard.membership') }}" class="btn btn-light fw-bold px-4 py-2 rounded-pill shadow-sm">View Digital ID Card</a>
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="card p-4 p-md-5 rounded-4 border bg-light shadow-sm">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h4 class="fw-bold mb-1">No Active Membership Enrolled</h4>
                        <p class="text-muted mb-0">Apply for a Student or Professional Membership to receive an official digital ID and conference concessions.</p>
                    </div>
                    <a href="{{ route('membership.apply') }}" class="default__button">Apply for Membership</a>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Quick Stat Counters -->
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="card p-4 border rounded-4 shadow-sm bg-white text-center">
            <i class="icofont-calendar fs-2 text-primary mb-2"></i>
            <h3 class="fw-bold mb-1">{{ $registrations->count() }}</h3>
            <span class="text-muted small">Registered Summits</span>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-4 border rounded-4 shadow-sm bg-white text-center">
            <i class="icofont-certificate fs-2 text-success mb-2"></i>
            <h3 class="fw-bold mb-1">{{ $certificates->count() }}</h3>
            <span class="text-muted small">Earned Certificates</span>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card p-4 border rounded-4 shadow-sm bg-white text-center">
            <i class="icofont-paper fs-2 text-warning mb-2"></i>
            <h3 class="fw-bold mb-1">{{ $applications->count() }}</h3>
            <span class="text-muted small">Submitted Applications</span>
        </div>
    </div>
</div>

<!-- Registered Events List -->
<div class="card p-4 border rounded-4 shadow-sm bg-white mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h5 class="fw-bold mb-0">My Registered Events</h5>
        <a href="{{ route('dashboard.events') }}" class="small text-primary text-decoration-none">View All</a>
    </div>

    @if($registrations->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Registration No</th>
                        <th>Event Title</th>
                        <th>Event Date</th>
                        <th>Mode</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($registrations as $reg)
                        <tr>
                            <td><code>{{ $reg->registration_number }}</code></td>
                            <td class="fw-semibold">{{ $reg->event->title }}</td>
                            <td>{{ $reg->event->start_date->format('M d, Y') }}</td>
                            <td><span class="badge bg-secondary text-uppercase">{{ $reg->event->mode }}</span></td>
                            <td><span class="badge bg-success-subtle text-success">{{ ucfirst($reg->status) }}</span></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p class="text-muted small mb-0">You have not registered for any upcoming events yet. <a href="{{ route('events.index') }}">Browse all summits here</a>.</p>
    @endif
</div>

@endsection