@if(\Auth::check() && \Auth::user()->role && (\Auth::user()->role->roleName->role == 'manager' || \Auth::user()->role->roleName->role == 'admin'))
    <a href="#" title="edit" class="edit-btn" data-username="{{$username}}" data-portaluser="{{$portal_user}}" data-p="{{decrypt($portal_pwd_clone)}}" data-collection="{{$collection_status}}" data-install="{{$is_installed}}" data-remark="{{$remark}}"><i class="fa fa-fw fa-edit"></i></a>
                                
    <a href="#" title="connect" class="connect-btn a-black" data-link="{{route('winbox.index', $username)}}"><i class="fa fa-fw fa-random"></i></a>
    
    <a href="#" title="refresh" class="refresh-btn a-orange" data-link = "{{route('customer.update-ip', $username)}}"><i class="fa fa-fw fa-redo"></i></a>
    
    <a href="#" title="net status" class="netstatus-btn a-green" data-link = "{{route('customer.netstatus', $username)}}"><i class="fa fa-fw fa-signal"></i></a>
@if(\Auth::user()->role->roleName->role == 'admin')
    @if($is_blocked == 0)
    <a href="{{route('customer.blockuser', [$username,'1','0'])}}" title="Block Payment" onclick="return confirm( 'Do you want to block this user future payments?' );" class="block-btn a-orange"><i class="fa fa-fw fa-ban"></i></a>
    @else
    <a href="#" title="Unblock Payment" class="block-btn unblock-btn a-orange" data-username="{{$username}}"><i class="fa fa-fw fa-ban"></i></a>
    @endif
    
    <a href="#" title="delete" class="delete-btn a-red"><i class="fa fa-fw fa-trash-alt"></i></a>
@endif
@else
    <a href="#" title="connect" class="connect-btn a-black" data-link="{{route('connect', $username)}}"><i class="fa fa-fw fa-random"></i></a>
    
    <a href="#" title="net status" class="netstatus-btn a-green" data-link = "{{route('netstatus', $username)}}"><i class="fa fa-fw fa-signal"></i></a>
@endif

<script>
    var dialog;

    $('.connect-btn').click(function(){
        location.href=$(this).data('link');
    });
    
    $('.refresh-btn').click(function(){
        var url = $(this).data('link')
        axios.get(url).then((res)=>{
            console.log(res);
            toastr.success('success');
            location.reload();
        })
    });

    $('.edit-btn').click(function(){
        var portaluser = $(this).data('portaluser');
        dialog.find('input#portal_user').val(portaluser);
        var username = $(this).data('username');
        dialog.find('input#username').val(username);
        dialog.find('input#id').val(username);
        var p = $(this).data('p');
        dialog.find('input#portal_pwd').val(p);
        dialog.find('input#portal_pwd_confirm').val(p);
        var remark = $(this).data('remark');
        dialog.find('input#remark').val(remark);
        var collection = $(this).data('collection');
        dialog.find('#collection_status').val(collection);
        var install = $(this).data('install');
        dialog.find('#is_installed').val(install);
        dialog.dialog( "open" );
       
    });
    
    // $('.block-btn').click(function(){
    //     var result1 = confirm( "Do you want to block this user future payments?" );
    //     if (result1) {
    //         location.href = route;
    //     }
    //     else{
            
    //     }
    // });
    
    $(document).on('mousedown', 'i#show_p', function(){
        dialog.find('input#portal_pwd').attr('type', 'text');
        dialog.find('input#portal_pwd_confirm').attr('type', 'text');
    });

    $(document).on('mouseup', 'i#show_p', function(){
        dialog.find('input#portal_pwd').attr('type', 'password');
        dialog.find('input#portal_pwd_confirm').attr('type', 'password');
    });

    $('.unblock-btn').on("click", function(e){
        e.preventDefault();
        var user = $(this).data('username');
        dialog1 = $( "#block-confirm" ).dialog({
          autoOpen: true,
          height: "auto",
          width: 400,
          modal: true,
          buttons: {
            "Unblock": function() {
              window.location.href="{{route('customer.blockuser',['','',''])}}"+"/"+user+'/0/0';
            },
            "Block Again": function() {
              window.location.href="{{route('customer.blockuser',['','',''])}}"+"/"+user+'/0/1';
            },
            Cancel: function() {
              dialog1.dialog( "close" );
            }
          },
          close: function() {
          }
        });
    });


    function confirmDelete(route) {
        var result = confirm( "Do you want to delete this?" );
        // if (result) {
        //     location.href = route;
        // }
    }
    
    $(document).ready(function(){
        $('#custom_table').dataTable({
            stateSave: true
        });
    });
    
    

    dialog = $( "#portal-auth-form" ).dialog({
      autoOpen: false,
      height: 450,
      width: 350,
      modal: true,
      buttons: {
        "Update": save,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
      }
    });

    function save() {

        var id = dialog.find('input#id').val();
        var portaluser = dialog.find('input#portal_user').val();
        var portalpwd = dialog.find('input#portal_pwd').val();
        var portalpwdconfirm = dialog.find('input#portal_pwd_confirm').val();
        var collection_status = dialog.find('#collection_status').val();
        var remark = dialog.find('input#remark').val();
        var install = dialog.find('#is_installed').val();
        // console.log(install);
        if (portalpwd != portalpwdconfirm) {
            $.alert('Password is not confiremd');
        } else {
            if (portalpwd == '') {
                $.alert('Password must be typed');
            } else {

                var username = dialog.find('input#username').val();
                var data = {
                    id: id,
                    username: username,
                    portal_user: portaluser,
                    portal_pwd: portalpwd,
                    collection_status: collection_status,
                    remark: remark,
                    is_installed: install,
                }

                var username = $(this).data('username');
                axios.post('{{route('customer.portal.save.auth')}}', data).then((res) => {
                    toastr.success('Successfully updated');
                    dialog.dialog( "close" );
                    location.reload();
                })
            }
        }
    }
      
</script>