@extends('admin.layouts.main')

@section('title')
User Detail
@endsection

@section('content')

<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec detail-page">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ @trans('user.users') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><a href="{{ route('admin.users.index',['panel' => Session::get('panel')]) }}">{{ @trans('user.manage_users') }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('user.detail') }}</li>
                </ol>
            </nav>

            <div class="bg-white profile-header">
                <div class="profile-detail">
                    <div class="person-details">
                        <div class="about pl-0">
                            <h2 class="cndidate-name">{{ $user->first_name }} {{ $user->last_name }}</h2>
                        </div>
                    </div>
                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#detail">{{ @trans('user.details') }}</a>
                    </li>
                    <!-- <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#cnct">Contacts</a>
                    </li> -->
                </ul>
            </div>
                

            <div class="detail-content mt-4">
              <!-- Tab panes -->
                <div class="tab-content box">
                    <div id="detail" class="tab-pane fade show active">

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="btn-group-em float-right mt-3" role="group">
                                    @permission('user-write')
                                    <a href="{{route('admin.users.edit',['panel' => Session::get('panel'),'id' => $user->id])}}" class="btn btn-bordered btn-sm">{{ @trans('user.edit') }}</a>
                                    @endpermission
                                </div>
                                <h3 class="detail-heading">{{ @trans('user.details') }}</h3>

                                <div class="info">

                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('user.first_name') }}</label>
                                        <p class="display-info">{{$user->first_name}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('user.last_name') }}</label>
                                        <p class="display-info">{{$user->last_name}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('user.email') }}</label>
                                        <p class="display-info">{{$user->email}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('user.phone') }}</label>
                                        <p class="display-info">{{$user->mobile}}</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('user.role') }}</label>
                                        <p class="display-info">@if(isset($user->roles[0]))
                                            {{$user->roles[0]->name }}@else - @endif</p>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{ @trans('user.department') }}</label>
                                        <p class="display-info">@if(isset($user->departments[0]))
                                            {{$user->departments[0]->name }}@else - @endif</p>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                    <div id="cnct" class="tab-pane fade">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="table-data">
                                    <div class="table-responsive table-checkable">
                                        <table class="table" id="mtcTable">
                                            <thead>
                                                <tr>
                                                    <th>
                                                        <div class="form-group mb-0">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="directory-contact" name="Contacts">
                                                                <label class="custom-control-label" for="directory-contact"></label>
                                                            </div>
                                                        </div>
                                                    </th>
                                                    <th>Name<a href="javascript:void(0)" class="btm-arrow"></a></th>
                                                    <th>Mobile<a href="javascript:void(0)" class="top-arrow"></a></th>
                                                    <th>Email</th>
                                                    <th>Designation</th>
                                                    <th>Company Name</th>
                                                    <th>Contact Type</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div class="form-group mb-0">
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="directory-contact1" name="Contacts">
                                                                <label class="custom-control-label" for="directory-contact1"></label>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td><a href="directory-contact-detail" class="d-block text-underlined">Rodger Lockman</a></td>
                                                    <td>1234567890</td>
                                                    <td>abc@mailinator.com</td>
                                                    <td>Operator</td>
                                                    <td>Looney Tunes</td>
                                                    <td>Supplier</td>
                                                    <td class="act-btn">
                                                        <a href="directory-contact-detail" title="View" class="btn btn-view"><i class="material-icons">remove_red_eye</i></a>
                                                        <a href="javascript:void(0)" title="Edit" class="btn btn-edit"><i class="material-icons">edit</i></a>
                                                        <a href="javascript:void(0)" title="Delete" class="btn btn-dlt"><i class="material-icons">delete</i></a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection