@extends('layouts.master')

@section('title', 'Company')
@section('pageheader')

 <!-- Page Header -->
                    <div class="page-header">
                        <div class="header-icon"><i class="fa fa-cog"></i></div>
                        <h5>ADMINISTRATIVE SETTINGS</h5>
                        <div class="form-group float-right mt-2">
                            <select class="form-control">
                                <option>Units</option>
                                <option>Users</option>
                            </select>
                        </div>
                    </div>
                    <!-- /#Page Header -->

@endsection

@section('breadcrumb')
        {!! csrf_field() !!}
<nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Administrative settings</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('company.index') }}">Company</a></li>
                            <li class="breadcrumb-item active" aria-current="page">New Company</li>
                        </ol>
                    </nav>
 @endsection

@section('content')

<div class="detail-accordion">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item col">                  
            <a class="nav-link active" id="info-tab" data-toggle="tab" href="#info" role="tab" aria-controls="info" aria-selected="true">Company Info</a>
        </li>
        <li class="nav-item col">
                                <a class="nav-link" id="units-tab" data-toggle="tab" href="#units" role="tab" aria-controls="units" aria-selected="false">Units</a>
                            </li>
         <li class="nav-item col">    
            <a class="nav-link" id="add_users-tab" data-toggle="tab" href="#add_users" role="tab" aria-controls="add_users" aria-selected="false"> Add Users</a>
                            </li>
        @if(isset($company['id'])) 
        <!-- <li class="nav-item col">    
            <a class="nav-link" id="users_listing-tab" data-toggle="tab" href="#user_listing" role="tab" aria-controls="users_listing" aria-selected="false"> Users</a>
                            </li> -->
                            @endif
       <!-- <li class="nav-item col">
                                <a class="nav-link" id="roles-tab" data-toggle="tab" href="#roles" role="tab" aria-controls="roles" aria-selected="false">Roles</a>
                            </li> -->
    </ul>
    @include('layouts.includes.alert')
        @if(isset($company['id']))                
        {{ Form::model($company, array('url' => url('/company/edit/id',['id'=>$company['id']]), 'id'=>'company_form', 'method' => 'POST','files'=>true,'enctype' => 'multipart/form-data')) }}
        @else
        {{ Form::open(array('route' => 'company.create', 'id'=>'company_form','files'=>true,'enctype' => 'multipart/form-data')) }} 
        @endif
        
    <div class="tab-content" id="myTabContent">

        
     
        

       
            <div class="tab-pane fade show active" id="info" role="tabpanel" aria-labelledby="info-tab">

            <div class="row">
                                        <div class="col-4 text-center">
                                            <div class="profile-pic my-4">
                                            
                                            @if(!empty($company->company_logo)) 
                                                <img src="{{ S3Helper::getFile('Company'.'/'.$company->company_logo) }}" height="100%" width="100%" />                                 
                                            @endif 
                                            </div>
                                            <!-- <button type="button" class="btn btn-outline-primary"><i class="fa fa-camera"></i> Company Logo</button> -->
                                            <input type="file" class="btn btn-outline-primary" name="company_logo" id="company_logo">
                                        </div>

                                        <div class="col-4">
                                            <div class="sub-header">
                                                <h4>Profile Info</h4>
                                            </div>
                                            <div class="form-group row">
                                                {{ Form::label('company_name', 'Company Name',array('class' => 'col-sm-4 col-form-label ')) }}

                                                <div class="col-sm-8">
                                                {{ Form::text('company_name', (isset($company->company_name) ? $company->company_name : null), array('class' => 'form-control','required'=>'')) }}
                                                 </div>

                                               </div>
                                            <div class="form-group row">                                                
                                                 {{ Form::label('address', 'Address',array('class' => 'col-sm-4 col-form-label')) }}
                                                 <div class="col-sm-8">
                                                 {{ Form::textarea('address', (isset($company->address) ? $company->address : null), array('class' => 'form-control','rows'=>'3')) }}
                                             </div>

                                            </div>
                                            <div class="form-group row">
                                               {{ Form::label('phone', 'Phone',array('class' => 'col-sm-4 col-form-label')) }}
                                                <div class="col-sm-8">                      
                                                    {{ Form::text('phone', (isset($company->phone) ? $company->phone : null), array('class' => 'form-control phoneNumber')) }}

                                                    
                                                </div>
                                            </div>
                                            @if(!isset($company['id']))           
                                            <div class="form-group row">
                                                {{ Form::label('user_name', 'User Name',array('class' => 'col-sm-4 col-form-label')) }}
                                                <div class="col-sm-8">
                                                    
                                                {{ Form::text('user_name', (isset($company->user_name) ? $company->user_name : null), array('class' => 'form-control','required'=>'')) }}

                                                  
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                {{ Form::label('email', 'Email',array('class' => 'col-sm-4 col-form-label','required'=>'')) }}
                                                
                                                
                                                <div class="col-sm-8">
                                                    {{ Form::email('email', (isset($company->email) ? $company->email : null), array('class' => 'form-control','required'=>'')) }}

                                                    
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                            {{ Form::label('password', 'Password',array('class' => 'col-sm-4 col-form-label')) }}
                                            <div class="col-sm-8">
                                            {{ Form::password('password', array('class' => 'form-control',$password)) }}
                                            @if(isset($company['company_id']))    
                                                <small>Keep password field blank if you dont want to change password</small>
                                                @endif
                                            </div>
                                                </div>
                                            @endif

                                            <div class="form-group row">                                                
                                                 {{ Form::label('note', '
                                                 Notes',array('class' => 'col-sm-4 col-form-label')) }}
                                                 <div class="col-sm-8">
                                                 {{ Form::textarea('note', (isset($company->note) ? $company->note : null), array('class' => 'form-control','rows'=>'3','cols'=>'50')) }}
                                             </div>

                                            </div>
                                            <div class="form-group row">
                                          {{ Form::label('posted_speed', 'Enable Posted Speed',array('class' => 'col-sm-4 col-form-label')) }}
                                          <div class="col-sm-8">
                                             {{ Form::select('posted_speed',['1' => 'Enable','0' => 'Disable'], (isset($company->posted_speed) ? $company->posted_speed : '0') ,array('class' => 'form-control')) }}
                                          </div>
                                          </div>
                                             <div class="form-group row">
                                          {{ Form::label('is_active', 'Status',array('class' => 'col-sm-4 col-form-label')) }}
                                          <div class="col-sm-8">
                                             {{ Form::select('is_active',['1' => 'Active','0' => 'InActive'], (isset($company->is_active) ? $company->is_active : '1') ,array('class' => 'form-control')) }}
                                          </div>
                                       </div>
                                            
                                        </div>

            </div>
            </div>
                  <input type="hidden" name="role" value="2">
                 
                  <div class="tab-pane fade" id="units" role="tabpanel" aria-labelledby="units-tab">
                                <div class="sub-header">
                                    <h4>Assign/UnAssign Units</h4>
                                                     </div>
                                
                                
        <div class="row justify-content-md-center">
            <div class="col-3 border p-3">
                
               <div id="list1" class="droppable list">
                                     </div>

            </div>
            <div class="col-1 text-center">
            </div>
            <div class="col-3 border p-3">
            <div id="list3" class="droppable list">
                       
    </div>
    <input type="hidden" name="droppable" id="droppable_input" value="" />
                                    </div>
                                </div>
                   
                            </div>

                  <div class="tab-pane fade" id="add_users" role="tabpanel" aria-labelledby="add_users-tab">
                   
                    <div class="sub-header">
                                    <h4>Add User</h4>
                                </div>
                    @if(isset($company['id']))    
                         <div class="row">

                   <div class="col-11 clone-users" >
                    <div class="row">
                        
                        
                                         <div class="col-3">
                                            <div class="form-group row">
                                                <label class="col-4 col-form-label">User Name</label>
                                                <div class="col-8">
                                                    <input type="text" name="multi_user_name" class="form-control">
                                                </div>


                                            </div>
                                        </div>
                                        <div class="col-3 ">
                                            <div class="form-group row">
                                                <label class="col-4 col-form-label">Email</label>
                                                <div class="col-8">
                                                    <input type="text" name="multi_user_email"
                                                    class="form-control">
                                                </div>


                                            </div>
                                        </div>
                                        <div class="col-3 ">
                                            <div class="form-group row">
                                                <label class="col-4 col-form-label">Password</label>
                                                <div class="col-8">
                                                    <input type="password" name="multi_user_password" class="form-control">
                                                </div>
                                                
                                            </div>
                                             
                                        </div>
                                        <div class="col-3">
                                            <div class="form-group row">
                                               <label class="col-4 col-form-label">Assign Role</label>
                                               
                                                <div class="col-sm-8">
                                                   <select class="form-control" name="multi_user_role">
                                        
                                                        @foreach ($roles as $role)                          
                                                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                    </div>
                                       
                    </div>
                </div>
                <div class="col-1">
                    <div class="text-right">
                    <div class="input-group-btn">
                            <button class="btn btn-sm btn-success save_multi_user" type="button"  > <span class="fa fa-save" aria-hidden="true"></span> </button>
                          </div>
                      </div>

                </div> 

                        </div>
                        
                      @else  

                      <div class="row">

                   <div class="clone-users col-11" >
                        <div class="row"> 
                        
                                         <div class="col-3">
                                            <div class="form-group row">
                                                <label class="col-4 col-form-label">User Name</label>
                                                <div class="col-8">
                                                    <input type="text" name="multi_user_name[]" class="form-control">
                                                </div>


                                            </div>
                                        </div>
                                        <div class="col-3 ">
                                            <div class="form-group row">
                                                <label class="col-4 col-form-label">Email</label>
                                                <div class="col-8">
                                                    <input type="text" name="multi_user_email[]"class="form-control">
                                                </div>


                                            </div>
                                        </div>
                                        <div class="col-3 ">
                                            <div class="form-group row">
                                                <label class="col-4 col-form-label">Password</label>
                                                <div class="col-8">
                                                    <input type="password" name="multi_user_password[]" class="form-control">
                                                </div>
                                                
                                            </div>
                                             
                                        </div>
                                        <div class="col-3">
                                            <div class="form-group row">
                                               <label class="col-4 col-form-label">Assign Role</label>
                                               
                                                <div class="col-sm-8">
                                                   <select class="form-control" name="multi_user_role[]" required>
                                        
                                                        @foreach ($roles as $role)                          
                                                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                    </div>
                                       
                    </div>
                </div>
                <div class="col-1">
                    <div class="text-right">
                    <div class="input-group-btn">
                            <button class="btn btn-sm btn-success" type="button"  onclick="add_users_fields();"> <span class="fa fa-plus" aria-hidden="true"></span> </button>
                          </div>
                      </div>

                </div> 

                        </div>
                    @endif
                    <div id="add_user_fields">
          
                        </div>
                         @if(isset($company['id']))   
                         <div class="sub-header">
                                                <h4>User Listing</h4>
                                            </div> 
                            <div class="alert hide">

                            </div>
                        
                        <div class="detailed-info-table">
                        <div class="info-table">
                             <table id="" class="table table-striped data-table">
                                <thead class="thead-dark">
                                    <tr>            
                                        <th>#</th>                            
                                        <th>Username</th>
                                        <th>Email</th>                                        
                                        <th>Role</th>
                                        <th>Status</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                    
                                </thead>
                                <tbody class="tbody searchable">

                                </tbody>
                            </table>


                        </div>
                </div>
                @endif
                  </div> 
                  @if(isset($company['id'])) 
                   <div class="tab-pane fade"  role="tabpanel" aria-labelledby="users_listing-tab">
                    
                   </div> 
                    @endif  
                  <hr class="dotted">
                    <div class="row">
                        <div class="col-12 text-right">
                           
                            {{Form::button('<i class="fa fa-check"></i> '.$companyAction, array('type' => 'submit', 'class' => 'btn btn-primary ml-3','id'=>'button_company'))}}

                            <a href="{{ route('company.index') }}" class="btn btn-outline-secondary"><i class="fa fa-ban"></i> Cancel </a>
                            
                        </div>
                    </div>   
       
</div>
{{ Form::close() }}
</div>
  
<div class="modal-container"></div> 
@endsection

@section('script')

  <script type="text/javascript">
    var modal = $('#wireless_telematics_modal'); 
    var _idx = 1;
function add_users_fields() {
    _idx++;
    var objTo = document.getElementById('add_user_fields')
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "row removeclass"+_idx);
    var rdiv = 'removeclass'+_idx;
    var _clonediv = $('.clone-users').clone();

    var minus_html='<div class="col-1"><div class="text-right"><div class="input-group-btn"><button class="btn btn-sm btn-outline-secondary" type="button"  onclick="remove_user_fields('+_idx+');"> <span class="fa fa-minus" aria-hidden="true"></span> </button></div></div>';
    divtest.innerHTML = '<div class="col-11">'+_clonediv.html()+'</div>'+minus_html;
    //$(_clonediv).parent().append(minus_html);

    $(divtest).find(':input').each(function() { 
        
        if($(this).attr('type')=='text' || $(this).attr('type')=='password' || $(this).attr('type')=='hidden')
            $.trim($(this).val(''));
        if($(this).is('select')){
            var myElement = $('select[name="multi_user_role[]"]');            
            $($(this)).prop("selectedIndex", 0);
        }
        //return false;
     });

    objTo.appendChild(divtest)
}
   function remove_user_fields(id) {
       $('.removeclass'+id).remove();
   }

     

      var _reload=      (function reload_datatable(){
        startLoading();
    $.ajax({
      type: "GET",
      url : "{{ url('ajax-getusers') }}",
      dataType: "JSON",
      data : {"_token": "{{ csrf_token() }}",'company_id':"{{$companyId}}"},
      success: function(data)
      {
        stopLoading();
        var _dataset = [];
        var _data = data.dataset;
        var _i = 1;
        $(_data).each(function(idx,dataset){
          var _j                = _i+'.';

          var _id           = _data[idx].id;
          var _name     = _data[idx].user_name;
          var _email  = _data[idx].email;          
          var _user_role     = _data[idx].role_name;
           var chang_color='red';
          var status_title="inactive";
          if(_data[idx].is_active==1){
            chang_color='green';
            status_title='active';
          }
          var status = ""
          +"<a href='javascript:void(0);' onClick='change_status("+_id+"); return false;' title="+status_title+">"
          +"<button type='button' class='status_change btn btn-link action c-"+chang_color+" title='status' value='"+_data[idx].is_active+"'>"
          +"<i class='fa fa-check-circle'></i>"
          + "</button>"
          + "</a>";
          // var _desc     = _data[idx].description;
          var _action   = ""
          + "<a href='javascript:void(0)' title='Edit' id='"+_id+"' onclick='edit_user("+_id+");'>"
          +"<button type='button' class='btn btn-link action c-yellow' title='edit' value='"+_id+"'>"
          +"<i class='fa fa-pencil-alt'></i>"
          + "</button>"
          + "</a>"
          + "<a href='javascript:void(0)' onClick='ajax_delete("+_id+"); return false;' title='Delete'>"
          +"<button type='button' class='btn btn-link action c-red ml-3' title='delete' value='"+_id+"'>"
          +"<i class='fa fa-trash'></i>"          
          + "</button>"
          + "</a>"
          // + "<a href='{{url('/profile/')}}/"+_id+"' title='View Profile'>"
          // +"<button type='button' class='btn btn-link action ml-3' title='view profile' value='"+_id+"'>"
          // +"<i style='color:black' class='fa fa-eye'></i>"
          // + "</button>"
          // + "</a>"
          + "<a href='javascript:void(0)' title='View Logs'  id='"+_id+"' onclick='view_user_logs("+_id+");'>"
          +"<button type='button' class='btn btn-link action ml-3' title='view logs' value='"+_id+"'>"
          +"<i style='color:black' class='fa fa-history'></i>"
          + "</button>"
          + "</a>";
          
          _dataset.push([_j,_name,_email,_user_role,status,_action]);
          _i = _i+1;
        });
        // console.log(_dataset);
        var usersDataT  =   $(".data-table").DataTable({
                              destroy: true,
                              processing: true,
                              paging: true,
                              //dom: "Bfrtip",
                              searchable: true,
                              pageLength: 50,
                              data : _dataset,
                              bAutoWidth:false,
                              columnDefs: [
                                { className: "text-center", "targets": [ 0 ],"bSortable": false },
                                { className: "text-center", "targets": [ 1 ] },
                                { className: "text-center", "targets": [ 2 ] },
                                { className: "text-center", "targets": [ 3 ] },
                                { className: "text-center", "targets": [ 4 ] ,"bSortable": false },
                                { className: "text-center", "targets": [ 5 ] ,"bSortable": false},            
                              ],
                              select: {
                                    style:    'os',
                                    selector: 'td:first-child'
                                },
                                rowReorder: {                                
                                update: true
                                },

                            });

        // $(".dataTables_filter").css("display","none");
        // $(".dataTables_length").css("display","none");
        // $('#users_search').on( 'keyup click', function () {   // for text boxes
        //     var v =$(this).val();  // getting search input value
        //     usersDataT.search(v).draw();
        // }); 
         
        /*$('.data-table tbody').on('click', 'td a.edit_user', function () {

        var tr = $(this).closest('tr');
        var row = usersDataT.row( tr );
        if (tr !== null && tr !== undefined && row !== null && tr !== undefined)
        {
                row.child.hide();
                tr.removeClass('shown');  
        }
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
          $('.shown').each(function(i, obj) {
           newtr = $(this).closest('tr');
           newrow = usersDataT.row( newtr );
           newrow.child.hide();
           newtr.removeClass('shown');
           });
            // Open this row
            // console.log(row);
            // return false;
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );  */


      }
    });

    return reload_datatable; //return the function itself to reference

  }());
 function format ( d ) {

var roles = JSON.parse( '[]' );


  //var html='<table cellpadding="5" id="dynamic_data" cellspacing="0" border="0" style="padding-left:50px;">';
  var html='<div id="dynamic_data" class="row" >';
   //html +='<tr>';
   html +='<div>&nbsp;</div>';
   var _data = d;
   
   var lastEl = d[d.length-1];
  
   var user_id = $(lastEl).attr('id');
  
   var firstEl = d[0];
    //console.log(d[0]);
    var i =0;
    //var save_data=[];
  $(d).each(function(idx){   
        var user_data= d[idx];
        if(user_data != lastEl && user_data!=firstEl){
            //save_data[i]=user_data;
            if(idx==1){
                html +='<div class="col-3"><div class="form-group"><div class="col-sm-4"><input type="text" name="save_user_name" value="'+user_data+'"/></div></div></div>';
            }
            if(idx==2){
                html +='<div class="col-3"><div class="form-group"><div class="col-sm-4"><input type="text" name="save_user_email" value="'+user_data+'"/></div></div></div>';
            }
            if(idx==3){
                    html +='<div class="col-3"><div class="form-group"><div class="col-sm-4"><select type="select" name="save_user_role">';
                 for (var key in roles) {
                    if (roles.hasOwnProperty(key)) {
 
                        var selected='';
                        if(user_data==roles[key].role_name){
                             selected='selected=selected';
                        }
                        html +='<option '+selected+' value='+roles[key].id+'>'+roles[key].role_name+'</option>';
                    }
                }
                html +='</select></div></div></div>';
            }
            // else{
            // html +='<td><input type="text" value="'+user_data+'"/></td>';
            // }
              i++;
        }
        

  });

  html +='<div class="col-3"><div class="form-group"><div class="col-sm-4"><div class="input-group-btn"><a href="javascript:void(0);" id="" onClick="save_user(\''+user_id+'\');" class="save_user"> <button class="btn btn-sm btn-success" type="button"> <span class="fa fa-save" aria-hidden="true" ></span> </button></a></div></div></div></div>';
  //html +='</tr>';
//html +='</table>';
html +='</div>';
    
    return html;
}
function edit_user(id)
    {
        

      var url ="{{ url('/users') }}/"+id+'/edit';
        startLoading();  
     $('.modal-container').load(url,'',function(responseTxt, statusTxt, xhr){
        if(statusTxt=='success'){
            stopLoading();
            $('#userModal').modal({show:true});     
        }
       });
    }

function view_user_logs(id){
     
       startLoading();  
       $.ajax({
        type: "GET",
        url : "{{ url('/users/logs') }}/"+id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
            stopLoading();
          if(data.status === true){             
               bootbox.alert('User '+data.user_name+' was last login at <b>'+data.last_login+'</b>.</br> No of time user logged in '+data.nooftime_loging);
             
          }else{              
              bootbox.alert('There is error while fetching logs for user.');
          }         
        }
      });

}
function change_status(_id){
     bootbox.confirm("Are you sure you want to change status!", function(result){
   
      if(result==true){
      $.ajax({
        type: "POST",
        url : "{{ url('/users/changestatus') }}/"+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){             
               bootbox.alert('Status changed Successfully.');
              _reload();
          }else{              
              bootbox.alert('There is error while changing status.');
          }         
        }
      });
      }
  });
    
    }
    $('document').ready(function(){

        $('#add_users-tab').click(function (){
            
           //_reload();
           //reload_datatable();

} );
        $('.phoneNumber').on('keypress paste', function(e) {    
            return (typeof(e.which) == 'undefined' || (e.which!=8 && e.which!=0) && (e.which!=40 && e.which!=41 && e.which!=43 && e.which!=45 && (e.which<48 || e.which>57) )  ) ? false : true ;
        });
        $('.onlyNumeric').on('keypress paste', function(e) {             
            return (typeof(e.which) == 'undefined' || e.which<48 || e.which>57) ? false : true ;
        });                
        $('.alphaNumeric').on('keypress paste', function(e) {             
            return (typeof(e.which) != 'undefined' && ((e.which> 47 && e.which<58) || (e.which>64  && e.which < 91) || (e.which>96  && e.which < 123)) ) ? true : false ;
        });        
        $('.alphaNumericWithDash').on('keypress paste', function(e) {  
            return (typeof(e.which) != 'undefined' && ((e.which> 47 && e.which<58) || (e.which>64  && e.which < 91) || (e.which>96  && e.which < 123) || e.which==45) ) ? true : false ;
        });
        

        });
        

   function save_user ( user_id ) {
    var user_data=[];
    var user_data = {};
     

    $('#dynamic_data div').find('input, select').each(function()
    {
       
             var input = $(this);
           
        //alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
            
            if(input.attr('name')=='save_user_name'){
              
                user_data['user_name']=input.val();

            }
            if(input.attr('name')=='save_user_email'){
               
               user_data['user_email']=input.val();

            }
            if(input.attr('name')=='save_user_role'){
                user_data['user_role']=input.val();
               
            }

    });
var post_user_data = []
user_data['user_id']=user_id;

   saveajax_user(user_data);

   }

   function saveajax_user(user_data=[]){
     $.ajax({
      type: "POST",
      //url : "{{ url('save-user') }}",
      dataType: "JSON",
      url: "{{ route('users.ajax.save-user') }}",
      data: { 
        _token : '{{ csrf_token() }}',
        user_data :  JSON.stringify(user_data)
            },
      success: function(data)
      {
        if(data.status==true){
          
            modal.find('.modal-title').text('Info');
            modal.find('.modal-body').html('User data save successfully!');
            // alert('User data save successfully!');            
            // $('#wireless_telematics_modal .modal-body').html('User data save successfully!');
            // $('#wireless_telematics_modal').modal('show');
            modal.modal('show');
             //$('#add_users-tab').trigger('click');             
             _reload();
             if(data.is_add==true)
                clearFields();

            return true;
        }
        else{
           
            if(data.msg==""){                
                modal.find('.modal-title').text('Alert');
                modal.find('.modal-body').html('Oops! Something wrong');
                modal.modal('show');
            }   
            else{
                modal.find('.modal-title').text('Alert');
                modal.find('.modal-body').html(data.msg);
                modal.modal('show');
                //alert(data.msg);
            }
            return false;
        }
        
     }
  });

   }
   function clearFields(){
    $('.clone-users div').find('input, select').filter(function (e) {
        $.trim($(this).val(''));
    });
   }
   $('.save_multi_user').click(function (){
            
        var validated = validateinputs();
        if(validated==true)
            save_multi_user();

    });
   
   function validateinputs(){
    var isValid=true;
     $('.clone-users div').find('input, select').filter(function (e) {
       
        if($(this).attr('name')=='multi_user_name' && $.trim($(this).val())==""){
                modal.find('.modal-title').text('Alert');
                modal.find('.modal-body').html('Pl. enter user name');
                modal.modal('show');
            //alert('Pl. enter user name');
            $(this).focus();
            isValid =false;
           
        }
         if($(this).attr('name')=='multi_user_password' && $.trim($(this).val())==""){
                modal.find('.modal-title').text('Alert');
                modal.find('.modal-body').html('Pl. enter user password');
                modal.modal('show');
            //alert('Pl. enter user password');
            $(this).focus();
             isValid =false;
            
        }
         if($(this).attr('name')=='multi_user_email' && $.trim($(this).val())==""){
                modal.find('.modal-title').text('Alert');
                modal.find('.modal-body').html('Pl. enter user email');
                modal.modal('show');
            //alert('Pl. enter user email');
            $(this).focus();
                 isValid =false;
            
        }
        
});
     return isValid;
       
   }
   function save_multi_user(){
    var user_data={};
    
   
     
    $('.clone-users div').find('input, select').each(function()
    { 
        var input = $(this);
        
        //alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
        if(input.attr('name')=='multi_user_name' && input.val()!=''){
              
                user_data['user_name']=input.val();

        }
            
        if(input.attr('name')=='multi_user_email'&& input.val()!=''){
               
               user_data['user_email']=input.val();

            }
          
        if(input.attr('name')=='multi_user_role'&& input.val()!=''){
                user_data['user_role']=input.val();
               
            }
        if(input.attr('name')=='multi_user_password'&& input.val()!=''){
                user_data['user_password']=input.val();
               
            }
            
       
        //saveajax_user(user_data);
    });

    user_data['company_id']='';
    //console.log(user_data);
    saveajax_user(user_data);
    
     
   }
   function ajax_delete(_id){
    if (confirm('Are you sure you want to Delete?')) {
      $.ajax({
        type: "DELETE",
        
        url : "{{ url('/users') }}/"+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){
              modal.find('.modal-title').text('Alert');
              modal.find('.modal-body').html('User has been deleted successfully.');
              modal.modal('show');
              //alert('User has been deleted successfully.');
             // $('#add_users-tab').trigger('click');
              _reload();
               //reload_datatable();
          }else{
              //alert('There is error to delete record, Try again.');
              bootbox.alert('There is error to delete record, Try again.');
          }
        }
      });
    }
    }

//Drag & Drop
      $( function() {

    // $( "ul.droptrue" ).sortable({
    //   connectWith: "ul"
    // });
 
    // $( "ul.dropfalse" ).sortable({
    //   connectWith: "ul",
    //   dropOnEmpty: false
    // });
 
    // $( "#sortable1, #sortable2" ).disableSelection();

        $('#search').multiselect({
        search: {
            left: '<input type="text" name="q" class="form-control mb-3" placeholder="Search..." />',
            right: '<input type="text" name="q" class="form-control mb-3" placeholder="Search..." />',
        },
        fireSearch: function(value) {
            return value.length > 2;
        }
    });

         

  } );


     /* $( "#company_form" ).validate( {
                
                rules: {
                    search_to: "required needsSelection",
                   
                },
                ignore: ':hidden:not("#search_to")',
                errorElement: "em",
                 //errorClass: 'invalid',
                errorPlacement: function ( error, element ) {
                    // Add the `help-block` class to the error element
                    error.addClass( "help-block" );

                    // Add `has-feedback` class to the parent div.form-group
                    // in order to add icons to inputs
                    element.parents( ".col-sm-5" ).addClass( "has-feedback" );

                    if ( element.prop( "type" ) === "checkbox" ) {
                        error.insertAfter( element.parent( "label" ) );
                    } else {
                        error.insertAfter( element );
                    }

                    // Add the span element, if doesn't exists, and apply the icon classes to it.
                    if ( !element.next( "span" )[ 0 ] ) {
                        $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
                    }
                },
                success: function ( label, element ) {
                    // Add the span element, if doesn't exists, and apply the icon classes to it.
                    if ( !$( element ).next( "span" )[ 0 ] ) {
                        $( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
                    }
                },
                highlight: function ( element, errorClass, validClass ) {
                    $( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
                    $( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
                },
                unhighlight: function ( element, errorClass, validClass ) {
                    $( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
                    $( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
                },
                invalidHandler: function(form, validator) {
            var errors = validator.numberOfInvalids();
            
            //alert($("#driver_form .error").closest(".active").get(0).id);
            
            if (errors) {
                var elem_id=validator.errorList[0].element.id;
                var _tab =$("#"+elem_id).closest(".tab-pane").get(0).id;
                $('#'+_tab+'-tab').trigger('click');
                validator.errorList[0].element.focus();
            }
            
            } 
            } );
        */


     
      

    $('#button_company').click(function(evt) {
            evt.preventDefault();
        var array=[];
         $('#list3 div').each(function(i)
            {   
                array.push($.trim($(this).attr('id')));
            });
         console.log(array);
                $('#droppable_input').val($.trim(array.join(",")));
                if($("#company_form").valid()){
                   $("#company_form").submit();
                }
                else{
                    return false;
                }
    });

    $(document).ready(function(){


        $(".droppable").droppable({
                drop: function(event, ui) {
                    var $list = $(this);
                    $helper = ui.helper;
                    $($helper).removeClass("selected");
                    var $selected = $(".selected");                 
                    if($selected.length > 1){                       
                        moveSelected($list,$selected);
                    }else{
                        moveItem(ui.draggable,$list);
                    }                                       
                }, tolerance: "touch"
             });
             
             $(".draggable").draggable({
                revert: "invalid",
                helper: "clone",
                cursor: "move",
                drag: function(event,ui){
                    var $helper = ui.helper;
                    $($helper).removeClass("selected");
                    var $selected = $(".selected"); 
                    if($selected.length > 1){   
                        $($helper).html($selected.length + " items");
                    }                                       
                }
             });
            
            function moveSelected($list,$selected){
                $($selected).each(function(){
                    $(this).fadeOut(function(){
                        $(this).appendTo($list).removeClass("selected").fadeIn();
                    });                 
                });             
            }
            
            function moveItem( $item,$list ) {            
                $item.fadeOut(function() {
                    $item.find(".item").remove();
                    $item.appendTo( $list ).fadeIn();
                    $item.find(".item i").addClass('c-green')
                });
            }
            
            $(".item").click(function(){
                $(this).toggleClass("selected");
            });
$.validator.addMethod('filesize', function (value, element, param) {
        return this.optional(element) || (element.files[0].size <= param)
    }, 'File size must be less than 2 MB');
$("#company_form").validate({
       ignore: [],
       onfocusout: false,
       rules: {
            user_name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            company_logo: {                
                extension: "jpg|jpeg|png|gif",
                filesize: 2000000
            },
            password:{
                 required: true,
                 minlength: 3
            }

        },
       messages: {
            user_name: {
                required: "Please enter username."
            },
            email: {
                required: "Please enter email.",
                email: "Please enter valid email."
            },
            company_logo: {extension: "Please upload jpg,jpeg,png,gif only"}
       },       
       invalidHandler: function(form, validator) {
       var errors = validator.numberOfInvalids();

       if (errors) {
           var elem_id=validator.errorList[0].element.id;

           var _tab =$("#"+elem_id).closest(".tab-pane").get(0).id;
           $('#'+_tab+'-tab').trigger('click');
           validator.errorList[0].element.focus();
       }

       } 
    });   

    });
  </script>
@endsection
@section('script')  
  <script type="text/javascript">       
    
    
    
    
    
      


  </script>
@endsection