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

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

{% set active_menu = 'client' %}
{% set can_create_client = has_permission('client', 'create') %}
{% set can_manage_groups = has_permission('client', 'manage_groups') %}
{% set can_delete_client = has_permission('client', 'delete') %}
{% set can_bulk_delete_clients = has_permission('client', 'bulk_delete') and can_delete_client %}
{% set can_export_clients = has_permission('client', 'export') %}
{% set has_filter_panel = true %}
{% set filter_panel_id = 'page-search-filters' %}
{% set filter_panel_open = request_has_filters %}
{% if can_create_client %}
    {% set new_client_action %}
        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#newClientModal">
            <svg class="icon">
                <use xlink:href="#plus" />
            </svg>
            {{ 'New Client'|trans }}
        </button>
    {% endset %}
{% endif %}
{% if can_manage_groups %}
    {% set new_group_action %}
        <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#newGroupModal">
            <svg class="icon">
                <use xlink:href="#plus" />
            </svg>
            {{ 'New Group'|trans }}
        </button>
    {% endset %}
{% endif %}

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

{% block top_content %}
{% if not filter_panel_open %}
    {% set count_clients = admin.client_get_statuses %}
    <section class="row row-cards mb-3 filter-panel-summary">
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'client'|url(query: { 'status': 'active' }) }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-success text-white avatar">{{ count_clients.active }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Active'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'client'|url(query: { 'status': 'suspended' }) }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-danger text-white avatar">{{ count_clients.suspended }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Suspended'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'client'|url(query: { 'status': 'canceled' }) }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-secondary text-white avatar">{{ count_clients.canceled }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Canceled'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-sm-6 col-lg-3">
            <a class="card card-sm card-link" href="{{ 'client'|url }}">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-blue text-white avatar">{{ count_clients.active + count_clients.canceled + count_clients.suspended }}</span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ 'Total'|trans }}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </section>
{% endif %}
{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <div>
                <h3 class="card-title">{{ 'Clients'|trans }}</h3>
                <p class="card-subtitle">{{ 'Manage client accounts, review registrations, and organize clients into groups.'|trans }}</p>
            </div>
        </div>
        <div class="card-body pt-3 pb-0 px-0">
            <div class="card border-0 shadow-none rounded-0">
                <div class="card-header bg-transparent px-3 pt-0 pb-3 border-0">
                    <ul class="nav nav-pills card-header-pills">
                        <li class="nav-item" role="presentation">
                            <a class="nav-link active" id="client-index-tab" href="#tab-index" data-bs-toggle="tab" role="tab" aria-controls="tab-index" aria-selected="true">{{ 'Clients'|trans }}</a>
                        </li>
                        {% if can_manage_groups %}
                        <li class="nav-item" role="presentation">
                            <a class="nav-link" id="client-groups-tab" href="#tab-groups" data-bs-toggle="tab" role="tab" aria-controls="tab-groups" aria-selected="false">{{ 'Groups'|trans }}</a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
        <div class="tab-content border-top">
            <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
                {{ include('partial_search.html.twig', {
                    search_body_class: filter_panel_open ? 'pb-2 border-bottom-0' : '',
                    search_toolbar_actions: new_client_action|default('')
                }) }}
                <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">
                                <div>
                                    <label class="form-label text-muted small mb-1" for="filter-client-id">{{ 'Client ID'|trans }}</label>
                                    <input class="form-control" type="text" id="filter-client-id" name="id" value="{{ request.id }}" placeholder="{{ 'Client ID'|trans }}">
                                </div>
                            </div>
                            <div class="col-md-6 col-xl-3">
                                <div>
                                    <label class="form-label text-muted small mb-1" for="filter-client-name">{{ 'Name'|trans }}</label>
                                    <input class="form-control" type="text" id="filter-client-name" name="name" value="{{ request.name }}" placeholder="{{ 'Name'|trans }}">
                                </div>
                            </div>
                            <div class="col-md-6 col-xl-3">
                                <div>
                                    <label class="form-label text-muted small mb-1" for="filter-client-company">{{ 'Company Name'|trans }}</label>
                                    <input class="form-control" type="text" id="filter-client-company" name="company" value="{{ request.company }}" placeholder="{{ 'Company Name'|trans }}">
                                </div>
                            </div>
                            <div class="col-md-6 col-xl-3">
                                <div>
                                    <label class="form-label text-muted small mb-1" for="filter-client-email">{{ 'Email'|trans }}</label>
                                    <input class="form-control" type="text" id="filter-client-email" name="email" value="{{ request.email }}" placeholder="{{ 'Email'|trans }}">
                                </div>
                            </div>
                            <div class="col-md-6 col-xl-4">
                                <div>
                                    <label class="form-label text-muted small mb-1" for="group_id">{{ 'Group'|trans }}</label>
                                    {{ mf.selectbox('group_id', admin.client_group_get_pairs, request.group_id, 0, 'All Groups'|trans) }}
                                </div>
                            </div>
                            <div class="col-md-6 col-xl-4">
                                <div>
                                    <label class="form-label text-muted small mb-1" for="reg_date">{{ 'Registration Date'|trans }}</label>
                                    <div class="input-group">
                                        <div class="input-icon w-100">
                                            <input class="form-control datepicker"
                                                   id="reg_date"
                                                   placeholder="{{ 'Select Date Range'|trans }}"
                                                   value="{% if request.date_from %}{{ request.date_from|date('Y-m-d') }}{% endif %}{% if request.date_to %} to {{ request.date_to|date('Y-m-d') }}{% endif %}"
                                                   data-name-from="date_from"
                                                   data-name-to="date_to"
                                            >
                                            <span class="input-icon-addon">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
                                                    <path d="M16 3l0 4"></path>
                                                    <path d="M8 3l0 4"></path>
                                                    <path d="M4 11l16 0"></path>
                                                    <path d="M11 15l1 0"></path>
                                                    <path d="M12 15l0 3"></path>
                                                </svg>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <label class="form-label text-muted small mb-1">{{ 'Status'|trans }}</label>
                                <div class="d-flex flex-wrap gap-2">
                                    <input class="btn-check" type="radio" id="statusAll" name="status" value=""{% if not request.status %} checked{% endif %}>
                                    <label class="btn btn-outline-primary" for="statusAll">{{ 'All'|trans }}</label>

                                    <input class="btn-check" type="radio" id="statusActive" name="status" value="active"{% if request.status == 'active' %} checked{% endif %}>
                                    <label class="btn btn-outline-primary" for="statusActive">{{ 'Active'|trans }}</label>

                                    <input class="btn-check" type="radio" id="statusSuspended" name="status" value="suspended"{% if request.status == 'suspended' %} checked{% endif %}>
                                    <label class="btn btn-outline-primary" for="statusSuspended">{{ 'Suspended'|trans }}</label>

                                    <input class="btn-check" type="radio" id="statusCanceled" name="status" value="canceled"{% if request.status == 'canceled' %} checked{% endif %}>
                                    <label class="btn btn-outline-primary" for="statusCanceled">{{ 'Canceled'|trans }}</label>
                                </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 type="submit" class="btn btn-primary">
                                <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 sortable">
                        <thead>
                            <tr>
                                {% if can_bulk_delete_clients %}
                                <th class="w-1 no-sort">
                                    <input class="form-check-input m-0 align-middle batch-delete-master-checkbox" type="checkbox">
                                </th>
                                {% endif %}
                                <th>{{ 'Name'|trans }}</th>
                                <th>{{ 'Company'|trans }}</th>
                                <th>{{ 'Status'|trans }}</th>
                                <th>{{ 'Registration Date'|trans }}</th>
                                <th class="w-1 no-sort"></th>
                            </tr>
                        </thead>

                        <tbody>
                            {% set clients = admin.client_get_list({ 'per_page': 25, 'page': request.page }|merge(request)) %}
                            {% for client in clients.list %}
                            <tr>
                                {% if can_bulk_delete_clients %}
                                <td>
                                    <input class="form-check-input m-0 align-middle batch-delete-checkbox" type="checkbox" data-item-id="{{ client.id }}">
                                </td>
                                {% endif %}
                                <td>
                                    <div class="d-flex py-1 align-items-center">
                                        <a href='{{ "client/manage/#{client.id}"|url }}'>
                                            {{ avatar(client.email, 40, 'avatar me-2') }}
                                        </a>
                                        <div class="flex-fill">
                                            <div class="font-weight-medium">
                                                <a href='{{ "client/manage/#{client.id }"|url }}'>{{ client.first_name }} {{ client.last_name }}</a>
                                                {% if client.country is not empty %}
                                                    <span class="flag flag-country-{{ client.country|lower }}" title="{{ client.country|country_name }}"></span>
                                                {% endif %}
                                            </div>
                                            <div class="text-muted">
                                                <a href="#" class="text-reset">{{ client.email }}</a>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <a href='{{ "client/manage/#{client.id}"|url }}' title="{{ client.company }}">{{ client.company|default('-')|truncate(30) }}</a>
                                </td>
                                <td>
                                    {{ mf.status_badge(client.status, 'client') }}
                                </td>
                                <td>{{ client.created_at|format_date }}</td>
                                <td>
                                    <a class="btn btn-icon" href='{{ "client/manage/#{client.id}"|url }}'>
                                        <svg class="icon">
                                            <use xlink:href="#edit" />
                                        </svg>
                                    </a>
                                    {% if can_delete_client %}
                                    <a class="btn btn-icon"
                                        {{ fb_api_link({href: 'client/delete'|api_url(query: { 'id': client.id }), modal: {type: 'confirm', title: 'Are you sure?'|trans}, reload: true}) }}>
                                        <svg class="icon">
                                            <use xlink:href="#delete" />
                                        </svg>
                                    </a>
                                    {% endif %}
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td class="text-muted" colspan="{{ can_bulk_delete_clients ? 7 : 6 }}">{{ 'The list is empty'|trans }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="card-footer d-flex align-items-center justify-content-between">
                    <div>
                        {% if can_bulk_delete_clients %}
                            {% include 'partial_batch_delete.html.twig' with { 'action': 'client/batch_delete' } %}
                        {% endif %}
                    </div>
                    <div class="d-flex align-items-center gap-2 ms-auto">
                        {% include 'partial_pagination.html.twig' with { 'list': clients, 'url': 'client' } %}
                        <a class="btn btn-secondary" href="{{ 'client/export_csv'|api_url(query: { CSRFToken: CSRFToken }) }}" title="{{ 'Export Clients'|trans }}">
                            <svg class="icon">
                                <use xlink:href="#download" />
                            </svg>
                            {{ 'Export Clients'|trans }}
                        </a>
                    </div>
                </div>
            </div>

            {% if can_create_client %}
                {{ include('mod_client_new_form.html.twig') }}
            {% endif %}

            {% if can_manage_groups %}
            <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_group_action|raw }}
                    </div>
                </div>
                <div class="table-responsive">
                <table class="table card-table table-vcenter table-striped text-nowrap">
                    <thead>
                        <tr>
                            <th>{{ 'Title'|trans }}</th>
                            <th class="w-1"></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for id, group in admin.client_group_get_pairs %}
                        <tr>
                            <td>
                                <a href='{{ "client/group/#{id}"|url }}'>{{ group }}</a>
                            </td>
                            <td>
                                <a class="btn btn-icon" href='{{ "client/group/#{id}"|url }}'>
                                    <svg class="icon">
                                        <use xlink:href="#edit" />
                                    </svg>
                                </a>
                                <a class="btn btn-icon"
                                    {{ fb_api_link({href: 'client/group_delete'|api_url(query: {'id': id}), modal: {type: 'confirm', title: 'Are you sure?'|trans}, redirect: 'client#tab-groups'|url}) }}>
                                    <svg class="icon">
                                        <use xlink:href="#delete" />
                                    </svg>
                                </a>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td class="text-muted" colspan="2">{{ 'The list is empty'|trans }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                </div>
            </div>

            <div class="modal modal-blur fade" id="newGroupModal" tabindex="-1" aria-labelledby="newGroupModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-sm">
                    <form class="modal-content" method="post" action="{{ 'client/group_create'|api_url }}" {{ fb_api_form({ redirect: 'client#tab-groups'|url}) }}>
                        <div class="modal-header">
                            <h3 class="modal-title" id="newGroupModalLabel">{{ 'Create New Group'|trans }}</h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ 'Close'|trans }}"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-0">
                                <label class="form-label" for="new-group-title">{{ 'Title'|trans }}</label>
                                <input class="form-control" id="new-group-title" type="text" name="title" value="{{ request.title }}" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
                            <button class="btn btn-primary" type="submit">{{ 'Create'|trans }}</button>
                        </div>
                    </form>
                </div>
            </div>
            {% endif %}
        </div>
            </div>
        </div>
    </div>
{% endblock %}
