<?php $__env->startSection('title', 'User Profile - ' . $user->name); ?>

<?php $__env->startSection('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="<?php echo e(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"><?php echo e($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><?php echo e($user->name); ?></p>
                </div>
                <div class="details-item">
                    <label>Email Address</label>
                    <p><?php echo e($user->email); ?></p>
                </div>
                <div class="details-item">
                    <label>Phone Number</label>
                    <p><?php echo e($user->mobile_no ?? 'N/A'); ?></p>
                </div>
                <div class="details-item">
                    <label>Role</label>
                    <p>
                        <?php $__currentLoopData = $user->roles; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $role): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <span class="role-badge"><?php echo e($role->name); ?></span>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </p>
                </div>
                <div class="details-item">
                    <label>Account Status</label>
                    <p>
                        <span class="status-badge <?php echo e($user->status ? 'status-active' : 'status-inactive'); ?>">
                            <?php echo e($user->status ? 'Active' : 'Inactive'); ?>

                        </span>
                    </p>
                </div>
                <div class="details-item">
                    <label>Joined On</label>
                    <p><?php echo e($user->created_at->format('M d, Y')); ?> (<?php echo e($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');
                });
            ?>

            <?php $__empty_1 = true; $__currentLoopData = $groupedLogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $date => $dayLogs): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="date-group">
                    <div class="date-header">
                        <span><?php echo e($date); ?></span>
                    </div>

                    <?php $__currentLoopData = $dayLogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $log): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="log-item">
                            <div class="log-avatar">
                                <?php echo e(strtoupper(substr($user->name, 0, 1))); ?>

                            </div>
                            <div class="log-content">
                                <div class="log-text">
                                    <span class="log-user-name"><?php echo e($user->name); ?></span>
                                    <?php if($log->action == 'login'): ?>
                                        logged in
                                    <?php elseif($log->action == 'logout'): ?>
                                        logged out
                                    <?php elseif($log->action == 'profile_update'): ?>
                                        updated <span class="link-blue">Profile Information</span>
                                    <?php elseif($log->action == 'clicked_next'): ?>
                                        navigated to <span class="link-blue">Next Step</span>
                                    <?php elseif($log->action == 'clicked_back'): ?>
                                        navigated back to <span class="link-blue">Previous Step</span>
                                    <?php else: ?>
                                        performed <span class="link-blue"><?php echo e(str_replace('_', ' ', $log->action)); ?></span>
                                    <?php endif; ?>
                                    <span class="log-time">• <?php echo e($log->created_at->diffForHumans()); ?></span>
                                </div>
                                <div class="log-description">
                                    <?php echo e($log->description); ?>

                                    <?php if($log->ip_address): ?>
                                        <span style="font-size: 11px; color: #9ca3af; margin-left: 8px;">(IP: <?php echo e($log->ip_address); ?>)</span>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <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>
            <?php endif; ?>

            <div class="pagination-wrapper">
                <?php echo e($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)
    <?php if(request()->has('page')): ?>
        document.addEventListener('DOMContentLoaded', function() {
            const activityTab = document.querySelector('.tab-item:nth-child(2)');
            if (activityTab) activityTab.click();
        });
    <?php endif; ?>
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/u784977635/domains/git-test.in/public_html/pump-selection/resources/views/auth/user-view.blade.php ENDPATH**/ ?>