@extends('layouts.backend')
@section('extraCss')
<style type="text/css">
span.multiselect-native-select {
    position: relative;
    display: block;
}
.btn-group, .btn-group-vertical {
    display: block;
}
.custom-select, .dropdown-item {
    width: 100% !important;
}
</style>
@endsection
@php
$partyType = [1 => 'RETAILER',2 =>'AGENT', 3 => 'DISTRIBUTOR',4=> 'VENDOR',5 =>'MBO', 6 => 'LFS',7=>'WAREHOUSE',8=>'EBO POS',9=>'SIS POS'];
@endphp
@section('mainContentArea')
    <div class="card card-default">
        <div class="card-header">
            <h4>Designation Manager</h4>
             <button class="btn btn-success float-right btn-sm" type="button"  data-toggle="modal" data-target="#groupModel" id="add-staff" style="float:right; margin:10px;">
              <i class="fa fas fa-plus"></i> Add Designation</button>
        </div>
        <div class="card-body">
        <input type="button" style="font-size: 20px;float: right;margin-right: 20px;" class="btn btn-xs btn-info btn-sm" id="active" name="active" value="Active" />  
        <input type="button" style="font-size: 20px;float: right;margin-right: 20px;" class="btn btn-xs btn-danger btn-sm" id="deactive" name="deActive" value="InActive" /> 
        <br><br> <br><br>
         
            <table class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Party Type</th>
                        <th>Department</th>
                        <th>Name</th> 
                        <th>Description</th>
                        <th><input type='checkbox' id='CheckAll'></th> 
                        <th>Status</th>
                        <th colspan="2">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($designationlist as $key => $group)
                        <tr>
                            <td>{{$key + $designationlist->firstItem() }}</td> 
                            <td>@foreach($parties as $key => $value)                            
                                 @if($value->id == $group->party_type )
                                    {{ $value->name }}
                                 @endif                              
                                @endforeach</td>
                            <td>{{ empty($group->depatinfo) ? 'N/A' : $group->depatinfo->name }}</td>
                            <td>{{ empty($group->name) ? 'N/A' : $group->name }}</td>
                            <td>{{ empty($group->code) ? 'N/A' : $group->code }}</td>
                            <td><input type='checkbox' name="posID[]" class='checkboxes' value="{{ $group->id }}"></td>
                            <td>
                                @if($group->is_active === 1)
                                <label class="badge badge-success">Active</label>
                                @else
                                <label class="badge badge-danger">Inactive</label>
                                @endif
                            </td>
                            <td><a data-id="{{ $group->id }}" id="edit-post" class="btn btn-xs btn-info btn-sm"><i class="fa fas fa-pencil"></i> </a>
                            </td>
                           
                           
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @php if($designationlist->count() > 0) { @endphp {!! $designationlist->appends(request()->input())->links() !!} @php } @endphp
    </div>

<!-- Modal -->
<div class="modal fade" id="groupModel" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header" >
              <h5> Add Designation</h5>
              <button type="button" class="close" data-dismiss="modal">&times;</button> 
               
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                <p class="statusMsg"></p>
                <!-- <form role="form"> -->
                <form action="{{ route('party-savedesignation') }}" method="post" name="deginationFrm">
                 @csrf

                    <div class="form-group">
                        <label for="inputMessage">Party</label>                        
                        <select name="party_type" id="party_type" class="form-control " required >  
                           <option value="">Select Party</option>  
                            @foreach($parties as $key => $value)                            
                                <option value="{{ $value->id }}" > {{ $value->name }} ( {{  $value->company_name }} )</option>                              
                            @endforeach
                        </select>                       
                    </div>

                    <div class="form-group">
                        <label for="name">Department</label> 
                         <select name="department_id" id="department_id" class="form-control select2" data-placeholder="Select designation" required>            
                        </select>       
                    </div>
                    
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input id="groupid" name= "groupid" type="hidden">
                        <input type="text" class="form-control" name="name" id="inputName" placeholder="Enter your name" required />
                    </div> 
                    
                    <div class="form-group">
                        <label for="inputMessage">Description</label>                        
                        <textarea class="form-control" id="inputDes" name="code" placeholder="Enter your code" required></textarea>
                    </div>

                    <div class="form-group" id = 'permissionsDiv'>
                        <label for="inputMessage">Modules Action</label>                        
                        <select name="permissions[]" id="permissions"  class="input-md"  multiple="multiple"  >                           
                            
                        </select>                        
                    </div>
                   
                    <button class="btn btn-block btn-primary" id="btn-save" >Approved</button>
                </form>
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <!-- <button type="button" class="btn btn-primary submitBtn" id="btn-save" onclick="submitContactForm()">SUBMIT</button> -->
            </div>
        </div>
    </div>
</div>
   
@endsection

@section('extraJs')

<script type="text/javascript">
$("#party_type").select2({
    placeholder: "Select a customer"    
});

var type = $('#party_type').val();
calldepart(type);

$("#party_type").on('change', function () { 
 var type = $('#party_type').val();
 calldepart(type);
});

$('#groupModel').on('hidden.bs.modal', function () {
 location.reload();
})

$("#permissionsDiv").css('display', 'block');
$('body').on('click', '#add-staff', function () {       
   
    $("#permissionsDiv").css('display', 'none');

    $('#groupModel .modal-dialog .modal-content .modal-header h5').html("Add Designation");
    $('#groupModel .modal-dialog .modal-content .modal-footer #btn-save').html("Submit");
});

function submitContactForm(){
    
    var name = $('#inputName').val();    
    var desc = $('#inputDes').val();
    var status = $('#inputstatus').val();  
    var groupid =  $('#groupid').val();
    var department_id =  $('#department_id').val();
    if(name.trim() == '' ){
        alert('Please enter name.');
        $('#inputName').focus();
        return false;
    }else if(desc.trim() == '' ){
        alert('Please enter code.');
        $('#inputDes').focus();
        return false;
    }else if(status.trim() == '' ){
        alert('Please select status.');
        $('#inputstatus').focus();
        return false;
    }else{
        var _token   = $('meta[name="csrf-token"]').attr('content'); 
        $.ajax({
            type: "post",
            url: "{{ route('party-savedesignation') }}",
            data: {
            name: name,            
            code:desc,
            status:status,   
            groupid: groupid, 
            department_id:department_id,       
            _token: _token
            },
            dataType: "json",
            beforeSend: function () {
                $('.submitBtn').attr("disabled","disabled");
               
            },           
            success: function(response) { 
                var reason = JSON.stringify(response);  
                var parsed = JSON.parse(reason);            
                console.log(parsed);
                if (parsed.status == false) {
                toastr.error(parsed.info);
                $('.submitBtn').removeAttr("disabled");
                } else {
                toastr.success(parsed.info);
                
                window.location.reload('true');               
                
                }
            }
        });
    }
}

$('body').on('click', '#edit-post', function () {
      var post_id = $(this).data('id');
      $('#inputName').val('');       
      $('#inputDes').val('');
      $('#inputstatus').val('');
      var _token   = $('meta[name="csrf-token"]').attr('content'); 
        $.ajax({
            type: "get",
            url: "{{ route('party-designationedit') }}",
            data: {
            id:  post_id,        
            _token: _token
            },
            dataType: "json",                       
            success: function(data) { console.log(data);
                  $('#groupModel .modal-dialog .modal-content .modal-header h5').html("Edit Designation");
                  $('#groupModel .modal-dialog .modal-content .modal-footer #btn-save').html("update");
                  $('#groupModel').modal('show');                 
                
                  $('#inputName').val(data.groupInfo.name);
                  $('#groupid').val(data.groupInfo.id);
                 
                  $('#inputDes').val(data.groupInfo.code);  

                  var PermissionValues = JSON.parse(data.modules.modules); 
                  var PermissionSelect = JSON.parse(data.groupInfo.party.permission); 
                  var PermissionStaff =  JSON.parse(data.groupInfo.permissions); 
                  
                  console.log(PermissionValues);
                  

                  if(PermissionSelect != '')
                  {
                    console.log(PermissionSelect);
                  }
                  
                  $.each(PermissionValues, function (key, permission) {   
                    $('#permissions').append('<optgroup label="' + key + '"> ');  
                        $.each(permission, function (k, val) {                     
                          $('#permissions').append('<option  value="' + val + '">' + val + '</option>');
                        });
                    $('#permissions').append('</optgroup>'); 
                    });    
                    
                    if(PermissionStaff === '')
                    {
                        $.each(PermissionSelect, function (key, val) {                        
                            
                            $("#permissions option[value='" + val + "']").prop("selected", true);
                        });
                    }else{
                         
                        $.each(PermissionStaff, function (key, val) {                        
                        //console.log(PermissionStaff); console.log(val); return false;
                            $("#permissions option[value='" + val + "']").prop("selected", true);
                        });
                    }                 

                    $('#permissions').multiselect({            
                      enableFiltering: true,
                      allSelectedText: 'All',
                      maxHeight: 200,
                      includeSelectAllOption: true,
                      enableCaseInsensitiveFiltering: true  
                  });        
                
                  $('#permissions').multiselect('rebuild');

                  $("#party_type").val(data.groupInfo.party_type ).trigger('change');  
                  $("#department_id").val(data.groupInfo.department_id ).trigger('change'); 
            }
        });
      
});

var i = 0 ;
$('#active').click(function () {      
    var arr = [];
    $('.checkboxes:checked').each(function () {
            arr[i++] = $(this).val();            
            setLocation($(this).val(),1);
    });
    console.log(arr);
}); 

$('#deactive').click(function () {      
    var arr = [];
    $('.checkboxes:checked').each(function () {
            arr[i++] = $(this).val();            
            setLocation($(this).val(),0);
    });
    console.log(arr);
}); 

function setLocation(pos,status){
    console.log(pos,status);
    var _token   = $('meta[name="csrf-token"]').attr('content'); 
    $.ajax({
        type: "get",
        url: "{{ route('degination-status-update') }}",
        data: {
        pos: pos,            
        status:status,              
        _token: _token
        },
        dataType: "json",                       
        success: function(response) { 
            var reason = JSON.stringify(response);  
            var parsed = JSON.parse(reason);            
            console.log(parsed);
            if (parsed.status == false) {
            toastr.error(parsed.info);
            $('.submitBtn').removeAttr("disabled");
            } else {
            toastr.success(parsed.info);
            
            window.location.reload('true');               
            
            }
        }
    });
   
}

function calldepart(type)
{
  var _token   = $('meta[name="csrf-token"]').attr('content');   

  $.ajax({
    url:"{{ route('party-depart-list-new') }}",
    method:"get",
    data:{type: type, _token:_token},
    success:function(res)
    { 
        if(res){ console.log(res);
        $("#department_id").empty();

        $.each(res,function(key,value){ //console.log(key,value);
        $("#department_id").append('<option value="'+key+'" >'+value+'</option>');
        });

        }else{
        $("#department_id").empty();
        }        
    }

  })
}

</script>
@endsection