@extends('layouts.app')

@section('title', 'User profile detail | ')

@section('content')

<style type="text/css">
    
</style>

<!-- Page Content -->
    <div class="content container-fluid" style="margin:2px; padding: 5px 5px;">
    <!-- Page Header -->
    <div class="page-header" style="margin:2px; padding: 5px 2px;">
      <div class="row">
        <div class="col-sm-12">
          <h3 class="page-title" style="font-size: 22px; margin-bottom: 0px;">User profile details</h3>
        </div>
      </div>
    </div>
    <!-- /Page Header -->
    
    <div class="card mb-0">
      <div class="card-body">
        <div class="row">
          <div class="col-md-12">
            <div class="profile-view">
              <div class="profile-img-wrap">

                  <div class="edit-profile-img">
                     @if($user->profile_image !=null)
                      <img src="{{ asset('upload/profile-img/' . $user->profile_image) }}" title="{{$user->full_name}}" class="table-avtar preview_image">
                       @else
                      <img src="{{ asset('images/avtar.png') }}" title="{{$user->full_name}}" alt="" class="table-avtar preview_image">
                      @endif
                      <i id="loading" class="fa fa-spinner fa-spin fa-3x fa-fw" style="position: absolute;left: 29%;top: 36%;display: none"></i>
                       <input type="file" id="file-upload" accept="image/*" style="display: none"/>
                       <input type="hidden" id="file_name"/>
                       <input type="hidden" id="user_id" value="{{$user->id}}" />
                      <a href="javascript:changeProfile()" style="text-decoration: none;">
                      <span class="change-img" >Change Image</span></a>
                  </div>

              </div>
              <div class="profile-basic">
                <div class="row">
                  <div class="col-md-5">
                    <div class="profile-info-left">
                      <h3 class="user-name m-t-0 mb-0">{{$user->full_name}}</h3>
                      <h6 class="text-muted" style="margin-top: 5px;">{{$user->designation}}</h6>
                      <small class="text-info">{{$user->roleName}} ({{$user->department}})</small>
                      <div class="staff-id">Employee ID : @if($user->employee_id!=null){{$user->employee_id}} @else
                        N/A
                        @endif</div>                      
                      <div class="small doj " style="padding-top: 4px;">
                                                
                        Date of Join : 
                        @if($user->join_date!=null)
                        {{ date('d, M Y', strtotime($user->join_date))}}  
                        @else
                        N/A
                        @endif
                      </div>
                      <div class="staff-id">Office Email : {{$user->email}}</div>
                      <div class="staff-id">Status :@if($user->status==1) <span class="badge bg-inverse-success">Active</span> @else <span class="badge bg-inverse-danger">Inactive</span> @endif </div>
                      <!-- <div class="staff-id ">
                        Punching M. ID :  <a href="javascript:;" class=" " data-name="punching_machine_id"  data-type="text" data-pk="{{$user->id}}"  data-original-title="Update Punching M. ID"> 
                          @if($user->join_date!=null) {{$user->punching_machine_id}}  
                          @else
                          N/A
                          @endif
                        </a>
                      </div>  -->                     
                    </div>
                  </div>
                  <div class="col-md-7">
                    <ul class="personal-info">
                      <li>
                        <div class="title">Phone:</div>
                        <div class="text">
                          @if($user->phone_number!=null) 
                          +971-{{$user->phone_number}}
                          @else &nbsp;@endif
                        </div>
                      </li>
                      <li>
                        <div class="title text-danger">Emergency Phone:</div>
                        <div class="text text-danger">
                          @if($user->other_phone_number!=null) 
                          +971-{{$user->other_phone_number}}
                          @else &nbsp;@endif
                        </div>
                      </li>
                      <li>
                        <div class="title">Email:</div>
                        <div class="text"><a href=""> 
                          @if($user->other_email!=null) 
                          {{ $user->other_email}} 
                        @else &nbsp;@endif</a></div>
                      </li>
                      <li>
                        <div class="title">Birthday:</div>
                        <div class="text"> @if( $user->dob !=null ){{ date('d, M Y', strtotime($user->dob))}} @else &nbsp; @endif</div>
                      </li>
                      <li>
                        <div class="title">Address:</div>
                        <div class="text"> 
                        @if($address_info!=null)
                          {{ ucfirst($address_info->street_address)}}
                          @if($address_info->zipcode!=null)
                            , {{ ucfirst($address_info->zipcode)}}
                          @endif
                          @if($address_info->city_id!=null)
                            , {{ ucfirst($address_info->city_id)}}, India
                          @endif

                        @else
                          &nbsp;N/A
                        @endif
                      </div>
                      </li>
                      <li>
                        <div class="title">Gender:</div>
                        <div class="text">{{ ucfirst($user->gender)}}</div>
                      </li>
                      <li>
                        <div class="title">Reports to:</div>
                        <div class="text">
                          @if($user->reporting_to_user_id!=null)
                           <div class="avatar-box">
                            <div class="avatar avatar-xs">
                             <img src="{{ asset('images/avtar.png') }}" title="" alt="" class="table-avtar">
                            </div>
                           </div>
                           <a href="" style="font-size: 16px;"> {{Techsaga::get_username($user->reporting_to_user_id)}} </a>
                          @else
                            &nbsp;N/A
                          @endif
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <!-- giver permission who can update -->
              @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
              <div class="pro-edit"><a class="edit-icon" href="/user/edit/{{Request::segment(2)}}"><i class="fa fa-pencil"></i></a></div>
              @endif
              <!--  -->
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="card tab-box">
      <div class="row user-tabs">
        <div class="col-lg-12 col-md-12 col-sm-12 line-tabs">
          <ul class="nav nav-tabs nav-tabs-bottom">
            <li class="nav-item"><a href="{{ route('userProfile', [base64_encode($user->id)]) }}" class="nav-link ">Profile Information</a></li>
            <li class="nav-item"><a href="#emp_file"  class="nav-link active">File/Document</a></li> 
            
          </ul>
        </div>
      </div>
    </div>
    


  <style>
    .tab-panel-1 {
    background: #fff;
    box-shadow: 0px 0px 8px 3px #ccc;
    margin-top: 20px;
  }
  .mt-10{
    margin-top:10px;
  }
    
    </style>
    
    
    <div class="tab-content tab-panel-1">

       <!-- Document Tab -->

      <div class="tab-pane fade show active" id="emp_file">
        
        @if(count($user_files)> 0 )
        <div class="card-body">
        <div class="row">
            <div class="col-sm-8">
              <h3 class="page-title">Manage file</h3>              
            </div>
            <div class="col-sm-4 text-right">
              <a href="javascript:;" class="btn btn-sm btn-primary openFIleModal"> <i class="fa fa-plus"></i> Upload New </a>    
            </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <table class="table mt-10">
              <tr>
              <th>File name</th><th>File</th><th>Action</th>
              </tr>
              @foreach($user_files as $item)
              <tr><td>{{$item->key_name}}</td>
                <td> <a href="javascript:;"><i class="fa fa-file"></i></a> </td>
                <td><a href="{{url('/').'/upload/user-doc/'.$item->file_name}}" target="_blank" download> <i class="fa fa-download"></i> Download </a></td>
              </tr>
              @endforeach
            </table>
          </div>
        </div>
        @else
        <div class="row">        
         <!--  -->
         <div class="col-md-12" style="min-height: 500px; background: #fff; padding: 40px 0;">
           <div class="">
             <h3 class="text-muted text-center" style="margin-bottom: 24px;">File/Document is not uploaded yet.!</h3>
           </div>
           <div class="col-md-12 text-center">
             <a class="btn btn-sm btn-primary openFIleModal " href="javascript:;"> <i class="fa fa-file-o"></i> Add File</a>
           </div>
         </div>
         <!--  -->
         @endif

        </div>
      </div>
      <!-- /Projects Tab -->
    </div>
    </div>
  <!-- /Page Content -->
 
 
<!-- file Modal -->
  <div id="fileModal" class="modal custom-modal fade" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Upload Document</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form method="post" id="user_file_form" action="{{route('uploadUserFile')}}" enctype="multipart/form-data">
            @csrf
            <div class="form-scroll">                           
              <div class="card">
                <div class="card-body">
                  <h3 class="card-title">Upload File/Document <!-- <a href="javascript:void(0);" class="delete-icon"><i class="fa fa-trash-o"></i></a> --></h3>
                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group ">
                        <label class="label">File Name</label>
                        <input type="text" class="form-control label_file_name" id="label_file_name" name="label_file_name" >
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-label_file_name"></p>
                        <small class="text-muted">Address Proof, Education Certificate, Resume etc.</small>
                      </div>
                    </div>
                  </div>

                  <div class="row">
                    <div class="col-md-12">
                      <div class="form-group ">
                        <label class="label">Select a file</label>
                        <input type="file" class="form-control " id="userFile" name="userFile" >          
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-userFile"></p>              
                      </div>
                    </div>                    
                  </div>
                    <!-- <div class="add-more">
                      <a href="javascript:void(0);"><i class="fa fa-plus-circle"></i> Add More</a>
                    </div> -->
                </div>
              </div>
            </div>
            <div class="submit-section">
               <input type="hidden" id="file_user_id" name="user_id" value="{{ base64_encode($user->id)}}">
              <button type="submit" class="btn btn-primary submit-btn" id="uploadFileBtn">Upload</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Experience Modal -->

<script type="text/javascript">

$(document).ready(function (e) {

// file info
$('.openFIleModal').click(function(){
      $('#fileModal').modal({
        backdrop: 'static',
        keyboard: false
      });
});        

 
$('#uploadFileBtn').on('click', function() {

  // alert("Hey, this is under development...");

    var file_data = $('#userFile')[0].files[0];
    var form_data = new FormData();                  
    form_data.append('userFile', file_data);
    form_data.append('user_id', $('#file_user_id').val() );
    form_data.append('label_file_name', $('#label_file_name').val() );
    form_data.append('_token', "{{ csrf_token() }}" );                               
    $.ajax({
        url: $('#user_file_form').attr('action'), // point to server-side PHP script        
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(data){
          console.log(data);
          if (data.fail) {
              // alert("please select valid file or enter valid input.");
              for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
          }
          else {
               
                window.location.reload();
            }

        }
     });
    return false;
});

});

</script>
@endsection