{% extends 'base.html.twig' %}
{% block title %}List Carrier Contact Person{% endblock %}
{% block body %}
    {% set subName = 'os.kontaktowe'|upper %}
    <div class="element-main-container">
        <div class="top-menu-container">
            {% set name = 'przewoźnicy'|upper %}
            {{ include('nav/top_menu/top_menu.html.twig') }}
        </div>
        <div class="under-top-menu-container">
            <div class="text-header-carrier-contact-person">
                <p>Szczegóły Przewoźnika</p>
            </div>
            <div class="under-top-menu-buttons-container">
                <div class="details-btn-container">
                    <a href="/carrier/list" class="details-list-btn-a">
                       <button class="details-list-btn">Lista przewoźników</button>
                    </a>
                    <a href="{{ path('carrier_delete', {id: carrier.id}) }}" class="details-delete-btn-a">
                       <button id="remove-carrier" class="details-delete-btn">Usuń</button>
                    </a>
                </div>
            </div>
        </div>
        <div class="horizontal-menu-container" data-section="{{ subName }}">
            {{ include('carrier/horizontal_menu/horizontal_menu.html.twig') }}
        </div>
        <div class="horizontal-container-carrier-contact-person-list">
            <div class="text-header-carrier-contact-person-list">
                <p>Lista osób kontaktowych przewoźnika: {{ carrier.getShortName }}</p>
            </div>
            <div class="search-panel-carrier-contact-person-list">
                <form action="{{ path('carrier_contact_person', {id: carrier.id}) }}" method="get">
                    <input type="text" name="search_carrier_contact_person" class="search-input" placeholder="Wyszukaj" required>
                    <button id="search" class="search-lupe-icon"></button>
                </form>
            </div>
            <div class="btn-container-add-carrier-contact-person">
                <button id="add-new-carrier-contact-person-btn" class="add-new-carrier-contact-person-btn"><a>Dodaj osobę kontaktową</a></button>
            </div>

            <div id="carrier-contact-person-modal" class="modal">
                <div>
                    {{ include('carrier/carrier_contact_person/form/actions_form.html.twig') }}
                </div>
            </div>
        </div>
        <div class="details-container">
            <div class="container-carrier-contact-person-list">
                <div class="grid-columns-details-carrier-contact-person">
                    <div class="details-carrier-contact-person-column-firstName"><p>Imię</p><a href="/carrier/{{ id }}/contact/person?category=firstName&order={{ switchOrderBy }}{{ glueUrl }}"><span class="details-carrier-contact-person-column-firstName-span"></span></a></div>
                    <div class="details-carrier-contact-person-column-lastName"><p>Nazwisko</p><a href="/carrier/{{ id }}/contact/person?category=lastName&order={{ switchOrderBy }}{{ glueUrl }}"><span class="details-carrier-contact-person-column-lastName-span"></span></a></div>
                    <div class="details-carrier-contact-person-column-phone"><p>Telefon</p><a href="/carrier/{{ id }}/contact/person?category=phone&order={{ switchOrderBy }}{{ glueUrl }}"><span class="details-carrier-contact-person-column-phone-span"></span></a></div>
                    <div class="details-carrier-contact-person-column-id"><p>ID</p></div>
                    <div class="details-carrier-contact-person-column-email"><p>E-mail</p></div>
                    <div class="details-carrier-contact-person-column-mobile"><p>Mobile</p></div>
                    <div class="details-carrier-contact-person-column-actions"><p>Akcje</p></div>
                </div>
                <div class="grid-rows-details-carrier-contact-person">
                    {% for index, carrierContactPerson in carrierContactPersons %}
                        {% if carrierContactPerson is null %}

                        {% else %}
                            <div class="details-carrier-contact-person-row-firstName"><p>{{ carrierContactPerson.firstName }}</p></div>
                            <div class="details-carrier-contact-person-row-lastName"><p>{{ carrierContactPerson.lastName }}</p></div>
                            <div class="details-carrier-contact-person-row-phone"><p>{{ carrierContactPerson.phone }}</p></div>
                            <div class="details-carrier-contact-person-row-id"><p>{{ carrierContactPerson.id }}</p></div>
                            <div class="details-carrier-contact-person-row-email"><p>{{ carrierContactPerson.email }}</p></div>
                            <div class="details-carrier-contact-person-row-mobile"><p>{{ carrierContactPerson.mobile }}</p></div>
                            <div class="details-carrier-contact-person-row-actions" data-index="{{ index }}" data-id="{{ carrierContactPerson.id }}" data-carrier="{{ carrier.id }}">
                                <div class="submenu-drop-down-carrier-contact-person-list"></div>
                                <div class="dropdown-content-carrier-contact-person-list">
                                    <a href="" class="carrier-contact-person-link-edit">Edytuj<span class="dropdown-content-carrier-list-arrow-right"><i class="fas fa-chevron-right"></i></span></a>
                                    <form action="{{ path('carrier_contact_person_delete', {id: carrier.id}) }}" method="POST">
                                        <input type="hidden" id="carrier_contact_person" name="carrier_contact_person" value="{{ carrierContactPerson.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>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <script>
        const horizontalMenu = document.querySelector('.horizontal-menu-container');
        const contactPerson = document.querySelector('.contact-person');
        const mainContainer = document.querySelector(".element-main-container");
        const detailsBtnContainer = document.querySelector(".details-btn-container");
        const addNewCarrierContactPersonBtn = document.querySelector(".add-new-carrier-contact-person-btn");
        const btnContainerDetailsContactPerson = document.querySelector(".btn-container-add-carrier-contact-person");
        const textHeaderContactPerson = document.querySelector(".text-header-carrier-contact-person");
        const textHeaderContactPersonList = document.querySelector(".text-header-carrier-contact-person-list");
        const searchPanel = document.querySelector(".search-panel-carrier-contact-person-list");
        const contentSubmenu = document.querySelectorAll(".dropdown-content-carrier-contact-person-list");
        const deleteCarrierContactPersonLink = document.querySelectorAll(".link-delete-btn");
        const saveBtn = document.querySelector(".blue-custom-btn");
        const $form = document.getElementsByTagName('form')[0];

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

        // remove single carrier contact person by modal confirm
        for (const deleteLink of deleteCarrierContactPersonLink) {
            if (deleteLink !== undefined) {
                deleteLink.addEventListener('click', function (e) {
                    if (window.confirm("Czy usunąć osobę kontaktową przewoźnika?")) {
                    } else {
                        e.preventDefault();
                    }
                });
            }
        }

        const firstNameColumn = document.querySelector(".details-carrier-contact-person-column-firstName");
        const lastNameColumn = document.querySelector(".details-carrier-contact-person-column-lastName");
        const phoneColumn = document.querySelector(".details-carrier-contact-person-column-phone");
        const searchInput = document.querySelector(".search-input");
        const searchInputBtn = 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_carrier_contact_person');
            searchInputBtn.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_carrier_contact_person')) {
            closeSearch();
        }

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

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

        if (horizontalMenu.dataset.section == 'OS.KONTAKTOWE') {
            contactPerson.classList = "contact-person-active";
        }

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