 
<?php $__env->startSection('content'); ?>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Queue Members</h1>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <?php if(session('status')): ?>
            <div class="alert alert-success">
                <?php echo e(session('status')); ?>

            </div>
            <?php endif; ?>

            <?php if(count($errors) > 0): ?>
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                <ul>
                    <?php foreach($errors->all() as $error): ?>
                    <li><?php echo e($error); ?></li>
                    <?php endforeach; ?>
                </ul>
            </div>
            <?php endif; ?>
            <div class="panel-heading">
                Queue Members
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <table class="table table-striped table-bordered table-hover display nowrap" width="100%" id="dataTables-example2">
                        <thead>
                            <tr>
                                <th data-priority="1">Name</th>
                                <th>Queues</th>
                                <th data-priority="2">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $count = 0; ?>
                            <?php foreach($users as $user): ?>
                            <?php $count++; ?>
                            <?php if($count % 2 == 1): ?>
                            <tr class="odd">
                            <?php else: ?>
                            <tr class="even">
                            <?php endif; ?>
                                <td><?php echo e($user->name); ?></td>
                                <td>
                                    <?php if($user->queues): ?>
                                    <?php echo e($user->queues); ?>

                                    <?php else: ?>
                                    --
                                    <?php endif; ?>
                                </td>
                                <td style="text-align: center;">
                                    <button class="edit-member-queues" data-id="<?php echo e($user->id); ?>" data-username="<?php echo e($user->name); ?>" data-toggle="modal" data-target="#editMemberModal" style="border: none; background: none; padding: 0;">
                                        <i class="fa fa-edit fa-fw " style="font-size: 12px; cursor:pointer; padding-left: 5px;" title="Edit User Queues"></i>
                                    </button>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Member Modal -->
<div id="editMemberModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="member-name" class="modal-title">Edit User Queues</h4>
            </div>
            <form id="theForm" class="form-horizontal" style="margin-bottom: 0px;" role="form" method="POST" enctype="multipart/form-data" action="<?php echo e(url('admin/tickets/queue_members/edit')); ?>">
                <input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">
                <input id="userID" type="hidden" name="userID">
                <div class="modal-body" style="display: block; overflow: auto;">
                    <div class="col-sm-12 col-md-12 morePadding">

                        <?php foreach($queues as $queue): ?>
                            <div class="col-sm-4 col-md-4 checkbox-item" style="padding-bottom: 5px;">
                                <input type='hidden' value='0' name='<?php echo e($queue->name); ?>'>
                                <input type="checkbox" class="Xform-control" id="<?php echo e($queue->name); ?>" name="<?php echo e($queue->name); ?>" data-id="<?php echo e($queue->id); ?>" value="1" title="<?php echo e($queue->name); ?>">
                                <label class="no-bold" for="<?php echo e($queue->name); ?>"><?php echo e($queue->name); ?></label>
                            </div>
                        <?php endforeach; ?>

                    </div>
                </div>

                <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	<!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs/pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.css"/>
    
    <!-- DataTables Responsiveness CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css"/>

    <style>
    	a:hover{
    		text-decoration: none;
    	}
    	.odd .subBack {
    		background-color: #f0fcff;
    	}
    	.even .subBack {
    		background-color: #ecf7fa;
    	}
    	.floatLeft
    	{
    		float: left;
    	}

        .dtr-data{
            display: block;
        }

        .no-bold{
            font-weight: normal;
        }

    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>

    <!-- DataTables JavaScript -->
	<script type="text/javascript" src="https://cdn.datatables.net/t/bs/pdfmake-0.1.18,dt-1.10.11,b-1.1.2,b-flash-1.1.2,b-html5-1.1.2,b-print-1.1.2/datatables.min.js"></script>
     
    <!-- DataTables Responsiveness JavaScript -->
    <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
    var table1 =    $('#dataTables-example2').dataTable( {
					"pageLength": 50,
					"order": [[ 0, 'asc' ],],
					"stateSave" : false,
					"scrollX" : window.innerWidth < 800 ? true : false,
                    "responsive": true
        } );  
    });
    
    if ( typeof $.fn.dataTable == "function" && typeof $.fn.dataTableExt.fnVersionCheck == "function" && $.fn.dataTableExt.fnVersionCheck('1.9.2')/*older versions should work too*/ )
    {
        $.fn.dataTableExt.oApi.clearSearch = function ( oSettings )
        {
            var table = this;
             
            //no image file needed, css embedding must be supported by browser
            var clearSearch = $('<i class="fa fa-times-circle-o fa-fw" style="vertical-align:text-bottom;cursor:pointer;color: gray;"></i>');
            $(clearSearch).click( function ()
                    {
                          table.fnFilter('');
                    });
            $(oSettings.nTableWrapper).find('div.dataTables_filter').append(clearSearch);
            $(oSettings.nTableWrapper).find('div.dataTables_filter label').css('margin-right', '-16px');//16px the image width
            $(oSettings.nTableWrapper).find('div.dataTables_filter input').css('padding-right', '16px');
        }
     
        //auto-execute, no code needs to be added
        $.fn.dataTable.models.oSettings['aoInitComplete'].push( {
            "fn": $.fn.dataTableExt.oApi.clearSearch,
            "sName": 'whatever'
        } );
    }

    let members = document.getElementsByClassName("edit-member-queues");
    let inputs = document.getElementsByTagName('input');
    let queue_members = Object.values(<?php echo json_encode($queue_members); ?>);
    for (let m=0; m < members.length; m++) {
        members[m].onclick = function () {
            let myUserID = $(this).data('id');
            let myUserName = $(this).data('username');
            document.getElementById("userID").value = myUserID;
            document.getElementById("member-name").innerText = myUserName;
            for(var i = 0; i < inputs.length; i++) {
                inputs[i].checked = false;
            }
            for(let i = 0; i < inputs.length; i++) {
                if(inputs[i].type.toLowerCase() == 'checkbox') {
                    for(let j = 0; j < queue_members.length; j++) {
                        if(queue_members[j].user == myUserID) {
                            if(queue_members[j].queue == inputs[i].dataset.id) {
                                inputs[i].checked = true;
                            }
                        }
                    }
                }
            }
        }
    };
    </script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>