@extends('admin._layout.layout')

@section('header')
    {{ trans('admin.head.users') }} / {{ trans('admin.head_section.show') }}
        
    <a href="{{ route('admin.user.list') }}" class="btn btn-info">
        {{ trans('admin.user.list') }}
    </a>

    <a href="{{ route('admin.user.edit', ['id' => $user->id]) }}" class="btn btn-primary">
        {{ trans('admin.buttons.edit') }}
    </a>
@endsection

@section('main')
    <div class="px-content">

        <div class="row m-t-1">
            <div class="col-md-4 col-lg-3">

                <div class="panel panel-transparent">

                    @if ($avatar = $user->avatarUrl())
                        <div class="text-xs-center">
                            <img src="{{ $avatar }}" class="page-profile-v1-avatar" />
                        </div>
                    @endif

                    <div class="panel-heading p-x-1">
                        <span class="panel-title">{{ trans('admin.user.about') }}</span>
                    </div>
                    <div class="list-group m-y-1">
                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.fields.id') }}: <strong>{{ $user->id }}</strong></span>
                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.fields.uuid') }}: <strong>{{ $user->uuid }}</strong></span>

                        @if ($user->last_activity_at)
                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.user.last_activity') }}: <strong>{{ $user->last_activity_at->format('d.m.Y H:i:s') }}</strong></span>
                        @endif

                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.user.first_name') }}: <strong>{{ $user->first_name }}</strong></span>
                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.user.last_name') }}: <strong>{{ $user->last_name }}</strong></span>
                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.user.nickname') }}: <strong>{{ $user->nickname }}</strong></span>
                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.user.email') }}: <strong>{{ $user->email }}</strong></span>
                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.user.phone') }}: <strong>{{ $user->phone_number }}</strong></span>

                        @if ($gender = $user->gender)
                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.user.gender') }}: <strong>{{ $gender->title }}</strong></span>
                        @endif


                        @if ($native_language = $user->nativeLanguage)
                        <span class="list-group-item p-x-1 b-a-0">{{ trans('admin.user.native_language') }}: <strong>{{ $native_language->title }}</strong></span>
                        @endif

                        <span class="list-group-item p-x-1 b-a-0">
                            {{ trans('admin.user.status') }}: <strong>{{ $user->is_active ? trans('admin.user.active') : trans('admin.user.disabled') }}</strong>
                        </span>

                        <span class="list-group-item p-x-1 b-a-0">
                            {{ trans('admin.user.privacy') }}: <strong>{{ $user->is_private ? trans('admin.user.private') : trans('admin.user.public') }}</strong>
                        </span>

                        @if ($user->created_at)
                        <span class="list-group-item p-x-1 b-a-0">
                            {{ trans('admin.fields.created') }}: <strong>{{ $user->created_at->format('d.m.Y H:i:s') }}</strong>
                        </span>
                        @endif

                        @if ($user->updated_at)
                        <span class="list-group-item p-x-1 b-a-0">
                            {{ trans('admin.fields.updated') }}: <strong>{{ $user->updated_at->format('d.m.Y H:i:s') }}</strong>
                        </span>
                        @endif
                    </div>
                </div>

                <div class="panel panel-transparent">
                    <div class="panel-heading p-x-1">
                        <span class="panel-title">{{ trans('admin.user.search_settings') }}</span>
                    </div>
                    <div class="list-group m-y-1">
                        <span class="list-group-item p-x-1 b-a-0">
                            {{ trans('admin.user.is_suggested') }}:
                            @if ($user->is_suggested)
                                <strong>{{ trans('admin.yes') }}</strong>
                            @else
                                <strong>{{ trans('admin.no') }}</strong>
                            @endif
                        </span>
                        <span class="list-group-item p-x-1 b-a-0"><strong>{{ $user->suggested_position }}</strong> {{ trans('admin.user.suggested_position') }}</span>
                        <span class="list-group-item p-x-1 b-a-0"><strong>{{ $user->search_position }}</strong> {{ trans('admin.user.search_position') }}</span>
                    </div>
                </div>

                <div class="panel panel-transparent">
                    <div class="panel-heading p-x-1">
                        <span class="panel-title">{{ trans('admin.user.statistic') }}</span>
                    </div>
                    <div class="list-group m-y-1">
                        <span class="list-group-item p-x-1 b-a-0"><strong>{{ $user->count_friends }}</strong> {{ trans('admin.user.friends') }}</span>
                        <span class="list-group-item p-x-1 b-a-0"><strong>{{ $total_capsules }}</strong> {{ trans('admin.user.capsules') }}</span>
                        <span class="list-group-item p-x-1 b-a-0"><strong>{{ $user->count_subscriptions }}</strong> {{ trans('admin.user.subscribed_to') }}</span>
                        <span class="list-group-item p-x-1 b-a-0"><strong>{{ $user->count_comments }}</strong> {{ trans('admin.user.comments') }}</span>
                    </div>
                </div>

            </div>

            <hr class="page-wide-block visible-xs visible-sm">

            <div class="col-md-8 col-lg-9">

                <ul class="nav nav-tabs" id="user-tabs">
                    <li class="active">
                        <a href="#friends" data-toggle="tab">
                            {{ trans('admin.user.friends') }}
                        </a>
                    </li>

                    <li>
                        <a href="#capsules" data-toggle="tab">
                            {{ trans('admin.user.capsules') }}
                        </a>
                    </li>

                    <li>
                        <a href="#comments" data-toggle="tab">
                            {{ trans('admin.user.comments') }}
                        </a>
                    </li>

                    <li>
                        <a href="#access-log" data-toggle="tab">
                            {{ trans('admin.user.access_log.name') }}
                        </a>
                    </li>
                </ul>

                <div class="tab-content tab-content-bordered p-a-0 bg-white">

                    <div class="tab-pane p-a-3 fade in active" id="friends">
                        @include('admin.user.lists.friends')
                    </div>

                    <div class="tab-pane p-a-3 fade" id="capsules">
                        @include('admin.user.lists.capsules')
                    </div>

                    <div class="tab-pane p-a-3 fade" id="comments">
                        @include('admin.user.lists.comments')
                    </div>

                    <div class="tab-pane p-a-3 fade" id="access-log">
                        @include('admin.user.lists.access_log')
                    </div>

                </div>

            </div>

        </div>

    </div>
@endsection

@section('scripts')
    <style>
        th{
            vertical-align: center;
        }
        td{
            vertical-align: center;
        }
    </style>
    <script>
        $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
            $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
        } );
    </script>
@endsection