{% extends 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}

{% block meta_title %}{{ 'Staff'|trans }}{% endblock %}

{% set active_menu = 'system' %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|alink }}">
                <svg class="icon">
                    <use xlink:href="#home"/>
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'system'|alink }}">{{ 'Settings'|trans }}</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">{{ 'Staff'|trans }}</li>
    </ol>
{% endblock %}

{% block content %}
    <div class="card-tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" href="#tab-staff" data-bs-toggle="tab">{{ 'Staff'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-settings" data-bs-toggle="tab">{{ 'Settings'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-new" data-bs-toggle="tab">
                    <svg class="icon me-2">
                        <use xlink:href="#plus"/>
                    </svg>
                    {{ 'New staff member'|trans }}
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-groups" data-bs-toggle="tab">{{ 'Manage groups'|trans }}</a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" href="#tab-new-group" data-bs-toggle="tab">
                    <svg class="icon me-2">
                        <use xlink:href="#plus"/>
                    </svg>
                    {{ 'New group'|trans }}
                </a>
            </li>
        </ul>

        <div class="card">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-staff" role="tabpanel">
                    {% include 'partial_search.html.twig' %}
                    <div class="table-responsive">
                        <table class="table card-table table-vcenter table-striped text-nowrap">
                            <thead>
                            <tr>
                                <th class="w-1">#</th>
                                <th>{{ 'Name'|trans }}</th>
                                <th>{{ 'Email'|trans }}</th>
                                <th>{{ 'Group'|trans }}</th>
                                <th>{{ 'Status'|trans }}</th>
                                <th class="w-1"></th>
                            </tr>
                            </thead>
                            <tbody>
                            {% set members = admin.staff_get_list({ 'per_page': 100, 'page': request.page }|merge(request)) %}
                            {% for i, member in members.list %}
                                <tr>
                                    <td>{{ loop.index }}</td>
                                    <td>
                                        <a href="{{ 'staff/manage'|alink }}/{{ member.id }}">
                                        <span class="avatar avatar-xs me-2"
                                              style="background-image: url({{ member.email|gravatar }}&size=25)"></span>
                                        </a>
                                        <a href="{{ '/staff/manage'|alink }}/{{ member.id }}">{{ member.name }}</a>
                                    </td>
                                    <td>{{ member.email }}</td>
                                    <td>
                                        <a href="{{ '/staff/group'|alink }}/{{ member.group.id }}">{{ member.group.name }}</a>
                                    </td>
                                    <td>
                                        {% if member.status == 'active' %}
                                            <span class="badge bg-success me-1"></span>
                                        {% endif %}
                                        {% if member.status == 'inactive' %}
                                            <span class="badge bg-secondary me-1"></span>
                                        {% endif %}
                                        {{ mf.status_name(member.status) }}
                                    </td>
                                    <td>
                                        <a class="btn btn-icon" href="{{ '/staff/manage'|alink }}/{{ member.id }}"
                                           data-bs-toggle="tooltip" data-bs-title="{{ 'Edit'|trans }}">
                                            <svg class="icon">
                                                <use xlink:href="#edit"/>
                                            </svg>
                                        </a>
                                        <a class="btn btn-icon api-link" data-api-confirm="{{ 'Are you sure?'|trans }}"
                                           data-api-redirect="{{ 'extension/settings/staff'|alink }}"
                                           href="{{ 'api/admin/staff/delete'|link({ 'id': member.id, 'CSRFToken': CSRFToken }) }}"
                                           data-bs-toggle="tooltip" data-bs-title="{{ 'Delete'|trans }}">
                                            <svg class="icon">
                                                <use xlink:href="#delete"/>
                                            </svg>
                                        </a>
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td class="text-muted" colspan="5">{{ 'The list is empty'|trans }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="tab-settings" role="tabpanel">
                    <form method="post" action="{{ 'api/admin/extension/config_save'|link }}" class="api-form"
                          data-api-msg="{{ 'Configuration updated'|trans }}">
                        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
                        <input type="hidden" name="ext" value="mod_staff">
                        <div class="card-body">
                        {% set params = admin.extension_config_get({ 'ext': 'mod_staff' }) %}
                            <div class="mt-3 mb-3 row">
                                <label class="col-md-3 form-label">{{ 'Check login IP'|trans }}</label>
                                <div class="col-md-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioCheckIpYes" type="radio" name="check_ip" value="1"{% if params.check_ip == "1" %} checked{% endif %}>
                                        <label class="form-check-label" for="radioCheckIpYes">{{ 'Yes'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioCheckIpNo" type="radio" name="check_ip" value="0"{% if not params.check_ip %} checked{% endif %}>
                                        <label class="form-check-label" for="radioCheckIpNo">{{ 'No'|trans }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row" id="check_ip"{% if not params.check_ip %} style="display:none;"{% endif %}>
                                <label class="col-md-3 col-form-label">{{ 'Allowed IPs. One per line'|trans }}</label>
                                <div class="col-md-6">
                                    <textarea class="form-control" name="allowed_ips" rows="2" placeholder="{{ admin.system_env({ 'ip': 1 }) }}">{{ params.allowed_ips }}</textarea>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label
                                    class="col-md-3 form-label">{{ 'Allow staff reset passwords'|trans }}</label>
                                <div class="col-md-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioPWresetYes" type="radio"
                                               name="public[reset_pw]"
                                               value="1"{% if params.public.reset_pw == "1" %} checked{% endif %}>
                                        <label class="form-check-label" for="radioPWresetYes">{{ 'Yes'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioPWresetNo" type="radio"
                                               name="public[reset_pw]"
                                               value="0"{% if not params.public.reset_pw %} checked{% endif %}>
                                        <label class="form-check-label" for="radioPWresetNo">{{ 'No'|trans }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-primary" type="submit">{{ 'Update'|trans }}</button>
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade" id="tab-new" role="tabpanel">
                    <form method="post" action="{{ 'api/admin/staff/create'|link }}" class="api-form" data-api-jsonp="onAfterStaffCreate">
                        <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}">
                        <div class="card-body">
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Group'|trans }}</label>
                                <div class="col-md-6">
                                    {{ mf.selectbox('admin_group_id', admin.staff_group_get_pairs, '', 1) }}
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Name'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="name" required>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Email'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="email" name="email" value="{{ request.email }}"
                                           required>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Password'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="password" name="password" required="required">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Signature'|trans }}</label>
                                <div class="col-md-6">
                                    <textarea class="form-control" name="signature" rows="2"></textarea>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label class="col-md-3 form-label">{{ 'Status'|trans }}:</label>
                                <div class="col-md-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioStatusInactive" type="radio" name="status" value="inactive" checked>
                                        <label class="form-check-label" for="radioStatusInactive">{{ 'Inactive'|trans }}</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" id="radioStatusActive" type="radio" name="status" value="active">
                                        <label class="form-check-label" for="radioStatusActive">{{ 'Active'|trans }}</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <input type="submit" value="{{ 'Create'|trans }}" class="btn btn-primary">
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade" id="tab-groups" role="tabpanel">
                    <table class="table card-table table-vcenter table-striped text-nowrap">
                        <thead>
                        <tr>
                            <th>{{ 'Name'|trans }}</th>
                            <th class="w-1"></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% set groups = admin.staff_group_get_list({ 'per_page': 100, 'page': request.page }) %}
                        {% for i, group in groups.list %}
                            <tr>
                                <td>
                                    <a href="{{ '/staff/group'|alink }}/{{ group.id }}">{{ group.name }}</a>
                                </td>
                                <td>
                                    <a class="btn btn-icon" href="{{ '/staff/group'|alink }}/{{ group.id }}"
                                       data-bs-toggle="tooltip" data-bs-title="{{ 'Edit'|trans }}">
                                        <svg class="icon">
                                            <use xlink:href="#edit"/>
                                        </svg>
                                    </a>
                                    <a class="btn btn-icon api-link" data-api-confirm="{{ 'Are you sure?'|trans }}"
                                       data-api-redirect="{{ 'extension/settings/staff'|alink }}"
                                       href="{{ 'api/admin/staff/group_delete'|link({ 'id': group.id, 'CSRFToken': CSRFToken }) }}"
                                       data-bs-toggle="tooltip" data-bs-title="{{ 'Delete'|trans }}">
                                        <svg class="icon">
                                            <use xlink:href="#delete"/>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td class="text-muted" colspan="5">{{ 'The list is empty'|trans }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="tab-pane fade" id="tab-new-group" role="tabpanel">
                    <form method="post" action="{{ 'api/admin/staff/group_create'|link }}" class="api-form"
                          data-api-redirect="{{ 'extension/settings/staff'|alink }}">
                        <div class="card-body">
                            <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                            <div class="mb-3 row">
                                <label class="col-md-3 col-form-label">{{ 'Name'|trans }}</label>
                                <div class="col-md-6">
                                    <input class="form-control" type="text" name="name" required>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-end">
                            <button class="btn btn-primary" type="submit">{{ 'Create group'|trans }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        function onAfterStaffCreate(id) {
            bb.redirect("{{ 'staff/manage'|alink }}/" + id + '#tab-permissions');
        }

        $(function () {
            $('input[name=check_ip]').on('click', function () {
                if ($(this).val() == 1) {
                    $('#check_ip').slideDown();
                } else {
                    $('#check_ip').slideUp();
                }
            });
        });
    </script>
{% endblock %}
