{% extends 'base.html.twig' %}
{% block title %}List Client Contact Person{% endblock %}
{% block body %}
    <div class="element-main-container">
        {% set subName = 'os.kontaktowe'|upper %}
        <div class="top-menu-container">
            {% set name = 'klienci'|upper %}
            {{ include('nav/top_menu/top_menu.html.twig') }}
        </div>
        <div class="under-top-menu-container">
            <div class="text-header-client-contact-person">
                <span class="person-icon"></span><div class="ml-25"><p>{{ client.getCompany().getShortName() }}</p></div>
            </div>
            <div class="under-top-menu-buttons-container">
                <div classs="details-btn-container">
                    <a href="/client/list" class="details-list-btn-a">
                        <button class="details-list-btn">Lista klientów</button>
                    </a>
                    <a href="{{ path('client_delete', {id: client.id}) }}" class="details-delete-btn-a">
                        <button id="remove-client" class="details-delete-btn">Usuń</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="horizontal-menu-container" data-section="{{ subName }}">
            {{ include('client/horizontal_menu/horizontal_menu.html.twig') }}
        </div>

        <div class="horizontal-container-client-contact-person-list">
            <div class="text-header-carrier-contact-person-list">
                <p>Lista osób kontaktowych klienta </p>
            </div>
            <div class="search-panel-client-contact-person-list">
                <form action="{{ path('client_contact_person', {id: client.id}) }}" method="get">
                    <input type="text" name="search_client_contact_person" class="search-input" placeholder="Wyszukaj" required>
                    <button id="search" class="search-lupe-icon"></button>
                </form>
            </div>
            <div class="btn-container-client-contact-person-list">
                <button id="add-client-contact-person-btn" class="add-new-client-contact-person-btn"><a>Dodaj osobę kontaktową</a></button>
            </div>

            <div id="client-contact-person-modal" class="modal">
                <div>
                    {{ include('client/client_contact_person/form/actions_form.html.twig') }}
                </div>
            </div>
        </div>

        <div class="details-container">
            <div class="container-contact-person-list">
                <div class="grid-columns-details-client-contact-person">
                    <div class="details-client-contact-person-column-name"><p>Imię</p><a href="/client/{{ id }}/contact/person?category=firstName&order={{ switchOrderBy }}{{ glueUrl }}"><span class="details-client-contact-person-column-name-span"></span></a></div>
                    <div class="details-client-contact-person-column-surname"><p>Nazwisko</p><a href="/client/{{ id }}/contact/person?category=lastName&order={{ switchOrderBy }}{{ glueUrl }}"><span class="details-client-contact-person-column-surname-span"></span></a></div>
                    <div class="details-client-contact-person-column-phone"><p>Telefon</p><a href="/client/{{ id }}/contact/person?category=phone&order={{ switchOrderBy }}{{ glueUrl }}"><span class="details-client-contact-person-column-phone-span"></span></a></div>
                    <div class="details-client-contact-person-column-id"><p>ID</p></div>
                    <div class="details-client-contact-person-column-email"><p>E-mail</p></div>
                    <div class="details-client-contact-person-column-mobile"><p>Mobile/platforma</p></div>
                    <div class="details-client-contact-person-column-actions"><p>Akcje</p></div>
                </div>
                <div class="grid-rows-details-client-contact-person-list">
                    {% for index, clientContactPerson in clientContactPersons %}
                        <div class="details-client-contact-person-row-name"><p>{{ clientContactPerson.firstName }}</p></div>
                        <div class="details-client-contact-person-row-surname"><p>{{ clientContactPerson.lastName }}</p></div>
                        <div class="details-client-contact-person-row-phone"><p>{{ clientContactPerson.phone }}</p></div>
                        <div class="details-client-contact-person-row-id"><p>{{ clientContactPerson.getId() }}</p></div>
                        <div class="details-client-contact-person-row-email"><p>{{ clientContactPerson.email }}</p></div>
                        <div class="details-client-contact-person-row-mobile"><p>{{ clientContactPerson.mobile }}</p></div>
                        <div class="details-client-contact-person-row-actions" data-index="{{ index }}" data-client="{{ client.id }}" data-id="{{ clientContactPerson.id }}">
                            <div class="submenu-drop-down-client-contact-person-list"></div>
                            <div class="dropdown-content-client-contact-person-list">
                                <a href="" class="client-contact-person-link-edit">Edytuj<span class="dropdown-content-arrow-right"><i class="fas fa-chevron-right"></i></span></a>
                                <form action="{{ path('client_contact_person_delete', {id: client.id}) }}" method="POST">
                                    <input type="hidden" id="client_contact_person" name="client_contact_person" value="{{ clientContactPerson.id }}">
                                    <button class="link-delete-btn">Usuń<span class="dropdown-content-arrow-right"><i class="fas fa-chevron-right"></i></span></button>
                                </form>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <script>
        const mainContainer = document.querySelector(".element-main-container");
        const addNewClientContactPersonBtn = document.querySelector(".add-new-client-contact-person-btn");
        const contentSubmenu = document.querySelectorAll(".dropdown-content-client-contact-person-list");
        const deleteClientContactPersonLink = document.querySelectorAll(".link-delete-btn");
        const saveBtn = document.querySelector(".blue-custom-btn");
        const $form = document.getElementsByTagName('form')[0];

        document.querySelector(".container-contact-person-list").addEventListener('click', (e) => {
            let idRow = e.target.closest(".details-client-contact-person-row-actions").dataset.index;
            if (contentSubmenu[idRow].classList.contains('dropdown-content-client-contact-person-list')) {
                contentSubmenu[idRow].classList = "dropdown-content-client-contact-person-list-show";
            } else {
                contentSubmenu[idRow].classList = "dropdown-content-client-contact-person-list";
            }
            for (var i = 0; i < contentSubmenu.length; i++) {
                if (idRow != i) {
                    contentSubmenu[i].classList = "dropdown-content-client-contact-person-list";
                }
            }
        });

        for (const deleteLink of deleteClientContactPersonLink) {
            if (deleteLink !== undefined) {
                deleteLink.addEventListener('click', function (e) {
                    if (window.confirm("Czy usunąć osobę kontaktową klienta?")) {
                    } else {
                        e.preventDefault();
                    }
                });
            }
        }

        const firstNameColumn = document.querySelector(".details-client-contact-person-column-name");
        const lastNameColumn = document.querySelector(".details-client-contact-person-column-surname");
        const phoneColumn = document.querySelector(".details-client-contact-person-column-phone");
        const searchInput = document.querySelector(".search-input");
        const searchInputIcon = document.querySelector(".search-lupe-icon");
        const urlAddress = window.location.href;

        let urlQuery = new URLSearchParams(window.location.search);
        let urlParams = new URLSearchParams(urlAddress);
        let categoryParam = urlParams.get('category');
        let orderParam = urlParams.get('order');

        function closeSearch() {
            searchInput.placeholder = urlQuery.get('search_client_contact_person');
            searchInputIcon.classList = "search-icon-close";

            document.querySelector("#search").addEventListener('click', function (e) {
                e.preventDefault();
                this.classList = "search-lupe-icon";
                window.location.href = $form.action;
            });
        }

        searchInput.addEventListener('keydown', function () {
            this.placeholder = ''; // clear input text
            document.querySelector("#search").classList = 'search-lupe-icon';
            if (window.location.href.indexOf('?') > -1) {
                window.location.href = window.location.pathname;
            }
        });

        if (urlQuery.has('search_client_contact_person')) {
            closeSearch();
        }

        if (urlQuery.has('category')) {
            if (urlQuery.get('category') == 'firstName') {
                if (orderParam == 'asc') {
                    firstNameColumn.querySelector('.details-client-contact-person-column-name-span').style.backgroundPosition = "right 6px";
                } else {
                    firstNameColumn.querySelector('.details-client-contact-person-column-name-span').style.backgroundPosition = "right -6px";
                }
            }
            if (urlQuery.get('category') == 'lastName') {
                if (orderParam == 'asc') {
                    lastNameColumn.querySelector('.details-client-contact-person-column-surname-span').style.backgroundPosition = "right 6px";
                } else {
                    lastNameColumn.querySelector('.details-client-contact-person-column-surname-span').style.backgroundPosition = "right -6px";
                }
            }

            if (urlQuery.get('category') == 'phone') {
                if (orderParam == 'asc') {
                    phoneColumn.querySelector('.details-client-contact-person-column-phone-span').style.backgroundPosition = "right 6px";
                } else {
                    phoneColumn.querySelector('.details-client-contact-person-column-phone-span').style.backgroundPosition = "right -6px";
                }
            }
        }

        const horizontalMenu = document.querySelector('.horizontal-menu-container');
        const contactPerson = document.querySelector('.cl_contact');
        if (horizontalMenu.dataset.section == 'OS.KONTAKTOWE') {
            contactPerson.classList = "cl_contact_active";
        }

        document.getElementById("remove-client").addEventListener('click', function (e) {
            if (window.confirm("Czy usunąć klienta?")) {
            } else {
                e.preventDefault();
            }
        });
    </script>
{% endblock %}