@extends('layouts.admin')

@section('title', 'User Details')
@section('page-title', 'User Details')
@section('page-description', 'Informasi lengkap user')

@section('content')
<div class="user-detail-container">
    <div class="detail-header">
        <div class="user-profile">
            <div class="user-avatar large">
                {{ substr($user->name, 0, 2) }}
            </div>
            <div class="user-info">
                <h2>{{ $user->name }}</h2>
                <p class="user-email">{{ $user->email }}</p>
                <div class="user-meta">
                    <span class="role-badge {{ $user->role === 'admin' ? 'role-admin' : 'role-user' }}">
                        {{ ucfirst($user->role) }}
                    </span>
                    <span class="status-badge {{ $user->is_active ? 'status-active' : 'status-inactive' }}">
                        {{ $user->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
            </div>
        </div>
        <div class="detail-actions">
            <a href="{{ route('admin.users.edit', $user) }}" class="btn-edit">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"/>
                    <polygon points="18 2 22 6 12 16 8 16 8 12 18 2"/>
                </svg>
                Edit User
            </a>
            <a href="{{ route('admin.users.index') }}" class="btn-back">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <polyline points="15 18 9 12 15 6"/>
                </svg>
                Back
            </a>
        </div>
    </div>

    <div class="detail-grid">
        <!-- Personal Information -->
        <div class="detail-card">
            <div class="card-header">
                <div class="header-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                        <circle cx="12" cy="7" r="4"/>
                    </svg>
                </div>
                <h3>Personal Information</h3>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <span class="info-label">Full Name</span>
                    <span class="info-value">{{ $user->name }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Email Address</span>
                    <span class="info-value">{{ $user->email }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Phone Number</span>
                    <span class="info-value">{{ $user->phone ?? '-' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Address</span>
                    <span class="info-value">{{ $user->address ?? '-' }}</span>
                </div>
            </div>
        </div>

        <!-- Account Information -->
        <div class="detail-card">
            <div class="card-header">
                <div class="header-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <circle cx="12" cy="12" r="10"/>
                        <polyline points="12 6 12 12 16 14"/>
                    </svg>
                </div>
                <h3>Account Information</h3>
            </div>
            <div class="card-body">
                <div class="info-row">
                    <span class="info-label">Role</span>
                    <span class="info-value">
                        <span class="role-badge {{ $user->role === 'admin' ? 'role-admin' : 'role-user' }}">
                            {{ ucfirst($user->role) }}
                        </span>
                    </span>
                </div>
                <div class="info-row">
                    <span class="info-label">Status</span>
                    <span class="info-value">
                        <span class="status-badge {{ $user->is_active ? 'status-active' : 'status-inactive' }}">
                            {{ $user->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </span>
                </div>
                <div class="info-row">
                    <span class="info-label">Member Since</span>
                    <span class="info-value">{{ $user->created_at->format('d F Y, H:i') }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Last Login</span>
                    <span class="info-value">{{ $user->last_login_at ? $user->last_login_at->diffForHumans() : 'Never' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">Last Updated</span>
                    <span class="info-value">{{ $user->updated_at->diffForHumans() }}</span>
                </div>
            </div>
        </div>

        <!-- Devices Owned -->
        <div class="detail-card full-width">
            <div class="card-header">
                <div class="header-icon">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                        <line x1="8" y1="2" x2="8" y2="22"/>
                        <line x1="16" y1="2" x2="16" y2="22"/>
                    </svg>
                </div>
                <h3>Devices Owned</h3>
                <span class="device-count">{{ $user->devices->count() }} devices</span>
            </div>
            <div class="card-body">
                @if($user->devices->count() > 0)
                    <div class="devices-list">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>Device Name</th>
                                    <th>Device ID</th>
                                    <th>Type</th>
                                    <th>Status</th>
                                    <th>Last Heartbeat</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($user->devices as $device)
                                <tr>
                                    <td>{{ $device->name }}</td>
                                    <td><code>{{ $device->device_id }}</code></td>
                                    <td>{{ ucfirst($device->type) }}</td>
                                    <td>
                                        <span class="device-status {{ $device->status }}">
                                            {{ ucfirst($device->status) }}
                                        </span>
                                    </td>
                                    <td>{{ $device->last_heartbeat ? $device->last_heartbeat->diffForHumans() : 'Never' }}</td>
                                    <td>
                                        <a href="{{ route('admin.devices.show', $device) }}" class="btn-view">View</a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="empty-state">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#9ca3af">
                            <rect x="2" y="2" width="20" height="20" rx="2.18"/>
                            <line x1="8" y1="2" x2="8" y2="22"/>
                            <line x1="16" y1="2" x2="16" y2="22"/>
                        </svg>
                        <p>No devices owned by this user</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<style>
.user-detail-container {
    max-width: 1200px;
    margin: 0 auto;
}

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar.large {
    width: 64px;
    height: 64px;
    background: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #dc2626;
}

.user-info h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.user-email {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.user-meta {
    display: flex;
    gap: 0.5rem;
}

.detail-actions {
    display: flex;
    gap: 0.75rem;
}

.btn-edit, .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.875rem;
}

.btn-edit {
    background: #dc2626;
    color: white;
}

.btn-edit:hover {
    background: #b91c1c;
}

.btn-back {
    background: #f3f4f6;
    color: #374151;
}

.btn-back:hover {
    background: #e5e7eb;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.detail-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.detail-card.full-width {
    grid-column: span 2;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-icon {
    width: 32px;
    height: 32px;
    background: #fef2f2;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
}

.card-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.device-count {
    font-size: 0.7rem;
    color: #6b7280;
}

.card-body {
    padding: 1rem 1.5rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 0.75rem;
    color: #6b7280;
}

.info-value {
    font-weight: 500;
    font-size: 0.75rem;
}

.role-badge, .status-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
}

.role-admin {
    background: #fef2f2;
    color: #dc2626;
}

.role-user {
    background: #e0e7ff;
    color: #3730a3;
}

.status-active {
    background: #d1fae5;
    color: #065f46;
}

.status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.device-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
}

.device-status.online {
    background: #d1fae5;
    color: #065f46;
}

.device-status.offline {
    background: #fee2e2;
    color: #991b1b;
}

.device-status.pending {
    background: #fed7aa;
    color: #92400e;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th, .data-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.75rem;
}

.data-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #6b7280;
}

.btn-view {
    padding: 0.2rem 0.5rem;
    background: #dc2626;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.65rem;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: #9ca3af;
}

.empty-state svg {
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
    
    .detail-card.full-width {
        grid-column: span 1;
    }
    
    .detail-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .data-table {
        display: block;
        overflow-x: auto;
    }
}
</style>
@endsection