@extends('layouts.user')

@section('title', 'My Documents')

@section('content')
@php
    // Fetch user documents
    $personalDocs = \App\Models\PortalUserDoc::where('portal_user_id', $user->id)->get();
    
    // Fetch professional documents from all user profiles
    $professionalDocs = \App\Models\PortalUserProfileDoc::whereHas('profile', function($q) use ($user) {
        $q->where('user_id', $user->id);
    })->with('profile.roleProfile')->get();
    
    $totalPersonal = $personalDocs->count();
    $totalProfessional = $professionalDocs->count();
    $totalDocs = $totalPersonal + $totalProfessional;
@endphp

<div class="content" style="height: calc(100vh - 6.2rem); overflow-y: auto; overflow-x: hidden;">
    <div class="pb-3">
        <div class="row g-4">
            <div class="col-12">
                <div class="mb-6">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-2">My Documents</h2>
                            <h5 class="text-body-tertiary fw-semibold">Manage all your personal and professional documents</h5>
                        </div>
                        <a href="{{ route('user.dashboard', ['role' => $currentRoleSlug]) }}" class="btn btn-phoenix-secondary">
                            <span class="me-2" data-feather="arrow-left"></span>Back to Dashboard
                        </a>
                    </div>
                </div>

                <!-- Document Statistics -->
                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <div class="card h-100 border-0 bg-primary-subtle">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="avatar avatar-xl">
                                            <span class="me-2" data-feather="folder" style="width: 32px; height: 32px;"></span>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-0 text-muted fs-10">Total Documents</h6>
                                        <h3 class="mb-0 text-primary">{{ $totalDocs }}</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card h-100 border-0 bg-info-subtle">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="avatar avatar-xl">
                                            <span class="me-2" data-feather="file-text" style="width: 32px; height: 32px;"></span>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-0 text-muted fs-10">Personal Documents</h6>
                                        <h3 class="mb-0 text-info">{{ $totalPersonal }}</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card h-100 border-0 bg-success-subtle">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <div class="avatar avatar-xl">
                                            <span class="me-2" data-feather="award" style="width: 32px; height: 32px;"></span>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 ms-3">
                                        <h6 class="mb-0 text-muted fs-10">Professional Documents</h6>
                                        <h3 class="mb-0 text-success">{{ $totalProfessional }}</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Document Categories -->
                <div class="row g-3">
                    <!-- Personal Documents Card -->
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-body-highlight">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="mb-0">
                                        <span data-feather="file-text" class="me-2"></span>Personal Documents
                                    </h5>
                                    <span class="badge badge-phoenix badge-phoenix-info">{{ $totalPersonal }}</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <p class="text-body-tertiary mb-3">Identity proof and personal identification documents</p>
                                <ul class="list-unstyled mb-3">
                                    <li class="mb-2">
                                        <span data-feather="check-circle" class="text-success me-2" style="width: 16px; height: 16px;"></span>
                                        Aadhaar Card, PAN Card, Passport
                                    </li>
                                    <li class="mb-2">
                                        <span data-feather="check-circle" class="text-success me-2" style="width: 16px; height: 16px;"></span>
                                        Driving License, Voter ID
                                    </li>
                                    <li class="mb-2">
                                        <span data-feather="check-circle" class="text-success me-2" style="width: 16px; height: 16px;"></span>
                                        Birth Certificate & Photos
                                    </li>
                                </ul>
                                <a href="{{ route('user.documents.personal', ['role' => $currentRoleSlug]) }}" class="btn btn-phoenix-info w-100">
                                    <span class="me-2" data-feather="eye"></span>View Personal Documents
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Professional Documents Card -->
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-body-highlight">
                                <div class="d-flex align-items-center justify-content-between">
                                    <h5 class="mb-0">
                                        <span data-feather="award" class="me-2"></span>Professional Documents
                                    </h5>
                                    <span class="badge badge-phoenix badge-phoenix-success">{{ $totalProfessional }}</span>
                                </div>
                            </div>
                            <div class="card-body">
                                <p class="text-body-tertiary mb-3">Belt certificates and role-specific professional documents</p>
                                <ul class="list-unstyled mb-3">
                                    <li class="mb-2">
                                        <span data-feather="check-circle" class="text-success me-2" style="width: 16px; height: 16px;"></span>
                                        IT Belt Certificates
                                    </li>
                                    <li class="mb-2">
                                        <span data-feather="check-circle" class="text-success me-2" style="width: 16px; height: 16px;"></span>
                                        Coach Certifications
                                    </li>
                                    <li class="mb-2">
                                        <span data-feather="check-circle" class="text-success me-2" style="width: 16px; height: 16px;"></span>
                                        Professional Licenses
                                    </li>
                                </ul>
                                <a href="{{ route('user.documents.professional', ['role' => $currentRoleSlug]) }}" class="btn btn-phoenix-success w-100">
                                    <span class="me-2" data-feather="eye"></span>View Professional Documents
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Upload Notice -->
                <div class="alert alert-phoenix-warning mt-4" role="alert">
                    <div class="d-flex align-items-start">
                        <span data-feather="info" class="me-2 mt-1"></span>
                        <div>
                            <strong>Document Management:</strong> To upload or update documents, please visit the specific document category pages. Personal documents can be managed during profile setup or through the Personal Documents section. Professional documents are uploaded when applying for specific roles.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection