{% extends 'main_base.html.twig' %}
{% set entityDil = entity.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
{% set unvanDil = entity.unvan.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}

{% block title %}{{ entityDil.title|default }}{% endblock %}
{% block description %}{{ entityDil.description|default }}{% endblock %}

{% block pageMeta %}
    {% if entity.resim %}
        <link rel="image_src" href="{{ asset('uploads/ekip/'~entity.resim) }}"/>
        <meta property="og:image" content="{{ asset('uploads/ekip/'~entity.resim) }}">
        <meta name="twitter:image" content="{{ asset('uploads/ekip/'~entity.resim) }}">
        <link rel="preload" as="image" href="{{ asset('uploads/ekip/'~entity.resim) }}">
    {% endif %}
{% 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;
        }

        .iti__selected-dial-code {
            color: #fff
        }

        .iti__selected-country {
            padding-left: 25px !important;
        }

    </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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet">
    <link rel="stylesheet"  href="{{ asset('assets/main/css/theme.min.css') }}">
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/intl-tel-input@24.4.0/build/css/intlTelInput.css">
    <link rel="stylesheet"  href="{{ asset('assets/main/css/online-muayene.min.css') }}">
    <link rel="stylesheet"  href="{{ asset('assets/main/css/form.css') }}"/>

    <style>
        nav {
            background: none !important;
            border: none !important;
        }

        .mobile-dropdown-menu {
            top: 70px;
            border: none;
            display: block;

        }
    </style>
{% 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 entities.image %}
                <img loading="lazy" src="{{ asset('uploads/yonetim/image/' ~ entities.image) }}" 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">{{ entityDil.unvanKisa|default~' '~entity.ad~' '~entity.soyad }}</h1>
            <p data-aos="fade-in" data-aos-duration="800" data-aos-delay="500">{{ unvanDil.baslik|default }}</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">{{ 'kadromuz'|trans|upper }}</strong>
            <div class="content-router-links-path">
                <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }} /</a>
                <a href="{{ path('app_main_kadromuz') }}">{{ 'kadromuz'|trans }} /</a>
                <a href="javascript:void(0)">  {{ entityDil.unvanKisa|default~' '~entity.ad~' '~entity.soyad }}</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 uye in departman.ekipler %}
                                    {% set asideuyeDil = uye.diller|first %}
                                    {% set asideunvanDil = uye.unvan.diller|first %}
                                    <li><a href="{{ path('app_main_kadro_detay', {'link': uye.link}) }}" class="d-flex flex-column">{{ asideuyeDil.unvanKisa|default~' '~ uye.ad~' '~uye.soyad }} <span>({{ asideunvanDil.baslik|default }})</span></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="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }} /</a>
                            <a href="{{ path('app_main_kadromuz') }}">{{ 'kadromuz'|trans }} /</a>
                            <a href="javascript:void(0)">
                                {{ entityDil.unvanKisa|default~' '~entity.ad~' '~entity.soyad }}</a>
                        </div>

                        <div class="our-staff-wrapper">
                            <div class="our-staff-content">
                                <div class="our-staff-content-info">
                                    <div class="our-staff-item">
                                        <div class="our-staff-item-box" data-aos="fade-in" data-aos-duration="1300"
                                             data-aos-delay="300">
                                            <div class="our-staff-box-text">
                                                <!-- <h3>;)DENTMAX</h3> -->
                                                <h3>
                                                    <img loading="lazy" src="{{ asset('assets/main/img/logoSmile.png') }}" alt="Dentmax">
                                                    DENTMAX
                                                </h3>
                                            </div>
                                            <div class="our-staff-item-box-image">
                                                {% if entity.resim %}
                                                    <img loading="lazy" src="{{ asset('uploads/ekip/'~entity.resim) }}" alt="">
                                                {% endif %}
                                                <div class="staff-item-box-social staff-detail-item-box-social">
                                                    {% for social in entity.user.profile.sosyalMedyalar|default %}
                                                    <a href={{ social.link }}>
                                                        {% if social.tip == 'instagram' %}
                                                        <img loading="lazy" src="{{ asset('assets/main/img/insta.svg') }}"
                                                             alt="Dentmax">
                                                        {% elseif social.tip == 'facebook' %}
                                                            <img loading="lazy" src="{{ asset('assets/main/img/face.svg') }}"
                                                                 alt="Dentmax">
                                                        {% elseif social.tip == 'linkedin' %}
                                                            <img loading="lazy" src="{{ asset('assets/main/img/linkedin.png') }}"
                                                                 alt="Dentmax">
                                                        {% endif %}
                                                    </a>
                                                    {% endfor %}
                                                </div>
                                                <div class="our-staff-item-box-image-text">
                                                    <div class="our-staff-item-box-image-text-name">
                                                        {{ entity.ad ~' '~ entity.soyad }}
                                                    </div>
                                                    <div class="our-staff-item-box-image-text-header">
                                                        {{ unvanDil.baslik|default }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="our-staff-item-text">
                                            <div class="our-staff-name">{{ entityDil.unvanKisa|default~' '~entity.ad~' '~entity.soyad }}</div>
                                            <h2 class="our-staff-title">{{ unvanDil.baslik|default }}</h2>
                                        </div>
                                    </div>
                                    <div class="education">
                                        {% for kariyer in entity.kariyerler %}
                                            {% set kariyerDil = kariyer.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                                            <div class="education-text">
                                                <h3>{{ kariyerDil.baslik|default }}</h3>
                                                <p data-aos="fade-in" data-aos-duration="600" data-aos-delay="200">
                                                    {{ kariyerDil.metin|default }}</p>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                <!-- <div class="our-staff-content-appointment"></div> -->
                            </div>
                            <div class="our-staff-content-text-wrapper">
                                <div class="our-staff-content-header-items-wrapper" data-aos="fade-in"
                                     data-aos-duration="1000" data-aos-delay="600">
                                    <div class="our-staff-content-text-items-line">
                                        <div class="our-staff-content-text-items-line-color"></div>
                                    </div>
                                    <div class="our-staff-content-header-items">
                                        <div class="our-staff-content-header-item active" onmouseover="toggleActive(1)">
                                            <div class="our-staff-content-text-header">{{ 'ozgecmis'|trans|upper }}</div>
                                        </div>
                                        {% if entity.user %}
                                            <div class="our-staff-content-header-item">
                                                <div class="our-staff-content-text-header" onmouseover="toggleActive(2)">{{ 'makaleler'|trans|upper }}</div>
                                            </div>
                                            <div class="our-staff-content-header-item">
                                                <div class="our-staff-content-text-header" onmouseover="toggleActive(3)">{{ 'videolar'|trans|upper }}</div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                                <div class="our-staff-content-text-items" data-aos="fade-in"
                                     data-aos-duration="1000"
                                     data-aos-delay="400">
                                    {% if entityDil.metin is not empty %}
                                        <div class="our-staff-content-text-item active">{{ entityDil.metin|default|raw }}</div>
                                    {% endif %}
                                    {% if entity.user %}
                                        {% if entity.user.bloglar is not empty %}
                                            <!-- Makaleler -->
                                            <div class="our-staff-content-text-item">
                                                <div class="staff-articles">
                                                    {% for blog in entity.user.bloglar %}
                                                        {% set blogDil = blog.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
                                                        <a href="{{ path('app_main_blog_detay', {'link': blogDil.link|default('#')}) }}" class="staff-article aos-init aos-animate"
                                                           data-aos="fade-up" data-aos-duration="700" data-aos-delay="100">
                                                            <div class="staff-article-image-wrapper">
                                                                <div class="staff-article-image">
                                                                    {% if blog.thumbnail %}
                                                                        <img loading="lazy" src="{{ asset('uploads/blog/'~blog.thumbnail) }}"
                                                                             alt="Dentmax Basından">
                                                                    {% else %}
                                                                        <img loading="lazy" src="{{ asset('assets/main/img/dentmax-muayene-2.jpg') }}"
                                                                             alt="Dentmax Basından">
                                                                    {% endif %}
                                                                </div>
                                                                <div class="staff-article-image-icon">
                                                                    <img loading="lazy" src="{{ asset('assets/main/img/dentmax-blog-icon.svg') }}"
                                                                         alt="Dentmax">
                                                                </div>
                                                            </div>
                                                            <div class="staff-article-text">
                                                                <h3>{{ blogDil.baslik|default }}</h3>
                                                                <p>{{ blogDil.altBaslik|default }}</p>
                                                            </div>
                                                        </a>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endif %}
                                        {% if entity.user.videolar is not empty %}
                                            <!-- Videolar -->
                                            <div class="our-staff-content-text-item">
                                                <div class="staff-articles">
                                                    {% for video in entity.user.videolar %}
                                                        <a href="#" class="staff-article aos-init aos-animate" data-aos="fade-up"
                                                           data-aos-duration="700" data-aos-delay="100">
                                                            <div class="staff-article-image-wrapper">
                                                                <div class="staff-article-image">
                                                                    {{ video.video|default|raw }}
                                                                </div>
                                                            </div>
                                                        </a>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endif %}

                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <!-- Online Randevu Al -->
                        <div class="staff-online-appointment-line online-appointment-line">
                            <div class="online-appointment-line-header" data-aos="fade-right" data-aos-duration="1000"
                                 data-aos-delay="100">
                                <h4 class="online-appointment-title">{{ 'online_randevu_al'|trans }}</h4>
                            </div>
                            {#<div class="online-appointment-line-text-wrapper">
                                <div class="online-appointment-line-text" data-aos="fade-right" data-aos-duration="1000"
                                     data-aos-delay="300">
                                    <h3>{{ 'randevu'|trans({'%brand%': 'Dentmax'}) }} <span>*</span></h3>
                                </div>
                                <div class="online-appointment-line-inputs">
                                    <div class="talep-edilen-tedavi" data-aos="fade-right" data-aos-duration="1000"
                                         data-aos-delay="300">
                                        <select class="select-tedavi" name="klinik_sec" id="klinik_sec">
                                            <option selected="" disabled="">{{ 'klinik_seciniz'|trans }}</option>
                                            {% for  in  %}

                                            <option value="disImplantTedavisi">İstanbul</option>
                                            {% endfor %}

                                            <option value="estetikDisHekimligi">Balıkesir</option>
                                        </select>
                                        <i class="talep-edilen-tedavi-icon bx bx-sm bx-down-arrow-alt"></i>
                                    </div>

                                    <div class="talep-edilen-tedavi" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="400">
                                        <select class="select-tedavi" name="doktor_sec" id="doktor_sec">
                                            <option selected="" disabled="">{{ 'doktor_seciniz'|trans }}</option>
                                            <option value="FatihKahraman">Fatik Kahraman</option>
                                            <option value="DtAyseNurKahraman">Dt. Ayşe Nur Kahraman</option>
                                            <option value="DtCigdemKahraman">Dt. Çiğdem Kahraman</option>
                                            <option value="UzmDrSedanurErogluEfe">Uzm. Dr. Sedanur Eroglu Efe</option>
                                            <option value="DtSinemGümüş">Dt. Sinem Gümüş</option>
                                            <option value="DtİlaydaEktik">Dt. İlayda Ektik</option>
                                            <option value="GulnurSivri">Gülnur Sivri</option>
                                            <option value="MesureCelik">Gülnur Sivri</option>
                                        </select>
                                        <!-- <i class="talep-edilen-tedavi-icon bx bx-chevron-down"></i> -->
                                        <i class="talep-edilen-tedavi-icon bx bx-sm bx-down-arrow-alt "></i>
                                    </div>
                                    <div class="randevu-degisikligi-icin" data-aos="fade-right" data-aos-duration="1000"
                                         data-aos-delay="500">
                                        <span>{{ 'randevu_tarihi_seciniz'|trans }}</span>
                                    </div>
                                </div>
                            </div>#}
                            {#<div class="staff-online-appointment-line-datepicker-wrapper online-appointment-line-datepicker-wrapper">
                                <div class="online-appointment-line-datepicker">
                                    <div id="picker"></div>
                                    <div class="picker-date-and-time">
                                        <p><h4>{{ 'secili_tarih'|trans }}:</h4> <span id="selected-date"></span></p>
                                        <p><h4>{{ 'secili_zaman'|trans }}:</h4> <span id="selected-time"></span></p>
                                    </div>
                                </div>
                            </div>#}
                        </div>
                        {% include 'main/default/online-randevu-component.html.twig' %}

                    </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://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.8.1/vanilla-tilt.min.js"></script>
    <script src="{{ asset('assets/main/js/app.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/main/js/validation.js') }}" type="text/javascript"></script>
    {% include 'main/default/online-randevu-settings.twig' %}

    <script>
        const divs = document.querySelectorAll(".our-staff-content-text-item");
        const companyLogos = document.querySelectorAll(".our-staff-content-header-item");
        const scrollForSwiper = document.querySelector(".our-staff-content-text-items-line-color");
        console.log(divs);
        let elements = 0;

        function toggleActive(clickedIndex) {
            elements = 0;
            const realClickedIndex = clickedIndex - 1;
            divs.forEach((div, index) => {
                if (index === realClickedIndex) {
                    div.classList.add("active");
                } else {
                    div.classList.remove("active");
                }
            });

            companyLogos.forEach((div, index) => {
                if (index === realClickedIndex) {
                    div.classList.add("active");
                } else {
                    div.classList.remove("active");
                }
            });

            // companyLogos.forEach((div, index) => {
            //   if (index === realClickedIndex) {
            //     div.classList.add("active-blur");
            //   } else {
            //     div.classList.remove("active-blur");
            //   }
            // });

            companyLogos.forEach((logo) => {
                elements += 1;
            });

            let leftValue = 100 / elements;

            if(window.innerWidth < 992) {
                switch (clickedIndex) {
                    case 1:
                        scrollForSwiper.style.top = `${leftValue * 0}%`;
                        break;
                    case 2:
                        scrollForSwiper.style.top = `${leftValue * 1}%`;
                        break;
                    case 3:
                        scrollForSwiper.style.top = `${leftValue * 2}%`;
                        break;
                    case 4:
                        scrollForSwiper.style.top = `${leftValue * 3}%`;
                        break;
                    case 5:
                        scrollForSwiper.style.top = `${leftValue * 4}%`;
                        break;

                    default:
                        break;
                }
            } else {
                switch (clickedIndex) {
                    case 1:
                        scrollForSwiper.style.left = `${leftValue * 0}%`;
                        break;
                    case 2:
                        scrollForSwiper.style.left = `${leftValue * 1}%`;
                        break;
                    case 3:
                        scrollForSwiper.style.left = `${leftValue * 2}%`;
                        break;
                    case 4:
                        scrollForSwiper.style.left = `${leftValue * 3}%`;
                        break;
                    case 5:
                        scrollForSwiper.style.left = `${leftValue * 4}%`;
                        break;

                    default:
                        break;
                }
            }
        }

    </script>
{% endblock %}