@extends('layouts.master')

@section('title', 'Company')
@section('pageheader')
<!-- <script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script> -->
<script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script type="text/javascript" src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css">
 <!-- 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 ('errors.list') 
        @if(isset($company['id']))                
        {{ Form::model($company, array('url' => url('/company/edit/id',['id'=>$company['id']]), 'method' => 'POST')) }}
        @else
        {{ Form::open(array('route' => 'company.create')) }} 
        @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">
                                            </div>
                                            <button type="button" class="btn btn-outline-primary"><i class="fa fa-camera"></i> Company Logo</button>
                                        </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')) }}

                                                    
                                                </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>

            </div>
            </div>
                  <input type="hidden" name="role" value="2">
                  <!-- <div class="tab-pane fade" id="roles" role="tabpanel" aria-labelledby="roles-tab">

                    <div class="form-group row">
                         <label class="col-3 col-form-label">Assign To Role</label>
                                    <div class="col-6">
                                        <select class="form-control" name="role" required>
                                        <option value="2">Supervisor</option>
                            <!-- @foreach ($roles as $role)                          
                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    </div>
                  </div> -->


                  <div class="tab-pane fade" id="units" role="tabpanel" aria-labelledby="units-tab">
                                <div class="sub-header">
                                    <h4>Click to Assign/UnAssign Units</h4>
                                </div>
                                <div class="row text-center">
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-green"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-gray"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-gray"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-green"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-green"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-green"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-gray"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-green"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-gray"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-green"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-green"></i></button> 05G8
                                    </div>
                                    <div class="col-3">
                                        <button type="button" class="btn btn-link" title="active"><i class="fa fa-truck c-green"></i></button> 05G8
                                    </div>
                                </div>
                            </div>

                  <div class="tab-pane fade" id="add_users" role="tabpanel" aria-labelledby="add_users-tab">
                    <h2>Add Users</h2>
                    @if(isset($company['id']))    
                        @foreach($users as $user)
                        <div class="row clone-users" >

                            <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="hidden" name="hidden_user_id[]" value="{{ $user->user_id }}">
                                                    <input value="{{ $user->user_name }}" 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" value="{{ $user->email }}" 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-6">
                                                    <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 }}" {{ $selected}} >{{ $role->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                            </div>
                        </div>
                        @endforeach
                      @else  

                      <div class="row">

                   <div class="row clone-users" >
                        
                        
                                         <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-6">
                                                    <input type="password" name="multi_user_password[]" class="form-control">
                                                </div>
                                                
                                            </div>
                                             
                                        </div>
                                        <div class="col-2">
                                            <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 class="row">
                    <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="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 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'))}}

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

@endsection

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

    
    divtest.innerHTML = _clonediv.html()+'<div class="col-1 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).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();
   }

    $('document').ready(function(){
     var editor;

            
        $('#add_users-tab').click(function (){
            
           var _reload = (function reload_datatable(){
            

    $.ajax({
      type: "GET",
      url : "{{ url('ajax-getusers') }}",
      dataType: "JSON",
      data : {"_token": "{{ csrf_token() }}",'company_id':"{{$companyId}}"},
      success: function(data)
      {
        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 _desc     = _data[idx].description;
          var _action   = ""
          + "<a href='users/"+_id+"/edit' title='Edit'>"
          +"<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_roles_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>";
          _dataset.push([_j,_name,_email,_user_role,_action]);
          _i = _i+1;
        });
        // console.log(_dataset);
        var usersDataT  =   $(".data-table").DataTable({
                              destroy: true,
                              paging: true,
                              dom: "Bfrtip",
                              searching: 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},            
                              ],
                              select: {
                                    style:    'os',
                                    selector: 'td:first-child'
                                },

                            });

        $(".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();
        }); 
         
       editor = new $.fn.dataTable.Editor( {
        ajax: "chagedata.php",
        table: ".data-table",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
 $('.data-table').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );


      }
    });

    return reload_datatable; //return the function itself to reference

  }());

} );

        });
        
   
  </script>
@endsection