@extends('layouts.admin')

@section('title', $user->name . ' — User Detail')
@section('page-title', 'User Detail')

@section('content')

{{-- ── Action Buttons ────────────────────────────────────────────── --}}
<div class="d-flex justify-content-between align-items-center mb-4">
    <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left mr-1"></i> Back to Users
    </a>
    
    <div>
        <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-outline-warning btn-sm">
            <i class="fas fa-edit mr-1"></i> Edit User
        </a>
    </div>
</div>

{{-- ── Header Card ─────────────────────────────────────────── --}}
<div class="card shadow border-bottom-primary mb-4">
    <div class="card-body">
        <div class="row align-items-center">
            {{-- Profile Photo --}}
            <div class="col-md-auto text-center mb-3 mb-md-0 mr-md-3">
                @if($user->profile_photo)
                    <img src="{{ str_starts_with($user->profile_photo, 'http') ? $user->profile_photo : asset('storage/' . $user->profile_photo) }}" 
                         alt="Profile Photo" 
                         class="rounded-circle shadow-sm" style="width: 96px; height: 96px; object-fit: cover; border: 4px solid #fff;">
                @else
                    <x-admin-avatar size="96" />
                @endif
            </div>

            {{-- Basic Info --}}
            <div class="col-md">
                <h1 class="h3 mb-1 font-weight-bold text-gray-800">
                    {{ $user->name }}
                </h1>
                
                <p class="text-secondary mb-3">
                    <i class="fas fa-envelope mr-1"></i> {{ $user->email }}
                </p>
                
                <div class="d-flex flex-wrap align-items-center gap-3">
                    <span class="mr-4">
                        <strong>Role:</strong> 
                        <span class="badge badge-primary">{{ $user->role->name ?? 'No Role' }}</span>
                    </span>
                    
                    <span class="mr-4">
                        <strong>Status:</strong> 
                        @if($user->status === 'active')
                            <span class="badge badge-success">{{ ucfirst($user->status) }}</span>
                        @elseif($user->status === 'inactive')
                            <span class="badge badge-danger">{{ ucfirst($user->status) }}</span>
                        @else
                            <span class="badge badge-secondary">{{ ucfirst($user->status ?? 'Not Available') }}</span>
                        @endif
                    </span>

                    <span class="mr-4">
                        <strong>Joined:</strong> 
                        <span class="text-muted">{{ $user->created_at ? $user->created_at->format('d M Y') : 'Not Available' }}</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    {{-- ── Left Column: Account & Contact Info ─────────────────────────────────────────── --}}
    <div class="col-lg-8 mb-4">
        
        {{-- Account Information Card --}}
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-user-circle mr-2"></i>Account Information</h6>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Full Name</div>
                    <div class="col-sm-8">{{ $user->name }}</div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Email Address</div>
                    <div class="col-sm-8">{{ $user->email }}</div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Company Name</div>
                    <div class="col-sm-8">{{ $user->company_name ?? 'Not Available' }}</div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Position / Jabatan</div>
                    <div class="col-sm-8">{{ $user->position ?? 'Not Available' }}</div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Role</div>
                    <div class="col-sm-8">{{ $user->role->name ?? 'Not Available' }}</div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Account Status</div>
                    <div class="col-sm-8">
                        @if($user->status === 'active')
                            <span class="text-success font-weight-bold"><i class="fas fa-check-circle mr-1"></i> {{ ucfirst($user->status) }}</span>
                        @elseif($user->status === 'inactive')
                            <span class="text-danger font-weight-bold"><i class="fas fa-times-circle mr-1"></i> {{ ucfirst($user->status) }}</span>
                        @else
                            <span class="text-secondary font-weight-bold"><i class="fas fa-circle mr-1"></i> {{ ucfirst($user->status ?? 'Not Available') }}</span>
                        @endif
                    </div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Email Verified</div>
                    <div class="col-sm-8">
                        @if($user->email_verified_at)
                            <span class="text-success"><i class="fas fa-check mr-1"></i> {{ $user->email_verified_at->format('d M Y, H:i') }}</span>
                        @else
                            <span class="text-warning"><i class="fas fa-exclamation-triangle mr-1"></i> Not Verified</span>
                        @endif
                    </div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Registration Date</div>
                    <div class="col-sm-8">{{ $user->created_at ? $user->created_at->format('d M Y, H:i') : 'Not Available' }}</div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Last Login</div>
                    <div class="col-sm-8">{{ $user->last_login_at ? $user->last_login_at->format('d M Y, H:i') : 'Never' }}</div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">User ID</div>
                    <div class="col-sm-8"><code>#{{ $user->id }}</code></div>
                </div>
            </div>
        </div>

        {{-- Contact Information Card --}}
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-address-book mr-2"></i>Contact Information</h6>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Email</div>
                    <div class="col-sm-8">
                        <a href="mailto:{{ $user->email }}">{{ $user->email }}</a>
                    </div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Phone Number</div>
                    <div class="col-sm-8">{{ $user->phone ?? 'Not Available' }}</div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Country</div>
                    <div class="col-sm-8">
                        @if($user->country)
                            @if($user->country->flag_url)
                                <img src="{{ $user->country->flag_url }}" alt="Flag" class="mr-1 border shadow-sm" style="width: 20px; height: 14px; object-fit: cover;">
                            @endif
                            {{ $user->country->name }}
                        @else
                            Not Available
                        @endif
                    </div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">City</div>
                    <div class="col-sm-8">Not Available</div>
                </div>
                <hr>
                <div class="row mb-3">
                    <div class="col-sm-4 text-muted font-weight-bold">Address</div>
                    <div class="col-sm-8">Not Available</div>
                </div>
            </div>
        </div>
        
    </div>

    {{-- ── Right Column: Activity Info ─────────────────────────────────────────── --}}
    <div class="col-lg-4 mb-4">
        
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-chart-line mr-2"></i>Activity Information</h6>
            </div>
            <div class="card-body">
                <div class="mb-4">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Logins</div>
                    @php
                        $loginCount = class_exists(\App\Models\ActivityLog::class) 
                            ? \App\Models\ActivityLog::where('user_id', $user->id)->where('action', 'login')->count() 
                            : 'Not Available';
                    @endphp
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $loginCount }}</div>
                </div>
                
                <div class="mb-4">
                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Last Login</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $user->last_login_at ? $user->last_login_at->format('d M Y, H:i') : 'Never' }}</div>
                </div>
                
                <div class="mb-4">
                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Account Created</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $user->created_at ? $user->created_at->format('d M Y, H:i') : 'Not Available' }}</div>
                </div>
                
                <div class="mb-0">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Last Updated</div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $user->updated_at ? $user->updated_at->format('d M Y, H:i') : 'Not Available' }}</div>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection