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

{% block title %}{{ 'lang.myContacts'|trans }}{% endblock %}

{% block footer %}{% endblock %}

{% block body %}
    {% if app.user.isMainAccount or is_granted('ROLE_ADMIN') %}
        {% include '/general/components/navigation_menu_secondary.html.twig' with { 'activeTab': 'contact' } %}
    {% endif %}
    <div class="table-container h-100">
        <div class="table-section transparent">
            <div class="row">
                <div class="add-button-wrap">
                    <button class="add-button border-0" id="open-contact-modal-btn" type="button">
                        <img src="{{ asset('/images/add.svg') }}"/>
                        {{ 'lang.newContact'|trans }}
                    </button>
                </div>

                <div class="col">
                    <div class="table-responsive h-100 overflow-visible">
                        <table class="table table-striped table-bordered" id="contactTable">
                            <thead class="table-mobile-class">
                            <tr>
                                <th class="d-none">Id</th>
                                <th style="max-width: 180px;">{{ 'lang.company' | trans }}</th>
                                <th>{{ 'lang.name' | trans }}</th>
                                <th>{{ 'lang.surname' | trans }}</th>
                                <th>{{ 'lang.email' | trans }}</th>
                                <th>{{ 'lang.cellphone' | trans }}</th>
                                <th>
                                    {#                                    {{ 'lang.edit'  | trans }} #}
                                </th>
                                <th>
                                    {#                                    {{ 'lang.delete' | trans }} #}
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for contact in contacts %}
                                <tr>
                                                                        <td class="d-none">{{ contact.id }}</td>
                                    <td class="rows-mobile wrap-cell">{{ contact.company }}</td>
                                    <td class="rows-mobile-show">
                                        <a class="d-block d-lg-none open-contact-edit-btn"
                                           href="#"
                                           data-id="{{ contact.id }}"
                                           data-first-name="{{ contact.firstName }}"
                                           data-last-name="{{ contact.lastName }}"
                                           data-email="{{ contact.email }}"
                                           data-company="{{ contact.company }}"
                                           data-cellphone="{{ contact.cellphone }}"
                                           data-update-url="{{ path('app_contact_update', {'id': contact.id}) }}">
                                            {{ contact.firstName }} {{ contact.lastName }}
                                        </a>
                                        <span class="d-none d-lg-block">
                                        {{ contact.firstName }}
                                    </span>
                                    </td>
                                    <td class="rows-mobile">{{ contact.lastName }}</td>
                                    <td class="rows-mobile wrap-cell">
                                        {{ contact.email }}
                                    </td>
                                    <td class="rows-mobile">{{ contact.cellphone }}</td>
                                    <td class="rows-mobile">
                                        <span class="display-flex-center">
                                            <button type="button"
                                               class="btn open-contact-edit-btn border-0 bg-transparent"
                                               data-id="{{ contact.id }}"
                                               data-first-name="{{ contact.firstName }}"
                                               data-last-name="{{ contact.lastName }}"
                                               data-email="{{ contact.email }}"
                                               data-company="{{ contact.company }}"
                                               data-cellphone="{{ contact.cellphone }}"
                                               data-update-url="{{ path('app_contact_update', {'id': contact.id}) }}">
                                                <img src="{{ asset('/images/pencil.svg') }}" alt="{{ 'lang.edit'|trans }}">
                                            </button>
                                        </span>
                                    </td>
                                    <td class="rows-mobile">
                                    <span class="display-flex-center">
                                        <a
                                                class="button-delete-ts btn"
                                                href="#"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteConfirmModal"
                                                data-id="{{ contact.id }}"
                                                data-delete-link="{{ path('app_contact_delete', {'id': contact.id}) }}"
                                        >
                                            <img src="{{ asset('/images/papierkorb.svg') }}" alt="{{ 'lang.delete'|trans }}">
                                        </a>
                                    </span>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade"
         id="contact-modal"
         tabindex="-1"
         aria-labelledby="contact-modal-title"
         aria-hidden="true"
         data-bs-backdrop="static"
         data-bs-keyboard="false"
         data-mode="create"
         data-create-url="{{ path('app_contact_create') }}"
         data-create-token="{{ csrf_token('create_contact') }}"
         data-update-token="{{ csrf_token('update_contact') }}"
         data-title-create="{{ 'lang.addNewContact'|trans|e('html_attr') }}"
         data-title-edit="{{ 'lang.editContact'|trans|e('html_attr') }}"
         data-submit-create="{{ 'lang.addContact'|trans|e('html_attr') }}"
         data-submit-edit="{{ 'lang.saveChanges'|trans|e('html_attr') }}">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="contact-modal-title">{{ 'lang.addNewContact'|trans }}</h5>
                    <button type="button" class="button-no-style" data-bs-dismiss="modal" aria-label="Close">
                        <i class="icofont-close svg-close f-20"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="create-contact-form" action="{{ path('app_contact_create') }}" method="POST">
                        <input class="input-underline form-control" type="text" name="firstName" id="create_firstName" required>
                        <label class="form-label" for="create_firstName">{{ 'lang.firstName' | trans }}</label>

                        <input class="input-underline form-control" type="text" name="lastName" id="create_lastName" required>
                        <label class="form-label" for="create_lastName">{{ 'lang.lastName' | trans }}</label>

                        <input class="input-underline form-control" type="email" name="email" id="create_email" required>
                        <label class="form-label" for="create_email">{{ 'lang.email' | trans }}</label>

                        <input class="input-underline form-control" type="text" name="company" id="create_company">
                        <label class="form-label" for="create_company">{{ 'lang.company' | trans }}</label>

                        <input class="input-underline form-control" type="text" name="cellphone" id="create_cellphone">
                        <label class="form-label" for="create_cellphone">{{ 'lang.cellphone' | trans }}</label>

                        <input type="hidden" name="_token" id="contact-form-token" value="{{ csrf_token('create_contact') }}">

                        <div class="display-flex-center mt-3">
                            <button type="submit" class="button button-blue" id="contact-modal-submit">{{ 'lang.addContact'|trans }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteConfirmModalLabel">{{ 'lang.deleteConfirm' | trans }}</h5>
                    <button type="button" class="button-no-style" data-bs-dismiss="modal" aria-label="Close">
                        <i class="icofont-close svg-close f-20"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <p>{{ 'lang.areYouSureDeleteContact' | trans }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">{{ 'lang.cancel' | trans }}</button>
                    <button type="button" class="btn btn-danger"
                            id="confirmDeleteBtn">{{ 'lang.delete' | trans }}</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('contact') }}

{% endblock %}