{{--
    User Profile - Professional Bootstrap Design
    Professional Profile Management Page
    
    @author David Valera Melendez <david@valera-melendez.de>
    @created 2025-08-09
    @location Made in Germany 🇩🇪
--}}

@extends('layouts.app')

@section('title', 'My Profile - Professional Resume Builder')
@section('page_class', 'profile-page')

@section('content')
<div class="profile-container">
    <!-- Profile Header Section -->
    <section class="profile-header">
        <div class="card profile-header-card">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <div class="profile-avatar-container">
                            @if($user->avatar)
                                <img src="{{ Storage::url($user->avatar) }}" alt="{{ $user->name }}" class="profile-avatar">
                            @else
                                <div class="profile-avatar-placeholder">
                                    <i class="bi bi-person-circle"></i>
                                </div>
                            @endif
                            <div class="avatar-edit-badge">
                                <a href="{{ route('profile.edit') }}" class="btn-edit-avatar" title="Edit Avatar">
                                    <i class="bi bi-camera"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <h1 class="profile-name">{{ $user->name }}</h1>
                        <p class="profile-email">{{ $user->email }}</p>
                        @if($user->phone)
                            <p class="profile-phone">
                                <i class="bi bi-telephone"></i>
                                {{ $user->phone }}
                            </p>
                        @endif
                        <div class="profile-actions">
                            <a href="{{ route('profile.edit') }}" class="btn primary-cta">
                                <i class="bi bi-pencil-square"></i>
                                Edit Profile
                            </a>
                            <a href="{{ route('account.settings') }}" class="btn secondary-cta">
                                <i class="bi bi-gear"></i>
                                Account Settings
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Profile Information Section -->
    <section class="profile-info">
        <div class="row g-4">
            <!-- Personal Information Card -->
            <div class="col-lg-6">
                <div class="card info-card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-person"></i>
                            Personal Information
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="info-list">
                            <div class="info-item">
                                <label class="info-label">Full Name</label>
                                <span class="info-value">{{ $user->name }}</span>
                            </div>
                            <div class="info-item">
                                <label class="info-label">Email Address</label>
                                <span class="info-value">{{ $user->email }}</span>
                            </div>
                            @if($user->phone)
                                <div class="info-item">
                                    <label class="info-label">Phone Number</label>
                                    <span class="info-value">{{ $user->phone }}</span>
                                </div>
                            @endif
                            <div class="info-item">
                                <label class="info-label">Member Since</label>
                                <span class="info-value">{{ $user->created_at->format('F j, Y') }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Account Status Card -->
            <div class="col-lg-6">
                <div class="card info-card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-shield-check"></i>
                            Account Status
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="status-list">
                            <div class="status-item">
                                <div class="status-indicator verified">
                                    <i class="bi bi-check-circle-fill"></i>
                                </div>
                                <div class="status-content">
                                    <span class="status-title">Email Verified</span>
                                    <span class="status-description">Your email address is verified</span>
                                </div>
                            </div>
                            <div class="status-item">
                                <div class="status-indicator active">
                                    <i class="bi bi-circle-fill"></i>
                                </div>
                                <div class="status-content">
                                    <span class="status-title">Account Active</span>
                                    <span class="status-description">Your account is in good standing</span>
                                </div>
                            </div>
                            <div class="status-item">
                                <div class="status-indicator">
                                    <i class="bi bi-clock"></i>
                                </div>
                                <div class="status-content">
                                    <span class="status-title">Last Login</span>
                                    <span class="status-description">{{ $user->updated_at->diffForHumans() }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Biography Section -->
    @if($user->bio)
        <section class="profile-bio">
            <div class="card bio-card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="bi bi-journal-text"></i>
                        About Me
                    </h5>
                </div>
                <div class="card-body">
                    <p class="bio-text">{{ $user->bio }}</p>
                </div>
            </div>
        </section>
    @endif

    <!-- Recent Activity Section -->
    <section class="profile-activity">
        <div class="card activity-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="bi bi-activity"></i>
                    Recent Activity
                </h5>
                <a href="{{ route('resume-builder.index') }}" class="btn btn-outline-primary btn-sm">
                    View All Resumes
                </a>
            </div>
            <div class="card-body">
                @if($user->resumes && $user->resumes->count() > 0)
                    <div class="activity-list">
                        @foreach($user->resumes->take(5) as $resume)
                            <div class="activity-item">
                                <div class="activity-icon">
                                    <i class="bi bi-file-earmark-text"></i>
                                </div>
                                <div class="activity-content">
                                    <span class="activity-title">{{ $resume->title ?? 'Untitled Resume' }}</span>
                                    <span class="activity-description">
                                        Updated {{ $resume->updated_at->diffForHumans() }}
                                    </span>
                                </div>
                                <div class="activity-actions">
                                    <a href="{{ route('resume-builder.edit', $resume) }}" class="btn btn-sm btn-outline-primary">
                                        Edit
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="bi bi-file-earmark-plus"></i>
                        </div>
                        <h6 class="empty-title">No Resumes Yet</h6>
                        <p class="empty-description">Start building your professional resume today</p>
                        <a href="{{ route('resume-builder.create') }}" class="btn primary-cta">
                            <i class="bi bi-plus-circle"></i>
                            Create Your First Resume
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </section>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add smooth animations
        const cards = document.querySelectorAll('.card');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in');
                }
            });
        });
        
        cards.forEach(card => {
            observer.observe(card);
        });
    });
</script>
@endpush
@endsection