@extends('layouts.dashboard')

@section('title', 'Membership Credentials | AICDS')

@section('dashboard_content')

@if($activeMembership)
    <!-- Digital Membership Card Component -->
    <div class="row justify-content-center mb-5">
        <div class="col-xl-8 col-lg-10">
            <div class="card border-0 rounded-5 shadow-lg text-white p-4 p-md-5 position-relative overflow-hidden" style="background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #415a77 100%);">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <span class="badge bg-primary text-uppercase px-3 py-2 fw-bold">AICDS Member Identity Card</span>
                        <div class="small text-white-50 mt-1">Association for Intelligent Computing and Data Science</div>
                    </div>
                    <div class="text-end">
                        <span class="badge bg-success px-3 py-2 text-uppercase fs-6">Active</span>
                    </div>
                </div>

                <div class="row align-items-center mb-4">
                    <div class="col-md-8">
                        <h2 class="text-white fw-bold mb-1">{{ $user->name }}</h2>
                        <div class="text-white-50 mb-2">{{ $user->designation ?? 'Member' }}</div>
                        <div class="text-white-50 small mb-3"><i class="icofont-institution me-1"></i> {{ $user->organization ?? 'Associated Professional' }}</div>
                        <div class="font-monospace fs-4 fw-bold text-warning letter-spacing-1">{{ $activeMembership->membership_number }}</div>
                    </div>
                    <div class="col-md-4 text-md-end mt-3 mt-md-0">
                        <div class="p-3 bg-white text-dark rounded-4 shadow-sm d-inline-block text-center" style="width: 110px;">
                            <i class="icofont-qr-code display-4 text-primary d-block"></i>
                            <span class="text-muted" style="font-size: 10px;">VERIFIED ID</span>
                        </div>
                    </div>
                </div>

                <div class="border-top border-white-50 pt-3 d-flex justify-content-between align-items-center flex-wrap gap-2 text-white-50 small">
                    <div>
                        <span>Valid From: <strong>{{ $activeMembership->start_date->format('d M Y') }}</strong></span>
                        @if($activeMembership->expiry_date)
                            <span class="ms-3">Valid Thru: <strong>{{ $activeMembership->expiry_date->format('d M Y') }}</strong></span>
                        @else
                            <span class="ms-3 text-warning"><strong>Lifetime Standing</strong></span>
                        @endif
                    </div>
                    <div>
                        <a href="{{ route('membership.verify') }}" class="text-white text-decoration-underline">Verify Online</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

<!-- Applications History -->
<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">Membership Applications Log</h5>
        <a href="{{ route('membership.apply') }}" class="btn btn-sm btn-outline-primary rounded-pill">Apply for New Tier</a>
    </div>

    @if($applications->count() > 0)
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Application Ref</th>
                        <th>Plan Applied</th>
                        <th>Submission Date</th>
                        <th>Status</th>
                        <th>Admin Notes</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($applications as $app)
                        <tr>
                            <td><code>{{ $app->application_number }}</code></td>
                            <td class="fw-semibold">{{ $app->plan->name }}</td>
                            <td>{{ $app->created_at->format('M d, Y') }}</td>
                            <td>
                                @php
                                    $badge = match($app->status) {
                                        'active', 'approved' => 'bg-success',
                                        'awaiting_payment' => 'bg-warning text-dark',
                                        'rejected' => 'bg-danger',
                                        default => 'bg-info',
                                    };
                                @endphp
                                <span class="badge {{ $badge }} text-uppercase">{{ str_replace('_', ' ', $app->status) }}</span>
                            </td>
                            <td class="small text-muted">{{ $app->admin_notes ?? 'Under routine verification.' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <p class="text-muted small mb-0">No past membership applications recorded.</p>
    @endif
</div>

@endsection