{% extends 'base.html.twig' %}
{% block title %}List Client{% endblock %}
{% block body %}
    <div class="element-main-container">
        <div class="top-menu-container">
            {% set name = 'klienci'|upper %}
            {{ include('nav/top_menu/top_menu.html.twig') }}
        </div>
            <div class="horizontal-container-client-list">
                {#<div class="client-drop-down">
                    <span class="avatar-icon">
                        <span class="content-client-name"><p>Jan Kowalski</p></span>
                    </span>
                    <span class="array-down-icon"><i class="fas fa-chevron-down"></i></span>
                </div>#}
                <div class="search-panel-client-list">
                    <div class="search-form-wrapper-top-0">
                        <form action="{{ path('client_list') }}" method="get">
                            <input type="text" name="search_client" class="search-input" placeholder="Wyszukaj klienta" required>
                            <button id="search" class="search-lupe-icon"></button>
                        </form>
                    </div>
                    <div class="btn-container-client-list">
                        <button id="add-client-btn" class="add-new-client-btn"><a>Dodaj klienta</a></button>
                    </div>
                </div>
                <div id="add-client-modal" class="modal">
                    <div class="modal-content-client-list">
                        {{ include('client/new.html.twig') }}
                    </div>
                </div>
                <div id="edit-client-modal" class="modal">
                    <div class="modal-content-client-list">
                        {{ include('client/edit/form/edit.html.twig') }}
                    </div>
                </div>
            </div>
        <div id="full-listing" class="container-client-list">
            <div class="grid-columns-client-list">
                <div class="client-column-name"><p>Nazwa</p><a href="/client/list/{{ page }}{{ glueUrl }}category=shortName&order={{ switchOrder }}"><span class="client-column-name-span"></span></a></div>
                <div class="client-column-nip"><p>NIP</p><a href="/client/list/{{ page }}{{ glueUrl }}category=nip&order={{ switchOrder }}"><span class="client-column-nip-span"></span></a></div>
                <div class="client-column-regon"><p>REGON</p><a href="/client/list/{{ page }}{{ glueUrl }}category=regon&order={{ switchOrder }}"><span class="client-column-regon-span"></span></a></div>
                <div class="client-column-phone"><p>Telefon</p><a href="/client/list/{{ page }}{{ glueUrl }}category=phoneNumber&order={{ switchOrder }}"><span class="client-column-phone-span"></span></a></div>
                <div class="client-column-email"><p>E-mail</p><a href="/client/list/{{ page }}{{ glueUrl }}category=email&order={{ switchOrder }}"><span class="client-column-email-span"></span></a></div>
                <div class="client-column-fax"><p>Fax</p></div>
                <div class="client-column-days"><p>Dni</p></div>
                <div class="client-column-actions"><p>Akcje</p><span class="client-column-actions-span"></span></div>
            </div>
            {% if (clients is not empty) %}
                <div class="grid-rows-client-list">
                    {% for index, client in clients %}
                        <div class="client-row-name"><p>{{ client.company.shortName }}</p></div>
                        <div class="client-row-nip"><p>{{ client.company.nip }}</p></div>
                        <div class="client-row-regon"><p>{{ client.company.regon }}</p></div>
                        <div class="client-row-phone"><p>{{ client.getPhoneNumber }}</p></div>
                        <div class="client-row-email"><p>{{ client.email }}</p></div>
                        <div class="client-row-fax"><p>{{ client.fax }}</p></div>
                        <div class="client-row-days"><p>{{ client.dueDate }}</p></div>
                        <div class="client-row-actions" data-index="{{ index }}" data-id="{{ client.id }}" data-company="{{ client.company.id }}">
                            <div class="grid-actions">
                                <div class="col-2">
                                    <div class="action-block">
                                        <button>
                                            <i class="icons icon-details-big"></i>
                                        </button>
                                        <div  style="display: none" class="grid-modal-menu">
                                            <div class="grid-modal-element">
                                                <a title="Szczegóły zlecenia" href="{{ path('client_details', {id: client.id}) }}">
                                                    Szczegóły <i class="fas fa-chevron-right"></i>
                                                </a>
                                            </div>
                                            <div class="grid-modal-element">
                                                <a title="Edytuj" href="" class="list-client-edit">
                                                    Edytuj <i class="fas fa-chevron-right"></i>
                                                </a>
                                            </div>
                                            <div class="grid-modal-element">
                                                <a title="Usuń" href="{{ path('client_delete', {id: client.id}) }}">
                                                    Usuń <i class="fas fa-chevron-right"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div class="pagination-container">
                   {% set SingleEntity = 'client' %}
                   {{ include('pagination/pagination.html.twig') }}
                </div>
            {% endif %}
        </div>
    <script>
        let mainContainer = document.querySelector(".element-main-container");
        let addNewCarrierBtn = document.querySelector(".add-new-client-btn");
        let contentSubmenu = document.querySelectorAll(".dropdown-content-client-list");
        let deleteCarrierLink = document.querySelectorAll(".list-client-delete");

        document.querySelector(".container-client-list").addEventListener('click', (e) => {
            let clickedElement = e.target.parentElement.parentElement.parentElement.getElementsByClassName('grid-modal-menu');
            let aAllMiniMenus = document.getElementById('full-listing').getElementsByClassName('grid-modal-menu');

            if (clickedElement[0].style.display === "none") {
                for (var i = 0; i < aAllMiniMenus.length; i++) {
                    aAllMiniMenus[i].style.display = "none"
                }

                clickedElement[0].style.display = "block";
            } else {
                clickedElement[0].style.display = "none";
            }
        });

        document.querySelector("#edit-client-modal").addEventListener('submit', function (e) {
            if (window.confirm("Czy zapisać zmodyfikowane dane klienta?")) {
                $(this).attr('action', $(this).attr("action")).submit();
            } else {
                e.preventDefault();
            }
            window.location.href = "/client/list";
        });

        // remove single carrier by modal confirm
        for (const deleteLink of deleteCarrierLink) {
            if (deleteLink !== undefined) {
                deleteLink.addEventListener('click', function (e) {
                    if (window.confirm("Czy usunąć klienta?")) {
                    } else {
                        e.preventDefault();
                    }
                });
            }
        }

        const nameColumn = document.querySelector(".client-column-name");
        const nipColumn = document.querySelector(".client-column-nip");
        const regonColumn = document.querySelector(".client-column-regon");
        const phoneColumn = document.querySelector(".client-column-phone");
        const emailColumn = document.querySelector(".client-column-email");
        const searchInput = document.querySelector(".search-input");
        const searchBtn = document.querySelector("#search");
        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');
            searchInputIcon.classList = "search-icon-close";

            searchBtn.addEventListener('click', function (e) {
                e.preventDefault();
                searchInput.placeholder = "Wyszukaj klienta";
                this.classList = "search-lupe-icon";
                window.location.href = "/client/list";
            });
        }

        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')) {
            closeSearch();
            if (categoryParam == 'shortName') {
                if (orderParam == 'asc') {
                    nameColumn.querySelector('.client-column-name-span').style.backgroundPosition = "right 6px";
                } else {
                    nameColumn.querySelector('.client-column-name-span').style.backgroundPosition = "right -6px";
                }
            }
            if (categoryParam == 'nip') {
                if (orderParam == 'asc') {
                    nipColumn.querySelector('.client-column-nip-span').style.backgroundPosition = "right 6px";
                } else {
                    nipColumn.querySelector('.client-column-nip-span').style.backgroundPosition = "right -6px";
                }
            }
            if (categoryParam == 'regon') {
                if (orderParam == 'asc') {
                    regonColumn.querySelector('.client-column-regon-span').style.backgroundPosition = "right 6px";
                } else {
                    regonColumn.querySelector('.client-column-regon-span').style.backgroundPosition = "right -6px";
                }
            }
            if (categoryParam == 'phoneNumber') {
                if (orderParam == 'asc') {
                    phoneColumn.querySelector('.client-column-phone-span').style.backgroundPosition = "right 6px";
                } else {
                    phoneColumn.querySelector('.client-column-phone-span').style.backgroundPosition = "right -6px";
                }
            }
            if (categoryParam == 'email') {
                if (orderParam == 'asc') {
                    emailColumn.querySelector('.client-column-email-span').style.backgroundPosition = "right 6px";
                } else {
                    emailColumn.querySelector('.client-column-email-span').style.backgroundPosition = "right -6px";
                }
            }

        } else {
            if (urlQuery.has('category')) {
                if (urlQuery.get('category') == 'shortName') {
                    if (orderParam == 'asc') {
                        nameColumn.querySelector('.client-column-name-span').style.backgroundPosition = "right 6px";
                    } else {
                        nameColumn.querySelector('.client-column-name-span').style.backgroundPosition = "right -6px";
                    }
                }
                if (urlQuery.get('category') == 'nip') {
                    if (orderParam == 'asc') {
                        nipColumn.querySelector('.client-column-nip-span').style.backgroundPosition = "right 6px";
                    } else {
                        nipColumn.querySelector('.client-column-nip-span').style.backgroundPosition = "right -6px";
                    }
                }
                if (urlQuery.get('category') == 'regon') {
                    if (orderParam == 'asc') {
                        regonColumn.querySelector('.client-column-regon-span').style.backgroundPosition = "right 6px";
                    } else {
                        regonColumn.querySelector('.client-column-regon-span').style.backgroundPosition = "right -6px";
                    }
                }
                if (urlQuery.get('category') == 'phoneNumber') {
                    if (orderParam == 'asc') {
                        phoneColumn.querySelector('.client-column-phone-span').style.backgroundPosition = "right 6px";
                    } else {
                        phoneColumn.querySelector('.client-column-phone-span').style.backgroundPosition = "right -6px";
                    }
                }
                if (urlQuery.get('category') == 'email') {
                    if (orderParam == 'asc') {
                        emailColumn.querySelector('.client-column-email-span').style.backgroundPosition = "right 6px";
                    } else {
                        emailColumn.querySelector('.client-column-email-span').style.backgroundPosition = "right -6px";
                    }
                }
            }
        }

    </script>
{% endblock %}