@extends('layouts.master')

@section('title', 'Group')
@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('group.index') }}">Group</a></li>
      <li class="breadcrumb-item active" aria-current="page">New Group</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">General Info</a>
      </li>
   </ul>
   @include('layouts.includes.alert')
   @if(isset($group['id']))                
   {{ Form::model($group, array('url' => url('/group/edit/id',['id'=>$group['id']]), 'id'=>'group_form', 'method' => 'POST','files'=>true,'enctype' => 'multipart/form-data')) }}
   @else
   {{ Form::open(array('route' => 'group.create', 'id'=>'group_form','files'=>true,'enctype' => 'multipart/form-data')) }} 
   @endif
   <div class="tab-content" id="myTabContent">      
      <input type="hidden" name="role" value="2">
      <div class="tab-pane fade show active" id="info" role="tabpanel" aria-labelledby="info-tab">
              
        <div class="row">
                <div class="col-4">
                    <div class="sub-header">
                        <h4>Basic</h4>
                    </div>     
                    @role('SuperAdmin')
                            <div class="form-group row">
                               {{ Form::label('company_id', 'Company',array('class' => 'col-sm-4 col-form-label ')) }}
                               <div class="col-sm-8">
                                   <select class="form-control" name="company_id" required="" id="company_id">
                                     <option value="">--Select--</option>
                                     

                                  </select>

                               </div>
                            </div>
                             @endrole
                                                            <input type="hidden" name="company_id" value="" />
                                                   
                    <div class="form-group row">
                       {{ Form::label('name', 'Name',array('class' => 'col-sm-4 col-form-label')) }}
                        <div class="col-sm-8">                      
                            {{ Form::text('name', (isset($group->name) ? $group->name : null), 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($group->is_active) ? $group->is_active : '1') ,array('class' => 'form-control')) }}
                           {{ Form::hidden('unit_id', '', array('id' => 'unit_id')) }}                                                    
                        </div>
                     </div>          
                </div>          
         </div>          
          
         <div class="sub-header">
            <h4>Assign/UnAssign Units</h4>
         </div>
        <div class="row" id="UnitAlert" style="display:none">
            <div class="alert alert-danger col-12 text-center" role="alert">
                Please (select company OR) assign any unit to the group.
            </div>          
        </div>          
         <div class="row justify-content-md-center assignSection">
             @if(isset($action) && $action == "create" && $is_admin)
                <div class="row justify-content-md-center text-center col-12 p-3 mb-3 border rounded">
                    <div class="col-lg-12">
                        Please select company.
                        <input type="hidden" name="droppable" id="droppable_input" value="" />
                    </div>
                </div>                             
             @else
                <div class="col-3 border p-3">
                   <div id="list1" class="droppable list">
                       @if(!empty($units))
                            @foreach($units as $unit)
                              <div class="pb-2 py-2 item draggable" id=""> <i class="fa fa-truck ml-3 pr-2"></i>  </div>
                            @endforeach
                        @endif
                   </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>                             
             @endif
         </div>
      </div>      
      <div class="row">
         <div class="col-12 text-right">
            {{Form::button('<i class="fa fa-check"></i> '.$groupAction, array('type' => 'submit', 'class' => 'btn btn-primary ml-3','id'=>'button_group'))}}
            <a href="{{ route('group.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">
    
//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;
        }
    });

         

  } );
 
    $(document).ready(function(){

        $('#button_group').click(function(evt) {
            evt.preventDefault();
            var array=[];
            $('#list3 div').each(function(i)
               {   
                   array.push($.trim($(this).attr('id')));
               });
            $('#droppable_input').val($.trim(array.join(",")));
            if($("#group_form").valid() && $('#droppable_input').val() != ""){
                if($('#UnitAlert').is(":visible")) {
                    $('#UnitAlert').hide();
                }
                $("#group_form").submit();
            }
            else{                        
                if($('#droppable_input').val() == "") {
                    $('#UnitAlert').show();
                } else if($('#UnitAlert').is(":visible")) {
                    $('#UnitAlert').hide();
                }                        
                return false;
            }
        });

        $(".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')
                });
            }
            
            $(document).on('click', '.item', function(){
                $(this).toggleClass("selected");
            });
            
        $("#group_form").validate({
       ignore: [],
       onfocusout: false,
       rules: {
            name: {
                required: true
            }
        },
       messages: {
            name: {
                required: "Please enter name."
            }
       },       
       invalidHandler: function(form, validator) {
       var errors = validator.numberOfInvalids();
       
       if (errors) {
           var elem_id=validator.errorList[0].element.id;
           validator.errorList[0].element.focus();
       }

       } 
    });
    
    $(document).on('change', '#company_id', function() {
        
        startLoading();
        $.ajax({
          type: "GET",
          url : "{{ url('/getUnits') }}",
          data : {"_token": "{{ csrf_token() }}",'cid':$(this).val()},
          success: function(data) {      
              $(".assignSection").html(data);
              $(".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");
                    }                                       
                }
             });
              stopLoading();
          }
        });            
    });    

    });
  </script>
@endsection