{% extends 'base.html.twig' %}
{% block title %}List Carrier{% endblock %}
{% block body %}
   <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="horizontal-container-carrier-list">
           <div class="search-panel-carrier-list">
               <div class="search-form-wrapper-top-10">
                   <form action="{{ path('carrier_list') }}" method="get">
                       <input type="text" name="search_carrier" class="search-input" placeholder="Wyszukaj przewoźnika" required>
                       <button id="search" class="search-lupe-icon"></button>
                   </form>
               </div>
               <div class="btn-container-carrier-list">
                   <button id="add-carrier-btn" class="add-new-carrier-btn"><a>Dodaj przewoźnika</a></button>
               </div>
           </div>
           <div id="add-carrier-modal" class="modal">
               <div class="modal-content-carrier-list">
                   {{ include('carrier/new/new.html.twig') }}
               </div>
           </div>
           <div id="edit-carrier-modal" class="modal">
               <div class="modal-content-carrier-list">
                   {{ include('carrier/edit/form/edit.html.twig') }}
               </div>
           </div>
       </div>
       <div id="full-listing" class="container-carrier-list">
           <div class="grid-columns-carrier-list">
               <div class="carrier-column-shortName"><p>Nazwa</p><a href="/carrier/list/{{ page }}{{ glueUrl }}category=shortName&order={{ switchOrder }}"><span class="carrier-column-shortName-span"></span></a></div>
               <div class="carrier-column-nip"><p>NIP</p><a href="/carrier/list/{{ page }}{{ glueUrl }}category=nip&order={{ switchOrder }}"><span class="carrier-column-nip-span"></span></a></div>
               <div class="carrier-column-country"><p>Kraj</p><a href="/carrier/list/{{ page }}{{ glueUrl }}category=name&order={{ switchOrder }}"><span class="carrier-column-country-span"></span></a></div>
               <div class="carrier-column-city"><p>Miasto</p><a href="/carrier/list/{{ page }}{{ glueUrl }}category=city&order={{ switchOrder }}"><span class="carrier-column-city-span"></span></a></div>
               <div class="carrier-column-street"><p>Ulica</p><a href="/carrier/list/{{ page }}{{ glueUrl }}category=street&order={{ switchOrder }}"><span class="carrier-column-street-span"></span></a></div>
               <div class="carrier-column-post-code"><p>Kod Pocztowy</p><a href="/carrier/list/{{ page }}{{ glueUrl }}category=postalCode&order={{ switchOrder }}"><span class="carrier-column-post-code-span"></span></a></div>
               <div class="carrier-column-phone"><p>Telefon</p><a href="/carrier/list/{{ page }}{{ glueUrl }}category=phoneNumber&order={{ switchOrder }}"><span class="carrier-column-phone-span"></span></a></div>
               <div class="carrier-column-fax"><p>FAX</p><a href="/carrier/list/{{ page }}{{ glueUrl }}category=fax&order={{ switchOrder }}"><span class="carrier-column-fax-span"></span></a></div>
               <div class="carrier-column-actions"><p>Akcje</p></div>
           </div>
           {% if (carriers is not empty) %}
               <div  class="grid-rows-carrier-list">
                   {% for index, carrier in carriers %}
                       <div class="carrier-row-shortName"><p>{{ carrier.shortName }}</p></div>
                       <div class="carrier-row-nip"><p>{{ carrier.company.nip }}</p></div>
                       <div class="carrier-row-country"><p>{{ carrier.company.country }}</p></div>
                       <div class="carrier-row-city"><p>{{ carrier.company.city }}</p></div>
                       <div class="carrier-row-street"><p>{{ carrier.company.street }}</p></div>
                       <div class="carrier-row-post-code"><p>{{ carrier.company.getPostalCode }}</p></div>
                       <div class="carrier-row-phone"><p>{{ carrier.getPhoneNumber }}</p></div>
                       <div class="carrier-row-fax"><p>{{ carrier.fax }}</p></div>
                       <div class="carrier-row-actions" data-index="{{ index }}" data-id="{{ carrier.id }}" data-company="{{ carrier.company.id }}">


                           <div class="old" style="display: none;">
                               <div class="submenu-drop-down-carrier-list"></div>
                               <div class="dropdown-content-carrier-list">
                                   <a href="{{ path('carrier_details', {id: carrier.id}) }}" class="edit-carrier-details">
                                       Szczegóły
                                       <span class="dropdown-content-carrier-list-arrow-right"><i class="fas fa-chevron-right"></i></span>
                                   </a>
                                   <a href="" class="list-carrier-edit">
                                       Edytuj
                                       <span class="dropdown-content-carrier-list-arrow-right">
                                           <i class="fas fa-chevron-right"></i>
                                       </span>
                                   </a>
                                   <a href="{{ path('carrier_delete', {id: carrier.id}) }}" >
                                       Usuń
                                       <span class="dropdown-content-carrier-list-arrow-right">
                                           <i class="fas fa-chevron-right"></i>
                                       </span>
                                   </a>
                               </div>
                           </div>

                           <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('carrier_details', {id: carrier.id}) }}">
                                                   Szczegóły <i class="fas fa-chevron-right"></i>
                                               </a>
                                           </div>
                                           <div class="grid-modal-element">
                                               <a title="Edytuj" href="" class="list-carrier-edit">
                                                   Edytuj <i class="fas fa-chevron-right"></i>
                                               </a>
                                           </div>
                                           <div class="grid-modal-element">
                                               <a title="Usuń" href="{{ path('carrier_delete', {id: carrier.id}) }}" class="list-carrier-delete">
                                                   Usuń <i class="fas fa-chevron-right"></i>
                                               </a>
                                           </div>
                                       </div>
                                   </div>
                               </div>
                           </div>
                       </div>
                   {% endfor %}
               </div>
               <div class="pagination-container">
                   {% set SingleEntity = 'carrier' %}
                   {{ include('pagination/pagination.html.twig') }}
               </div>
           {% endif %}
       </div>
    </div>
    <script>
        let mainContainer = document.querySelector(".element-main-container");
        let addNewCarrierBtn = document.querySelector(".add-new-carrier-btn");
        let contentSubmenu = document.querySelectorAll(".dropdown-content-carrier-list");
        let deleteCarrierLink = document.querySelectorAll(".list-carrier-delete");

        document.querySelector(".container-carrier-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-carrier-modal").addEventListener('submit', function (e) {
            if (window.confirm("Czy zapisać zmodyfikowane dane przewoźnika?")) {
                $(this).attr('action', $(this).attr("action")).submit();
            } else {
                e.preventDefault();
            }
            window.location.href = "/carrier/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ąć przewoźnika?")) {
                    } else {
                        e.preventDefault();
                    }
                });
            }
        }

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

        const searchInput = document.querySelector(".search-input");
        const searchInputIcon = document.querySelector(".search-lupe-icon");
        const searchBtn = document.querySelector("#search");

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

            searchBtn.addEventListener('click', function (e) {
                e.preventDefault();
                searchInput.placeholder = "Wyszukaj przewoźnika";
                this.classList = "search-lupe-icon";
                window.location.href = "/carrier/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_carrier')) {
            closeSearch();
            if (categoryParam == 'shortName'
                || categoryParam == 'nip' || categoryParam == 'name'
                || categoryParam == 'city' || categoryParam == 'street'
                || categoryParam == 'postalCode' || categoryParam == 'phoneNumber'
                || categoryParam == 'fax'

            ) {
                if (orderParam == 'asc') {
                    urlQuery.get('category') == 'shortName' ? document.querySelector(".carrier-column-shortName")
                        .querySelector(".carrier-column-shortName-span").style.backgroundPosition = "right 6px" : '';

                    urlQuery.get('category') == 'name' ? document.querySelector(".carrier-column-country")
                        .querySelector(".carrier-column-country-span").style.backgroundPosition = "right 6px" : '';

                    urlQuery.get('category') == 'postalCode' ? document.querySelector(".carrier-column-" + urlQuery.get('category').replace("postalCode", "post-code") + "")
                        .querySelector(".carrier-column-" + urlQuery.get('category').replace("postalCode", "post-code") + "-span").style.backgroundPosition = "right 6px" : '';

                    urlQuery.get('category') == 'phoneNumber' ? document.querySelector(".carrier-column-" + urlQuery.get('category').replace("phoneNumber", "phone") + "")
                        .querySelector(".carrier-column-" + urlQuery.get('category').replace("phoneNumber", "phone") + "-span").style.backgroundPosition = "right 6px" : '';

                    document.querySelector(".carrier-column-" + urlQuery.get('category') + "").querySelector(".carrier-column-" + urlQuery.get('category') + "-span").style.backgroundPosition = "right 6px";
                } else {

                    urlQuery.get('category') == 'shortName' ? document.querySelector(".carrier-column-shortName")
                        .querySelector(".carrier-column-shortName-span").style.backgroundPosition = "right -6px" : '';

                    urlQuery.get('category') == 'name' ? document.querySelector(".carrier-column-country")
                        .querySelector(".carrier-column-country-span").style.backgroundPosition = "right -6px" : '';


                    urlQuery.get('category') == 'postalCode' ? document.querySelector(".carrier-column-" + urlQuery.get('category').replace("postalCode", "post-code") + "")
                        .querySelector(".carrier-column-" + urlQuery.get('category').replace("postalCode", "post-code") + "-span").style.backgroundPosition = "right -6px" : '';

                    urlQuery.get('category') == 'phoneNumber' ? document.querySelector(".carrier-column-" + urlQuery.get('category').replace("phoneNumber", "phone") + "")
                        .querySelector(".carrier-column-" + urlQuery.get('category').replace("phoneNumber", "phone") + "-span").style.backgroundPosition = "right -6px" : '';

                    document.querySelector(".carrier-column-" + urlQuery.get('category') + "").querySelector(".carrier-column-" + urlQuery.get('category') + "-span").style.backgroundPosition = "right -6px";
                }
            }
        } else {
            if (urlQuery.has('category')) {
                if (urlQuery.get('category') == 'shortName'
                    || urlQuery.get('category') == 'nip' || urlQuery.get('category') == 'name'
                    || urlQuery.get('category') == 'city' || urlQuery.get('category') == 'street'
                    || urlQuery.get('category') == 'postalCode' || urlQuery.get('category') == 'phoneNumber'
                    || urlQuery.get('category') == 'fax'
                ) {
                    if (orderParam == 'asc') {

                        urlQuery.get('category') == 'shortName' ? document.querySelector(".carrier-column-shortName")
                            .querySelector(".carrier-column-shortName-span").style.backgroundPosition = "right 6px" : '';

                        urlQuery.get('category') == 'name' ? document.querySelector(".carrier-column-country")
                            .querySelector(".carrier-column-country-span").style.backgroundPosition = "right 6px" : '';

                        urlQuery.get('category') == 'postalCode' ? document.querySelector(".carrier-column-" + urlQuery.get('category').replace("postalCode", "post-code") + "")
                            .querySelector(".carrier-column-" + urlQuery.get('category').replace("postalCode", "post-code") + "-span").style.backgroundPosition = "right 6px" : '';

                        urlQuery.get('category') == 'phoneNumber' ? document.querySelector(".carrier-column-" + urlQuery.get('category').replace("phoneNumber", "phone") + "")
                            .querySelector(".carrier-column-" + urlQuery.get('category').replace("phoneNumber", "phone") + "-span").style.backgroundPosition = "right 6px" : '';

                        document.querySelector(".carrier-column-" + urlQuery.get('category') + "").querySelector(".carrier-column-" + urlQuery.get('category') + "-span").style.backgroundPosition = "right 6px";
                    } else {

                        urlQuery.get('category') == 'shortName' ? document.querySelector(".carrier-column-shortName")
                            .querySelector(".carrier-column-shortName-span").style.backgroundPosition = "right -6px" : '';

                        urlQuery.get('category') == 'name' ? document.querySelector(".carrier-column-country")
                            .querySelector(".carrier-column-country-span").style.backgroundPosition = "right -6px" : '';

                        urlQuery.get('category') == 'postalCode' ? document.querySelector(".carrier-column-" + urlQuery.get('category').replace("postalCode", "post-code") + "")
                            .querySelector(".carrier-column-" + urlQuery.get('category').replace("postalCode", "post-code") + "-span").style.backgroundPosition = "right -6px" : '';

                        urlQuery.get('category') == 'phoneNumber' ? document.querySelector(".carrier-column-" + urlQuery.get('category').replace("phoneNumber", "phone") + "")
                            .querySelector(".carrier-column-" + urlQuery.get('category').replace("phoneNumber", "phone") + "-span").style.backgroundPosition = "right -6px" : '';

                        document.querySelector(".carrier-column-" + urlQuery.get('category') + "").querySelector(".carrier-column-" + urlQuery.get('category') + "-span").style.backgroundPosition = "right -6px";
                    }
                }
            }
        }

    </script>
{% endblock %}