{% extends 'Admin/base.html.twig' %}
{% block title %}
OceanExpert | {{ data.customParameters.title }}
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{ asset('css/admin-style.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/font-awesome.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/autocomplete.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/register.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/jquery-ui.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/profile.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/zebra_tooltips.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/dataTables.bootstrap.css') }}">


{% endblock %}

{% block body %}
{% include('navbarlogin.html.twig') %}
<div class="wrapper">

    {% block sidebar %}
    {% include('Admin/adminSidebar.html.twig') %}
    {% endblock %}
    <div class="content-wrapper">
        <section class="content-header">

            <ol class="breadcrumb">
                <li><a href="{{ path('admin_dashboard') }}"><i class="fa fa-home"></i> Home</a></li>
                <li class="active"><i class="fa fa-user-plus"></i> Add Expert</li>
            </ol>
        </section>
        {% block content %}
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h3 class="heading">{{ data.customParameters.title }}</h3>
                    </div>
                    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                        <div class="top-padding10">
                            Displaying {{ data.getPaginationData.firstItemNumber }}
                            – {{ data.getPaginationData.lastItemNumber }} results of {{ data.getTotalItemCount }}.
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
                        <div class="form-inline">
                            <label for="maxItemPerPage">Experts per page:</label>
                            <select id="maxItemPerPage" class="form-control ">
                                {% for key, limit in data.customParameters.limits %}
                                    {% if data.params.limit is defined and key == data.params.limit %}
                                        <option id="{{ key }}" selected>{{ limit }}</option>
                                    {% else %}
                                        <option id="{{ key }}">{{ limit }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
        <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">
            <form method="get">
                <div class="form-group">
                    <label
                            for="search"
                            class="col-sm-6 control-label label-search">
                        Search expert name:
                    </label>
                    <div class="col-sm-6 float-right">
                        <input
                                type="text"
                                class="form-control"
                                id="search"
                                placeholder="Search"
                                name="search"
                                value="{{  app.request.get('search') }}" />
                    </div>
                </div>
            </form>
        </div>
          <div class="clearfix"></div>
                <div class="box-body">
                    <table
                            id="allExpert"
                            class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>{{ knp_pagination_sortable(data, 'ID', 'i.idInd') }}</th>
                                <th>{{ knp_pagination_sortable(data, 'Name', 'i.sname') }}</th>
                                <th>{{ knp_pagination_sortable(data, 'Jobtitle', 'i.jobtitle') }}</th>
                                <th>{{ knp_pagination_sortable(data, 'Organiztion', 'ins.instName') }}</th>
                                <th>{{ knp_pagination_sortable(data, 'Email', 'i.email1') }}</th>
                                <th>{{ knp_pagination_sortable(data, 'Country', 'i.country') }}</th>
                                <th>{{ knp_pagination_sortable(data, 'Date', 'i.fDateEnt') }}</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for expert in data.items %}
                            <tr>
                                <td>
                                    <a
                                            href="{{ path('view_profile', {'user': expert.idInd}) }}"
                                            target="_blank">
                                        <strong>{{ expert.idInd }}</strong>
                                    </a>
                                </td>
                                <td>
                                    <a
                                            href="{{ path('view_profile', {'user': expert.idInd}) }}"
                                            target="_blank">
                                        <strong>{{ expert.fname ~ ' ' ~ expert.sname }}</strong>
                                    </a>
                                </td>
                                <td>
                                    <span
                                            class="tooltip"
                                            title="{{ expert.jobtitle }}">
                                        {{ expert.jobtitle }}
                                    </span>
                                </td>
                                <td>
                                    {% if  expert.idInst is defined and expert.idInst| trim != "" %}
                                        <a
                                                href="{{ path('view_institution', { 'instId' : expert.idInst}) }}">
                                            {{ expert.instName | truncate(100) }}
                                        </a>
                                    {% endif %}
                                </td>
                                <td>
                                    {{ expert.email1 }}
                                </td>
                                <td>
                                    {{ expert.country }}
                                </td>
                                <td>
                                    {{ expert.fDateEnt | date('d M Y') }}
                                </td>
                                <td>
                                    <div class="dropdown">
                                        <button
                                                class="btn btn-default dropdown-toggle"
                                                type="button"
                                                data-toggle="dropdown"
                                                aria-haspopup="true"
                                                aria-expanded="true"
                                                id="expertActionButton">
                                            <i class="fa fa-cogs"></i>
                                            Action<span class="caret"></span>
                                        </button>
                                        <ul
                                                class="dropdown-menu"
                                                aria-labelledby="dropdownMenu1">
                                            {% if expert.status == 0 or expert.status == 3 %}
                                                {# only show this for unapproved or deactivated experts #}
                                                <li>
                                                    <a
                                                            data-id="{{ expert.idInd }}"
                                                            href="javascript:void(0)"
                                                            class="approve text-green"
                                                            onclick="userAction('approveUsers', {{ expert.idInd }})">
                                                        Approve/Activate
                                                    </a>
                                                </li>
                                            {% endif %}

                                            {% if expert.status == 1 or expert.status == 2 %}
                                                {# only show this for approved active or deleted experts #}
                                                <li>
                                                    <a
                                                            data-id="{{ expert.idInd }}"
                                                            href="javascript:void(0)"
                                                            class="deactivate text-orange"
                                                            onclick="userAction('disApproveUsers', {{ expert.idInd }})">
                                                        Deactivate
                                                    </a>
                                                </li>
                                            {% endif %}

                                            {% if expert.status == 3 or expert.status == 0 %}
                                                {# only show this for deactivated or unapproved experts #}
                                                <li>
                                                    <a
                                                            data-id="{{ expert.idInd }}"
                                                            href="javascript:void(0)"
                                                            onclick="userAction('deleteUser', {{ expert.idInd }})"
                                                            class="delete text-red">
                                                        Delete
                                                    </a>
                                                </li>
                                            {% endif %}

                                            {% if (is_granted("ROLE_SUPERADMIN")
                                                or is_granted("ROLE_ADMIN"))
                                                and (expert.status == 3
                                                    or expert.status == 2
                                                    or expert.status == 0)
                                            %}
                                                {# only show this for the role managers and for deactivated, deleted or unapproved experts #}
                                                <li role="separator" class="divider"></li>
                                                <li>
                                                    <a
                                                            data-id="{{ expert.idInd }}"
                                                            href="javascript:void(0)"
                                                            onclick="userAction('hardDeleteUser', {{ expert.idInd }})"
                                                            class="hard-delete text-red">
                                                        <i class="fa fa-exclamation-triangle"></i>
                                                        Hard Delete
                                                    </a>
                                                </li>
                                            {% endif %}
                                           </ul>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                        <tfoot>
                        <tr>
                            <th>{{ knp_pagination_sortable(data, 'ID', 'i.idInd') }}</th>
                            <th>{{ knp_pagination_sortable(data, 'Name', 'i.sname') }}</th>
                            <th>{{ knp_pagination_sortable(data, 'Jobtitle', 'i.jobtitle') }}</th>
                            <th>{{ knp_pagination_sortable(data, 'Organiztion', 'ins.instName') }}</th>
                            <th>{{ knp_pagination_sortable(data, 'Email', 'i.email1') }}</th>
                            <th>{{ knp_pagination_sortable(data, 'Country', 'i.country') }}</th>
                            <th>{{ knp_pagination_sortable(data, 'Date', 'i.fDateEnt') }}</th>
                            <th>Action</th>
                        </tr>
                        </tfoot>
                    </table>
                    <div class="col-md-6 pull-right">
                        <div class="navigation pagination-sm pull-right">
                            {{ knp_pagination_render(data) }}
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
        {% endblock %}
    </div>
</div>
    {% include "footer.html.twig" %}
    <script src="{{ asset('js/app.min.js') }}"></script>
    <script src="{{asset('js/icheck.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/validator.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery-ui.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/wysihtml5-0.3.0.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.runtime.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap3-wysihtml5.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script type="text/javascript" >
        $active = $(".{{ data.customParameters.active }}");
        $active.addClass('active');
        $active.parents(".treeview-menu").addClass("menu-open").css('display','block');
        $active.parents(".treeview").addClass("active");
        Tipped.create('.tooltip');

        $('#maxItemPerPage').change(function(){
            var item = $('#maxItemPerPage').find(":selected").text();
            var uri = window.location.href;
            window.location.href = updateQueryStringParameter(uri, "limit", item );
        });

        function updateQueryStringParameter(uri, key, value) {
            var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
            var separator = uri.indexOf('?') !== -1 ? "&" : "?";
            if (uri.match(re)) {
                return uri.replace(re, '$1' + key + "=" + value + '$2');
            } else {
                return uri + separator + key + "=" + value;
            }
        }

        /**
         * perform the requested action in the admin section for the given user id
         * reload the page after this action
         *
         * @param string action requested action (approveUsers, disApproveUsers, deleteUser, hardDeleteUser)
         * @param int idInd id of the users on which to perform the action
         */
        function userAction(action, idInd)
        {
            var ajaxUrlStart = '/admin/';
            var ajaxUrl = ajaxUrlStart.concat(action);
            $.ajax({
                type: "POST",
                url: ajaxUrl,
                data: JSON.stringify({id:idInd}),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false, //_async,
                success: function (result) {
                    window.location.reload(true);
                }
            });
        }

    </script>

{% endblock %}