@extends('layouts.master')

@section('title', 'User Profile - ' . $user->name)

@section('content')
<style>
    .dribbble-container {
        padding: 40px;
        background: #f9fafb;
        flex: 1;
        overflow-y: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .dribbble-card {
        background: white;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 40px;
    }
    .page-title {
        font-size: 20px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 32px;
    }
    .breadcrumb-nav {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 24px;
        border-top: 1px solid #f3f4f6;
        padding-top: 24px;
    }
    .back-link {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #111827;
        font-weight: 600;
        text-decoration: none;
    }
    .breadcrumb-sep {
        color: #d1d5db;
    }
    .breadcrumb-item.active {
        color: #3b82f6;
        font-weight: 500;
    }
    
    .tabs-nav {
        display: flex;
        gap: 32px;
        border-bottom: 1px solid #f3f4f6;
        margin-bottom: 32px;
    }
    .tab-item {
        padding: 12px 0;
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        text-decoration: none;
        position: relative;
        cursor: pointer;
    }
    .tab-item.active {
        color: #3b82f6;
    }
    .tab-item.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 2px;
        background: #3b82f6;
    }

    .date-group {
        position: relative;
        margin-bottom: 40px;
    }
    .date-header {
        text-align: center;
        margin-bottom: 24px;
        position: relative;
    }
    .date-header span {
        background: white;
        padding: 0 16px;
        font-size: 12px;
        font-weight: 600;
        color: #9ca3af;
        position: relative;
        z-index: 1;
    }
    .date-header::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: #f3f4f6;
    }

    .log-item {
        display: flex;
        gap: 16px;
        margin-bottom: 28px;
    }
    .log-avatar {
        width: 32px;
        height: 32px;
        background: #eff6ff;
        color: #3b82f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        flex-shrink: 0;
    }
    .log-content {
        flex: 1;
    }
    .log-text {
        font-size: 14px;
        line-height: 1.5;
        color: #374151;
    }
    .log-user-name {
        font-weight: 600;
        color: #111827;
    }
    .log-time {
        color: #6b7280;
        margin-left: 8px;
        font-weight: normal;
    }
    .log-description {
        margin-top: 4px;
        color: #6b7280;
        font-size: 13.5px;
    }
    .link-blue {
        color: #3b82f6;
        text-decoration: none;
        font-weight: 500;
    }
    .link-blue:hover {
        text-decoration: underline;
    }

    /* Details Tab Styles */
    .details-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        padding: 20px 0;
    }
    .details-item label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }
    .details-item p {
        font-size: 15px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }
    .role-badge {
        display: inline-block;
        padding: 4px 12px;
        background: #f3f4f6;
        color: #374151;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        margin-right: 4px;
    }
    .status-badge {
        font-size: 11px;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 20px;
    }
    .status-active { background: #dcfce7; color: #16a34a; }
    .status-inactive { background: #fee2e2; color: #ef4444; }

    .pagination-wrapper {
        margin-top: 48px;
        padding-top: 32px;
        border-top: 1px solid #f3f4f6;
        display: flex;
        justify-content: center;
    }
</style>

<div class="dribbble-container">
    <div class="dribbble-card">
        <h1 class="page-title">Users</h1>

        <nav class="breadcrumb-nav">
            <a href="{{ route('admin.users') }}" class="back-link">
                <i data-lucide="chevron-left" size="16"></i> Go Back
            </a>
            <span class="breadcrumb-sep">Dashboard</span>
            <span class="breadcrumb-sep">/</span>
            <span>Users</span>
            <span class="breadcrumb-sep">/</span>
            <span class="breadcrumb-item active">{{ $user->name }}</span>
        </nav>

        <div class="tabs-nav">
            <div class="tab-item active" onclick="switchTab('details', this)">User Details</div>
            <div class="tab-item" onclick="switchTab('activity', this)">User Activity Logs</div>
        </div>

        <div id="content-details" class="tab-content" style="display: block;">
            <div class="details-grid">
                <div class="details-item">
                    <label>Full Name</label>
                    <p>{{ $user->name }}</p>
                </div>
                <div class="details-item">
                    <label>Email Address</label>
                    <p>{{ $user->email }}</p>
                </div>
                <div class="details-item">
                    <label>Phone Number</label>
                    <p>{{ $user->mobile_no ?? 'N/A' }}</p>
                </div>
                <div class="details-item">
                    <label>Role</label>
                    <p>
                        @foreach($user->roles as $role)
                            <span class="role-badge">{{ $role->name }}</span>
                        @endforeach
                    </p>
                </div>
                <div class="details-item">
                    <label>Account Status</label>
                    <p>
                        <span class="status-badge {{ $user->status ? 'status-active' : 'status-inactive' }}">
                            {{ $user->status ? 'Active' : 'Inactive' }}
                        </span>
                    </p>
                </div>
                <div class="details-item">
                    <label>Joined On</label>
                    <p>{{ $user->created_at->format('M d, Y') }} ({{ $user->created_at->diffForHumans() }})</p>
                </div>
            </div>
        </div>

        <div id="content-activity" class="tab-content" style="display: none;">
            @php
                $groupedLogs = $logs->groupBy(function($log) {
                    return $log->created_at->format('d M, Y');
                });
            @endphp

            @forelse($groupedLogs as $date => $dayLogs)
                <div class="date-group">
                    <div class="date-header">
                        <span>{{ $date }}</span>
                    </div>

                    @foreach($dayLogs as $log)
                        <div class="log-item">
                            <div class="log-avatar">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div class="log-content">
                                <div class="log-text">
                                    <span class="log-user-name">{{ $user->name }}</span>
                                    @if($log->action == 'login')
                                        logged in
                                    @elseif($log->action == 'logout')
                                        logged out
                                    @elseif($log->action == 'profile_update')
                                        updated <span class="link-blue">Profile Information</span>
                                    @elseif($log->action == 'clicked_next')
                                        navigated to <span class="link-blue">Next Step</span>
                                    @elseif($log->action == 'clicked_back')
                                        navigated back to <span class="link-blue">Previous Step</span>
                                    @else
                                        performed <span class="link-blue">{{ str_replace('_', ' ', $log->action) }}</span>
                                    @endif
                                    <span class="log-time">• {{ $log->created_at->diffForHumans() }}</span>
                                </div>
                                <div class="log-description">
                                    {{ $log->description }}
                                    @if($log->ip_address)
                                        <span style="font-size: 11px; color: #9ca3af; margin-left: 8px;">(IP: {{ $log->ip_address }})</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @empty
                <div style="text-align: center; padding: 60px 0; color: #9ca3af;">
                    <i data-lucide="history" size="48" style="margin-bottom: 16px; opacity: 0.5;"></i>
                    <p>No activity logs found for this user.</p>
                </div>
            @endforelse

            <div class="pagination-wrapper">
                {{ $logs->links() }}
            </div>
        </div>
    </div>
</div>

<script>
    function switchTab(tabId, element) {
        // Update tab indicators
        document.querySelectorAll('.tab-item').forEach(tab => tab.classList.remove('active'));
        element.classList.add('active');

        // Toggle content
        document.querySelectorAll('.tab-content').forEach(content => content.style.display = 'none');
        document.getElementById('content-' + tabId).style.display = 'block';
    }

    // Auto-switch to activity tab if navigating from a link (optional, depends on use case)
    @if(request()->has('page'))
        document.addEventListener('DOMContentLoaded', function() {
            const activityTab = document.querySelector('.tab-item:nth-child(2)');
            if (activityTab) activityTab.click();
        });
    @endif
</script>
@endsection