@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper employee_screen">
   <!-- BEGIN CONTENT BODY -->
   <form class="form-horizontal form-row-seperated" action="" method="post" enctype="multipart/form-data" id="">
      <input type="hidden" name="submitted" value="submitted">
      <div class="top_bar page-content" style="min-height:629px">
         <div class="top_status_bar">
            <div class="progress_bar"></div>
         </div>
         <div class="breadcrumbs">
            <ul>
               <li><a href="http://backoffice.evakopro.site/">Home</a></li>
               <li><a href="#" class="breadcrumb_link" onclick="return false">Employee view</a></li>
            </ul>
            {{--  <button class="btn btn-large pull-right help help_btn theme_btn">?</button>  --}}
            <input type="hidden" name="save_customer" value="1">
         </div>
      </div>
      <!-- BEGIN PAGE CONTENT -->
      <div class="page-content" style="min-height:629px">
         <!-- BEGIN PAGE HEADER-->
         <!-- BEGIN PAGE BAR -->
         <div class="row">
            <div class="col-md-12">
               <div class="portlet">
                  <div class="portlet-title" style="margin-bottom: 1px !important;">
                     <div class="caption">
                        <h2>Employee View</h2>
                        <span class="subtitle">
                        View and manage a employee in detail, you will get a clear idea on the role, department & contact details.
                        </span>
                     </div>
                     {{--  <div class="actions success_actions" style="">
                        <div class="actions_dropdown">
                           <span>Actions</span>
                           <ul class="actions_list">
                              <li>
                                 <a href="http://backoffice.evakopro.site/hr/newstaff" class="">New Staff</a>
                              </li>
                           </ul>
                        </div>
                     </div>  --}}
                  </div>
               </div>
            </div>
         </div>
         <!--END TOP SECTION-->
         <!-- BEGIN PAGE WRAPPER -->
         <div class="portlet full_wrap">
            <div class="row form-group full_wrap_row">
               <!--LEFT SECTION ALL-->
               <div class="col-md-12 pl_pr_0">
                  <div class="col-md-9">
                     <!--OVERVIEW SECTION -->
                     <div class="overview_section">
                        <div class="row">
                           <div class="col-md-12 pl_pr_0">
                              <div class="portlet-body">
                                 <!--LEFT SECTION DP-->
                                 <div class="col-md-2 left_profile employee">
                                    <!--IMAGE-->
                                    <div class="img_wrap contact_profile_pic">
                                        <img src="{{ ($data['employee']['image'] && file_exists('uploads/employees/thumbnail/' . $data['employee']['thumbnail'])) ? asset('uploads/employees/thumbnail/'.$data['employee']['thumbnail']) : asset('assets/custom/img/profile.png') }}" class="dp_img" />
                                       {{--  <img src="{{asset('uploads/employees/'.$data['employee']['image'])}}" class="dp_img">  --}}
                                    </div>
                                    <!--IMAGE-->
                                    <!--CONTACT TYPE-->
                                    <div class="contact_type">
                                       <span class="yellow_btn">
                                       EMP ID: {{ $data['employee']['id'] }}                                                        </span>
                                    </div>
                                    <!--CONTACT TYPE-->
                                    <!--SOCIAL MEDIA SECTION-->
                                    {{--  <div class="social_media_link">
                                       <a href="https://https://www.facebook.com/afrasmhd" class="fb social_icon" style="display: inline-block" target="_blank">
                                       <i class="fa fa-facebook-f"></i>
                                       </a>
                                       <a href="https://https://plus.google.com/afrasmhd" class="tum social_icon" target="_blank">
                                       <i class="fa fa-tumblr"></i>
                                       </a>
                                       <a href="https://www.linkedin.com/afrasmhd" class="in social_icon" style="display: inline-block" target="_blank">
                                       <i class="fa fa-linkedin"></i>
                                       </a>
                                       <a href="https://https://www.twitter.com/afrasmhd" class="tw social_icon" style="display: inline-block" target="_blank">
                                       <i class="fa fa-twitter"></i>
                                       </a>
                                       <a href="https://https://plus.google.com/afrasmhd" class="gp social_icon" style="display: inline-block" target="_blank">
                                       <i class="fa fa-google-plus"></i>
                                       </a>
                                    </div>  --}}
                                    <!--SOCIAL MEDIA SECTION-->
                                 </div>
                                 <!--LEFT SECTION DP-->
                                 <div class="col-md-10 middle_overview pl_pr_0">
                                    <!--TOP INTRO SECTION-->
                                    <div class="top_intro">
                                       <div class="row">
                                          <div class="col-md-8 contact_info">
                                             <h2 class="business_name">
                                                <span class="business_name">{{ $data['employee']['fname'].' '.$data['employee']['lname'] }}</span>
                                             </h2>
                                             <span class="contact_name">
                                             <span class="designation">
                                                @foreach ($data['roles'] as $key => $value )
                                                    @if($key == $data['employee']['role_id'])
                                                    {{ $value }},
                                                    @endif
                                                @endforeach
                                                </span>
                                                @if(!empty($data['roles']) && !empty($data['departments']))
                                                     <span class="one_space_business">&nbsp;</span>
                                                @endif
                                             <span class="department">
                                                @foreach ($data['departments'] as $key => $value )
                                                    @if($key == $data['employee']['department_id'])
                                                        {{ $value }}
                                                    @endif
                                                @endforeach
                                             </span>
                                             </span>
                                             <span class="contact_address">
                                             <!--<span class="staff_address">Main Branch</span>-->
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                    <!--TOP INTRO SECTION-->
                                    <!--MIDDLE DETAIL INFO SECTION-->
                                    <div class="content_detail_info">
                                       <div class="row">
                                          <div class="col-md-12">
                                             <div class="col-md-2">Department</div>
                                             <div class="col-md-4">
                                                <span class="department">
                                                    @foreach ($data['departments'] as $key => $value )
                                                        @if($key == $data['employee']['department_id'])
                                                            {{ $value }}
                                                        @endif
                                                    @endforeach
                                                </span>
                                             </div>
                                             <div class="col-md-2">Role</div>
                                             <div class="col-md-4">
                                                <span class="nationality">
                                                    @foreach ($data['roles'] as $key => $value )
                                                        @if($key == $data['employee']['role_id'])
                                                        {{ $value }}
                                                        @endif
                                                    @endforeach
                                                </span>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="row">
                                          <div class="col-md-12">
                                             <div class="col-md-2">Email</div>
                                             <div class="col-md-4 email_clr">
                                                <span class="work_email">{{ $data['employee']['email'] }}</span>
                                             </div>
                                             <div class="col-md-2">Telephone</div>
                                             <div class="col-md-4">
                                                <span class="passport">{{ $data['employee']['phone'] }}</span>
                                             </div>
                                          </div>
                                       </div>
                                       <div class="row">
                                          <div class="col-md-12">
                                             <div class="col-md-2">Status</div>
                                             <div class="col-md-4 email_clr">
                                                <span class="personal_email">{{ ($data['employee']['status']) ? 'Active' : 'inactive' }}</span>
                                             </div>
                                             <div class="col-md-2">Address</div>
                                          <div class="col-md-4">
                                             <span class="passport">{{ $data['employee']['address'] }}</span>
                                          </div>
                                          </div>
                                       </div>
                                    </div>
                                    <!--MIDDLE DETAIL INFO SECTION-->
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!--END OVERVIEW SECTION -->
                     <!--ACTIVITIES SECTION -->
                     <div class="activities_section">
                        <div class="row">
                           <div class="col-md-12">
                              <div class="portlet-body">
                                 <div class="row">
                                    <div class="col-md-12 pl_pr_0" style="position: relative;">
                                       <!--TOP HEADER-->
                                       <div class="header_top_activities">
                                          <div class="col-md-6">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/star.png" class="msg_img">
                                             <span class="semi_bold span_spaces">RECENT ACTIVITIES</span>
                                          </div>
                                          <div class="col-md-6 pl_pr_0">
                                              @php ($get_permission = permission("employee", "full-permission"))
                                              @if($get_permission)
                                             <span data-url="{{ route('admin.employees.edit',encrypt($data['employee']['id'])) }}" class="edit_employee edit_link view_convo pull-right">
                                             Edit Details
                                             </span>
                                              @endif
                                             <span class="total_convo pull-right">
                                             Recent
                                             <span class="log_recent_count">
                                             0                                                                    </span>
                                             of
                                             <span class="log_total_count">
                                             0                                                                    </span>
                                             showing
                                             </span>
                                          </div>
                                       </div>
                                       <!--TOP HEADER-->
                                       <!--ACTIVITY ROWS-->
                                       {{--  <div class="activity_row_wrap">
                                          <div class="each_activity">
                                             <div class="col-md-12">
                                                <div class="convo_content_wrap">
                                                   <div class="activity_content">
                                                      <span class="activity_title">
                                                      Employee Updated                                                                                    </span>
                                                      <span class="activity_action">with</span>
                                                      Employee 'Mr Afras Muhammed' information is updated by Afras.muhammed@gmail.com
                                                   </div>
                                                   <span class="user_name">
                                                   Mr Afras Muhammed                                                                                </span>
                                                   <span class="last_updated">
                                                   one year ago                                                                                </span>
                                                </div>
                                             </div>
                                          </div>
                                          <div class="each_activity">
                                             <div class="col-md-12">
                                                <div class="convo_content_wrap">
                                                   <div class="activity_content">
                                                      <span class="activity_title">
                                                      Employee Updated                                                                                    </span>
                                                      <span class="activity_action">with</span>
                                                      Employee 'Mr Afras Muhammed' information is updated by Afras.muhammed@gmail.com
                                                   </div>
                                                   <span class="user_name">
                                                   Mr Afras Muhammed                                                                                </span>
                                                   <span class="last_updated">
                                                   one year ago                                                                                </span>
                                                </div>
                                             </div>
                                          </div>
                                          <div class="each_activity">
                                             <div class="col-md-12">
                                                <div class="convo_content_wrap">
                                                   <div class="activity_content">
                                                      <span class="activity_title">
                                                      Employee Updated                                                                                    </span>
                                                      <span class="activity_action">with</span>
                                                      Documents uploaded for 'Afras Muhammed' by Afras.muhammed@gmail.com
                                                   </div>
                                                   <span class="user_name">
                                                   Mr Afras Muhammed                                                                                </span>
                                                   <span class="last_updated">
                                                   one year ago                                                                                </span>
                                                </div>
                                             </div>
                                          </div>
                                       </div>  --}}
                                       <!--ACTIVITY ROWS-->
                                       {{--  <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" id="attendee_loader" class="activity_data_loader">
                                       <span class="show_more_activity" last_log_id="3272" related="Employee" contact_uuid="d3f2986b-4727-5908-a551-afe3c6a2b5c4">  --}}

                                       </span>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!--ACTIVITIES SECTION -->
                  </div>
                  <!--LEFT SECTION ALL-->
                  <!--RIGHT TAB SECTION ALL-->
                  <div class="col-md-3 pl_pr_0">
                     <div class="right_tabs">
                        <div class="tabbable-line">
                           <ul class="nav nav-tabs ">
                              <li class="active">
                                 <a href="#tab_notes" data-toggle="tab" aria-expanded="true">
                                 NOTES
                                 </a>
                              </li>
                              <!--                                            <li class="">-->
                              <!--                                                <a href="#tab_tasks" data-toggle="tab" aria-expanded="false">-->
                              <!--                                                    TASKS-->
                              <!--                                                </a>-->
                              <!--                                            </li>-->
                              <!--                                            <li class="">-->
                              <!--                                                <a href="#tab_appointments" data-toggle="tab" aria-expanded="false">-->
                              <!--                                                    APPOINTMENTS </a>-->
                              <!--                                            </li>-->
                              <!--                                            <li class="">-->
                              <!--                                                <a href="#tab_identifications" data-toggle="tab" aria-expanded="false">-->
                              <!--                                                    IDENTIFICATIONS-->
                              <!--                                                </a>-->
                              <!--                                            </li>-->
                              <li class="">
                                 <a href="#tab_files" data-toggle="tab" aria-expanded="false">
                                 FILES
                                 </a>
                              </li>
                           </ul>
                           <div class="tab-content">
                              <!--NOTES TAB-->
                              <div class="tab-pane active" id="tab_notes">
                                 <div class="newnote_box">
                                    <textarea class="new_note" name="new_note" id="new_note" placeholder="Start typing..." rows="6" maxlength="350"></textarea>
                                    <input type="hidden" name="note_type" id="note_type" value="Employee">
                                    <input type="hidden" name="note_type_uuid" id="note_type_uuid" value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">
                                    {{--  <button class="save_note pull-right disabled"><i class="fa fa-check"></i></button>  --}}
                                 </div>
                                 <div class="notes_wrap">
                                    <div class="each_task_row no_result">
                                       <span class="no_result_found col-md-12">No note added yet.</span>
                                    </div>
                                 </div>
                              </div>
                              <!--NOTES TAB-->
                              <!--TASKS TAB-->
                              <div class="tab-pane" id="tab_tasks">
                                 <div class="new_task">
                                    <i class="fa fa-plus add_sign"></i> <span class=""> Add Task </span>
                                 </div>
                                 <div class="tasks_wrap">
                                    <div class="each_task_row no_result">
                                       <span class="no_result_found col-md-12">No task added yet.</span>
                                    </div>
                                 </div>
                              </div>
                              <!--TASKS TAB-->
                              <!--APPOINTMENTS TAB-->
                              <div class="tab-pane" id="tab_appointments">
                                 <div class="new_appointment">
                                    <i class="fa fa-plus add_sign"></i>
                                    <span class=""> Add Appointment </span>
                                 </div>
                                 <div class="appointment_wrap">
                                 </div>
                              </div>
                              <!--APPOINTMENTS TAB-->
                              <!--IDENTIFICATIONS TAB-->
                              <div class="tab-pane" id="tab_identifications">
                                 <div class="new_identification">
                                    <i class="fa fa-plus add_sign"></i>
                                    <span class=""> Add Identification </span>
                                 </div>
                                 {{--  <div class="file_wrap">
                                    <div class="each_file_row">
                                       <div class="content_wrap">
                                          <div class="col-md-2 pr_0">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/jpg_img.png" class="img_quote">
                                          </div>
                                          <div class="col-md-8 pl_0">
                                             <div class="content_area">
                                                <a href="#">
                                                <span class="subject">
                                                delivery note_Dolci.jpg
                                                </span>
                                                </a>
                                             </div>
                                             <span class="user_name">Shaji Muhammed</span>
                                             <span class="last_updated">25 Nov 2017</span>
                                             <span class="last_updated img_info">image/jpg - 399.22 KB</span>
                                          </div>
                                          <div class="col-md-2 tab_dots_menu">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/dots_menu_grey.png" class="pull-right">
                                          </div>
                                       </div>
                                    </div>
                                    <div class="each_file_row">
                                       <div class="content_wrap">
                                          <div class="col-md-2 pr_0">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/jpg_img.png" class="img_quote">
                                          </div>
                                          <div class="col-md-8 pl_0">
                                             <div class="content_area">
                                                <a href="#">
                                                <span class="subject">
                                                delivery note_Dolci.jpg
                                                </span>
                                                </a>
                                             </div>
                                             <span class="user_name">Shaji Muhammed</span>
                                             <span class="last_updated">25 Nov 2017</span>
                                             <span class="last_updated img_info">image/jpg - 399.22 KB</span>
                                          </div>
                                          <div class="col-md-2 tab_dots_menu">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/dots_menu_grey.png" class="pull-right">
                                          </div>
                                       </div>
                                    </div>
                                    <div class="each_file_row">
                                       <div class="content_wrap">
                                          <div class="col-md-2 pr_0">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/jpg_img.png" class="img_quote">
                                          </div>
                                          <div class="col-md-8 pl_0">
                                             <div class="content_area">
                                                <a href="#">
                                                <span class="subject">
                                                delivery note_Dolci.jpg
                                                </span>
                                                </a>
                                             </div>
                                             <span class="user_name">Shaji Muhammed</span>
                                             <span class="last_updated">25 Nov 2017</span>
                                             <span class="last_updated img_info">image/jpg - 399.22 KB</span>
                                          </div>
                                          <div class="col-md-2 tab_dots_menu">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/dots_menu_grey.png" class="pull-right">
                                          </div>
                                       </div>
                                    </div>
                                 </div>  --}}
                              </div>
                              <!--IDENTIFICATIONS TAB-->
                              <!--FILES-->
                              <div class="tab-pane" id="tab_files">
                                 <div class="new_file">
                                    <i class="fa fa-plus add_sign"></i>
                                    <span class=""> Add File </span>
                                 </div>
                                 {{--  <div class="file_wrap">
                                    <div class="each_file_row">
                                       <div class="content_wrap">
                                          <div class="col-md-2 pr_0">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/jpg_img.png" class="img_quote">
                                          </div>
                                          <div class="col-md-8 pl_0">
                                             <div class="content_area">
                                                <a href="http://evako.oss-me-east-1.aliyuncs.com/backoffice/uploads/documents/staff_docs/fish_chips_profile.jpg" target="_blank">
                                                <span class="subject">
                                                fish_chips_profile.jpg                                                                                </span>
                                                </a>
                                             </div>
                                             <span class="user_name" style="background: none; padding-left: 0">
                                             Sample file                                                                        </span>
                                             <span class="last_updated">
                                             18 Jun 2018                                                                        </span>
                                             <span class="last_updated img_info">
                                                image/jpeg - 417.34 KB                                                                            <!--                                                                            image/jpg - 399.22 KB-->
                                             </span>
                                          </div>
                                          <div class="col-md-2 tab_dots_menu">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/dots_menu_grey.png" class="pull-right dots_menu_grey">
                                             <div class="dropdown_row" style="">
                                                <span class="dropdown_row_option del_dox" style="color: #F00;" contact_uuid="d3f2986b-4727-5908-a551-afe3c6a2b5c4" dox_uuid="aaa02d35-4b85-51bc-87d7-51f7680ca9f5" dox_name="fish_chips_profile.jpg" contact_type="Employee">
                                                Delete
                                                </span>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="each_file_row">
                                       <div class="content_wrap">
                                          <div class="col-md-2 pr_0">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/pdf_img.png" class="img_quote">
                                          </div>
                                          <div class="col-md-8 pl_0">
                                             <div class="content_area">
                                                <a href="http://evako.oss-me-east-1.aliyuncs.com/backoffice/uploads/documents/staff_docs/ED-Sprint-1.pdf" target="_blank">
                                                <span class="subject">
                                                ED-Sprint-1.pdf                                                                                </span>
                                                </a>
                                             </div>
                                             <span class="user_name" style="background: none; padding-left: 0">
                                             Sample pdf                                                                        </span>
                                             <span class="last_updated">
                                             18 Jun 2018                                                                        </span>
                                             <span class="last_updated img_info">
                                                application/pdf - 296.87 KB                                                                            <!--                                                                            image/jpg - 399.22 KB-->
                                             </span>
                                          </div>
                                          <div class="col-md-2 tab_dots_menu">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/dots_menu_grey.png" class="pull-right dots_menu_grey">
                                             <div class="dropdown_row" style="">
                                                <span class="dropdown_row_option del_dox" style="color: #F00;" contact_uuid="d3f2986b-4727-5908-a551-afe3c6a2b5c4" dox_uuid="c45d91d5-1889-5b98-80b8-2568795d965d" dox_name="ED-Sprint-1.pdf" contact_type="Employee">
                                                Delete
                                                </span>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="each_file_row">
                                       <div class="content_wrap">
                                          <div class="col-md-2 pr_0">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/jpg_img.png" class="img_quote">
                                          </div>
                                          <div class="col-md-8 pl_0">
                                             <div class="content_area">
                                                <a href="http://evako.oss-me-east-1.aliyuncs.com/backoffice/uploads/documents/staff_docs/strawberry.jpg" target="_blank">
                                                <span class="subject">
                                                strawberry.jpg                                                                                </span>
                                                </a>
                                             </div>
                                             <span class="user_name" style="background: none; padding-left: 0">
                                             Shah added                                                                        </span>
                                             <span class="last_updated">
                                             24 Jun 2018                                                                        </span>
                                             <span class="last_updated img_info">
                                                image/jpeg - 6.91 KB                                                                            <!--                                                                            image/jpg - 399.22 KB-->
                                             </span>
                                          </div>
                                          <div class="col-md-2 tab_dots_menu">
                                             <img src="http://backoffice.evakopro.site/assets/global/img/dots_menu_grey.png" class="pull-right dots_menu_grey">
                                             <div class="dropdown_row" style="">
                                                <span class="dropdown_row_option del_dox" style="color: #F00;" contact_uuid="d3f2986b-4727-5908-a551-afe3c6a2b5c4" dox_uuid="17dc9caf-3374-5beb-9dbb-b869f81d03bf" dox_name="strawberry.jpg" contact_type="Employee">
                                                Delete
                                                </span>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                 </div>  --}}
                              </div>
                              <!--FILES-->
                           </div>
                        </div>
                     </div>
                  </div>
                  <!--RIGHT TAB SECTION ALL-->
               </div>
            </div>
            <!--MIDDLE SECTION -->
         </div>
         <!-- END PAGE WRAPPER -->
      </div>
      <!-- END PAGE CONTENT -->
   </form>
   <!-- New APPOINTMENT Modal Start-->
   <div class="modal fade bs-modal right modal-fullscreen" id="new_appointment" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
         <div class="modal-content">
            <form method="post" id="newAppointment" class="appointment_new">
               <input type="hidden" name="appoint_contact_uuid" id="appoint_contact_uuid" class="appoint_contact_uuid" value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">
               <input type="hidden" name="appoint_contact_type" id="appoint_contact_type" class="appoint_contact_type" value="Employee">
               <div class="modal-header">
                  <button type="button" class="close close_popup" data-dismiss="modal">×
                  </button>
                  <h3 class="pop_heading">New Appointment</h3>
               </div>
               <div class="modal-body">
                  <div class="body_wrap">
                     <div class="row">
                        <!--LEFT SIDE-->
                        <div class="col-md-8 left_side_task">
                           <div class="rows_wrap">
                              <div class="row">
                                 <div class="col-md-12">
                                    <div class="form-group">
                                       <label for="appointment_title">Title *</label>
                                       <input id="appointment_title" placeholder="Enter a title for this task" class="form-control validate appointment_title" name="appointment_title" type="text">
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="dates_wrap">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>From *</label>
                                          <div class="input-group">
                                             <input id="startDate" name="appointment_from_date" class="form-control appointment_from appointment_from_date validate pdl" value="16-10-2019" type="text">
                                             <span class="input-group-btn">
                                             <button class="btn default custom_calender" type="button" style="margin: 0">
                                             <i class="fa fa-calendar"></i>
                                             </button>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>&nbsp;</label>
                                          <div class="input-group date" id="datetimepicker3">
                                             <input type="text" name="appointment_from_time" class="form-control due_time appointment_from_time" id="startDate" value="14:14">
                                             <span class="input-group-addon btn default time_picks">
                                             <span class="glyphicon glyphicon-time"></span>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="dates_wrap">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>To *</label>
                                          <div class="input-group">
                                             <input id="startDate" name="appointment_to_date" class="form-control appointment_from appointment_to_date validate pdl" value="16-10-2019" type="text">
                                             <span class="input-group-btn">
                                             <button class="btn default custom_calender" type="button" style="margin: 0">
                                             <i class="fa fa-calendar"></i>
                                             </button>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>&nbsp;</label>
                                          <div class="input-group date" id="datetimepicker3">
                                             <input type="text" name="appointment_to_time" class="form-control due_time appointment_to_time" id="startDate" value="14:14">
                                             <span class="input-group-addon btn default time_picks">
                                             <span class="glyphicon glyphicon-time"></span>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-md-6">
                                    <div class="form-group">
                                       <label for="task_type">Where ( Location of appointment )</label>
                                       <select class="select2 appointment_location select2-hidden-accessible" name="appointment_location" tabindex="-1" aria-hidden="true">
                                          <option></option>
                                       </select>
                                       <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-appointment_location-c0-container"><span class="select2-selection__rendered" id="select2-appointment_location-c0-container" title=""></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-md-12">
                                    <div class="form-group">
                                       <label for="appointment_description">Task description</label>
                                       <textarea class="appointment_description" rows="4" name="appointment_description" placeholder="Type in details about this task" maxlength="250"></textarea>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <!--LEFT SIDE-->
                        <!--RIGHT SIDE-->
                        <div class="col-md-4 right_side_task">
                           <div class="rows_wrap">
                              <div class="row">
                                 <div class="col-sm-12">
                                    <div class="form-group">
                                       <label for="owner">Related to *</label>
                                       <input type="text" name="related_to_name" id="related_to_name" class="related_to_name form-control" value="Mr Afras Muhammed" readonly="">
                                       <input type="hidden" name="related_to_uuid" id="related_to_uuid" class="related_to_uuid form-control" value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-sm-12">
                                    <div class="form-group">
                                       <label for="related_to">Attendees to</label>
                                       <select class="select2 attendees_to select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                                          <option></option>
                                          <option value="8895af65-6d57-5f21-9da1-c119700637ed">
                                             afrasmuhammed@gmail.com
                                          </option>
                                          <option value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">
                                             Mr Afras Muhammed
                                          </option>
                                          <option value="236c7f2f-51a3-559e-9c69-00125e462ac8">
                                             Mr Ifthikar  Shah
                                          </option>
                                          <option value="cdc7f999-18a9-55de-ac99-f3abe0b0ba88">
                                             Mr Syed Shah
                                          </option>
                                          <option value="813a2813-bf9e-5d4a-8e11-c8e54ced6c8e">
                                             Mr Syed Hussain
                                          </option>
                                          <option value="9451db4e-d754-56ab-86b5-60f4b41e83b3">
                                             Mr First Name
                                          </option>
                                          <option value="486ac96b-094a-5db0-b9f7-4e0b658e4687">
                                             Mr Syed Hussain
                                          </option>
                                       </select>
                                       <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-lmwu-container"><span class="select2-selection__rendered" id="select2-lmwu-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                    </div>
                                 </div>
                              </div>
                              <div class="attendee_body">
                              </div>
                              <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" id="attendee_loader" class="data_loader" style="left: 50%; margin-left: -15px;">
                           </div>
                        </div>
                        <!--RIGHT SIDE-->
                     </div>
                     <div class="row">
                        <div class="show_no_emails success_box"> </div>
                     </div>
                  </div>
               </div>
               <div class="modal-footer">
                  <div class="row" style="">
                     <div class="col-sm-6">
                        <div class="alert_box">There are errors on page</div>
                     </div>
                     <div class="col-sm-6">
                        <button type="button" class="btn dismiss" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn theme_btn_round save_new_appoint"> Save</button>
                     </div>
                  </div>
               </div>
            </form>
         </div>
         <!-- /.modal-Task -->
         <!--                    <div class="alert_box">There are errors on page</div>-->
      </div>
      <!-- /.modal-dialog -->
   </div>
   <!-- New APPOINTMENT Modal End-->
   <!-- Update APPOINTMENT Modal Start-->
   <div class="modal fade bs-modal right modal-fullscreen" id="update_appointment" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
         <div class="modal-content">
            <form method="post" id="updateAppointment" class="appointment_update">
               <input type="hidden" name="appoint_contact_uuid" id="appoint_contact_uuid" class="appoint_contact_uuid" value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">
               <input type="hidden" name="appoint_uuid" id="appoint_uuid" class="appoint_uuid" value="">
               <input type="hidden" name="appoint_contact_type" id="appoint_contact_type" class="appoint_contact_type" value="Employee">
               <div class="modal-header">
                  <button type="button" class="close close_popup" data-dismiss="modal">×
                  </button>
                  <h3 class="pop_heading">Update Appointment</h3>
               </div>
               <div class="modal-body">
                  <div class="body_wrap">
                     <div class="row">
                        <!--LEFT SIDE-->
                        <div class="col-md-8 left_side_task">
                           <div class="rows_wrap">
                              <div class="row">
                                 <div class="col-md-12">
                                    <div class="form-group">
                                       <label for="appointment_title">Title *</label>
                                       <input id="appointment_title" placeholder="Enter a title for this task" class="form-control validate appointment_title" name="appointment_title" type="text">
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="dates_wrap">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>From *</label>
                                          <div class="input-group">
                                             <input id="startDate" name="appointment_from_date" class="form-control appointment_from appointment_from_date validate pdl" value="16-10-2019" type="text">
                                             <span class="input-group-btn">
                                             <button class="btn default custom_calender" type="button" style="margin: 0">
                                             <i class="fa fa-calendar"></i>
                                             </button>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>&nbsp;</label>
                                          <div class="input-group date" id="datetimepicker3">
                                             <input type="text" name="appointment_from_time" class="form-control due_time appointment_from_time" id="startDate" value="14:14">
                                             <span class="input-group-addon btn default time_picks">
                                             <span class="glyphicon glyphicon-time"></span>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="dates_wrap">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>To *</label>
                                          <div class="input-group">
                                             <input id="startDate" name="appointment_to_date" class="form-control appointment_from appointment_to_date validate pdl" value="16-10-2019" type="text">
                                             <span class="input-group-btn">
                                             <button class="btn default custom_calender" type="button" style="margin: 0">
                                             <i class="fa fa-calendar"></i>
                                             </button>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>&nbsp;</label>
                                          <div class="input-group date" id="datetimepicker3">
                                             <input type="text" name="appointment_to_time" class="form-control due_time appointment_to_time" id="startDate" value="14:14">
                                             <span class="input-group-addon btn default time_picks">
                                             <span class="glyphicon glyphicon-time"></span>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-md-6">
                                    <div class="form-group">
                                       <label for="task_type">Where ( Location of appointment )</label>
                                       <select class="select2 appointment_location select2-hidden-accessible" name="appointment_location" tabindex="-1" aria-hidden="true">
                                          <option></option>
                                       </select>
                                       <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-appointment_location-qa-container"><span class="select2-selection__rendered" id="select2-appointment_location-qa-container" title=""></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-md-12">
                                    <div class="form-group">
                                       <label for="appointment_description">Task description</label>
                                       <textarea class="appointment_description" rows="4" name="appointment_description" placeholder="Type in details about this task" maxlength="250"></textarea>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <!--LEFT SIDE-->
                        <!--RIGHT SIDE-->
                        <div class="col-md-4 right_side_task">
                           <div class="rows_wrap">
                              <div class="row">
                                 <div class="col-sm-12">
                                    <div class="form-group">
                                       <label for="owner">Related to *</label>
                                       <input type="text" name="related_to_name" id="related_to_name" class="related_to_name form-control" value="Mr Afras Muhammed" readonly="">
                                       <input type="hidden" name="related_to_uuid" id="related_to_uuid" class="related_to_uuid form-control" value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-sm-12">
                                    <div class="form-group">
                                       <label for="related_to">Attendees to</label>
                                       <select class="select2 attendees_to select2-hidden-accessible" tabindex="-1" aria-hidden="true">
                                          <option></option>
                                          <option value="8895af65-6d57-5f21-9da1-c119700637ed">
                                             afrasmuhammed@gmail.com
                                          </option>
                                          <option value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">
                                             Mr Afras Muhammed
                                          </option>
                                          <option value="236c7f2f-51a3-559e-9c69-00125e462ac8">
                                             Mr Ifthikar  Shah
                                          </option>
                                          <option value="cdc7f999-18a9-55de-ac99-f3abe0b0ba88">
                                             Mr Syed Shah
                                          </option>
                                          <option value="813a2813-bf9e-5d4a-8e11-c8e54ced6c8e">
                                             Mr Syed Hussain
                                          </option>
                                          <option value="9451db4e-d754-56ab-86b5-60f4b41e83b3">
                                             Mr First Name
                                          </option>
                                          <option value="486ac96b-094a-5db0-b9f7-4e0b658e4687">
                                             Mr Syed Hussain
                                          </option>
                                       </select>
                                       <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-2gac-container"><span class="select2-selection__rendered" id="select2-2gac-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                    </div>
                                 </div>
                              </div>
                              <div class="attendee_body">
                              </div>
                              <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" id="attendee_loader" class="data_loader" style="left: 50%; margin-left: -15px;">
                           </div>
                        </div>
                        <!--RIGHT SIDE-->
                     </div>
                     <div class="row">
                        <div class="show_no_emails success_box"> </div>
                     </div>
                  </div>
               </div>
               <div class="modal-footer">
                  <div class="row" style="">
                     <div class="col-sm-6">
                        <div class="alert_box">There are errors on page</div>
                     </div>
                     <div class="col-sm-6">
                        <button type="button" class="btn dismiss" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn theme_btn_round save_new_appoint"> Save</button>
                     </div>
                  </div>
               </div>
            </form>
         </div>
         <!-- /.modal-Task -->
         <!--                    <div class="alert_box">There are errors on page</div>-->
      </div>
      <!-- /.modal-dialog -->
   </div>
   <!-- Update APPOINTMENT Modal End-->
   <!-- New Task Modal Start-->
   <div class="modal fade bs-modal right modal-fullscreen" id="new_task" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close close_popup" data-dismiss="modal">×</button>
               <h3 class="pop_heading">New Task</h3>
            </div>
            <div class="modal-body">
               <div class="body_wrap">
                  <div class="row">
                     <form id="new_task_add" method="post">
                        <input type="hidden" class="task_related" name="task_related" value="Employee">
                        <input type="hidden" class="update_task" name="update_task" value="0">
                        <input type="hidden" class="record_uuid" name="record_uuid" value="">
                        <input type="hidden" class="obj_uuid" name="obj_uuid" id="staff_uuid" value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">
                        <input type="hidden" name="parent_task_uuid" id="parent_uuid" value="">
                        <!--LEFT SIDE-->
                        <div class="col-md-8 left_side_task">
                           <div class="rows_wrap">
                              <div class="row">
                                 <div class="col-md-12">
                                    <div class="form-group">
                                       <label for="task_title">Title *</label>
                                       <input id="task_title" value="" name="task_title" placeholder="Enter a title for this task" class="form-control validate task_title" type="text">
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="dates_wrap">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>Task Due on *</label>
                                          <div class="input-group">
                                             <input id="startDate" name="task_due_date" class="form-control task_due validate task_due_date pdl" value="16-10-2019" type="text">
                                             <span class="input-group-btn">
                                             <button class="btn default custom_calender" type="button" style="margin: 0">
                                             <i class="fa fa-calendar"></i>
                                             </button>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label>&nbsp;</label>
                                          <div class="input-group date" id="datetimepicker3">
                                             <input type="text" class="form-control due_time task_due_time" name="task_due_time" id="startDate" value="14:14">
                                             <span class="input-group-addon btn default time_picks">
                                             <span class="glyphicon glyphicon-time"></span>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-md-12">
                                    <div class="form-group">
                                       <label for="task_description">Task description</label>
                                       <textarea class="task_description" rows="4" placeholder="Type in details about this task" maxlength="500" name="task_description"></textarea>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <!--LEFT SIDE-->
                        <!--RIGHT SIDE-->
                        <div class="col-md-4 right_side_task">
                           <div class="rows_wrap">
                              <div class="row">
                                 <div class="col-sm-12">
                                    <div class="form-group">
                                       <label for="owner">Owner *</label>
                                       <select class="select2 owner validate task_owner select2-hidden-accessible" name="task_owner" tabindex="-1" aria-hidden="true">
                                          <option></option>
                                          <option value="8895af65-6d57-5f21-9da1-c119700637ed"> afrasmuhammed@gmail.com </option>
                                          <option value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">Mr Afras Muhammed</option>
                                          <option value="236c7f2f-51a3-559e-9c69-00125e462ac8">Mr Ifthikar  Shah</option>
                                          <option value="cdc7f999-18a9-55de-ac99-f3abe0b0ba88">Mr Syed Shah</option>
                                          <option value="813a2813-bf9e-5d4a-8e11-c8e54ced6c8e">Mr Syed Hussain</option>
                                          <option value="9451db4e-d754-56ab-86b5-60f4b41e83b3">Mr First Name</option>
                                          <option value="486ac96b-094a-5db0-b9f7-4e0b658e4687">Mr Syed Hussain</option>
                                       </select>
                                       <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-task_owner-sc-container"><span class="select2-selection__rendered" id="select2-task_owner-sc-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-sm-12">
                                    <div class="form-group">
                                       <label for="related_to">Related to *</label>
                                       <input type="text" class="form-control validate task_related_to" readonly="readonly" name="task_related_to" value="Mr Afras Muhammed " autocomplete="off">
                                    </div>
                                 </div>
                              </div>
                              <div class="row">
                                 <div class="col-sm-12">
                                    <div class="form-group">
                                       <label for="assign_to">Assign task to *</label>
                                       <select class="select2 assign_to validate select2-hidden-accessible" name="task_assign_to" id="task_assign_to" tabindex="-1" aria-hidden="true">
                                          <option value=""></option>
                                          <option value="8895af65-6d57-5f21-9da1-c119700637ed"> afrasmuhammed@gmail.com </option>
                                          <option value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">Mr Afras Muhammed</option>
                                          <option value="236c7f2f-51a3-559e-9c69-00125e462ac8">Mr Ifthikar  Shah</option>
                                          <option value="cdc7f999-18a9-55de-ac99-f3abe0b0ba88">Mr Syed Shah</option>
                                          <option value="813a2813-bf9e-5d4a-8e11-c8e54ced6c8e">Mr Syed Hussain</option>
                                          <option value="9451db4e-d754-56ab-86b5-60f4b41e83b3">Mr First Name</option>
                                          <option value="486ac96b-094a-5db0-b9f7-4e0b658e4687">Mr Syed Hussain</option>
                                       </select>
                                       <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-task_assign_to-container"><span class="select2-selection__rendered" id="select2-task_assign_to-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                    </div>
                                 </div>
                              </div>
                              <div class="row task_assign_to_row"></div>
                           </div>
                        </div>
                        <!--RIGHT SIDE-->
                     </form>
                  </div>
               </div>
            </div>
            <div class="modal-footer">
               <div class="row" style="">
                  <div class="col-sm-6">
                     <div class="alert_box">There are errors on page</div>
                  </div>
                  <div class="col-sm-6">
                     <button type="button" class="btn dismiss" data-dismiss="modal">Cancel</button>
                     <button type="button" class="btn theme_btn_round save_new_task"> Save</button>
                  </div>
               </div>
            </div>
         </div>
         <!-- /.modal-Task -->
         <!--                    <div class="alert_box">There are errors on page</div>-->
      </div>
      <!-- /.modal-dialog -->
   </div>
   <!-- New Task Modal End-->
   <!-- New MAIL Modal Start-->
   <div class="modal fade bs-modal right modal-fullscreen email" id="new_mail" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
         <div class="modal-content">
            <form method="post" id="newMail">
               <div class="modal-header">
                  <button type="button" class="close close_popup" data-dismiss="modal">×
                  </button>
                  <h3 class="pop_heading">New Mail</h3>
               </div>
               <div class="modal-body">
                  <div class="body_wrap">
                     <div class="row">
                        <div class="each_mail_row">
                           <div class="col-md-12">
                              <div class="col-md-1 email_label pl_pr_0">From</div>
                              <div class="col-md-11 pl_0">
                                 <input type="text" class="form-control email_from" name="email_from">
                              </div>
                           </div>
                        </div>
                        <div class="each_mail_row">
                           <div class="col-md-12">
                              <div class="col-md-1 email_label pl_pr_0">Reply to</div>
                              <div class="col-md-11 pl_0">
                                 <input type="text" class="form-control reply_to" name="reply_to">
                              </div>
                           </div>
                        </div>
                        <div class="each_mail_row">
                           <div class="col-md-12">
                              <div class="col-md-1 email_label pl_pr_0">To</div>
                              <div class="col-md-9 pl_0">
                                 <input type="text" class="form-control email_to" name="email_to">
                              </div>
                              <div class="col-md-2 cc_bcc pr_0">
                                 <span class="cc">CC</span>
                                 <span class="bcc">BCC</span>
                              </div>
                           </div>
                        </div>
                        <div class="each_mail_row cc_row" style="display: none;">
                           <div class="col-md-12">
                              <div class="col-md-1 email_label pl_pr_0">CC</div>
                              <div class="col-md-11 pl_0">
                                 <input type="text" class="form-control cc_input" name="cc_input">
                              </div>
                           </div>
                        </div>
                        <div class="each_mail_row bcc_row" style="display: none;">
                           <div class="col-md-12">
                              <div class="col-md-1 email_label pl_pr_0">BBC</div>
                              <div class="col-md-11 pl_0">
                                 <input type="text" class="form-control bcc_input" name="bcc_input">
                              </div>
                           </div>
                        </div>
                        <div class="each_mail_row">
                           <div class="col-md-12">
                              <div class="col-md-10 pl_pr_0">
                                 <input type="text" class="form-control subject" name="subject" placeholder="Enter a subject">
                              </div>
                              <div class="col-md-2 pr_0">
                                 <span class="template_email">Templates <i class="fa fa-sort-down"></i></span>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="body_area_mail">
                     <textarea class="form-control summernote" name="" rows="10"></textarea>
                  </div>
               </div>
            </form>
            <div class="modal-footer">
               <div class="row" style="">
                  <div class="col-sm-6">
                     <div class="alert_box">There are errors on page</div>
                  </div>
                  <div class="col-sm-6">
                     <button type="button" class="btn dismiss" data-dismiss="modal">Cancel</button>
                     <button type="button" class="btn theme_btn_round save_new_contact"> Send</button>
                  </div>
               </div>
            </div>
         </div>
         <!-- /.modal-Task -->
         <!--                    <div class="alert_box">There are errors on page</div>-->
      </div>
      <!-- /.modal-dialog -->
   </div>
   <!-- New MAIL Modal End-->



   <!-- Update modal employee -->

   <div class="modal fade bs-modal right modal-fullscreen" id="edit_employee_model" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    </div>

   <!-- Update modal employee -->




   <!-- Update Contact Modal Start-->
   <div class="modal fade bs-modal right modal-fullscreen" id="update_contact" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
         <div class="modal-content">
            <form method="post" id="updateEmployee" class="employee_update_form">
               <input type="hidden" name="staff_uuid" id="staff_uuid" class="staff_uuid" value="d3f2986b-4727-5908-a551-afe3c6a2b5c4">
               <div class="modal-header">
                  <button type="button" class="close close_popup" data-dismiss="modal">×
                  </button>
                  <h3 class="pop_heading">
                     CONTACT EDIT -
                     <span class="contact_name">
                     Mr Afras Muhammed                                </span>
                  </h3>
               </div>
               <div class="modal-body">
                  <div class="body_wrap">
                     <div class="row">
                        <!--LEFT SIDE-->
                        <div class="col-md-4 left_side_task p_0">
                           <div class="rows_wrap">
                              <div class="sidebar_list">
                                 <div class="display_pic">
                                    {{--  <input type="file" class="btn btn-success" name="staff_profile_pic" style="display:none;">
                                    <input type="hidden" name="staff_profile_pic_hidden" class="form-control" value="">  --}}
                                    {{--  <a class="overlay btn-image-upload" data-toggle="modal" href="#modal_image_uplaod" data-modal-name="Staff Profile Images" data-modal-field="staff_profile_pic_path">
                                    <i class="fa fa-camera"></i>
                                    </a>  --}}
                                    <img src="http://evako.oss-me-east-1.aliyuncs.com/backoffice/uploads/images/staff_images/be7172ff6af554fe57f68a2ebdfebefc.jpg">
                                 </div>
                                 <div id="imageerrorBlock"></div>
                                 <span class="each_option basic_info active_option" id_attr="basic_info">
                                 Basic information
                                 </span>
                                 <span class="each_option role_department" id_attr="role_department">
                                 Role &amp; Department
                                 </span>
                                 <span class="each_option salary_wages" id_attr="salary_wages">
                                 Salary &amp; Wages
                                 </span>
                                 <span class="each_option social_profile" id_attr="social_profile">
                                 Social profile
                                 </span>
                                 <span class="each_option contact_details_local" id_attr="contact_details_local">
                                 Contact Details (Local)
                                 </span>
                                 <span class="each_option alternate_contact_local" id_attr="alternate_contact_local">
                                 Alternate Contact (Local)
                                 </span>
                                 <span class="each_option contact_details_native" id_attr="contact_details_native">
                                 Contact Details (Native)
                                 </span>
                                 <span class="each_option nominee_info" id_attr="nominee_info">
                                 Nominee Information
                                 </span>
                                 <span class="each_option additional_info" id_attr="additional_info">
                                 Additional Information
                                 </span>
                              </div>
                           </div>
                        </div>
                        <!--LEFT SIDE-->
                        <!--RIGHT SIDE-->
                        <div class="col-md-8 pl_pr_0 right_side_task update_employee">
                           <!--==== BASIC INFORMATION ====-->
                           <div id="basic_info">
                              <span class="main_label">Basic Information</span>
                              <div class="rows_wrap">
                                 <input type="hidden" name="BI_form_flag" id="BI_form_flag" class="BI_form_flag formFlag" value="0">
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="BI_name_title">Title *</label>
                                          <select class="form-control select2 BI_name_title filter validate select2-hidden-accessible" id="BI_name_title" name="BI_name_title" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                             <option value="Mr" selected="">
                                                Mr
                                             </option>
                                             <option value="Ms">
                                                Ms
                                             </option>
                                             <option value="Mrs">
                                                Mrs
                                             </option>
                                             <option value="Dr">
                                                Dr
                                             </option>
                                             <option value="Miss">
                                                Miss
                                             </option>
                                             <option value="Prof.">
                                                Prof.
                                             </option>
                                             <option value="Sir">
                                                Sir
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-BI_name_title-container"><span class="select2-selection__rendered" id="select2-BI_name_title-container" title="
                                             Mr                                                                    "><span class="select2-selection__clear">×</span>
                                          Mr                                                                    </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="BI_first_name">First Name *</label>
                                          <input id="BI_first_name" class="form-control validate BI_first_name" name="BI_first_name" type="text" value="Afras">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="BI_last_name">Last Name *</label>
                                          <input id="BI_last_name" class="form-control validate BI_last_name" name="BI_last_name" type="text" value="Muhammed">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="BI_staff_nationality">Nationality *</label>
                                          <select class="form-control select2 BI_staff_nationality filter validate select2-hidden-accessible" id="BI_staff_nationality" name="BI_staff_nationality" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>

                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-BI_staff_nationality-container"><span class="select2-selection__rendered" id="select2-BI_staff_nationality-container" title="
                                             India                                                                        "><span class="select2-selection__clear">×</span>
                                          India                                                                        </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-7">
                                       <div class="form-group">
                                          <label for="BI_passport_no">Passport Number *</label>
                                          <input id="BI_passport_no" class="form-control validate BI_passport_no" name="BI_passport_no" type="text" value="L23456234">
                                       </div>
                                    </div>
                                    <div class="col-md-5">
                                       <label for="BI_passport_expiry">Passport Expiry</label>
                                       <div class="input-group">
                                          <input name="BI_passport_expiry" id="BI_passport_expiry" class="form-control BI_passport_expiry validate pdl" value="05-02-2020" type="text">
                                          <span class="input-group-btn">
                                          <button class="btn default custom_calender" type="button" style="margin: 0">
                                          <i class="fa fa-calendar"></i>
                                          </button>
                                          </span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-7">
                                       <div class="form-group">
                                          <label for="BI_visa_status">VISA Status</label>
                                          <select class="form-control select2 BI_visa_status filter select2-hidden-accessible" id="BI_visa_status" name="BI_visa_status" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                             <option value="Valid" selected="">
                                                Valid
                                             </option>
                                             <option value="Cancelled">
                                                Cancelled
                                             </option>
                                             <option value="Expired">
                                                Expired
                                             </option>
                                             <option value="In Process">
                                                In Process
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-BI_visa_status-container"><span class="select2-selection__rendered" id="select2-BI_visa_status-container" title="
                                             Valid
                                             "><span class="select2-selection__clear">×</span>
                                          Valid
                                          </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                    <div class="col-md-5">
                                       <label for="BI_visa_expiry">VISA Valid Till</label>
                                       <div class="input-group">
                                          <input name="BI_visa_expiry" id="BI_visa_expiry" class="form-control BI_visa_expiry pdl" value="13-06-2019" type="text">
                                          <span class="input-group-btn">
                                          <button class="btn default custom_calender" type="button" style="margin: 0">
                                          <i class="fa fa-calendar"></i>
                                          </button>
                                          </span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-7">
                                       <div class="form-group">
                                          <label for="BI_residence_id">Residence ID Number</label>
                                          <input id="BI_residence_id" class="form-control BI_residence_id" name="BI_residence_id" type="text" value="G12345554">
                                       </div>
                                    </div>
                                    <div class="col-md-5">
                                       <label for="BI_residence_id_expiry">
                                       Residence ID Valid Till
                                       </label>
                                       <div class="input-group">
                                          <input name="BI_residence_id_expiry" id="BI_residence_id_expiry" class="form-control BI_residence_id_expiry pdl" value="22-03-2019" type="text">
                                          <span class="input-group-btn">
                                          <button class="btn default custom_calender" type="button" style="margin: 0">
                                          <i class="fa fa-calendar"></i>
                                          </button>
                                          </span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-7">
                                       <div class="form-group">
                                          <label for="BI_driving_license_no">Driving License
                                          Number</label>
                                          <input id="BI_driving_license_no" class="form-control BI_driving_license_no" name="BI_driving_license_no" type="text" value="DJ333767">
                                       </div>
                                    </div>
                                    <div class="col-md-5">
                                       <label for="BI_driving_license_expiry">
                                       Driving License Valid Till
                                       </label>
                                       <div class="input-group">
                                          <input name="BI_driving_license_expiry" id="BI_driving_license_expiry" class="form-control BI_driving_license_expiry pdl" value="22-02-2024" type="text">
                                          <span class="input-group-btn">
                                          <button class="btn default custom_calender" type="button" style="margin: 0">
                                          <i class="fa fa-calendar"></i>
                                          </button>
                                          </span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-7">
                                       <div class="form-group">
                                          <label for="BI_insurance_policy">Insurance Policy</label>
                                          <input id="BI_insurance_policy" class="form-control BI_insurance_policy" name="BI_insurance_policy" type="text" value="">
                                       </div>
                                    </div>
                                    <div class="col-md-5">
                                       <label for="BI_insurance_expiry">Insurance Valid Till</label>
                                       <div class="input-group">
                                          <input name="BI_insurance_expiry" id="BI_insurance_expiry" class="form-control BI_insurance_expiry pdl" value="" type="text">
                                          <span class="input-group-btn">
                                          <button class="btn default custom_calender" type="button" style="margin: 0">
                                          <i class="fa fa-calendar"></i>
                                          </button>
                                          </span>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== BASIC INFORMATION ====-->
                           <!--==== ROLE & DEPARTMENT ====-->
                           <div id="role_department">
                              <span class="main_label">Role &amp; Department</span>
                              <div class="rows_wrap">
                                 <input type="hidden" name="RD_form_flag" id="RD_form_flag" class="RD_form_flag formFlag" value="0">
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="RD_staff_no">Employee Number</label>
                                          <input id="RD_staff_no" class="form-control validate RD_staff_no" type="text" name="RD_staff_no" value="1676">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" class="data_loader">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="RD_staff_department">Department *</label>
                                          <select class="form-control select2 RD_staff_department validate staff_departments select2-hidden-accessible" id="RD_staff_department" name="RD_staff_department" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                             <option value="9192c05f-907c-59d4-8b0a-0e0ed3790470">
                                                Sales
                                             </option>
                                             <option value="aff4dbb8-d0fd-581c-8ff8-59e0241844bd">
                                                HR
                                             </option>
                                             <option value="a4ee9d4a-ede6-5a49-9d87-de70e12b2afd">
                                                Admin
                                             </option>
                                             <option value="f0aacf69-613e-5d5f-afb0-8e9fe093f07d">
                                                Marketing
                                             </option>
                                             <option value="23bab993-d5f3-51df-8b73-83d272328afb">
                                                Finance
                                             </option>
                                             <option value="18536028-bf78-52f3-885d-1b4da74be736" selected="">
                                                Administration
                                             </option>
                                             <option value="b3f4ee21-f56b-5690-9c4c-690ae4f241e7">
                                                Delivery
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-RD_staff_department-container"><span class="select2-selection__rendered" id="select2-RD_staff_department-container" title="
                                             Administration                                                                         "><span class="select2-selection__clear">×</span>
                                          Administration                                                                         </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="RD_staff_designation">Designation *</label>
                                          <select class="form-control select2 RD_staff_designation validate staff_designations select2-hidden-accessible" id="RD_staff_designation" name="RD_staff_designation" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                             <option value="bb795c54-d6a6-50a6-91c8-2e874f2665eb" selected="">
                                                Admin
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-RD_staff_designation-container"><span class="select2-selection__rendered" id="select2-RD_staff_designation-container" title="
                                             Admin                                                                        "><span class="select2-selection__clear">×</span>
                                          Admin                                                                        </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="RD_joining_date">Joining Date *</label>
                                          <div class="input-group">
                                             <input name="RD_joining_date" id="RD_joining_date" class="form-control RD_joining_date validate fdl" value="01-02-2017" type="text">
                                             <span class="input-group-btn">
                                             <button class="btn default custom_calender" type="button" style="margin: 0">
                                             <i class="fa fa-calendar"></i>
                                             </button>
                                             </span>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="RD_employee_type">Employee Type</label>
                                          <select class="select2 RD_employee_type select2-hidden-accessible" name="RD_employee_type" id="RD_employee_type" tabindex="-1" aria-hidden="true">
                                             <option></option>
                                             <option value="Permanent" selected="">
                                                Permanent
                                             </option>
                                             <option value="Full-time">
                                                Full-time
                                             </option>
                                             <option value="Part-time">
                                                Part-time
                                             </option>
                                             <option value="Contract">
                                                Contract
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-RD_employee_type-container"><span class="select2-selection__rendered" id="select2-RD_employee_type-container" title="
                                             Permanent                                                                    "><span class="select2-selection__clear">×</span>
                                          Permanent                                                                    </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="RD_work_location">Work Location</label>
                                          <select class="select2 RD_work_location select2-hidden-accessible" name="RD_work_location" id="RD_work_location" tabindex="-1" aria-hidden="true">
                                             <option value="Dubai Office" selected="">
                                                Dubai Office
                                             </option>
                                             <option value="Sharjah Office">
                                                Sharjah Office
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: auto;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-RD_work_location-container"><span class="select2-selection__rendered" id="select2-RD_work_location-container" title="
                                             Dubai Office                                                                        ">
                                          Dubai Office                                                                        </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="RD_work_email">Work Email</label>
                                          <input id="RD_work_email" class="form-control RD_work_email emp_email" name="RD_work_email" type="email" value="Afras@evakonetworks.com">
                                          <input id="RD_work_email_uuid" class="form-control RD_work_email_uuid" name="RD_work_email_uuid" type="hidden" value="e06c8961-ddf9-5ec4-aebc-937147b8ffae">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="RD_work_phone">Work Phone</label>
                                          <input id="RD_work_phone" class="form-control RD_work_phone just_number" name="RD_work_phone" type="text" value="065593939">
                                          <input id="RD_work_phone_uuid" class="form-control RD_work_phone_uuid" name="RD_work_phone_uuid" type="hidden" value="26480668-3364-5e9b-a4ed-f05994a4995b">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="RD_personal_email">Personal Email</label>
                                          <input id="RD_personal_email" class="form-control RD_personal_email emp_email" name="RD_personal_email" type="email" value="Afrasmuhammed@gmail.com">
                                          <input id="RD_personal_email_uuid" class="form-control RD_personal_email_uuid" name="RD_personal_email_uuid" type="hidden" value="6f8e53a3-d1f5-5754-9d0a-e3a3579d1109">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="RD_personal_phone">Personal Phone</label>
                                          <input id="RD_personal_phone" class="form-control RD_personal_phone just_number" name="RD_personal_phone" type="text" value="0544440987">
                                          <input id="RD_personal_phone_uuid" class="form-control RD_personal_phone_uuid" name="RD_personal_phone_uuid" type="hidden" value="07ec372a-d426-57a7-9321-892313ca314f">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="RD_staff_extenssion">Extension</label>
                                          <input id="RD_staff_extenssion" class="form-control RD_staff_extenssion just_number" name="RD_staff_extenssion" type="text" value="12">
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== ROLE & DEPARTMENT ====-->
                           <!--==== SALARY & WAGES ====-->
                           <div id="salary_wages">
                              <span class="main_label">Salary &amp; Wages</span>
                              <div class="rows_wrap">
                                 <input type="hidden" name="SW_form_flag" id="SW_form_flag" class="SW_form_flag formFlag" value="0">
                                 <input type="hidden" name="SW_staff_salary" id="SW_staff_salary" class="SW_staff_salary" value="4c0b0271-fccd-5432-821b-40c0105a2049">
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="SW_basic_salary">Basic Monthly Salary *</label>
                                          <input id="SW_basic_salary" class="form-control validate SW_basic_salary" name="SW_basic_salary" type="text" value="5000">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="SW_hourly_overtime">Hourly Overtime</label>
                                          <input id="SW_hourly_overtime" class="form-control SW_hourly_overtime" name="SW_hourly_overtime" type="text" value="17">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <input id="SW_staff_allowance_uuid_1" class="form-control SW_staff_allowance_uuid" name="SW_staff_allowance_uuid[]" type="hidden" value="db9047ee-a6f0-5e6d-96a9-485377af6338">
                                          <label for="SW_staff_allowance_1">
                                          HRA Allowances                                                                    </label>
                                          <input id="SW_staff_allowance_1" class="form-control SW_staff_allowance" name="SW_staff_allowance[]" type="text" value="1000">
                                          <input id="SW_allowance_uuid_1" class="form-control SW_allowance_uuid" name="SW_allowance_uuid[]" type="hidden" value="007afc9d-28d7-5945-a55d-dd04b8aee434">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <input id="SW_staff_allowance_uuid_2" class="form-control SW_staff_allowance_uuid" name="SW_staff_allowance_uuid[]" type="hidden" value="0856e8d4-2cde-5583-bc0d-031b03a10a79">
                                          <label for="SW_staff_allowance_2">
                                          Travel Allowances                                                                    </label>
                                          <input id="SW_staff_allowance_2" class="form-control SW_staff_allowance" name="SW_staff_allowance[]" type="text" value="300">
                                          <input id="SW_allowance_uuid_2" class="form-control SW_allowance_uuid" name="SW_allowance_uuid[]" type="hidden" value="682eb255-cf65-5826-a19c-6e7946fc5999">
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== SALARY & WAGES ====-->
                           <!--==== SOCIAL PROFILE ====-->
                           <div id="social_profile">
                              <span class="main_label">Social Profile</span>
                              <div class="rows_wrap">
                                 <input type="hidden" name="SP_form_flag" id="SP_form_flag" class="SP_form_flag formFlag" value="0">
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="SP_social_linkedin">Linked In</label>
                                          <input id="SP_social_linkedin" class="form-control SP_social_linkedin" name="SP_social_linkedin" type="url" value="https://www.linkedin.com/afrasmhd">
                                          <input id="SP_social_linkedin_ID" class="form-control SP_social_linkedin_ID" name="SP_social_linkedin_ID" type="hidden" value="47809131-8118-5e76-a7a6-f647bd48a19f">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="SP_social_twitter">Twitter</label>
                                          <input id="SP_social_twitter" class="form-control SP_social_twitter" name="SP_social_twitter" type="url" value="https://https://www.twitter.com/afrasmhd">
                                          <input id="SP_social_twitter_ID" class="form-control SP_social_twitter_ID" name="SP_social_twitter_ID" type="hidden" value="c82f8a4e-bc5d-55b9-9d72-7698cb0698f3">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="SP_social_facebook">Facebook</label>
                                          <input id="SP_social_facebook" class="form-control SP_social_facebook" name="SP_social_facebook" type="url" value="https://https://www.facebook.com/afrasmhd">
                                          <input id="SP_social_facebook_ID" class="form-control SP_social_facebook_ID" name="SP_social_facebook_ID" type="hidden" value="36ffd4f1-9ae8-5993-96ee-55f7fab8ad3e">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="SP_social_google">Google</label>
                                          <input id="SP_social_google" class="form-control SP_social_google" name="SP_social_google" type="url" value="https://https://plus.google.com/afrasmhd">
                                          <input id="SP_social_google_ID" class="form-control SP_social_google_ID" name="SP_social_google_ID" type="hidden" value="a98c04d8-377e-50a7-bc22-990c8c588f2a">
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== SOCIAL PROFILE ====-->
                           <!--==== CONTACT DETAILS (LOCAL) ====-->
                           <div id="contact_details_local">
                              <span class="main_label">Contact Details (Local)</span>
                              <div class="rows_wrap">
                                 <input type="hidden" name="CDL_form_flag" id="CDL_form_flag" class="CDL_form_flag formFlag" value="0">
                                 <input type="hidden" name="CDL_uuid" id="CDL_uuid" class="CDL_uuid" value="">
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CDL_staff_address_1">Address Line 1</label>
                                          <input id="CDL_staff_address_1" class="form-control CDL_staff_address_1" name="CDL_staff_address_1" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CDL_staff_address_2">Address Line 2</label>
                                          <input id="CDL_staff_address_2" class="form-control CDL_staff_address_2" name="CDL_staff_address_2" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" class="data_loader">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDL_staff_province">Province</label>
                                          <select class="form-control select2 CDL_staff_province staff_province select2-hidden-accessible" id="CDL_staff_province" name="CDL_staff_province" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                             <option value="6240">
                                                Umm Al-Quwain
                                             </option>
                                             <option value="6241">
                                                Sharjah
                                             </option>
                                             <option value="6242">
                                                Jabal Ali
                                             </option>
                                             <option value="6243">
                                                Ras al Khaymah
                                             </option>
                                             <option value="6244">
                                                Al Fujairah
                                             </option>
                                             <option value="6245">
                                                Al Ain
                                             </option>
                                             <option value="6246">
                                                Abu Dhabi
                                             </option>
                                             <option value="6247">
                                                Dubai
                                             </option>
                                             <option value="7324">
                                                Ajman
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-CDL_staff_province-container"><span class="select2-selection__rendered" id="select2-CDL_staff_province-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDL_staff_area">Area</label>
                                          <select class="form-control select2 CDL_staff_area staff_area select2-hidden-accessible" id="CDL_staff_area" name="CDL_staff_area" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-CDL_staff_area-container"><span class="select2-selection__rendered" id="select2-CDL_staff_area-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDL_zip_code">Zip Code</label>
                                          <input id="CDL_zip_code" class="form-control CDL_zip_code" name="CDL_zip_code" type="text" value="">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDL_personal_email">Personal Email</label>
                                          <input id="CDL_personal_email" class="form-control CDL_personal_email emp_email" name="CDL_personal_email" type="email" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDL_mobile">Mobile</label>
                                          <input id="CDL_mobile" class="form-control CDL_mobile" name="CDL_mobile" type="text" value="">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDL_telephone">Telephone</label>
                                          <input id="CDL_telephone" class="form-control CDL_telephone just_number" name="CDL_telephone" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== CONTACT DETAILS (LOCAL) ====-->
                           <!--==== ALTERNATE CONTACT (LOCAL) ====-->
                           <div id="alternate_contact_local">
                              <span class="main_label">Alternate Contact (Local)</span>
                              <div class="rows_wrap">
                                 <input type="hidden" name="ACL_form_flag" id="ACL_form_flag" class="ACL_form_flag formFlag" value="0">
                                 <input type="hidden" name="ACL_uuid" id="ACL_uuid" class="ACL_uuid" value="">
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="ACL_contact_person">Contact Person</label>
                                          <input id="ACL_contact_person" class="form-control ACL_contact_person" name="ACL_contact_person" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="ACL_staff_address_1">Address Line 1</label>
                                          <input id="ACL_staff_address_1" class="form-control ACL_staff_address_1" name="ACL_staff_address_1" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="ACL_staff_address_2">Address Line 2</label>
                                          <input id="ACL_staff_address_2" class="form-control ACL_staff_address_2" name="ACL_staff_address_2" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" class="data_loader">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="ACL_staff_province">Province</label>
                                          <select class="form-control select2 ACL_staff_province staff_province select2-hidden-accessible" id="ACL_staff_province" name="ACL_staff_province" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                             <option value="6240">
                                                Umm Al-Quwain
                                             </option>
                                             <option value="6241">
                                                Sharjah
                                             </option>
                                             <option value="6242">
                                                Jabal Ali
                                             </option>
                                             <option value="6243">
                                                Ras al Khaymah
                                             </option>
                                             <option value="6244">
                                                Al Fujairah
                                             </option>
                                             <option value="6245">
                                                Al Ain
                                             </option>
                                             <option value="6246">
                                                Abu Dhabi
                                             </option>
                                             <option value="6247">
                                                Dubai
                                             </option>
                                             <option value="7324">
                                                Ajman
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-ACL_staff_province-container"><span class="select2-selection__rendered" id="select2-ACL_staff_province-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="ACL_staff_area">Area</label>
                                          <select class="form-control select2 ACL_staff_area staff_area select2-hidden-accessible" id="ACL_staff_area" name="ACL_staff_area" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-ACL_staff_area-container"><span class="select2-selection__rendered" id="select2-ACL_staff_area-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="ACL_zip_code">Zip Code</label>
                                          <input id="ACL_zip_code" class="form-control ACL_zip_code" name="ACL_zip_code" type="text" value="">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="ACL_personal_email">Personal Email</label>
                                          <input id="ACL_personal_email" class="form-control ACL_personal_email emp_email" name="ACL_personal_email" type="email" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="ACL_mobile">Mobile</label>
                                          <input id="ACL_mobile" class="form-control ACL_mobile" name="ACL_mobile" type="text" value="">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="ACL_telephone">Telephone</label>
                                          <input id="ACL_telephone" class="form-control ACL_telephone just_number" name="ACL_telephone" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== ALTERNATE CONTACT (LOCAL) ====-->
                           <!--==== CONTACT DETAILS (NATIVE) ====-->
                           <div id="contact_details_native">
                              <span class="main_label">Contact Details (Native)</span>
                              <div class="rows_wrap">
                                 <input type="hidden" name="CDN_form_flag" id="CDN_form_flag" class="CDN_form_flag formFlag" value="0">
                                 <input type="hidden" name="CDN_uuid" id="CDN_uuid" class="CDN_uuid" value="">
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CDN_contact_person">Contact Person</label>
                                          <input id="CDN_contact_person" class="form-control CDN_contact_person" name="CDN_contact_person" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CDN_contact_relation">Relation</label>
                                          <select class="form-control select2 CDN_contact_relation staff_country_province select2-hidden-accessible" id="CDN_contact_relation" name="CDN_contact_relation" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                             <option value="Father">
                                                Father
                                             </option>
                                             <option value="Mother">
                                                Mother
                                             </option>
                                             <option value="Wife">
                                                Wife
                                             </option>
                                             <option value="Brother">
                                                Brother
                                             </option>
                                             <option value="Sister">
                                                Sister
                                             </option>
                                             <option value="Partner">
                                                Partner
                                             </option>
                                             <option value="Son">
                                                Son
                                             </option>
                                             <option value="Daughter">
                                                Daughter
                                             </option>
                                             <option value="Friend">
                                                Friend
                                             </option>
                                             <option value="Other">
                                                Other
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-CDN_contact_relation-container"><span class="select2-selection__rendered" id="select2-CDN_contact_relation-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CDN_staff_address_1">Address Line 1</label>
                                          <input id="CDN_staff_address_1" class="form-control CDN_staff_address_1" name="CDN_staff_address_1" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CDN_staff_address_2">Address Line 2</label>
                                          <input id="CDN_staff_address_2" class="form-control CDN_staff_address_2" name="CDN_staff_address_2" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" class="data_loader">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CDN_staff_country">Country</label>
                                          <select class="form-control select2 CDN_staff_country staff_country select2-hidden-accessible" id="CDN_staff_country" name="CDN_staff_country" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>

                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-CDN_staff_country-container"><span class="select2-selection__rendered" id="select2-CDN_staff_country-container" title="
                                             India                                                                        "><span class="select2-selection__clear">×</span>
                                          India                                                                        </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" class="data_loader">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDN_staff_province">Province</label>
                                          <select class="form-control select2 CDN_staff_province staff_province select2-hidden-accessible" id="CDN_staff_province" name="CDN_staff_province" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-CDN_staff_province-container"><span class="select2-selection__rendered" id="select2-CDN_staff_province-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDN_staff_area">Area</label>
                                          <select class="form-control select2 CDN_staff_area staff_area select2-hidden-accessible" id="CDN_staff_area" name="CDN_staff_area" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-CDN_staff_area-container"><span class="select2-selection__rendered" id="select2-CDN_staff_area-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDN_zip_code">Zip Code</label>
                                          <input id="CDN_zip_code" class="form-control CDN_zip_code" name="CDN_zip_code" type="text" value="">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDN_personal_email">Personal Email</label>
                                          <input id="CDN_personal_email" class="form-control CDN_personal_email emp_email" name="CDN_personal_email" type="email" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDN_mobile">Mobile</label>
                                          <input id="CDN_mobile" class="form-control CDN_mobile" name="CDN_mobile" type="text" value="">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="CDN_telephone">Telephone</label>
                                          <input id="CDN_telephone" class="form-control CDN_telephone just_number" name="CDN_telephone" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== CONTACT DETAILS (NATIVE) ====-->
                           <!--==== NOMINEE INFORMATION ====-->
                           <div id="nominee_info">
                              <span class="main_label">Nominee Information</span>
                              <div class="rows_wrap">
                                 <input type="hidden" name="NI_form_flag" id="NI_form_flag" class="NI_form_flag formFlag" value="0">
                                 <input type="hidden" name="NIF_uuid" id="NIF_uuid" class="NIF_uuid" value="">
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="NI_nominee_name">Nominee Name</label>
                                          <input id="NI_nominee_name" class="form-control NI_nominee_name" name="NI_nominee_name" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="NI_contact_relation">Relation</label>
                                          <select class="form-control select2 NI_contact_relation staff_country_province select2-hidden-accessible" id="NI_contact_relation" name="NI_contact_relation" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>

                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-NI_contact_relation-container"><span class="select2-selection__rendered" id="select2-NI_contact_relation-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="NI_staff_address_1">Address Line 1</label>
                                          <input id="NI_staff_address_1" class="form-control NI_staff_address_1" name="NI_staff_address_1" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="NI_staff_address_2">Address Line 2</label>
                                          <input id="NI_staff_address_2" class="form-control NI_staff_address_2" name="NI_staff_address_2" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" class="data_loader">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="NI_staff_country">Country</label>
                                          <select class="form-control select2 NI_staff_country staff_country select2-hidden-accessible" id="NI_staff_country" name="NI_staff_country" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>

                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-NI_staff_country-container"><span class="select2-selection__rendered" id="select2-NI_staff_country-container" title="
                                             India                                                                        "><span class="select2-selection__clear">×</span>
                                          India                                                                        </span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <img src="http://backoffice.evakopro.site/assets/global/img/message.gif" class="data_loader">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="NI_staff_province">Province</label>
                                          <select class="form-control select2 NI_staff_province staff_province select2-hidden-accessible" id="NI_staff_province" name="NI_staff_province" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-NI_staff_province-container"><span class="select2-selection__rendered" id="select2-NI_staff_province-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="NI_staff_area">Area</label>
                                          <select class="form-control select2 NI_staff_area staff_area select2-hidden-accessible" id="NI_staff_area" name="NI_staff_area" tabindex="-1" aria-hidden="true">
                                             <option value=""></option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-NI_staff_area-container"><span class="select2-selection__rendered" id="select2-NI_staff_area-container"><span class="select2-selection__placeholder">--Select--</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="NI_zip_code">Zip Code</label>
                                          <input id="NI_zip_code" class="form-control NI_zip_code" name="NI_zip_code" type="text" value="">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="NI_personal_email">Personal Email</label>
                                          <input id="NI_personal_email" class="form-control NI_personal_email emp_email" name="NI_personal_email" type="email" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="NI__mobile">Mobile</label>
                                          <input id="NI_mobile" class="form-control NI_mobile" name="NI_mobile" type="text" value="">
                                       </div>
                                    </div>
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="NI_telephone">Telephone</label>
                                          <input id="NI_telephone" class="form-control NI_telephone just_number" name="NI_telephone" type="text" value="">
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== NOMINEE INFORMATION ====-->
                           <!--==== ADDITIONAL INFORMATION ====-->
                           <div id="additional_info">
                              <span class="main_label">Additional Information</span>
                              <div class="rows_wrap">
                                 <input type="hidden" name="AI_form_flag" id="AI_form_flag" class="AI_form_flag formFlag" value="0">
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="AI_created_by">Created By</label>
                                          <input id="AI_created_by" class="form-control AI_created_by" name="AI_created_by" type="text" readonly="" value="Mr Afras Muhammed">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="AI_created_at">Created at</label>
                                          <input id="AI_created_at" class="form-control AI_created_at" name="AI_created_at" type="text" readonly="" value="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="AI_last_attendance">Last Attendance</label>
                                          <input id="AI_last_attendance" class="form-control AI_last_attendance" name="AI_last_attendance" type="text" readonly="">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="AI_staff_staus">Employee Status</label>
                                          <input id="AI_staff_staus" class="form-control AI_staff_staus" name="AI_staff_staus" type="text" readonly="" value="Active">
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== ADDITIONAL INFORMATION ====-->
                        </div>
                        <!--RIGHT SIDE-->
                     </div>
                  </div>
               </div>
               <div class="modal-footer">
                  <div class="row" style="">
                     <div class="col-sm-6">
                        <div class="alert_box">There are errors on page</div>
                     </div>
                     <div class="col-sm-6">
                        <button type="button" class="btn dismiss" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn theme_btn_round update_employee_btn"> Save</button>
                     </div>
                  </div>
               </div>
            </form>
         </div>
         <!-- /.modal-Task -->
         <!--                    <div class="alert_box">There are errors on page</div>-->
      </div>
      <!-- /.modal-dialog -->
   </div>
   <!-- Update Contact Modal End-->
   <!-- Update Contact Modal End-->
   <div class="modal fade uplaod_wrap" id="modal_image_uplaod">
       <div class="modal-dialog modal-content uplodImg" style="width: 390px;">
           <form id="upload_pr_pc" class="modal-content" action="{{route('admin.employees.image.store.session') }}" enctype="multipart/form-data" method="POST">
               <input type="hidden" name="_token" value="">            <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                       <span aria-hidden="true">&times;</span>
                   </button>
                   <h4 class="modal-title">Upload Photo</h4>
               </div>
               <div class="modal-body">
                   <div class="row">
                       <div class="col-md-12 text-center">
                           <div id="upload-demo" style="width: 360px; position: relative;">
                               <button style="font-size:24px; position: absolute; top: 30px; right: 30px; z-index: 9999;" id="upload1"><i class="fa fa-upload"></i></button>
                           </div>
                           <input type="file" id="upload" value="" name="image" style="display: none;">
                       </div>
                   </div>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                   <button type="submit" class="btn btn-success upload-employee-image">Upload Image</button>
               </div>
           </form>
       </div>
   </div>
   <!-- /.modal-content -->
   <!-- Add Files Modal Start-->
   <div class="modal fade bs-modal right modal-fullscreen" id="employee_files" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
         <div class="modal-content">
            <form method="post" id="employeeDocs" class="employee_documents" enctype="multipart/form-data">
               <input type="hidden" name="contact_uuid" id="contact_uuid" class="contact_uuid">
               <div class="modal-header">
                  <button type="button" class="close close_popup" data-dismiss="modal">×
                  </button>
                  <h3 class="pop_heading">
                     ADD FILES
                  </h3>
               </div>
               <div class="modal-body">
                  <div class="body_wrap">
                     <div class="row">
                        <!--LEFT SIDE-->
                        <div class="col-md-4 left_side_task p_0">
                           <div class="rows_wrap">
                              <div class="sidebar_list" style="top: 51px;">
                                 <span class="main_label">Labels</span>
                              </div>
                           </div>
                        </div>
                        <!--LEFT SIDE-->
                        <!--RIGHT SIDE-->
                        <div class="col-md-8 pl_pr_0 right_side_task add_employee_files">
                           <!--==== BASIC INFORMATION ====-->
                           <div id="employee_dox">
                              <span class="main_label">Employee Documents</span>
                              <div class="rows_wrap">
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CD_file_title">Title *</label>
                                          <input id="CD_file_title" class="form-control validate CD_file_title" name="CD_file_title" type="text">
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CD_file_upload">Upload File *</label>
                                          <div class="file-input file-input-new">
                                             <div class="file-preview ">
                                                <div class="close fileinput-remove">×</div>
                                                <div class="file-drop-disabled">
                                                   <div class="file-preview-thumbnails">
                                                   </div>
                                                   <div class="clearfix"></div>
                                                   <div class="file-preview-status text-center text-success"></div>
                                                   <div class="kv-fileinput-error"></div>
                                                </div>
                                             </div>
                                             <div class="kv-upload-progress hide">
                                                <div class="progress">
                                                   <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                                                      0%
                                                   </div>
                                                </div>
                                             </div>
                                             <button type="button" tabindex="500" title="Clear selected files" class="btn btn-default fileinput-remove fileinput-remove-button"><i class="glyphicon glyphicon-trash"></i>  <span class="hidden-xs">Remove</span></button>
                                             <button type="button" tabindex="500" title="Abort ongoing upload" class="btn btn-default hide fileinput-cancel fileinput-cancel-button"><i class="glyphicon glyphicon-ban-circle"></i>  <span class="hidden-xs">Cancel</span></button>
                                             <div tabindex="500" class="btn grey-mint btn-sm btn-file"><i class="glyphicon glyphicon-folder-open"></i>&nbsp;  <span class="hidden-xs">Browse …</span><input type="file" id="CD_file_upload" name="CD_file_upload" class="form-control validate CD_file_upload"></div>
                                          </div>
                                          <div id="kvFileinputModal" class="file-zoom-dialog modal fade" tabindex="-1" aria-labelledby="kvFileinputModalLabel">
                                             <div class="modal-dialog modal-lg" role="document">
                                                <div class="modal-content">
                                                   <div class="modal-header">
                                                      <div class="kv-zoom-actions pull-right"><button type="button" class="btn btn-default btn-header-toggle btn-toggleheader" title="Toggle header" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-resize-vertical"></i></button><button type="button" class="btn btn-default btn-fullscreen" title="Toggle full screen" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-fullscreen"></i></button><button type="button" class="btn btn-default btn-borderless" title="Toggle borderless mode" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-resize-full"></i></button><button type="button" class="btn btn-default btn-close" title="Close detailed preview" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></button></div>
                                                      <h3 class="modal-title">Detailed Preview <small><span class="kv-zoom-title"></span></small></h3>
                                                   </div>
                                                   <div class="modal-body">
                                                      <div class="floating-buttons"></div>
                                                      <div class="kv-zoom-body file-zoom-content"></div>
                                                      <button type="button" class="btn btn-navigate btn-prev" title="View previous file"><i class="glyphicon glyphicon-triangle-left"></i></button> <button type="button" class="btn btn-navigate btn-next" title="View next file"><i class="glyphicon glyphicon-triangle-right"></i></button>
                                                   </div>
                                                </div>
                                             </div>
                                          </div>
                                       </div>
                                       <div id="docerrorBlock" class="file-error-message" style="display: none;"></div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CD_file_description">Description</label>
                                          <textarea name="CD_file_description" id="CD_file_description" class="CD_file_description form-control" maxlength="255"></textarea>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="row m_0">
                                    <div class="col-md-12">
                                       <div class="form-group">
                                          <label for="CD_file_tags">Tags</label>
                                          <select class="form-control exp_tag CD_file_tags select2 select2-hidden-accessible" id="CD_file_tags" name="CD_file_tags[]" multiple="" tabindex="-1" aria-hidden="true">
                                             <option value="Nice^d185454b-a7a2-5ced-aafc-2926409de5d5">
                                                Nice
                                             </option>
                                          </select>
                                          <span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 100px;">
                                             <span class="selection">
                                                <span class="select2-selection select2-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
                                                   <ul class="select2-selection__rendered">
                                                      <li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="-1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" placeholder="" style="width: 0.75em;"></li>
                                                   </ul>
                                                </span>
                                             </span>
                                             <span class="dropdown-wrapper" aria-hidden="true"></span>
                                          </span>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <!--==== BASIC INFORMATION ====-->
                        </div>
                        <!--RIGHT SIDE-->
                     </div>
                  </div>
               </div>
               <div class="modal-footer">
                  <div class="row" style="">
                     <div class="col-sm-6">
                        <div class="alert_box">There are errors on page</div>
                     </div>
                     <div class="col-sm-6">
                        <button type="button" class="btn dismiss" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn theme_btn_round update_employee_btn"> Save</button>
                     </div>
                  </div>
               </div>
            </form>
         </div>
         <!-- /.modal-Task -->
         <!--                    <div class="alert_box">There are errors on page</div>-->
      </div>
      <!-- /.modal-dialog -->
   </div>
   <!-- Add Files Modal End-->
</div>

<div class="modal fade uplaod_wrap" id="modal_image_uplaod">
   <div class="modal-dialog modal-content uplodImg" style="width: 390px;">
       <form id="upload_pr_pc" class="modal-content" action="{{route('admin.employees.image.store.session') }}" enctype="multipart/form-data" method="POST">
           <input type="hidden" name="_token" value="">            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                   <span aria-hidden="true">&times;</span>
               </button>
               <h4 class="modal-title">Upload Photo</h4>
           </div>
           <div class="modal-body">
               <div class="row">
                   <div class="col-md-12 text-center">
                       <div id="upload-demo" style="width: 360px; position: relative;">
                           <button style="font-size:24px; position: absolute; top: 30px; right: 30px; z-index: 9999;" id="upload1"><i class="fa fa-upload"></i></button>
                       </div>
                       <input type="file" id="upload" value="" name="image" style="display: none;">
                   </div>
               </div>
           </div>
           <div class="modal-footer">
               <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
               <button type="submit" class="btn btn-success upload-employee-image">Upload Image</button>
           </div>
       </form>
   </div>
</div>
@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet"
   type="text/css" />
<link href="{{asset('assets/global/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/croppie.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css"/>
<style>
   .table-container {
   padding: 50px 0 0;
   }
   .modal .right_side_task {
   border-left: 2px solid #f1f1f1 !important;
   }
   .dp_img{
   max-width: 100%;
   }
   span.select2-selection__clear{
    display: none;
   }
   .display_pic:hover .overlay {
    display: block !important;
}   

.display_pic:hover .overlay-img {
    display: block;
}

.display_pic .overlay-img {
    position: absolute;
    background: #eee;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    opacity: 0.7;
    text-align: center;
    padding: 58px 0;
    display: none;
}

.display_pic .overlay-img {
    color: #999;
    font-size: 30px;
}

</style>
@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}"></script>
<script src="{{asset('js/general.js')}}"></script>
<script src="{{asset('js/croppie.js')}}"></script>
@include('admin.js.employee-edit')
@stop