@extends('layouts.user')

@section('title', 'Athlete Dashboard')

@section('content')
@php
    // Calculate real statistics
    $totalDocs = \App\Models\PortalUserDoc::where('portal_user_id', $user->id)->count();
    $uploadedDocs = \App\Models\PortalUserDoc::where('portal_user_id', $user->id)
        ->whereNotNull('document_path')->count();
    $stateChangeRequests = \App\Models\StateChangeRequest::where('user_id', $user->id)->count();
    $pendingStateChanges = \App\Models\StateChangeRequest::where('user_id', $user->id)
        ->where('status', 'pending')->count();
    $profileFields = ['fname', 'lname', 'email', 'mobile', 'dob', 'gender', 'address', 'pincode'];
    $filledFields = 0;
    foreach($profileFields as $field) {
        if(!empty($user->$field)) $filledFields++;
    }
    $profileCompletion = round(($filledFields / count($profileFields)) * 100);
    $membershipValid = false;
    $daysUntilExpiry = 0;
    if($user->valid_up_to) {
        $expiryDate = \Carbon\Carbon::parse($user->valid_up_to);
        $daysUntilExpiry = now()->diffInDays($expiryDate, false);
        $membershipValid = $daysUntilExpiry > 0;
    }
@endphp

<div class="container" style="height: calc(100vh - 2.2rem); overflow-y: auto; overflow-x: hidden; padding: 1rem;">
    <div class="pb-5">
        <!-- Welcome Section -->
        <div class="row g-4 mb-4 ">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h2 class="mb-2">Athlete Dashboard</h2>
                                <p class="text-body-tertiary mb-0">
                                    Welcome back, {{ $user->fname ?? $user->name }}! Ready to train hard and compete?
                                </p>
                            </div>
                            <div class="text-end">
                                <span data-feather="activity" style="width: 48px; height: 48px;" class="text-primary"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row g-3 mb-4">
            <div class="col-sm-6 col-md-4">
                <div class="card h-100 border-0 bg-primary-subtle">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="text-body-tertiary fs-10 mb-2">Active Roles</h6>
                                <h3 class="text-primary mb-0">{{ $user->activeRoles->count() }}</h3>
                                <p class="fs-9 text-body-tertiary mb-0 mt-1">Current: Athlete</p>
                            </div>
                            <span data-feather="users" style="width: 32px; height: 32px;" class="text-primary"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 d-none">
                <div class="card h-100 border-0 bg-success-subtle">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="text-body-tertiary fs-10 mb-2">Documents</h6>
                                <h3 class="text-success mb-0">{{ $uploadedDocs }}/{{ $totalDocs }}</h3>
                                <p class="fs-9 text-body-tertiary mb-0 mt-1">{{ $totalDocs > 0 ? round(($uploadedDocs/$totalDocs)*100) : 0 }}% uploaded</p>
                            </div>
                            <span data-feather="file-text" style="width: 32px; height: 32px;" class="text-success"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="card h-100 border-0 bg-warning-subtle">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="text-body-tertiary fs-10 mb-2">State Changes</h6>
                                <h3 class="text-warning mb-0">{{ $pendingStateChanges }}/{{ $stateChangeRequests }}</h3>
                                <p class="fs-9 text-body-tertiary mb-0 mt-1">{{ $pendingStateChanges }} pending</p>
                            </div>
                            <span data-feather="shuffle" style="width: 32px; height: 32px;" class="text-warning"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="card h-100 border-0 bg-info-subtle">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="text-body-tertiary fs-10 mb-2">Profile</h6>
                                <h3 class="text-info mb-0">{{ $profileCompletion }}%</h3>
                                <p class="fs-9 text-body-tertiary mb-0 mt-1">Completed</p>
                            </div>
                            <span data-feather="pie-chart" style="width: 32px; height: 32px;" class="text-info"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="row g-3 mb-4">
            <div class="col-md-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <span data-feather="calendar" style="width: 48px; height: 48px;" class="text-primary mb-3"></span>
                        <h6 class="mb-2">Events</h6>
                        <p class="text-body-tertiary fs-9 mb-3">Browse and register for competitions</p>
                        <a href="{{ route('user.events', ['role' => 'athlete']) }}" class="btn btn-phoenix-primary btn-sm">View Events</a>
                    </div>
                </div>
            </div>
            {{-- DISABLED: Black Belt Certificate Card (Route Disabled) --}}
            {{--
            <div class="col-md-3 d-none">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <span data-feather="award" style="width: 48px; height: 48px;" class="text-success mb-3"></span>
                        <h6 class="mb-2">Certificates</h6>
                        <p class="text-body-tertiary fs-9 mb-3">Access your achievements</p>
                        <a href="{{ route('user.certificates.black_belt', ['role' => 'athlete']) }}" class="btn btn-phoenix-success btn-sm">View Certificates</a>
                    </div>
                </div>
            </div>
            --}}
            <div class="col-md-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <span data-feather="user" style="width: 48px; height: 48px;" class="text-info mb-3"></span>
                        <h6 class="mb-2">Profile</h6>
                        <p class="text-body-tertiary fs-9 mb-3">{{ $profileCompletion }}% profile completed</p>
                        <a href="{{ route('user.profile', ['role' => 'athlete']) }}" class="btn btn-phoenix-info btn-sm">Edit Profile</a>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card h-100">
                    <div class="card-body text-center">
                        <span data-feather="file-text" style="width: 48px; height: 48px;" class="text-warning mb-3"></span>
                        <h6 class="mb-2">Documents</h6>
                        <p class="text-body-tertiary fs-9 mb-3">{{ $uploadedDocs }} of {{ $totalDocs }} uploaded</p>
                        <a href="{{ route('user.documents', ['role' => 'athlete']) }}" class="btn btn-phoenix-warning btn-sm">View Documents</a>
                    </div>
                </div>
            </div>
        </div>

    <!-- Account Information & Recent Activity -->
    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-body-highlight">
                    <h6 class="mb-0">
                        <span data-feather="info" style="width: 16px; height: 16px;" class="me-2"></span>
                        Account Information
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <p class="text-body-tertiary fs-10 mb-1">Full Name</p>
                            <p class="fw-semibold mb-0 fs-9">{{ $user->fname }} {{ $user->lname }}</p>
                        </div>
                        <div class="col-6">
                            <p class="text-body-tertiary fs-10 mb-1">Email</p>
                            <p class="fw-semibold mb-0 fs-9">{{ $user->email }}</p>
                        </div>
                        <div class="col-6">
                            <p class="text-body-tertiary fs-10 mb-1">Unique ID</p>
                            <p class="fw-semibold mb-0 fs-9">{{ $user->u_id ?? 'Not assigned' }}</p>
                        </div>
                        <div class="col-6">
                            <p class="text-body-tertiary fs-10 mb-1">Mobile</p>
                            <p class="fw-semibold mb-0 fs-9">{{ $user->mobile ?? 'Not provided' }}</p>
                        </div>
                        <div class="col-6">
                            <p class="text-body-tertiary fs-10 mb-1">Status</p>
                            <p class="mb-0">
                                @if($user->approved == 1)
                                    <span class="badge badge-phoenix badge-phoenix-success fs-10">Approved</span>
                                @else
                                    <span class="badge badge-phoenix badge-phoenix-warning fs-10">Pending</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-6">
                            <p class="text-body-tertiary fs-10 mb-1">Membership</p>
                            <p class="mb-0">
                                @if($membershipValid)
                                    <span class="badge badge-phoenix badge-phoenix-success fs-10">Valid ({{ $daysUntilExpiry }}d)</span>
                                @else
                                    <span class="badge badge-phoenix badge-phoenix-danger fs-10">Expired</span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-body-highlight">
                    <h6 class="mb-0">
                        <span data-feather="activity" style="width: 16px; height: 16px;" class="me-2"></span>
                        Quick Stats
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar-s me-2">
                                <div class="avatar-title bg-primary-subtle text-primary rounded">
                                    <span data-feather="users" style="width: 16px; height: 16px;"></span>
                                </div>
                            </div>
                            <div>
                                <p class="fs-9 text-body-tertiary mb-0">Active Roles</p>
                                <h6 class="mb-0">{{ $user->activeRoles->count() }}</h6>
                            </div>
                        </div>
                        <a href="{{ route('user.roles.index', ['role' => 'athlete']) }}" class="btn btn-link btn-sm p-0 fs-10">Manage →</a>
                    </div>
                    
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar-s me-2">
                                <div class="avatar-title bg-success-subtle text-success rounded">
                                    <span data-feather="file" style="width: 16px; height: 16px;"></span>
                                </div>
                            </div>
                            <div>
                                <p class="fs-9 text-body-tertiary mb-0">Documents Uploaded</p>
                                <h6 class="mb-0">{{ $uploadedDocs }} / {{ $totalDocs }}</h6>
                            </div>
                        </div>
                        <a href="{{ route('user.documents', ['role' => 'athlete']) }}" class="btn btn-link btn-sm p-0 fs-10">Upload →</a>
                    </div>
                    
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <div class="d-flex align-items-center">
                            <div class="avatar-s me-2">
                                <div class="avatar-title bg-warning-subtle text-warning rounded">
                                    <span data-feather="shuffle" style="width: 16px; height: 16px;"></span>
                                </div>
                            </div>
                            <div>
                                <p class="fs-9 text-body-tertiary mb-0">State Changes</p>
                                <h6 class="mb-0">{{ $pendingStateChanges }} Pending</h6>
                            </div>
                        </div>
                        <a href="{{ route('user.state-change.request', ['role' => 'athlete']) }}" class="btn btn-link btn-sm p-0 fs-10">Request →</a>
                    </div>
                    
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="avatar-s me-2">
                                <div class="avatar-title bg-info-subtle text-info rounded">
                                    <span data-feather="pie-chart" style="width: 16px; height: 16px;"></span>
                                </div>
                            </div>
                            <div>
                                <p class="fs-9 text-body-tertiary mb-0">Profile Completion</p>
                                <h6 class="mb-0">{{ $profileCompletion }}%</h6>
                            </div>
                        </div>
                        <div class="progress" style="width: 80px; height: 6px;">
                            <div class="progress-bar bg-info" role="progressbar" style="width: {{ $profileCompletion }}%" aria-valuenow="{{ $profileCompletion }}" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
   
</div>
@endsection