@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 || $user->profile_image =="")
                      <img src="{{ asset('images/avtar.png') }}" title="{{$user->full_name}}" alt="" class="table-avtar preview_image">
                      @else
                      <img src="{{ asset('upload/profile-img/' . $user->profile_image) }}" title="{{$user->full_name}}" 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> &nbsp; 
                          <a href="javascript:;" class="doActiveUser" data="{{ base64_encode($user->id)}}">Activate Now</a>
                         @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->punching_machine_id!=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 text-info">Phone:</div>
                        <div class="text text-info">
                          @if($user->phone_number!=null) 
                          +{{$user->primary_phone_code.'-'.$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)                             
                            +{{$user->other_phone_code.'-'.$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($user->role_id !=1)
              @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
              @endif

              @if($user->role_id ==1)
              @if( auth()->user()->role_id == 1 )
              <div class="pro-edit"><a class="edit-icon" href="/user/edit/{{Request::segment(2)}}"><i class="fa fa-pencil"></i></a></div>
              @endif
              @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="#emp_profile" data-toggle="tab" class="nav-link active">Profile Information</a></li>
            <li class="nav-item"><a href="{{ route('userFile', [base64_encode($user->id)]) }}" class="nav-link">File/Document</a></li> 
            <!-- <li class="nav-item"><a href="active" data-toggle="tab" class="nav-link">Projects</a></li>            -->
          </ul>
        </div>
      </div>
    </div>
    
  <style>
  .panel-data-1{
    box-shadow:0px 0px 5px 2px #ccc;
  }
  </style>

    <div class="tab-content">
    
      <!-- Profile Info Tab -->
      <div id="emp_profile" class="pro-overview tab-pane fade show active">
        <div class="row">
          <div class="col-md-6 d-flex">
            <div class="card profile-box flex-fill">
              <div class="card-body panel-data-1">
                <h3 class="card-title">Personal Informations 

                 @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
                  <a href="javascript:;" data-id="{{$user->id}}" class="edit-icon openPersonalInfoModal"><i class="fa fa-pencil"></i></a>
                @endif
                </h3>
                 <ul class="personal-info">
                  <li>
                    <div class="title">Passport No.:</div>
                    <div class="text">
                      @if($personal_info!=null)
                      {{$personal_info->passport_no}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Passport Exp Date.:</div>
                    <div class="text">
                      @if($personal_info!=null)
                        @if($personal_info->passport_expiry_date!=null)
                          {{date('d-m-Y', strtotime($personal_info->passport_expiry_date))}}&nbsp;
                        @endif  
                        &nbsp;
                      @else
                      &nbsp;
                      @endif</div>
                  </li>
                  <li>
                    <div class="title">Visa Issue Date.:</div>
                    <div class="text">
                      @if($personal_info!=null)
                      @if($personal_info->visa_issue_date!=null)
                          {{date('d-m-Y', strtotime($personal_info->visa_issue_date))}}&nbsp;
                        @endif  
                        &nbsp;
                      @else
                      &nbsp;
                      @endif</div>
                  </li>
                  <li>
                    <div class="title">Visa Exp Date.:</div>
                    <div class="text">
                      @if($personal_info!=null)
                        @if($personal_info->visa_exp_date!=null)
                          {{date('d-m-Y', strtotime($personal_info->visa_exp_date))}}&nbsp;
                        @endif  
                        &nbsp;
                      @else
                      &nbsp;
                      @endif</div>
                  </li>
                  <li>
                    <div class="title">Emirates ID:</div>
                    <div class="text">
                      @if($personal_info!=null)
                      {{$personal_info->emirates_id}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Emirates ID Issue date:</div>
                    <div class="text">
                      @if($personal_info!=null)
                        @if($personal_info->emirates_id_issue_date!=null)
                          {{date('d-m-Y', strtotime($personal_info->emirates_id_issue_date))}}&nbsp;
                        @endif 
                        &nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Emirates ID Exp. date:</div>
                    <div class="text">
                      @if($personal_info!=null)
                          @if($personal_info->emirates_id_exp_date!=null)
                          {{date('d-m-Y', strtotime($personal_info->emirates_id_exp_date))}}&nbsp;
                        @endif 
                        &nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Nationality:</div>
                    <div class="text">
                      @if($personal_info!=null)
                      {{$personal_info->nationality}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  
                  <li>
                    <div class="title">Marital status:</div>
                    <div class="text">
                      @if($personal_info!=null)
                      {{$personal_info->marital_status}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Spouse Name:</div>
                    <div class="text">
                      @if($personal_info!=null)
                      {{$personal_info->spouse_name}} &nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-6 d-flex">
            <div class="card profile-box flex-fill">
               <div class="card-body panel-data-1">
                <h3 class="card-title">Emergency Contact 
                   @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
                  <a href="javascript:;" data-id="{{$user->id}}" class="edit-icon open_emergency_contact_modal"><i class="fa fa-pencil"></i></a>
                  @endif
                </h3>
                
                <h5 class="section-title">Primary</h5>
                <ul class="personal-info">                
                  <li>
                    <div class="title">Name</div>
                    <div class="text">
                      @if($p_contact_info!=null)
                      {{$p_contact_info->first_name.' '.$p_contact_info->last_name}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Relationship</div>
                    <div class="text">
                      @if($p_contact_info!=null)
                      {{$p_contact_info->relationship}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Phone </div>
                    <div class="text">
                      @if($p_contact_info!=null) 
                      {{$p_contact_info->emergency_contact}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>                
                </ul>
                <hr>
                <h5 class="section-title">Secondary</h5>
                <ul class="personal-info">                
                  <li>
                    <div class="title">Name</div>
                    <div class="text">
                      @if($s_contact_info!=null)
                      {{$s_contact_info->first_name.' '.$s_contact_info->last_name}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Relationship</div>
                    <div class="text">
                      @if($s_contact_info!=null)
                      {{$s_contact_info->relationship}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Phone </div>
                    <div class="text">
                      @if($s_contact_info!=null) 
                      {{$s_contact_info->emergency_contact}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 d-flex">
            <div class="card profile-box flex-fill">
              <div class="card-body panel-data-1">
                <h3 class="card-title">Bank information
                  @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
                  <a href="javascript:;" data-id="{{$user->id}}" class="edit-icon open_bank_info_modal"><i class="fa fa-pencil"></i></a>
                  @endif
                </h3>
                  <ul class="personal-info">
                  <li>
                    <div class="title">Account name</div>
                    <div class="text">
                      @if($bank_info!=null) 
                      {{$bank_info->name}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">Bank Name</div>
                    <div class="text">@if($bank_info!=null)
                      {{$bank_info->bank_name}}&nbsp;
                      @else
                      &nbsp;
                      @endif</div>
                  </li>
                  <li>
                    <div class="title">Account No.</div>
                    <div class="text">@if($bank_info!=null)
                      {{$bank_info->account_number}}&nbsp;
                      @else
                      &nbsp;
                      @endif</div>
                  </li>
                  <li>
                    <div class="title">IFSC Code</div>
                    <div class="text">
                      @if($bank_info!=null)
                      {{$bank_info->ifsc_code}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                  <li>
                    <div class="title">PAN No.</div>
                    <div class="text">
                      @if($bank_info!=null)
                      {{$bank_info->pan_number}}&nbsp;
                      @else
                      &nbsp;
                      @endif
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-md-6 d-flex">
            <div class="card profile-box flex-fill">
               <div class="card-body panel-data-1">
                <h3 class="card-title">Family Information 
                  @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
                  <a href="javascript:;" data-id="{{$user->id}}" class="edit-icon open_family_info_modal"><i class="fa fa-pencil"></i></a>
                  @endif</h3>
                <div class="table-responsive">
                  <table class="table table-nowrap">
                    <thead>
                      <tr>
                        <th>Name</th>
                        <th>Relationship</th>                        
                        <th>Phone</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody>

                      @if(count($family_info) > 0)
                      @foreach($family_info as $item)
                      <tr>
                        <td>
                          @if($item->name != null)
                          {{$item->name}}&nbsp;
                          @else
                          &nbsp;
                          @endif
                        </td>
                        <td>
                          @if($item->relationship !=null)
                          {{$item->relationship}}&nbsp;
                          @else
                          &nbsp;
                          @endif
                        </td>
                        <td> 
                          @if($item->phone !=null)
                          {{$item->phone}}&nbsp;
                          @else
                          &nbsp;
                          @endif
                        </td>                       
                        <td class="text-right">                         
                        </td>
                      </tr>                      
                      @endforeach
                      @endif
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 d-flex">
            <div class="card profile-box flex-fill">
              <div class="card-body panel-data-1">
                <h3 class="card-title">Education Informations 
                  @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
                  <a href="javascript:;" data-id="{{$user->id}}" class="edit-icon open_education_info_modal"><i class="fa fa-pencil"></i></a>
                  @endif
                </h3>
                <div class="experience-box">
                  <ul class="experience-list">
                    <li>
                      <div class="experience-user">
                        <div class="before-circle"></div>
                      </div>
                       <div class="experience-content">
                        <div class="timeline-content">
                          <a href="#/" class="name"> 
                          @if($education_info!=null)
                          {{$education_info->institution_name}}
                          @else
                          &nbsp;
                          @endif
                        </a>
                          <div> 
                          @if($education_info!=null)
                          {{$education_info->subject}}
                          @else
                          &nbsp;
                          @endif</div>
                          <span class="time">
                          @if($education_info!=null)
                         {{$education_info->from_date.'-'.$education_info->from_date}}
                          @else
                          &nbsp;
                          @endif
                          </span>
                        </div>
                      </div>
                    </li>
                    
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 d-flex">
            <div class="card profile-box flex-fill">
             <div class="card-body panel-data-1">
                <h3 class="card-title">Employment Information 
                  @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
                  <a href="javascript:;" data-id="{{$user->id}}" class="edit-icon open_experience_info_modal"><i class="fa fa-pencil"></i></a>
                  @endif
                </h3>
                <div class="experience-box">
                  <ul class="experience-list">
                    <li>
                      <div class="experience-user">
                        <div class="before-circle"></div>
                      </div>
                      <div class="experience-content">
                        <div class="timeline-content">
                          <a href="#/" class="name">
                          @if($work_info!=null)
                          {{$work_info->company}}
                          @else
                          &nbsp;
                          @endif
                          </a>                          
                          <span class="time">
                          @if($work_info!=null)
                          {{$work_info->from_date}}-{{$work_info->to_date}}
                          @else
                          &nbsp;
                          @endif
                          </span>
                        </div>
                      </div>
                    </li>
                    
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /Profile Info Tab -->
      
      <!-- Projects Tab -->
      <div class="tab-pane fade" id="emp_projects">
        <div class="row">
         <!--  -->
         <div class="col-md-12" style="min-height: 500px; background: #fff;">
           
         </div>
         <!--  -->
        </div>
      </div>
      <!-- /Projects Tab -->

      <!-- Projects Tab -->
      <div class="tab-pane fade" 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 ">
          <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 -->

  
  <!-- Personal Info Modal -->
  <div id="personal_info_modal" 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">Personal Information</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 action="{{route('/user/updatePersonalInfo')}}" id="personal_info_form" method="post" >
            @csrf
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Passport No <span class="text-danger">*</span></label>
                  <input type="text" name="passport_no" class="form-control passport_no">
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-passport_no"></p> 
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Passport Expiry Date <span class="text-danger">*</span></label>
                  <div class="cal-icon">
                    <input class="form-control datetimepicker passport_expire_date" name="passport_expire_date" type="text">
                    <p style="margin-bottom: 2px;" class="text-danger" id="error-passport_expire_date"></p> 
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
               <div class="col-md-6">
                <div class="form-group">
                  <label>Visa Issue Date <span class="text-danger">*</span></label>
                  <div class="cal-icon">
                    <input class="form-control datetimepicker visa_issue_date" name="visa_issue_date" type="text">
                    <p style="margin-bottom: 2px;" class="text-danger" id="error-visa_issue_date"></p> 
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Visa Expiry Date <span class="text-danger">*</span></label>
                  <div class="cal-icon">
                    <input class="form-control datetimepicker visa_exp_date" name="visa_exp_date" type="text">
                    <p style="margin-bottom: 2px;" class="text-danger" id="error-visa_exp_date"></p> 
                  </div>
                </div>
              </div>
            </div>
              <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Emirates ID. <span class="text-danger">*</span></label>
                  <input class="form-control emirates_id" name="emirates_id" value="" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-emirates_id"></p> 
                </div>
              </div>
              
            </div>
            <div class="row">

              <div class="col-md-6">
                <div class="form-group">
                  <label>Emirates ID Issue Date <span class="text-danger">*</span></label>
                  <div class="cal-icon">
                    <input class="form-control datetimepicker emirates_id_issue_date" name="emirates_id_issue_date" type="text">
                    <p style="margin-bottom: 2px;" class="text-danger" id="error-emirates_id_issue_date"></p> 
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label>Emirates ID Expiry Date <span class="text-danger">*</span></label>
                  <div class="cal-icon">
                    <input class="form-control datetimepicker emirates_id_exp_date" name="emirates_id_exp_date" type="text">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Nationality <span class="text-danger">*</span></label>
                  <input class="form-control nationality" name="nationality" type="text">
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-nationality"></p> 
                </div>
              </div>
              
              <div class="col-md-6">
                <div class="form-group">
                  <label>Marital status </label>
                  <select class="select form-control marital_status" name="marital_status">
                    <option value="">-Select-</option>
                    <option value="Single">Single</option>
                    <option value="Married">Married</option>
                  </select>
                  <p style="margin-bottom: 2px;" class="text-danger" id="error-marital_status"></p> 
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label>Spouse Name</label>
                  <input class="form-control employment_of_spouse" name="spouse_name" type="text">
                </div>
              </div>
              
            </div>
            <input type="hidden" name="user_id" value="{{ base64_encode($user->id)}}">
            <div class="submit-section">
              <button type="submit" name="personal_info_submit" class="btn btn-primary submit-btn">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Personal Info Modal -->
  <!-- Emergency Contact Modal -->
  <div id="emergency_contact_modal" 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">Emergency Contact</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 action="{{route('/user/emergencyContact')}}" id="emergency_contact_form" method="post" >
            @csrf
            <div class="card">
              <div class="card-body">
                <h3 class="card-title">Primary Contact</h3>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>First Name <span class="text-danger">*</span></label>
                      <input type="text" class="form-control p_first_name" name="p_first_name">
                      <p style="margin-bottom: 2px;" class="text-danger" id="error-p_first_name"></p>
                    </div>
                  </div>
                   <div class="col-md-6">
                    <div class="form-group">
                      <label>Last Name</label>
                      <input class="form-control p_last_name" type="text" name="p_last_name">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Relationship <span class="text-danger">*</span></label>
                      <input class="form-control p_relationship" type="text" name="p_relationship">
                      <p style="margin-bottom: 2px;" class="text-danger" id="error-p_relationship"></p>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Phone <span class="text-danger">*</span></label>
                      <input class="form-control p_emergency_contact number_only" maxlength="10" type="text" name="p_emergency_contact">
                      <p style="margin-bottom: 2px;" class="text-danger" id="error-p_emergency_contact"></p>
                    </div>
                  </div>                 
                </div>
              </div>
            </div>
            
            <div class="card">
              <div class="card-body">
                <h3 class="card-title">Secodary Contact</h3>
                <div class="row">
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>First Name </label>
                      <input type="text" class="form-control s_first_name" name="s_first_name">
                    </div>
                  </div>
                   <div class="col-md-6">
                    <div class="form-group">
                      <label>Last Name</label>
                      <input class="form-control s_last_name" type="text" name="s_last_name">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Relationship </label>
                      <input class="form-control s_relationship" type="text" name="s_relationship">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>Phone </label>
                      <input class="form-control s_emergency_contact number_only" type="text" name="s_emergency_contact">
                    </div>
                  </div>                 
                </div>
              </div>
            </div>
            <div class="submit-section">
              <input type="hidden" name="user_id" value="{{ base64_encode($user->id)}}">
              <button type="submit" class="btn btn-primary submit-btn">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Emergency Contact Modal -->

<!-- Family Info Modal -->
  <div id="bank_info_modal" 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"> Bank Informations</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="bank_info_form" action="{{route('/user/bankInfo')}}">
            @csrf
            <div class="">
              <div class="card">
                <div class="card-body">
                  <h3 class="card-title">Bank account details </h3>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Candidate Name <span class="text-danger">*</span></label>
                        <input class="form-control account_name" type="text" name="account_name">
                        <small class="text-muted">Name should be as per bank info.</small>
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-account_name"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Bank Name <span class="text-danger">*</span></label>
                        <input class="form-control bank_name" type="text" name="bank_name">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-bank_name"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Account Number <span class="text-danger">*</span></label>
                        <input class="form-control account_number number_only" type="text" name="account_number">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-account_number"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>IFSC CODE<span class="text-danger">*</span></label>
                        <input class="form-control ifsc_code" type="text" name="ifsc_code">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-ifsc_code"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Branch  </label>
                        <input class="form-control ifsc_code" type="text" name="branch">

                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>PAN Number <span class="text-danger">*</span></label>
                        <input class="form-control pan_number" type="text" name="pan_number">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-pan_number"></p>
                      </div>
                    </div>
                    
                    <div class="col-md-12">
                      <div class="form-group">
                        <label>Notes </label>
                        <input class="form-control notes" type="text" name="notes">
                      </div>
                    </div>

                  </div>
                </div>
              </div>
             
            </div>
            <div class="submit-section">
              <input type="hidden" name="user_id" value="{{ base64_encode($user->id)}}">
              <button type="submit" class="btn btn-primary submit-btn">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Family Info Modal -->
  
 
  <!-- Family Info Modal -->
  <div id="family_info_modal" 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"> Family Informations</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="family_info_form" action="{{route('/user/familyInfo')}}">
            @csrf
            <div class="form-scroll">
              <div class="card">
                <div class="card-body">
                  <h3 class="card-title">Family Member <a href="javascript:void(0);" class="delete-icon"><i class="fa fa-trash-o"></i></a></h3>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Name <span class="text-danger">*</span></label>
                        <input class="form-control name" type="text" name="name">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-name"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Relationship <span class="text-danger">*</span></label>
                        <input class="form-control relationship" type="text" name="relationship">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-relationship"></p>
                      </div>
                    </div>                    
                    <div class="col-md-6">
                      <div class="form-group">
                        <label>Phone <span class="text-danger">*</span></label>
                        <input class="form-control phone number_only" maxlength="10" type="text" name="phone">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-phone"></p>
                      </div>
                    </div>                    
                  </div>
                </div>                
                <!--  -->
              </div>
              <!-- add more -->
               <!--  <div class="col-md-12">
                  <div class="add-more">
                  <a href="javascript:void(0);"><i class="fa fa-plus-circle"></i> Add More</a>
                  </div>
                </div> -->
             
            </div>
            <div class="submit-section">
              <input type="hidden" name="user_id" value="{{ base64_encode($user->id)}}">
              <button type="submit" class="btn btn-primary submit-btn">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Family Info Modal -->

   
  <!-- Education Modal -->
   <div id="education_info_modal" 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"> Education Information (Lates Education)</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" action="{{route('/user/educationInfo')}}" id="education_info_form">
            @csrf
            <div class="form-scroll">
              <div class="card">
                <div class="card-body">
                  <h3 class="card-title">Education Informations <!-- <a href="javascript:void(0);" class="delete-icon"><i class="fa fa-trash-o"></i></a> --></h3>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group  ">
                        <label class="focus-label">Institution</label>
                        <input type="text" name="institution_name" value="" class="form-control floating institution_name">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-institution_name"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group  ">
                        <label class="focus-label">Subject</label>
                        <input type="text" name="subject" value="" class="form-control floating subject">                        
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-subject"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group  ">
                        <label class="focus-label">Start Date</label>
                        <div class="cal-icon">
                          <input type="text" name="start_date" value="" class="form-control start_date floating datetimepicker">
                        </div>
                        
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-start_date"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group  ">
                        <label class="focus-label">Complete Date</label>
                        <div class="cal-icon">
                          <input type="text" name="completed_date" value="" class="form-control completed_date floating datetimepicker">
                        </div>                        
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-completed_date"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group ">
                        <label class="focus-label">Degree</label>
                        <input type="text" name="degree" value="" class="form-control degree ">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-degree"></p>
                        
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group ">
                        <label class="focus-label">Grade</label>
                        <input type="text" name="grade" value="" class="form-control grade floating">
                        
                      </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" name="user_id" value="{{ base64_encode($user->id)}}">
                <button class="btn btn-primary submit-btn">Submit</button>
              </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Education Modal -->
  
  <!-- Experience Modal -->
  <div id="experience_info_modal" 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">Employment info - Latest Experience Informations </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" action="{{route('/user/employment')}}" id="experience_info_form">
            @csrf
            <div class="form-scroll">                           
              <div class="card">
                <div class="card-body">
                  <h3 class="card-title">Your last employer and job profile <!-- <a href="javascript:void(0);" class="delete-icon"><i class="fa fa-trash-o"></i></a> --></h3>
                  <div class="row">
                    <div class="col-md-6">
                      <div class="form-group ">
                        <label class="focus-label">Company Name</label>
                        <input type="text" class="form-control floating company" name="company" value="">
                        
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-company"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group">
                        <label class="focus-label">Location</label>
                        <input type="text" class="form-control floating location" name="location" value="">                        
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-location"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group ">
                        <label class="focus-label">Job Position</label>
                        <input type="text" class="form-control floating job_position" name="job_position" value="">
                        <p style="margin-bottom: 2px;" class="text-danger" id="error-job_position"></p>
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group ">
                        <label class="focus-label">Period From</label>
                        <div class="cal-icon">
                          <input type="text" class="form-control floating datetimepicker from_date" name="from_date" value="">
                        </div>                        
                      </div>
                    </div>
                    <div class="col-md-6">
                      <div class="form-group ">
                        <label class="focus-label">Period To</label>
                        <div class="cal-icon">
                          <input type="text" class="form-control floating datetimepicker to_date" name="to_date" value="">
                        </div>                        
                      </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" name="user_id" value="{{ base64_encode($user->id)}}">
              <button type="submit" class="btn btn-primary submit-btn">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!-- /Experience Modal -->

<!-- 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">
$(function(){

$( "#from_date,#to_date" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
autoclose:true,
todayHighlight: true,
format: 'dd/mm/yyyy',
startDate:'today'
});

//opoen modal for personal info
$('.openPersonalInfoModal').click(function(){
      $('#personal_info_modal').modal({
        backdrop: 'static',
        keyboard: false
      });

    //
    $.ajax({
        type: 'get',
        url: "{{route('/user/updatePersonalInfo')}}",
        data: {'user_id':"{{base64_encode($user->id)}}"},        
        success: function (data) {
            console.log(data);
            // return false;
            $("#personal_info_form")[0].reset();
            // console.log(data.result.passport_no);
            if(data.result !=null)
            {
                
                $('.passport_no').val(data.result.passport_no);
                $('.passport_expire_date').val(moment(data.result.passport_expiry_date).format('DD-MM-YYYY'));
                $('.visa_issue_date').val(moment(data.result.visa_issue_date).format('DD-MM-YYYY'));
                $('.visa_exp_date').val(moment(data.result.visa_exp_date).format('DD-MM-YYYY'));
                $('.emirates_id').val(data.result.emirates_id);
                $('.emirates_id_issue_date').val(moment(data.result.emirates_id_issue_date).format('DD-MM-YYYY'));
                $('.emirates_id_exp_date').val(moment(data.result.emirates_id_exp_date).format('DD-MM-YYYY'));
                $('.nationality').val(data.result.nationality);                                
                $(".marital_status").val(data.result.marital_status).trigger("change");                
                $('.no_of_children').val(data.result.no_of_children);
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });

});        

// submit form
$(document).on('submit', 'form#personal_info_form', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
          
            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});

// emergency contact
$('.open_emergency_contact_modal').click(function(){
      $('#emergency_contact_modal').modal({
        backdrop: 'static',
        keyboard: false
      });

    //
    $.ajax({
        type: 'get',
        url: "{{route('/user/emergencyContact')}}",
        data: {'user_id':"{{base64_encode($user->id)}}"},        
        success: function (data) {
            console.log(data);
            $("#personal_info_form")[0].reset();            
            if(data.result !='null')
            {
              //check if primary data 
              if(data.result.is_primary==1){
                $('.p_first_name').val(data.result.first_name);
                $('.p_last_name').val(data.result.last_name);
                $('.p_relationship').val(data.result.relationship);
                $('.p_emergency_contact').val(data.result.emergency_contact);                
              }
              if(data.result.is_primary==0){
                $('.s_first_name').val(data.result.first_name);
                $('.s_last_name').val(data.result.last_name);
                $('.s_relationship').val(data.result.relationship);
                $('.s_emergency_contact').val(data.result.emergency_contact);                
              }
                
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
});        

// submit form
$(document).on('submit', 'form#emergency_contact_form', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});
//

// family info
$('.open_family_info_modal').click(function(){
      $('#family_info_modal').modal({
        backdrop: 'static',
        keyboard: false
      });

//
    $.ajax({
        type: 'get',
        url: "{{route('/user/familyInfo')}}",
        data: {'user_id':"{{base64_encode($user->id)}}"},        
        success: function (data) {
            console.log(data);
            $("#family_info_form")[0].reset();
            if(data !='null')
            {                          
                $('.name').val(data.result.name);                
                $('.relationship').val(data.result.relationship);
                $('.phone').val(data.result.phone);                              
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
});        

// submit form
$(document).on('submit', 'form#family_info_form', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});

// bank info
$('.open_bank_info_modal').click(function(){
      $('#bank_info_modal').modal({
        backdrop: 'static',
        keyboard: false
      });

//
    $.ajax({
        type: 'get',
        url: "{{route('/user/bankInfo')}}",
        data: {'user_id':"{{base64_encode($user->id)}}"},        
        success: function (data) {
            console.log(data);
            $("#bank_info_form")[0].reset();
            
            if(data !='null')
            {              
              //check if primary data               
                $('.account_name').val(data.result.name);
                $('.bank_name').val(data.result.bank_name);
                $('.account_number').val(data.result.account_number);
                $('.ifsc_code').val(data.result.ifsc_code);          
                $('.pan_number').val(data.result.pan_number);      
                $('.notes').val(data.result.notes);  
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
});        

// submit form
$(document).on('submit', 'form#bank_info_form', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});
//

// education info
$('.open_education_info_modal').click(function(){
      $('#education_info_modal').modal({
        backdrop: 'static',
        keyboard: false
      });

//
    $.ajax({
        type: 'get',
        url: "{{route('/user/educationInfo')}}",
        data: {'user_id':"{{base64_encode($user->id)}}"},        
        success: function (data) {
            console.log(data);
            $("#education_info_form")[0].reset();
            
            if(data !='null')
            {              
              //check if primary data               
                $('.institution_name').val(data.result.institution_name);
                $('.subject').val(data.result.subject);
                $('.degree').val(data.result.degree);
                $('.grade').val(data.result.grade);          
                $('.start_date').val(data.result.from_date);      
                $('.completed_date').val(data.result.to_date);  
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
});        

// submit form
$(document).on('submit', 'form#education_info_form', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});
//

// experience info
$('.open_experience_info_modal').click(function(){
      $('#experience_info_modal').modal({
        backdrop: 'static',
        keyboard: false
      });

//
    $.ajax({
        type: 'get',
        url: "{{route('/user/employment')}}",
        data: {'user_id':"{{base64_encode($user->id)}}"},        
        success: function (data) {
            console.log(data);
            $("#experience_info_form")[0].reset();
            
            if(data !='null')
            {              
              //check if primary data               
                $('.company').val(data.result.company);
                $('.location').val(data.result.location);
                $('.from_date').val(data.result.from_date);
                $('.to_date').val(data.result.to_date);          
                $('.job_position').val(data.result.designation);                      
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
});        

// submit form
$(document).on('submit', 'form#experience_info_form', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});

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

// submit form
$(document).on('submit', 'form#experience_info_form', function (event) {
    event.preventDefault();
    var form = $(this);
    var data = new FormData($(this)[0]);
    var url = form.attr("action");
    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) {
            $('.is-invalid').removeClass('is-invalid');
            if (data.fail) {
                for (control in data.errors) {
                    $('input[name=' + control + ']').addClass('is-invalid');
                    $('#error-' + control).html(data.errors[control]);
                }
            } else {
                $('#modalForm').modal('hide');
                window.location.reload();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});

//
});

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

 
$('#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;
});

//

$(document).on('click', '.doActiveUser', function (event) {
    event.preventDefault();
    var form = $( this );    
    var user_id = $(this).attr('data');
      
    if(confirm("Are you sure want to activate this user?")){ 
    $.ajax({
        type:'POST',
        url: "{{route('doActiveUser')}}",
        data: {"_token": "{{ csrf_token() }}","user_id":user_id},        
        success: function (data) {
        
        console.log(data);

        if (data.status=='success') {
            
            location.reload();

            var approve = "<button class='btn btn-primary approvalStatus btn-small' visitid='"+user_id+"'>Approve</button>";
            var denyData = "<button class='btn btn-danger approvalStatus btn-small' visitid='"+user_id+"'>Active</button>";

            $("table.userTable").find("[data='" + user_id + "']").find('td.userStatus').html('<label class="control-label col-md-12"><span class="label text-danger">Inactive</span></label>');            
           
            updateNotification(userName, 'Account has been disabled', 'success');

            } else {
                
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
  }


});


});

</script>
@endsection