@extends('layouts.app')

@section('title', 'Users |')

@section('content')

<!-- Page Content -->
     <div class="content container-fluid" style="padding: 5px 5px;">                      
<!-- Page Header -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col">
                <h3 class="page-title">Employee</h3>                                
            </div>
            <div class="col-auto float-right ml-auto">
                 @if( auth()->user()->role_id == 1 || auth()->user()->role_id == 2 || auth()->user()->role_id == 3 || auth()->user()->role_id == 4 )
                <a href="{{ route('user/add') }}" class="btn add-btn" ><i class="fa fa-plus"></i> Add Employee</a>
                @endif
            </div>
        </div>
    </div>
<!-- /Page Header -->
    
<!-- Search Filter -->
    
    <div class="row filter-row">
        <div class="col-sm-6 col-md-3">  
        <div class="form-group ">
        <label class="focus-label">Name</label>
            <select id="" class="user_list form-control onSelectProject">

            </select>          
        </div> 

        </div>
         <div class="col-sm-6 col-md-3"> 
            <div class="form-group ">
                <label class="focus-label">Select a Role</label>
                <select class="form-control userRole" >
                <option value="">All</option>
                <option value="2">Super Admin</option>
                <option value="3">Manager</option>
                <option value="4">Team Lead</option>
                <option value="5">Employee</option>                
                </select>                    
            </div>
        </div>       
        <div class="col-sm-6 col-md-2"> 
            <div class="form-group ">
                <label class="focus-label">Status</label>
                <select class="form-control userStatus" >
                <option value="">All</option>
                <option value="1">Active</option>
                <option value="0">Inactive</option>
            </select>
            </div>
        </div>
        <div class="col-sm-6 col-md-2">  
        <button type="submit" class="btn btn-success searchBtn" style="margin-top: 30px; padding: 5px 10px; min-height: 30px;">
            Search
        </button>            
        </div>          
    </div>    
    <!-- /Search Filter -->    
    <!-- result here -->
    <div id="userResult">
        @include('user.ajax')  
    </div>              
    <!--  -->
    
    <!--  -->    
</div>    

<!-- ./page content -->

<!-- Delete Employee Modal -->
<div class="modal custom-modal fade" id="delete_employee" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <form method="post" name="doInactiveUserForm" class="doInactiveUserForm" id="doInactiveUserForm">
                    @csrf
                    <div class="form-header">                        
                        <h3 class="setUserName"></h3>
                        <p class="setUserDesig"></p>
                        
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group text-center">
                                <div class="col-12 ">
                                <h4>Selected an action</h4>
                            </div>
                              <div class="form-check form-check-inline">
                                <input class="form-check-input action_type_radio" type="radio" name="action_type" id="inactive" value="inactive" >
                                <label class="form-check-label" for="inactive">
                                Disable account
                                </label>
                              </div>
                               <div class="form-check form-check-inline">
                                <input class="form-check-input action_type_radio" type="radio" name="action_type" id="terminate" value="terminate" >
                                <label class="form-check-label" for="terminate">
                                Terminate 
                                </label>
                              </div>
                                <div class="form-check form-check-inline">
                                <input class="form-check-input action_type_radio" type="radio" name="action_type" id="rehire" value="rehire" >
                                <label class="form-check-label" for="rehire">
                                Re-Hire 
                                </label>
                              </div>

                          </div>
                          <p class=" text-danger text-center" id="actionError"></p>
                        </div>
                    </div>

                    <div class="row hide terminateRow ">
                        <div class="col-12">
                            <h4>Terminataion detail</h4>                           
                            <div class="form-group ">
                             <label>Terminate Date</label>                                
                                 <div class="cal-icon">
                                  <input class="form-control datepicker_new" type="text" name="terminateDate" placeholder="dd-mm-yyyy">
                                </div>
                                <p class=" text-danger text-center" id="terminatedateError"></p>
                            </div>    
                            <div class="form-group ">
                             <label>Remarks </label>
                                <input class="form-control" type="text" name="terminateRemarks" >
                            </div>                                                    
                        </div>
                    </div>

                     <div class="row hide rehireRow ">
                        <div class="col-12">
                            <h4>Re-Hire detail</h4>                           
                            <div class="form-group ">
                             <label>Re-Hire Date</label>                                
                                <div class="cal-icon">
                                  <input class="form-control datepicker_new" type="text" name="rehireDate" placeholder="dd-mm-yyyy">
                                </div>
                                <p class=" text-danger text-center" id="rehiredateError"></p>
                            </div>    
                            <div class="form-group ">
                             <label>Remarks </label>
                                <input class="form-control" type="text" name="rehireRemarks" >
                            </div>                                                    
                        </div>
                    </div>

                    <div class="modal-btn delete-action">
                        <div class="row">
                            <div class="col-6">
                                <input type="hidden" name="user_id" class="setUserID" value="">
                                <button type="submit"  class="btn btn-primary continue-btn">Update Now</button>
                            </div>
                            <div class="col-6">
                                <a href="javascript:void(0);" data-dismiss="modal" class="btn btn-primary cancel-btn">Cancel</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- /show status Modal -->
<div class="notification-popup hide">
    <p>
        <span class="task"></span>
        <span class="notification-text"></span>
    </p>
</div>

<style type="text/css">
table.table td h2 a {
    color: #333;
}
</style>

<script type="text/javascript">
$(document).ready(function(){

var notificationTimeout;

//Shows updated notification popup 
var updateNotification = function(task, notificationText, newClass){
    var notificationPopup = $('.notification-popup ');
    notificationPopup.find('.task').text(task);
    notificationPopup.find('.notification-text').text(notificationText);
    notificationPopup.removeClass('hide success');
    // If a custom class is provided for the popup, add It
    if(newClass)
        notificationPopup.addClass(newClass);
    // If there is already a timeout running for hiding current popup, clear it.
    if(notificationTimeout)
        clearTimeout(notificationTimeout);
    // Init timeout for hiding popup after 3 seconds
    notificationTimeout = setTimeout(function(){
        notificationPopup.addClass('hide');
    }, 5000);
};

//
$(document).on('click', '.inactiveUser', function (event) {

    var user_id = $(this).attr('data');
    var name    = $("table.userTable").find("[data='" + user_id + "']").find('td.userName').find('a.uName').find('span.realName').html();            
    $('.setUserName').html("");
    $('.setUserName').html(name);
    $('.setUserID').val(user_id);
    //
    $(".doInactiveUserForm")[0].reset();
    $('#delete_employee').modal();
    
});

// submit form
$(document).on('submit', '.doInactiveUserForm', function (event) {
    event.preventDefault();    
    var form = $( this );    
    var user_id = $("input[name='user_id']",this).val();
    var userName = $(this).find('h3.setUserName').text();
    
    $.ajax({
        type:'POST',
        url: "{{route('doInactiveUser')}}",
        data: $(this).serialize(),        
        success: function (data) {        
        console.log(data);
        if (data.status=='success') {            
            var approve  = "<button class='btn btn-primary approvalStatus btn-small' visitid='"+user_id+"'>Approve</button>";
            var denyData = "<button class='btn btn-danger approvalStatus btn-small' visitid='"+user_id+"'>Active</button>";

            $("table.userTable").find("[data='" + user_id + "']").find('td.userStatus').html('<label class="control-label col-md-12"><span class="label text-danger">Inactive</span></label>');            
            //
            $('#delete_employee').modal('hide');
            //
             updateNotification(userName, 'Account has been disabled', 'success');

            } else {
                
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert("Error: " + errorThrown);
        }
    });
    return false;
});
//
$(document).on('change', '.action_type_radio', function (event) {
    event.preventDefault();    
    if (this.value == 'terminate') {
        $('.terminateRow').addClass('show');
        $('.terminateRow').removeClass('hide');
    }else{
        $('.terminateRow').addClass('hide');
        $('.terminateRow').removeClass('show');
    }

    if (this.value == 'rehire') {
        $('.rehireRow').addClass('show');
        $('.rehireRow').removeClass('hide');
    }else{
        $('.rehireRow').addClass('hide');
        $('.rehireRow').removeClass('show');
    }

});

// It has the name attribute "registration"
  $("form[name='doInactiveUserForm']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      action_type: "required",
      terminateDate: {
                    required:{
                        depends: function(){
                            return $("input[name='action_type']:checked").val() == 'terminate';
                        }

                    }
      },
       rehireDate: {
                    required:{
                        depends: function(){
                            return $("input[name='action_type']:checked").val() == 'rehire';
                        }

                    }
      },
     
    },
    errorPlacement: function(error, element) {
            //Custom position: first name
            if (element.attr("name") == "action_type" ) {
                $("#actionError").html(error);
            }
            //Custom position: second name
            else if (element.attr("name") == "terminateDate" ) {
                $("#terminatedateError").html(error);
            }
            //Custom position: second name
            else if (element.attr("name") == "rehireDate" ) {
                $("#rehiredateError").html(error);
            }
            // Default position: if no match is met (other fields)
            else {
                 error.append($('.errorTxt span'));
            }
        },
    // Specify validation error messages
    messages: {
      action_type: "Please select an action",
      rehireDate: "Please select date",    
      terminateDate: "Please select date"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    
  });

//

});


</script>

<!-- Script -->
<script type="text/javascript">

$(document).ready(function(){
//
$('.user_list').on('select2:select', function (e){
    var data = e.params.data.id;
    //loader
    $("#overlay").fadeIn(300);　
    getData(0);
    event.preventDefault();
});

$(document).on('change','.user_list ,.userStatus, .userRole', function (e){    
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();

});

$(document).on('click','.searchBtn', function (e){    
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();

});

// 
$(document).on('click', '.pagination a',function(event){
    //loader
    $("#overlay").fadeIn(300);　
    $('li').removeClass('active');
    $(this).parent('li').addClass('active');
    event.preventDefault();
    var myurl = $(this).attr('href');
    var page=$(this).attr('href').split('page=')[1];
    getData(page);
});

});

function getData(page){

    var user_id     =    $(".user_list").val();                
    var userStatus  =    $(".userStatus option:selected").val();
    var userRole    =    $(".userRole option:selected").val();                                

        $.ajax(
        {
            url: '?page=' + page+'&user_id='+user_id+'&status='+userStatus+'&userRole='+userRole,
            type: "get",
            datatype: "html",
        })
        .done(function(data)
        {
            $("#userResult").empty().html(data);
            $("#overlay").fadeOut(300);
            //debug to check page number
            // location.hash = page;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
            alert('No response from server');

        });

}
</script>


@endsection