@extends('layouts.simple.master')

@section('title', trans(app()->getLocale() . '.view_user'))

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/quill.snow.css') }}">
    <style>
        .user-details-wrapper .social-tabs {
            margin-top: 20px;
        }
        .user-details-wrapper .social-box {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .user-details-wrapper .social-box:hover {
            transform: translateY(-2px);
        }
        .user-details-wrapper .seller-details {
            list-style: none;
            padding: 0;
        }
        .user-details-wrapper .seller-details li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #f1f1f1;
        }
        .user-details-wrapper .seller-details li:last-child {
            border-bottom: none;
        }
        .user-details-wrapper .seller-details li div {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .user-details-wrapper .seller-details li div i {
            color: var(--theme-default);
            width: 20px;
        }
        .user-details-wrapper .seller-details li div h6 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
        }
        .user-details-wrapper .seller-details li span {
            font-size: 14px;
            color: #666;
        }
        .user-details-wrapper .user-filter {
            padding: 8px 16px;
            margin-right: 8px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-block;
            background-color: #f8f9fa;
            color: #666;
            font-weight: 500;
        }
        .user-details-wrapper .user-filter:hover {
            background-color: #e9ecef;
            color: var(--theme-default);
        }
        .user-details-wrapper .user-filter.active {
            background-color: var(--theme-default);
            color: white;
        }
        .user-details-wrapper .dark-timeline ul {
            list-style: none;
            padding: 0;
        }
        .user-details-wrapper .dark-timeline li {
            padding: 20px 0;
            border-bottom: 1px solid #f1f1f1;
        }
        .user-details-wrapper .dark-timeline li:last-child {
            border-bottom: none;
        }
        .user-details-wrapper .activity-dot-primary {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--theme-default);
            margin-top: 5px;
            flex-shrink: 0;
        }
        .user-details-wrapper .activity-dot-warning {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ffc107;
            margin-top: 5px;
            flex-shrink: 0;
        }
        .user-details-wrapper .activity-dot-danger {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #dc3545;
            margin-top: 5px;
            flex-shrink: 0;
        }
        .user-details-wrapper .date-content {
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 12px;
        }
        .user-details-wrapper .light-background {
            background-color: #f8f9fa;
        }
        .user-details-wrapper .dot-notification {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--theme-default);
            display: inline-block;
            margin-left: 8px;
        }
    </style>
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>{{ trans(app()->getLocale() . '.user_details') }}</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <svg class="stroke-icon">
                                    <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                                </svg></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.user.index') }}">{{ trans(app()->getLocale() . '.users') }}</a></li>
                        <li class="breadcrumb-item active">{{ trans(app()->getLocale() . '.view_user') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid starts-->
    <div class="container-fluid user-details-wrapper">
        <!-- Tabs Section -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header common-space">
                        <div class="common-f-start">
                            <span class="user-filter active" onclick="showTab('profile')">
                                <i class="fa-solid fa-user me-1"></i> {{ trans(app()->getLocale() . '.profile') }}
                            </span>
                            @if($user->companies && $user->companies->count() > 0)
                            <span class="user-filter" onclick="showTab('companies')">
                                <i class="fa-solid fa-building me-1"></i> {{ trans(app()->getLocale() . '.companies') }}
                            </span>
                            @endif
                            <span class="user-filter" onclick="showTab('history')">
                                <i class="fa-solid fa-clock-rotate-left me-1"></i> {{ trans(app()->getLocale() . '.account_history') }}
                            </span>
                        </div>
                    </div>
                    <div class="card-body">

                            <!-- Tabs Content -->
                            <div class="tab-content" id="user-tabContent">
                                <!-- Profile Tab -->
                                <div class="tab-pane fade show active" id="tab-profile" role="tabpanel">
                                    <div class="row mt-1">
                                        <div class="col-xl-12">
                                            <div class="row">
                                                <div class="col-12">
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <div class="row">
                                                                <div class="col-md-6 mb-4">
                                                                    <div class="common-f-start">
                                                                        @if ($user->image)
                                                                            <img src="{{ $user->image->getFileUrl() }}" alt="User Avatar" style="width: 80px; height: 80px; border-radius: 10px; object-fit: cover;">
                                                                        @else
                                                                            <div class="initial-letter d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px; border-radius: 10px; background-color: var(--theme-default); color: white; font-size: 32px; font-weight: bold;">
                                                                                {{ strtoupper(substr($user->name ?? 'N', 0, 1)) }}
                                                                            </div>
                                                                        @endif
                                                                        <div class="ms-3">
                                                                            <h5>{{ $user->name ?? 'N/A' }}</h5>
                                                                            @php
                                                                                $userTypeLabel = $user->type ? trans(app()->getLocale() . '.' . $user->type) : 'N/A';
                                                                            @endphp
                                                                            <span class="c-o-light">{{ $userTypeLabel }}</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row mt-4">
                                                                <div class="col-md-6">
                                                                    <ul class="seller-details">
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-solid fa-user"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.name') }}</h6>
                                                                            </div>
                                                                            <span>{{ $user->name ?? 'N/A' }}</span>
                                                                        </li>
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-solid fa-envelope"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.email') }}</h6>
                                                                            </div>
                                                                            <span>{{ $user->email ?? 'N/A' }}</span>
                                                                        </li>
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-solid fa-phone"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.phone') }}</h6>
                                                                            </div>
                                                                            <span>{{ $user->normalized ?? ($user->country_code && $user->number ? $user->country_code . ' ' . $user->number : 'N/A') }}</span>
                                                                        </li>
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-solid fa-user-tag"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.user_type') }}</h6>
                                                                            </div>
                                                                            @php
                                                                                $userTypeLabel = $user->type ? trans(app()->getLocale() . '.' . $user->type) : 'N/A';
                                                                            @endphp
                                                                            <span>{{ $userTypeLabel }}</span>
                                                                        </li>
                                                                        @if($user->city)
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-solid fa-location-dot"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.city') }}</h6>
                                                                            </div>
                                                                            @php
                                                                                $locale = app()->getLocale();
                                                                                $cityName = $user->city && is_array($user->city->name) ? ($user->city->name[$locale] ?? $user->city->name['en'] ?? $user->city->name['ar'] ?? 'N/A') : ($user->city->name ?? 'N/A');
                                                                            @endphp
                                                                            <span>{{ $cityName }}</span>
                                                                        </li>
                                                                        @endif
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-regular fa-circle-check"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.verification_status') }}</h6>
                                                                            </div>
                                                                            <span>
                                                                                <span class="badge
                                                                                    @if($user->verification_status == 'in_person ') badge-light-success
                                                                                    @elseif($user->verification_status == 'online') badge-light-warning
                                                                                    @else badge-light-secondary
                                                                                    @endif">
                                                                                    <i class="fa-solid fa-shield-check me-1"></i>
                                                                                    {{ ucfirst(str_replace('_', ' ', trim($user->verification_status))) }}
                                                                                </span>
                                                                            </span>
                                                                        </li>
                                                                        @if($user->verificationFile)
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-regular fa-file"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.verification_file') }}</h6>
                                                                            </div>
                                                                            <span>
                                                                                <a href="{{ $user->verificationFile->getFileUrl() }}" target="_blank" class="view-icon" title="View Verification File">
                                                                                    <i class="fa-solid fa-file-text"></i>
                                                                                </a>
                                                                            </span>
                                                                        </li>
                                                                        @endif
                                                                    </ul>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <ul class="seller-details">
                                                                        @if($user->bio)
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-solid fa-file-lines"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.bio') }}</h6>
                                                                            </div>
                                                                            <span>{{ $user->bio }}</span>
                                                                        </li>
                                                                        @endif
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-solid fa-calendar"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.joined_at') }}</h6>
                                                                            </div>
                                                                            <span>{{ $user->joined_at ? $user->joined_at : 'N/A' }}</span>
                                                                        </li>
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-solid fa-clock"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.last_login') }}</h6>
                                                                            </div>
                                                                            <span>{{ $user->last_login ? $user->last_login : 'N/A' }}</span>
                                                                        </li>
                                                                        <li>
                                                                            <div>
                                                                                <i class="fa-solid fa-calendar-check"></i>
                                                                                <h6>{{ trans(app()->getLocale() . '.created_at') }}</h6>
                                                                            </div>
                                                                            <span>{{ $user->created_at }}</span>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Companies Tab -->
                                @if($user->companies && $user->companies->count() > 0)
                                <div class="tab-pane fade" id="tab-companies" role="tabpanel">
                                    <div class="card-body pb-0 mt-4">
                                        <div class="row">
                                            @forelse($user->companies as $company)
                                                <div class="col-md-4 col-sm-6 mb-4">
                                                    <div class="card">
                                                        <div class="card-body">
                                                            <div class="d-flex align-items-start mb-3">
                                                                @if ($company->logo_id && $company->logo)
                                                                    <img src="{{ $company->logo->getFileUrl() }}" alt="Company Logo" style="width: 60px; height: 60px; border-radius: 10px; object-fit: cover; margin-right: 15px;">
                                                                @else
                                                                    <div class="initial-letter d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px; border-radius: 10px; background-color: var(--theme-default); color: white; font-size: 24px; font-weight: bold; margin-right: 15px;">
                                                                        {{ strtoupper(substr($company->name ?? 'N', 0, 1)) }}
                                                                    </div>
                                                                @endif
                                                                <div class="flex-grow-1">
                                                                    <h6 class="mb-1">{{ $company->name ?? 'N/A' }}</h6>
                                                                    <p class="text-muted mb-0" style="font-size: 12px;">
                                                                        @php
                                                                            $locale = app()->getLocale();
                                                                            $categoryName = $company->category && is_array($company->category->name) ? ($company->category->name[$locale] ?? $company->category->name['en'] ?? $company->category->name['ar'] ?? 'N/A') : ($company->category ? $company->category->name : 'N/A');
                                                                        @endphp
                                                                        {{ $categoryName }}
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <ul class="seller-details mb-3">
                                                                @if($company->city)
                                                                <li style="padding: 8px 0;">
                                                                    <div>
                                                                        <i class="fa-solid fa-location-dot"></i>
                                                                        <h6 style="font-size: 12px;">{{ trans(app()->getLocale() . '.city') }}</h6>
                                                                    </div>
                                                                    @php
                                                                        $locale = app()->getLocale();
                                                                        $cityName = $company->city && is_array($company->city->name) ? ($company->city->name[$locale] ?? $company->city->name['en'] ?? $company->city->name['ar'] ?? 'N/A') : ($company->city->name ?? 'N/A');
                                                                    @endphp
                                                                    <span style="font-size: 12px;">{{ $cityName }}</span>
                                                                </li>
                                                                @endif
                                                                @if($company->valuation)
                                                                <li style="padding: 8px 0;">
                                                                    <div>
                                                                        <i class="fa-solid fa-chart-line"></i>
                                                                        <h6 style="font-size: 12px;">Valuation</h6>
                                                                    </div>
                                                                    <span style="font-size: 12px;">{{ $company->valuation }}</span>
                                                                </li>
                                                                @endif
                                                            </ul>
                                                            <a href="{{ route('admin.company.show', $company->id) }}" class="btn btn-sm btn-primary w-100">
                                                                <i class="fa-solid fa-eye me-1"></i> {{ trans(app()->getLocale() . '.view_details') }}
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            @empty
                                                <div class="col-12">
                                                    <div class="card">
                                                        <div class="card-body text-center py-5">
                                                            <i class="fa-solid fa-building" style="font-size: 64px; color: #dee2e6;"></i>
                                                            <p class="text-muted mt-3">{{ trans(app()->getLocale() . '.no_companies_found') }}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforelse
                                        </div>
                                    </div>
                                </div>
                                @endif

                                <!-- Account History Tab -->
                                <div class="tab-pane fade" id="tab-history" role="tabpanel">
                                    <div class="notification mt-4">
                                        <div class="card">
                                            <div class="card-header">
                                                <h5>{{ trans(app()->getLocale() . '.account_type_change_history') }}</h5>
                                            </div>
                                            <div class="card-body dark-timeline">
                                                @if($user->accountHistory->count() > 0)
                                                    <ul>
                                                        @foreach($user->accountHistory as $history)
                                                            @php
                                                                $timeAgo = $history->created_at->diffForHumans();
                                                                $dateFormatted = $history->created_at->format('jS M, Y');
                                                            @endphp
                                                            <li class="d-flex">
                                                                <div class="activity-dot-primary"></div>
                                                                <div class="w-100 ms-3">
                                                                    <p class="d-flex justify-content-between mb-2">
                                                                        <span class="date-content light-background">{{ $dateFormatted }}</span>
                                                                        <span>{{ $timeAgo }}</span>
                                                                    </p>
                                                                    <h6>
                                                                        {{ trans(app()->getLocale() . '.account_type_changed') }}: {{ trans(app()->getLocale() . '.' . $history->from_type) }} → {{ trans(app()->getLocale() . '.' . $history->to_type) }}
                                                                        <span class="dot-notification"></span>
                                                                    </h6>
                                                                    <span class="c-o-light mt-2 d-block">
                                                                        <strong>{{ trans(app()->getLocale() . '.changed_on') }}:</strong> {{ $history->created_at->format('M d, Y h:i A') }}
                                                                    </span>
                                                                </div>
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                @else
                                                    <div class="text-center py-5">
                                                        <i class="fa-solid fa-clock-rotate-left" style="font-size: 64px; color: #dee2e6;"></i>
                                                        <p class="text-muted mt-3">{{ trans(app()->getLocale() . '.no_account_type_change_history') }}</p>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid Ends-->
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/counter/counter-custom.js') }}"></script>
    <script>
        // Initialize counter animation and feather icons
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof counter !== 'undefined') {
                counter();
            }
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        });

        // Tab switching function
        function showTab(tabName) {
            // Hide all tabs
            document.querySelectorAll('.tab-pane').forEach(tab => {
                tab.classList.remove('show', 'active');
            });

            // Remove active class from all filters
            document.querySelectorAll('.user-filter').forEach(filter => {
                filter.classList.remove('active');
            });

            // Show selected tab
            const selectedTab = document.getElementById('tab-' + tabName);
            if (selectedTab) {
                selectedTab.classList.add('show', 'active');
            }

            // Add active class to clicked filter
            event.target.closest('.user-filter').classList.add('active');
        }
    </script>
@endsection