@extends('layouts.main')
@use('\Carbon\Carbon')

@push('styles')
    <style>
        .card { transition: all 0.3s ease; }
        .card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; }
        .profile-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.75rem 1rem; font-weight: 600; }
        .nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; transition: all 0.3s ease; }
        .nav-tabs .nav-link.active { border-bottom-color: #0d6efd; background-color: transparent; }
        .badge { font-size: 0.75em; }
        .table-borderless td { padding: 0.5rem 0; }
        .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
        .rounded-circle { border: 3px solid #e9ecef; }
        @media (max-width: 768px) { .container-fluid { padding: 0.5rem; } .card-body { padding: 1rem; } .table-borderless td { padding: 0.25rem 0; } }
    </style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="card mb-4">
        <div class="card-header profile-header">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex gap-2">
                    <x-buttons.back-small name="user" :route="route('user.index')" />
                    @can('update', $user)
                        <a href="{{ route('user.edit', $user) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-edit me-1"></i> {{ __('general.edit') }}
                        </a>
                    @endcan
                </div>
                <div class="float-end">
                    <h1 class="h4 mb-0 text-light">
                        <i class="fas fa-user me-2"></i>{{ $user->name }}
                    </h1>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row mb-4">
                <div class="col-lg-4">
                    <div class="card shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="rounded-circle bg-secondary d-inline-flex align-items-center justify-content-center mb-3" style="width: 120px; height: 120px;">
                                <i class="fas fa-user fa-3x text-white"></i>
                            </div>
                            <h4 class="card-title mb-1">{{ $user->name }}</h4>
                            <p class="text-muted mb-2">{{ $user->role->name ?? 'N/A' }}</p>
                            <div class="badge bg-{{ $user->is_active ? 'success' : 'danger' }} mb-2">
                                {{ $user->is_active ? __('general.active') : __('general.inactive') }}
                            </div>
                            <div class="row text-center mt-3">
                                <div class="col-12">
                                    <small class="text-muted">{{ __('validation.attributes.email') }}:</small>
                                    <div>{{ $user->email }}</div>
                                </div>
                                <div class="col-12 mt-2">
                                    <small class="text-muted">{{ __('validation.attributes.login') }}:</small>
                                    <div>{{ $user->login }}</div>
                                </div>
                                <div class="col-12 mt-2">
                                    <small class="text-muted">{{ __('validation.attributes.phone') }}:</small>
                                    <div>{{ $user->phone ?? '-' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-8">
                    <div class="card shadow-sm h-100">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>{{ __('general.basic_information') }}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <table class="table table-borderless">
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.name') }}:</td><td>{{ $user->name }}</td></tr>
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.login') }}:</td><td>{{ $user->login }}</td></tr>
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.email') }}:</td><td>{{ $user->email }}</td></tr>
                                        <tr><td class="fw-bold text-muted">{{ __('module.role') }}:</td><td>{{ $user->role->name ?? '-' }}</td></tr>
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.is_active') }}:</td><td>{{ $user->is_active ? __('general.yes') : __('general.no') }}</td></tr>
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.is_central') }}:</td><td>{{ $user->is_central ? __('general.yes') : __('general.no') }}</td></tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-borderless">
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.timezone') }}:</td><td>{{ $user->timezone ?? '-' }}</td></tr>
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.phone') }}:</td><td>{{ $user->phone ?? '-' }}</td></tr>
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.imei') }}:</td><td>{{ $user->imei ?? '-' }}</td></tr>
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.credit_limit') }}:</td><td>{{ $user->credit_limit ?? 0 }}</td></tr>
                                        <tr><td class="fw-bold text-muted">{{ __('validation.attributes.overdue_limit') }}:</td><td>{{ $user->overdue_limit ?? 0 }}</td></tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabs Navigation -->
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm">
                        <div class="card-header">
                            <ul class="nav nav-tabs card-header-tabs" id="userTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="branches-tab" data-bs-toggle="tab" data-bs-target="#branches" type="button" role="tab">
                                        <i class="fas fa-code-branch me-2"></i>{{ __('general.branch') }}
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="permissions-tab" data-bs-toggle="tab" data-bs-target="#permissions" type="button" role="tab">
                                        <i class="fas fa-key me-2"></i>{{ __('module.role') }}
                                    </button>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            <div class="tab-content" id="userTabsContent">
                                <!-- Branches Tab -->
                                <div class="tab-pane fade show active" id="branches" role="tabpanel">
                                    <h6 class="text-primary mb-3">{{ __('general.branch') }}</h6>
                                    @if($user->branches && $user->branches->count() > 0)
                                        <ul class="list-group">
                                            @foreach($user->branches as $branch)
                                                <li class="list-group-item">{{ $branch->name }}</li>
                                            @endforeach
                                        </ul>
                                    @else
                                        <div class="text-center py-3 text-muted">{{ __('messages.data.not-found') }}</div>
                                    @endif
                                </div>
                                <!-- Permissions Tab -->
                                <div class="tab-pane fade" id="permissions" role="tabpanel">
                                    <h6 class="text-primary mb-3">{{ __('module.role') }}</h6>
                                    @if($user->permissions && $user->permissions->count() > 0)
                                        <ul class="list-group">
                                            @foreach($user->permissions as $permission)
                                                <li class="list-group-item">{{ __('module.'.$permission->module_type) }}</li>
                                            @endforeach
                                        </ul>
                                    @else
                                        <div class="text-center py-3 text-muted">{{ __('messages.data.not-found') }}</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="clearfix">
                        <div class="float-start">
                            <small class="text-muted">
                                {{ __('general.created_by') }}: {{ $user->creator->name ?? '-' }}
                                ({{ $user->created_at ? date('d-m-Y H:i', strtotime($user->created_at)) : '-' }})
                            </small>
                        </div>
                        <div class="float-end">
                            <small class="text-muted">
                                @if($user->updated_by)
                                    {{ __('general.updated_by') }}: {{ $user->editor->name ?? '-' }}
                                    ({{ $user->updated_at ? date('d-m-Y H:i', strtotime($user->updated_at)) : '-' }})
                                @endif
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endSection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('#userTabs .nav-link').forEach(function(tab) {
            tab.addEventListener('click', function(e) {
                e.preventDefault();
                let target = this.getAttribute('data-bs-target');
                let tabContent = document.querySelector(target);
                if (tabContent) {
                    tabContent.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    });
</script>
@endpush