@extends('adminlte::page')

@section('title', 'Users')

@section('content')

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>My Profile</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('manager.regional_manager.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item">Details</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <!-- Profile Image -->
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <div class="text-center">
                            <a href="{{ $user->profile_photo_url }}" data-toggle="lightbox" data-title="Cover Image" data-gallery="gallery">
                                <img class="profile-user-img img-fluid img-circle circle" src="{{ $user->profile_photo_url }}" alt="" onerror="this.onerror=null; this.src='{{ asset('assets/images/logo.svg') }}';this.style = 'object-fit:unset'">
                            </a>
                        </div>

                        <h3 class="profile-username text-center my-0">{{ $user->full_name }}</h3>

                        <p class="text-muted text-center my-0"><span class="badge badge-primary">{{ $user->user_type_in_words }}</span></p>

                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item">
                                <b>My Employee ID</b> <p class="float-right mb-0">{{ $user->employee_id }}</p>
                            </li>
                            <li class="list-group-item">
                                <b>Username</b> <p class="float-right mb-0">{{ $user->username }}</p>
                            </li>
                            <li class="list-group-item">
                                <b>Gender</b> <p class="float-right mb-0">{{ $user->gender_in_words}}</p>
                            </li>
                            <!-- <li class="list-group-item">
                                <b>Age Group</b> <p class="float-right mb-0">{{ $user->age_group }}</p>
                            </li> -->
                            <li class="list-group-item">
                                <b>Age</b> <p class="float-right mb-0">{{ $user->birth_age}}</p>
                            </li>
                        </ul>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            <!-- /.card -->
            </div>
            <!-- /.col -->
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header p-2">
                    <ul class="nav nav-pills">
                        <li class="nav-item"><a class="nav-link {{ !request()->get('request') ? 'active' : '' }}" href="#detail" data-toggle="tab">Details</a></li>
                        {{-- <li class="nav-item"><a class="nav-link" href="#other-info" data-toggle="tab">Deals</a></li> --}}
                        {{-- @if ($user->requestChange(0)->count() > 0 || $user->requestChange(1)->count() > 0)
                        <li class="nav-item"><a class="nav-link {{ request()->get('request') ? 'active' : '' }}" href="#request" data-toggle="tab">Change Request</a></li>
                        @endif --}}
                    </ul>
                    </div><!-- /.card-header -->
                    <div class="card-body">
                    <div class="tab-content">
                        <div class="{{ !request()->get('request') ? 'active' : '' }} tab-pane" id="detail">
                            <div class="row">
                                <div class="col-md-6">

                                    <div class="form-group">
                                        <label>First Name :</label>
                                        <p>{{ $user->first_name }}</p>
                                    </div>

                                    <div class="form-group">
                                        <label>Last Name :</label>
                                        <p>{{ $user->last_name }}</p>
                                    </div>

                                    <div class="form-group">
                                        <label>Email :</label>
                                        <p>{{ $user->email }}</p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label>Phone Number :</label>
                                        <p>{{ $user->phone_no }}</p>
                                    </div>
                                    <div class="form-group">
                                        <label>User Name :</label>
                                        <p>{{ $user->username }}</p>
                                    </div>

                                    <div class="form-group">
                                        <label>Region :</label>
                                        @foreach ($user->regions as $region)
                                        <p>{{ $region ? $region->name : '' }}</p>
                                        @endforeach
                                    </div>

                                    @if($user->listings->isNotEmpty())
                                        <div class="form-group">
                                            <label>Deal's Count :</label>
                                            <p>{{ count($user->listings) }}</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- /.tab-content -->
                    </div><!-- /.card-body -->
                </div>
            </div>
            <!-- /.col -->
        </div>
      <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
@endsection