{% extends 'main_base.html.twig' %}
{% block title %}{{ sayfa ? sayfa.diller|first.title|default|raw }}{% endblock %}
{% block description %}{{ sayfa ? sayfa.diller|first.title|default|raw }}{% endblock %}
{% block pageStyle %}
    
    <style>
        #loader-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #40e0d0 !important;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: top 1s ease-out;
            column-gap: 1%;
        }

        #loader {
            width: 100px;
            height: 100px;
        }

        #loader-container img:first-child {
            width: 3%;
            height: auto;
        }

        #loader-container img {
            width: 15%;
            height: auto;
        }

        @media (max-width: 992px) {
            #loader-container img:first-child {
                width: 8%;
                height: auto;
            }

            #loader-container img {
                width: 40%;
                height: auto;
            }
        }

        #loader-container.hidden {
            transition: 0.6s ease-in;
            opacity: 0;
            visibility: hidden;
        }

    </style>

    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css"/>

    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet"  href="{{ asset('assets/main/css/form.css') }}"/>

{% endblock %}
{% block content %}
    <div id="loader-container">
        <img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Loading...">
        <img loading="lazy" src="{{ asset('assets/main/img/dentmaxLogotxt.svg') }}" alt="Loading...">
    </div>
    <header>
        <div class="header-img">
            {% if sayfa is not null and sayfa.banner is not null %}
            <img loading="lazy" src="{{ asset('uploads/tedavi/fiyat/banner/'~sayfa.banner) }}" alt="Dentmax Basından">
            {% else %}
            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-basindan.webp') }}" alt="Dentmax Basından">
            {% endif %}
        </div>
        <div class="header-content">
            <h1 data-aos="fade-right" data-aos-duration="800" data-aos-delay="200"></h1>
            {#<p data-aos="fade-in" data-aos-duration="800" data-aos-delay="500">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>#}
        </div>
        <div class="header-invisalign">
            <img loading="lazy" src="{{ asset('assets/main/img/icons/dentMax.webp') }}" alt="Dentmax invisailgn"
                 data-aos="fade-in"
                 data-aos-duration="800"
                 data-aos-delay="600">
        </div>
        <div class="header-document-path">
            <strong class="path-title">DENTMAX FİYATLAR</strong>
            <div class="content-router-links-path">
                <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }} /</a>
                <a href="{{ path('app_main_tedavi_fiyatlari') }}">Tedavi fiyatları/</a>
                <a href="javascript:void(0)"></a>
            </div>
        </div>
    </header>
    {% block container %}
        <div class="wrapper">
            {% block navbar %}
                {{ render(controller('App\\Controller\\Main\\DefaultController::header', {request: app.request})) }}
            {% endblock %}

            <div class="content">
                <div class="global-content">
                    <div class="content-router">
                        <div class="content-router-links">
                            <ul>
                                {% for index in entity %}
                                    {% set fiyatDil = index.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                                    <li><a href="javascript:void(0)">-{{ fiyatDil.baslik }}</a></li>
                                {% endfor %}

                            </ul>
                        </div>

                        <div class="content-router-contact-wrapper">
                            <div class="content-router-contact" id="content-router-contact">
                                {% include 'main/default/contact-wrapper.html.twig' %}
                            </div>
                        </div>
                    </div>

                    <div class="content-wrapper">
                        <div class="content-wrapper-links-path">
                            <a href="index">Anasayfa / </a>
                            <a href="tedaviler">Tedaviler / </a>
                            <a href="tedaviler-alt-kategori">Gülüş Tasarımı Bileşenlerimiz / </a>
                            <a href="tedaviler-alt-kategori">Beyaz Estetik / </a>
                            <a href="tedavi-detay">Diş Beyazlatma</a>
                        </div>

                        <div class="treatment-items" data-aos="fade-right" data-aos-duration="800" data-aos-delay="500">
                            <div class="treatment-items-header">
                                <h2>Dentmax Tedavi Fiyat Listesi</h2>
                            </div>
                            {% for fiyat in entity %}
                                {% set fiyatDil = fiyat.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}

                                <div class="treatment-item">
                                    <div class="treatment-item-header">
                                        <h2>{{ fiyatDil.baslik }}</h2>
                                    </div>
                                    <div class="treatment-item-content">
                                        <div class="treatment-price-text-header">
                                            <h3>TEŞHİS VE TEDAVİ PLANLAMASI</h3>
                                            <h3>TL FİYAT ARALIĞI</h3>
                                            <h3>TEDAVİ SAYFASI</h3>
                                        </div>
                                        {% for fkategori in fiyat.kategori %}
                                            {% set fkategoriDil = fkategori.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                                            {% set tedavi = fkategori.tedavi.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}

                                            <div class="treatment-price-text">
                                                <h3>{{ fkategoriDil.baslik }}</h3>
                                                <h3 class="treatment-price">{{ fkategoriDil.ucret }}</h3>
                                                <h3 class="treatment-link"><a href="{{ path('app_main_tedavi', {'link': tedavi.link}) }}">Tedavi İçin Tıkla</a></h3>
                                            </div>
                                        {% endfor %}

                                    </div>
                                </div>
                            {% endfor %}

                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}

{% endblock %}

{% block pageScript %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="{{ asset('assets/main/js/validation.js') }}" type="text/javascript"></script>
    <script>
        AOS.init({
            once: true,
        });
        var isAnimating = false;

        $('.treatment-item-content').hide();
        $(".treatment-item-header").click(function () {
            if (isAnimating) return;

            var $menuContent = $(this).siblings(".treatment-item-content");

            isAnimating = true;

            $menuContent.slideToggle(300, function () {
                isAnimating = false;
            });

            $(".treatment-item-content").not($menuContent).slideUp(300);
        });
    </script>


{% endblock %}