{{-- resources/views/users/show.blade.php --}}
@extends('layouts.app')

@section('css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
    /* User specific styles */
    .user-profile-img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .user-status-badge {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
        border-radius: 50px;
    }
    
    .user-info-card {
        transition: all 0.3s ease;
    }
    
    .user-info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    .info-label {
        font-weight: 600;
        color: #495057;
        font-size: 0.9rem;
    }
    
    .info-value {
        color: #212529;
        font-size: 1rem;
    }
</style>
@endsection

@push('pageTitle')
    {{ __('labels.view_user') }}
@endpush

@section('content')
@include('components.common.page-header', [
    'pageTitle' => __('labels.view_user'),
    'actionButton' => [
        'url' => route('users.index'),
        'text' => __('labels.back_to_users')
    ]
])

<div class="row">
    {{-- Left Column: Profile Info --}}
    <div class="col-lg-4 col-md-5">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-4 text-center">
                {{-- Profile Image --}}
                <div class="mb-4">
                    <img src="{{ $user->profile_image ?? asset('assets/images/no-img-avatar.png') }}" 
                         alt="{{ $user->name }}" 
                         class="user-profile-img mb-3">
                    
                    @if($user->is_premium)
                    <div class="mb-3">
                        <span class="badge bg-warning text-dark px-3 py-2">
                            <i class="fas fa-crown me-1"></i>
                            {{ __('labels.premium_user') }}
                        </span>
                    </div>
                    @endif
                    
                    <h3 class="mb-1">{{ $user->name }}</h3>
                    <p class="text-muted mb-3">{{ $user->email }}</p>
                </div>
                
                {{-- Quick Stats --}}
                <div class="row g-2 mb-4">
                    <div class="col-6">
                        <div class="p-3 bg-light rounded">
                            <h4 class="mb-1">{{ $user->posts_count ?? 0 }}</h4>
                            <small class="text-muted">{{ __('labels.posts') }}</small>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-3 bg-light rounded">
                            <h4 class="mb-1">{{ $user->comments_count ?? 0 }}</h4>
                            <small class="text-muted">{{ __('labels.comments') }}</small>
                        </div>
                    </div>
                </div>
                
                {{-- Action Buttons --}}
                <div class="d-flex flex-column gap-2">
                    @can('update', $user)
                    <a href="{{ route('users.edit', $user->id) }}" class="btn btn-primary">
                        <i class="fas fa-edit me-2"></i>
                        {{ __('labels.edit_profile') }}
                    </a>
                    @endcan
                    
                    @can('delete', $user)
                    <button type="button" 
                            class="btn btn-danger"
                            onclick="deleteRecord('{{ route('users.destroy', $user->id) }}')">
                        <i class="fas fa-trash me-2"></i>
                        {{ __('labels.delete_user') }}
                    </button>
                    @endcan
                    
                    <a href="{{ route('users.index') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>
                        {{ __('labels.back_to_list') }}
                    </a>
                </div>
            </div>
        </div>
        
        {{-- User Groups --}}
        @if($user->groups->count() > 0)
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">
                    <i class="fas fa-users me-2 text-primary"></i>
                    {{ __('labels.member_of_groups') }}
                </h5>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                    @foreach($user->groups as $group)
                    <span class="badge bg-primary">
                        <i class="fas fa-user-friends me-1"></i>
                        {{ $group->name }}
                    </span>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
        
        {{-- Admin Roles --}}
        @if($user->adminRoles && $user->adminRoles->count() > 0)
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">
                    <i class="fas fa-user-shield me-2 text-warning"></i>
                    {{ __('labels.admin_roles') }}
                </h5>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2">
                    @foreach($user->adminRoles as $role)
                    <span class="badge bg-warning text-dark">
                        <i class="fas fa-user-tie me-1"></i>
                        {{ $role->name }}
                    </span>
                    @endforeach
                </div>
            </div>
        </div>
        @endif
    </div>
    
    {{-- Right Column: Detailed Info --}}
    <div class="col-lg-8 col-md-7">
        {{-- User Information Cards --}}
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">
                    <i class="fas fa-user-circle me-2 text-primary"></i>
                    {{ __('labels.user_information') }}
                </h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    {{-- Basic Info Card --}}
                    <div class="col-md-6">
                        <div class="card user-info-card border h-100">
                            <div class="card-header bg-transparent border-bottom py-2">
                                <small class="text-muted">
                                    <i class="fas fa-id-card me-1"></i>
                                    {{ __('labels.basic_information') }}
                                </small>
                            </div>
                            <div class="card-body p-3">
                                <dl class="row mb-0">
                                    <dt class="col-sm-5 info-label">{{ __('labels.name') }}</dt>
                                    <dd class="col-sm-7 info-value">{{ $user->name }}</dd>
                                    
                                    <dt class="col-sm-5 info-label">{{ __('labels.email') }}</dt>
                                    <dd class="col-sm-7 info-value">
                                        <a href="mailto:{{ $user->email }}" class="text-decoration-none">
                                            {{ $user->email }}
                                        </a>
                                    </dd>
                                    
                                    <dt class="col-sm-5 info-label">{{ __('labels.phone') }}</dt>
                                    <dd class="col-sm-7 info-value">
                                        @if($user->phone)
                                        <a href="tel:{{ $user->phone }}" class="text-decoration-none">
                                            {{ $user->phone }}
                                        </a>
                                        @else
                                        <span class="text-muted">-</span>
                                        @endif
                                    </dd>
                                    
                                    <dt class="col-sm-5 info-label">{{ __('labels.account_type') }}</dt>
                                    <dd class="col-sm-7 info-value">
                                        @if($user->is_premium)
                                        <span class="badge bg-warning text-dark">
                                            <i class="fas fa-crown me-1"></i>
                                            {{ __('labels.premium') }}
                                        </span>
                                        @else
                                        <span class="badge bg-secondary">
                                            {{ __('labels.standard') }}
                                        </span>
                                        @endif
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Account Status Card --}}
                    <div class="col-md-6">
                        <div class="card user-info-card border h-100">
                            <div class="card-header bg-transparent border-bottom py-2">
                                <small class="text-muted">
                                    <i class="fas fa-chart-line me-1"></i>
                                    {{ __('labels.account_status') }}
                                </small>
                            </div>
                            <div class="card-body p-3">
                                <dl class="row mb-0">
                                    <dt class="col-sm-5 info-label">{{ __('labels.status') }}</dt>
                                    <dd class="col-sm-7 info-value">
                                        <span class="badge {{ $user->is_active ? 'bg-success' : 'bg-danger' }}">
                                            <i class="fas {{ $user->is_active ? 'fa-check-circle' : 'fa-times-circle' }} me-1"></i>
                                            {{ $user->is_active ? __('labels.active') : __('labels.inactive') }}
                                        </span>
                                    </dd>
                                    
                                    <dt class="col-sm-5 info-label">{{ __('labels.verified_email') }}</dt>
                                    <dd class="col-sm-7 info-value">
                                        <span class="badge {{ $user->email_verified_at ? 'bg-success' : 'bg-warning' }}">
                                            <i class="fas {{ $user->email_verified_at ? 'fa-check' : 'fa-clock' }} me-1"></i>
                                            {{ $user->email_verified_at ? __('labels.verified') : __('labels.not_verified') }}
                                        </span>
                                    </dd>
                                    
                                    <dt class="col-sm-5 info-label">{{ __('labels.member_since') }}</dt>
                                    <dd class="col-sm-7 info-value">
                                        {{ $user->created_at->format('d.m.Y') }}
                                        <small class="text-muted">({{ $user->created_at->diffForHumans() }})</small>
                                    </dd>
                                    
                                    <dt class="col-sm-5 info-label">{{ __('labels.last_login') }}</dt>
                                    <dd class="col-sm-7 info-value">
                                        @if($user->last_login_at)
                                        {{ $user->last_login_at->format('d.m.Y H:i') }}
                                        <small class="text-muted">({{ $user->last_login_at->diffForHumans() }})</small>
                                        @else
                                        <span class="text-muted">{{ __('labels.never_logged_in') }}</span>
                                        @endif
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        {{-- Address Information --}}
        @if($user->address)
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">
                    <i class="fas fa-map-marker-alt me-2 text-danger"></i>
                    {{ __('labels.address_information') }}
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <dl class="row mb-0">
                            <dt class="col-sm-4 info-label">{{ __('labels.street') }}</dt>
                            <dd class="col-sm-8 info-value">{{ $user->address->street ?? '-' }}</dd>
                            
                            <dt class="col-sm-4 info-label">{{ __('labels.city') }}</dt>
                            <dd class="col-sm-8 info-value">{{ $user->address->city ?? '-' }}</dd>
                            
                            <dt class="col-sm-4 info-label">{{ __('labels.state') }}</dt>
                            <dd class="col-sm-8 info-value">{{ $user->address->state ?? '-' }}</dd>
                        </dl>
                    </div>
                    <div class="col-md-6">
                        <dl class="row mb-0">
                            <dt class="col-sm-4 info-label">{{ __('labels.zip_code') }}</dt>
                            <dd class="col-sm-8 info-value">{{ $user->address->zip_code ?? '-' }}</dd>
                            
                            <dt class="col-sm-4 info-label">{{ __('labels.country') }}</dt>
                            <dd class="col-sm-8 info-value">{{ $user->address->country ?? '-' }}</dd>
                            
                            <dt class="col-sm-4 info-label">{{ __('labels.address_type') }}</dt>
                            <dd class="col-sm-8 info-value">
                                <span class="badge bg-info">
                                    {{ $user->address->type ?? __('labels.primary') }}
                                </span>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        @endif
        
        {{-- Recent Activity --}}
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-transparent border-bottom">
                <h5 class="mb-0">
                    <i class="fas fa-history me-2 text-info"></i>
                    {{ __('labels.recent_activity') }}
                </h5>
            </div>
            <div class="card-body">
                @if($user->recentActivities && $user->recentActivities->count() > 0)
                <div class="list-group list-group-flush">
                    @foreach($user->recentActivities->take(5) as $activity)
                    <div class="list-group-item border-0 px-0 py-2">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                                <span class="badge bg-light text-dark p-2">
                                    <i class="fas fa-{{ $activity->icon }}"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1">{{ $activity->title }}</h6>
                                <small class="text-muted">{{ $activity->created_at->diffForHumans() }}</small>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="text-center py-4 text-muted">
                    <i class="fas fa-history fa-2x mb-3"></i>
                    <p>{{ __('labels.no_recent_activity') }}</p>
                </div>
                @endif
                
                @if($user->recentActivities && $user->recentActivities->count() > 5)
                <div class="text-center mt-3">
                    <a href="{{ route('users.activity', $user->id) }}" class="btn btn-sm btn-outline-primary">
                        {{ __('labels.view_all_activity') }}
                    </a>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- System Metadata --}}
<div class="card border-0 shadow-sm mt-4">
    <div class="card-body p-3">
        <div class="row text-center text-muted small">
            <div class="col-md-3 border-end">
                <div class="py-2">
                    <i class="fas fa-plus-circle fa-lg mb-2"></i>
                    <div class="fw-bold">{{ __('labels.created_at') }}</div>
                    <div>{{ $user->created_at->format('Y-m-d H:i') }}</div>
                </div>
            </div>
            <div class="col-md-3 border-end">
                <div class="py-2">
                    <i class="fas fa-user-edit fa-lg mb-2"></i>
                    <div class="fw-bold">{{ __('labels.created_by') }}</div>
                    <div>{{ $user->creator->name ?? 'System' }}</div>
                </div>
            </div>
            <div class="col-md-3 border-end">
                <div class="py-2">
                    <i class="fas fa-edit fa-lg mb-2"></i>
                    <div class="fw-bold">{{ __('labels.last_updated') }}</div>
                    <div>{{ $user->updated_at->format('Y-m-d H:i') }}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="py-2">
                    <i class="fas fa-user-check fa-lg mb-2"></i>
                    <div class="fw-bold">{{ __('labels.last_updated_by') }}</div>
                    <div>{{ $user->updater->name ?? 'System' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
@endsection