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

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

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

{% set active_menu = 'system' %}
{% set has_filter_panel = true %}
{% set filter_panel_id = 'page-search-filters' %}
{% set filter_panel_open = request_has_filters %}
{% set new_staff_action %}
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#newStaffModal">
        <svg class="icon">
            <use xlink:href="#plus"/>
        </svg>
        {{ 'New Staff Member'|trans }}
    </button>
{% endset %}
{% set new_staff_group_action %}
    <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#newStaffGroupModal">
        <svg class="icon">
            <use xlink:href="#plus"/>
        </svg>
        {{ 'New Group'|trans }}
    </button>
{% endset %}

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

{% block content %}
    <div class="card">
        <div class="card-header">
            <div>
                <h3 class="card-title">{{ 'Staff'|trans }}</h3>
                <p class="card-subtitle">{{ 'Manage staff accounts, configure staff login rules, and maintain permission groups.'|trans }}</p>
            </div>
        </div>
        <div class="card-body pt-3 pb-0 px-0">
            <ul class="nav nav-pills mb-3 px-3" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" href="#tab-staff" data-bs-toggle="tab" role="tab">{{ 'Staff'|trans }}</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" href="#tab-settings" data-bs-toggle="tab" role="tab">{{ 'Settings'|trans }}</a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" href="#tab-groups" data-bs-toggle="tab" role="tab">{{ 'Manage Groups'|trans }}</a>
                </li>
            </ul>

            <div class="tab-content border-top">
                <div class="tab-pane fade show active" id="tab-staff" role="tabpanel">
                    {{ include('partial_search.html.twig', {
                        search_body_class: filter_panel_open ? 'pb-2 border-bottom-0' : '',
                        search_toolbar_actions: new_staff_action
                    }) }}
                    <section id="{{ filter_panel_id }}" class="card-body pt-0 px-3 pb-3 border-bottom collapse{% if filter_panel_open %} show{% endif %}">
                        <form method="get" class="border border-top-0 rounded-top-0 rounded-bottom-3 bg-body-tertiary p-3">
                            {% if request.search %}
                                <input type="hidden" name="search" value="{{ request.search }}">
                            {% endif %}
                            <div class="row g-3">
                                <div class="col-md-6 col-xl-3">
                                    <label class="form-label text-muted small mb-1" for="staff-id">{{ 'Staff ID'|trans }}</label>
                                    <input class="form-control" type="text" id="staff-id" name="id" value="{{ request.id }}" placeholder="{{ 'Staff ID'|trans }}">
                                </div>
                                <div class="col-md-6 col-xl-3">
                                    <label class="form-label text-muted small mb-1">{{ 'Group'|trans }}</label>
                                    {{ mf.selectbox('admin_group_id', admin.staff_group_get_pairs, request.admin_group_id, 0, 'All Groups'|trans) }}
                                </div>
                                <div class="col-md-6 col-xl-3">
                                    <label class="form-label text-muted small mb-1" for="staff-status">{{ 'Status'|trans }}</label>
                                    <select class="form-select" id="staff-status" name="status">
                                        <option value="">{{ 'All Statuses'|trans }}</option>
                                        <option value="active"{% if request.status == 'active' %} selected{% endif %}>{{ 'Active'|trans }}</option>
                                        <option value="inactive"{% if request.status == 'inactive' %} selected{% endif %}>{{ 'Inactive'|trans }}</option>
                                    </select>
                                </div>
                                <div class="col-md-6 col-xl-3">
                                    <div>
                                        <label class="form-label text-muted small mb-1 d-block invisible" aria-hidden="true">{{ 'Status'|trans }}</label>
                                        <div class="d-flex align-items-center" style="min-height: 40px;">
                                            <label class="form-check form-switch m-0">
                                                <input class="form-check-input" type="checkbox" name="no_cron" value="1"{% if request.no_cron %} checked{% endif %}>
                                                <span class="form-check-label">{{ 'Exclude Cron User'|trans }}</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end gap-2 mt-3">
                                <a class="btn btn-outline-secondary" href="{{ request_path|url }}">{{ 'Reset'|trans }}</a>
                                <button class="btn btn-primary" type="submit">
                                    <svg class="icon">
                                        <use xlink:href="#filter"/>
                                    </svg>
                                    {{ 'Apply Filters'|trans }}
                                </button>
                            </div>
                        </form>
                    </section>
                    <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/#{member.id}"|url }}'>
                                        {{ avatar(member.email, 25, 'avatar avatar-xs me-2') }}
                                        </a>
                                        <a href='{{ "staff/manage/#{member.id}"|url }}'>{{ member.name }}</a>
                                    </td>
                                    <td>{{ member.email }}</td>
                                    <td>
                                        <a href='{{ "staff/group/#{member.group.id}"|url }}'>{{ member.group.name }}</a>
                                    </td>
                                    <td>{{ mf.status_badge(member.status, 'admin') }}</td>
                                    <td>
                                        <a class="btn btn-icon" href='{{ "staff/manage/#{member.id}"|url }}'
                                           data-bs-toggle="tooltip" data-bs-title="{{ 'Edit'|trans }}">
                                            <svg class="icon">
                                                <use xlink:href="#edit"/>
                                            </svg>
                                        </a>
                                        <a class="btn btn-icon" href="{{ 'staff/delete'|api_url(query: { 'id': member.id }) }}"
                                            data-bs-toggle="tooltip" data-bs-title="{{ 'Delete'|trans }}"
                                            {{ fb_api_link({modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'extension/settings/staff'|url}) }}>
                                            <svg class="icon">
                                                <use xlink:href="#delete"/>
                                            </svg>
                                        </a>
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td class="text-center text-muted py-3" colspan="6">{{ '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="{{ 'extension/config_save'|api_url }}" {{ fb_api_form({message: 'Configuration Updated'|trans}) }}>
                        <input type="hidden" name="ext" value="mod_staff">
                        <div class="card-body">
                        {% set params = admin.extension_config_get({ 'ext': 'mod_staff' }) %}
                            <div class="alert alert-info" role="alert">
                                <strong class="me-1">{{ 'Information:'|trans }}</strong>{{ 'Use these options to restrict which IPs staff may log in from and whether staff can reset their own passwords.'|trans }}
                            </div>

                            <h4 class="card-title mb-2">{{ 'Login Restrictions'|trans }}</h4>
                            <p class="text-secondary mb-3">{{ 'Optionally restrict staff access to a specific list of known administrator IP addresses.'|trans }}</p>
                            <label class="form-check form-switch form-switch-2 mb-3">
                                <input class="form-check-input" id="check_ip_enabled" type="checkbox" name="check_ip" value="1"{% if params.check_ip == '1' %} checked{% endif %}>
                                <span class="form-check-label">{{ 'Check Login IP'|trans }}</span>
                            </label>
                            <div id="check_ip"{% if not params.check_ip %} style="display:none;"{% endif %}>
                                <label class="form-label" for="allowed_ips">{{ 'Allowed IPs. One Per Line'|trans }}</label>
                                <div class="alert alert-warning mb-3" role="alert">
                                    <strong class="me-1">{{ 'Warning:'|trans }}</strong>{{ 'Incorrect configuration of allowed IPs can lead to a complete lockout of the administrator panel. Only use when you have static addresses.'|trans }}
                                </div>
                                <textarea class="form-control" id="allowed_ips" name="allowed_ips" rows="4" placeholder="{{ admin.system_env({ 'ip': 1 }) }}">{{ params.allowed_ips }}</textarea>
                            </div>
                        </div>
                        <div class="card-body border-top">
                            <h4 class="card-title mb-2">{{ 'Password Recovery'|trans }}</h4>
                            <p class="text-secondary mb-3">{{ 'Control whether staff users may request password reset emails from the public login flow.'|trans }}</p>
                            <label class="form-check form-switch form-switch-2">
                                <input class="form-check-input" type="checkbox" name="public[reset_pw]" value="1"{% if params.public.reset_pw == '1' %} checked{% endif %}>
                                <span class="form-check-label">{{ 'Allow Staff Reset Passwords'|trans }}</span>
                            </label>
                        </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-groups" role="tabpanel">
                    <div class="card-body border-bottom py-3">
                        <div class="d-flex justify-content-end">
                            {{ new_staff_group_action|raw }}
                        </div>
                    </div>
                    <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/#{group.id}"|url }}'>{{ group.name }}</a>
                                </td>
                                <td>
                                    <a class="btn btn-icon" href='{{ "staff/group/#{group.id}"|url }}'
                                       data-bs-toggle="tooltip" data-bs-title="{{ 'Edit'|trans }}">
                                        <svg class="icon">
                                            <use xlink:href="#edit"/>
                                        </svg>
                                    </a>
                                    <a class="btn btn-icon" href="{{ 'staff/group_delete'|api_url(query: { 'id': group.id }) }}"
                                        data-bs-toggle="tooltip" data-bs-title="{{ 'Delete'|trans }}"
                                        {{ fb_api_link({modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'extension/settings/staff#tab-groups'|url}) }}>
                                        <svg class="icon">
                                            <use xlink:href="#delete"/>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td class="text-center text-muted py-3" colspan="2">{{ 'The list is empty'|trans }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="newStaffModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-md-down">
            <form method="post" action="{{ 'staff/create'|api_url }}" class="modal-content" {{ fb_api_form({callback: 'onAfterStaffCreate'}) }}>
                <div class="modal-header">
                    <h5 class="modal-title">{{ 'New Staff Member'|trans }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close'|trans }}"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-lg-6">
                            <label class="form-label" for="admin_group_id">{{ 'Group'|trans }}</label>
                            {{ mf.selectbox('admin_group_id', admin.staff_group_get_pairs, '', 1) }}
                        </div>
                        <div class="col-lg-6">
                            <label class="form-label" for="new-staff-name">{{ 'Name'|trans }}</label>
                            <input class="form-control" id="new-staff-name" type="text" name="name" required>
                        </div>
                        <div class="col-lg-6">
                            <label class="form-label" for="new-staff-email">{{ 'Email'|trans }}</label>
                            <input class="form-control" id="new-staff-email" type="email" name="email" value="{{ request.email }}" required>
                        </div>
                        <div class="col-lg-6">
                            <label class="form-label" for="new-staff-password">{{ 'Password'|trans }}</label>
                            <input class="form-control" id="new-staff-password" type="password" name="password" required>
                        </div>
                        <div class="col-12">
                            <label class="form-label" for="new-staff-signature">{{ 'Signature'|trans }}</label>
                            <textarea class="form-control" id="new-staff-signature" name="signature" rows="3"></textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label d-block">{{ 'Status'|trans }}</label>
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <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">
                                    <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>
                <div class="modal-footer">
                    <input type="submit" value="{{ 'Create'|trans }}" class="btn btn-primary">
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="newStaffGroupModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form method="post" action="{{ 'staff/group_create'|api_url }}" class="modal-content" {{ fb_api_form({redirect: 'extension/settings/staff#tab-groups'|url}) }}>
                <div class="modal-header">
                    <h5 class="modal-title">{{ 'New Group'|trans }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close'|trans }}"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label" for="new-staff-group-name">{{ 'Name'|trans }}</label>
                    <input class="form-control" id="new-staff-group-name" type="text" name="name" required>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">{{ 'Create group'|trans }}</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        function onAfterStaffCreate(id) {
            window.location = "{{ 'staff/manage'|url }}/" + id + '#tab-permissions';
        }

        document.addEventListener("DOMContentLoaded", function() {
            const checkIpToggle = document.getElementById('check_ip_enabled');
            const checkIpElement = document.getElementById('check_ip');

            if (checkIpToggle && checkIpElement) {
                checkIpToggle.addEventListener('change', function() {
                    checkIpElement.style.display = this.checked ? 'block' : 'none';
                });
            }

            if (window.location.hash === '#tab-new') {
                const modalElement = document.getElementById('newStaffModal');
                if (modalElement) {
                    bootstrap.Modal.getOrCreateInstance(modalElement).show();
                }
            }

            if (window.location.hash === '#tab-new-group') {
                const modalElement = document.getElementById('newStaffGroupModal');
                if (modalElement) {
                    bootstrap.Modal.getOrCreateInstance(modalElement).show();
                }
            }

            const newStaffModal = document.getElementById('newStaffModal');
            if (newStaffModal) {
                newStaffModal.addEventListener('shown.bs.modal', function () {
                    history.replaceState(null, '', window.location.pathname + window.location.search + '#tab-new');
                });

                newStaffModal.addEventListener('hidden.bs.modal', function () {
                    if (window.location.hash === '#tab-new') {
                        history.replaceState(null, '', window.location.pathname + window.location.search + '#tab-staff');
                    }
                });
            }

            const newStaffGroupModal = document.getElementById('newStaffGroupModal');
            if (newStaffGroupModal) {
                newStaffGroupModal.addEventListener('shown.bs.modal', function () {
                    history.replaceState(null, '', window.location.pathname + window.location.search + '#tab-new-group');
                });

                newStaffGroupModal.addEventListener('hidden.bs.modal', function () {
                    if (window.location.hash === '#tab-new-group') {
                        history.replaceState(null, '', window.location.pathname + window.location.search + '#tab-groups');
                    }
                });
            }
        });
    </script>
{% endblock %}
