{% extends 'base.html.twig' %}
{% block metaTitle %}{{ meta.title|default }}{% endblock %}
{% block metaDescription %}{{ meta.description|default }}{% endblock %}
{% block stylesheets %}
{% endblock %}
{% block body %}
        <div class="root_container">
            {# SOLUTİONS MAIN SECTION#}
            {% set solutionsPage = getPages({'alias': 'Çözümler'}) %}
            {% set solutionsSection = getPageSections({'alias': 'İntro Kısmı', 'pageId': solutionsPage.id}) %}
            {% set mainpageSolutionsIntroLang = getPageSectionLangLocale({'section': solutionsSection, 'locale': app.request.locale}) %}
            <div class="root_header support_header_root">
                <div class="support_header_write">
                    <h5>{{ mainpageSolutionsIntroLang.shortTitle|default }}</h5>
                    <h2 class="animate_start" data-params='{"opacity": [0, 1], "translateX": [100, 0], "duration": 1000, "easing": "easeInOutQuad"}'>{{ mainpageSolutionsIntroLang.title|default }}</h2>
                    <p>{{ mainpageSolutionsIntroLang.text|default|raw }}</p>
                </div>
            </div>
            <div class="root_body">
                <div class="root_body_pad">
                    {% set length = solutions|length %}
                    {% set half = (length >= 2) ? (length // 2) : length %}
                    <div class="sloutions_boxs">
                        <div class="solution_boxs_left">
                            {% for solution in solutions[:half] %}
                                {% set solutionLang = getSolutionsLangs({'Solutions': solution, 'lang': app.request.locale}) %}
                                {% set solutionImage = getSolutionsImages({'Solutions': solution}) %}
                                {% set pdfDir = getParameters("page_solutions_pdf_dir") %}
                                {% set pdfFile = attribute(solution, 'pdf' ~ app.request.locale|capitalize) %}
                                {% set pdfPath = pdfFile ? asset(pdfDir ~ pdfFile) : null %}
                                <div class="solution_box animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 500, "easing": "easeInOutQuad"}'>
                                    <div class="icon">
                                        <div class="icon_border">
                                            {% set dir = getParameters("page_solutions_solutions_dir") %}
                                            {% set imageDir = solutionImage is defined and solutionImage.name is defined ? (dir ~ solutionImage.name) : 'assets/img/about-us/iccon-1.png' %}

                                            <img src="{{ asset(imageDir) }}" alt="{{ solutionLang.alt|default }}">
                                        </div>
                                    </div>
                                    <div class="header">
                                        <h4>{{ solutionLang.title|default }}</h4>
                                        <span>{{ solutionLang.description|default|raw }}</span>
                                    </div>
                                    <div class="button">
                                        <div class="button_border">
                                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                                <g id="SVGRepo_iconCarrier">
                                                    <path d="M19 5L12.7071 11.2929C12.3166 11.6834 11.6834 11.6834 11.2929 11.2929L5 5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    <path d="M19 13L12.7071 19.2929C12.3166 19.6834 11.6834 19.6834 11.2929 19.2929L5 13" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>
                                    {% if pdfPath is not empty %}
                                        <a href="{{ pdfPath }}" class="link" target="_blank" {{ pdfPath ? '' : 'onclick="return false;"' }}>review documents</a>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                        <div class="solution_boxs_right">
                            {% for solution in solutions[half:] %}
                                {% set solutionLang = getSolutionsLangs({'Solutions': solution, 'lang': app.request.locale}) %}
                                {% set solutionImage = getSolutionsImages({'Solutions': solution}) %}
                                {% set pdfDir = getParameters("page_solutions_pdf_dir") %}
                                {% set pdfFile = attribute(solution, 'pdf' ~ app.request.locale|capitalize) %}
                                {% set pdfPath = pdfFile ? asset(pdfDir ~ pdfFile) : null %}
                                <div class="solution_box animate_start" data-params='{"opacity": [0, 1], "translateY": [50, 0], "duration": 500, "easing": "easeInOutQuad"}'>
                                    <div class="icon">
                                        <div class="icon_border">
                                            {% set dir = getParameters("page_solutions_solutions_dir") %}
                                            {% set imageDir = solutionImage is defined and solutionImage.name is defined ? (dir ~ solutionImage.name) : 'assets/img/about-us/iccon-1.png' %}

                                            <img src="{{ asset(imageDir) }}" alt="{{ solutionLang.alt|default }}">
                                        </div>
                                    </div>
                                    <div class="header">
                                        <h4>{{ solutionLang.title|default }}</h4>
                                        <span>
                                            {{ solutionLang.description|default|raw }}
                                            <br/>
                                            {{ solutionLang.descriptionDetail|default|raw }}
                                        </span>

                                    </div>
                                    <div class="button">
                                        <div class="button_border">
                                            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                                                <g id="SVGRepo_iconCarrier">
                                                    <path d="M19 5L12.7071 11.2929C12.3166 11.6834 11.6834 11.6834 11.2929 11.2929L5 5" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                    <path d="M19 13L12.7071 19.2929C12.3166 19.6834 11.6834 19.6834 11.2929 19.2929L5 13" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                                </g>
                                            </svg>
                                        </div>
                                    </div>
                                    {% if pdfPath is not empty %}
                                        <a href="{{ pdfPath }}" class="link" target="_blank" {{ pdfPath ? '' : 'onclick="return false;"' }}>review documents</a>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% include "components/innerPageFooter.html.twig" %}
        </div>
{% endblock %}
{% block javascripts_bottom %}
    <?php include './components/scripts.php' ?>
    <script src="{{ asset('assets/js/navbar.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>

    <script>
        $(document).ready(function() {
            // $('.solution_box .button_border').on('click', function() {
            //     $('.solution_box .header span')
            //         .not($(this).closest('.solution_box').find('.header span'))
            //         .slideUp(function() {
            //             $(this).css('display', '');
            //         });
            //     $(this).closest('.solution_box').find('.header span').stop(true, true).slideToggle(function() {
            //         if ($(this).is(':visible')) {
            //             $(this).css('display', 'inline-block');
            //         }
            //     });
            //
            //     $('.solution_box .link')
            //         .not($(this).closest('.solution_box').find('.link'))
            //         .slideUp(function() {
            //             $(this).css('display', '');
            //         });
            //     $(this).closest('.solution_box').find('.link').stop(true, true).slideToggle(function() {
            //         if ($(this).is(':visible')) {
            //             $(this).css('display', 'inline-block');
            //         }
            //     });
            // });

            $('.solution_box').click(function() {
                $('.solution_box .button_border svg').removeClass('rotate180deg');
                $(this).find(".button_border svg").toggleClass('rotate180deg');
                $('.solution_box .header span')
                    .not($(this).closest('.solution_box').find('.header span'))
                    .slideUp(function() {
                        $(this).css('display', '');
                    });
                $(this).closest('.solution_box').find('.header span').stop(true, true).slideToggle(function() {
                    if ($(this).is(':visible')) {
                        $(this).css('display', 'inline-block');
                    }
                });

                $('.solution_box .link')
                    .not($(this).closest('.solution_box').find('.link'))
                    .slideUp(function() {
                        $(this).css('display', '');
                    });
                $(this).closest('.solution_box').find('.link').stop(true, true).slideToggle(function() {
                    if ($(this).is(':visible')) {
                        $(this).css('display', 'inline-block');
                    }
                });
            });
        });
    </script>
{% endblock %}