@extends('page')

@section('content')


<!-- Content Header (Page header) -->
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>{{$user->name}}'s Profile</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('users.index') }}">Users</a></li>
            <li class="breadcrumb-item active">View - {{$user->name}}</li>
          </ol>
        </div>
      </div>
    </div><!-- /.container-fluid -->
  </section>

@if ($message = Session::get('success'))
    <div class="alert alert-success">
        {{ $message }}
    </div>
@endif

<!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-9">
        <div class="row">
          <div class="col-md-4">

            <!-- Profile Image -->
            <div class="card card-primary card-outline image-box">
              <div class="card-body box-profile">
                <div class="text-center">
                  <img class="profile-user-img img-fluid img-circle"
                       src="{{asset('../storage/app/users/'.$user->image)}}"
                       alt="User profile picture">
                </div>

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

                <p class="text-muted text-center">{{$user->designation}}</p>
                <p class="text-muted text-center">{{$user->staff_code}}</p>

                <!-- <ul class="list-group list-group-unbordered mb-3">
                  <li class="list-group-item">
                    <b>Roles</b>
                  </li>
                  <li class="list-group-item">
                    Roles comes here.
                  </li>
                </ul> -->

                <!-- <a href="#" class="btn btn-primary btn-block"><b>Follow</b></a> -->
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
          <div class="col-md-8">
            <div class="card image-box">
              <div class="card-body">
                <div class="col-xs-12 col-sm-12 col-md-12 bor-b">
                  <h5>Contact Information</h5>
                </div>

                

                <div class="col-xs-12 col-sm-12 col-md-12 padT10 padb10">
                  <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                      <div class="row">
                        <div class="col-xs-3 col-sm-3 col-md-3">
                            <strong><label>Email:</label></strong>
                        </div>
                        <div class="col-xs-9 col-sm-9 col-md-9">
                            {{$user->email}}
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                      <div class="row">
                        <div class="col-xs-3 col-sm-3 col-md-3">
                            <strong><label>Contact Number:</label></strong>
                        </div>
                        <div class="col-xs-9 col-sm-9 col-md-9">
                            {{$user->phone_code}}
                            &nbsp;
                            {{$user->phone}}
                                
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12 bor-b">
                  <h5>Company Information</h5>
                </div>

                

                <div class="col-xs-12 col-sm-12 col-md-12 padT10 padb10">
                  <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                      <div class="row">
                        <div class="col-xs-3 col-sm-3 col-md-3">
                            <strong><label>Company:</label></strong>
                        </div>
                        <div class="col-xs-9 col-sm-9 col-md-9">
                          {{$company_name}}      
                        </div>
                      </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12">
                      <div class="row">
                        <div class="col-xs-3 col-sm-3 col-md-3">
                            <strong><label>Roles:</label></strong>
                        </div>
                        <div class="col-xs-9 col-sm-9 col-md-9">
                            {{$role_list}}
                        </div>
                      </div>
                    </div>
                    
                  </div>
                </div>

                <!-- /.tab-content -->
              </div><!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
          <!-- /.card -->
        </div>
        <div class="col-3">
          @include('components.dashboard.vertical')
        </div>
        <!-- /.col -->


            </div>
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>
<!-- /.content -->

<!-- <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> -->
<!-- <script type="text/javascript" language="javascript" src="{{asset('js/users/index.js')}}"></script> -->
<script type="text/javascript" language="javascript" src="{{asset('js/users/validation_edit.js')}}"></script>
<script type="text/javascript" language="javascript" src="{{asset('js/users/manage_role.js')}}"></script>

@endsection