{% extends 'main_base.html.twig' %}
{# {% block title %}{{ sayfa.title }}{% endblock %} #}
{# {% block description %}{{ sayfa.description }}{% 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">
{% 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>
    {#    {% set banner = sayfa.blog.banner %} #}
    {#    {% set bannerPath = asset('uploads/blog/banner/') %} #}
    {#    {% if banner is null %} #}
    {#        {% set banner = 'blog-banner.png' %} #}
    {#        {% set bannerPath = asset('assets/main/img/') %} #}
    {#    {% endif %} #}

    <header>
        <div class="header-img">
            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-basindan.webp') }}" alt="Dentmax Basından">
        </div>
        <div class="header-content">
            <h1 data-aos="fade-right" data-aos-duration="800" data-aos-delay="200">{{ 'online_muayene'|trans }}</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">{{ 'online_hizmetler'|trans({'%starttag%': '', '%endtag%': ''})|upper }}</strong>
            <div class="content-router-links-path">
                <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }} /</a>
                <a href="javascript:void(0)">{{ 'online_hizmetler'|trans({'%starttag%': '', '%endtag%': ''}) }} /</a>
                <a href="javascript:void(0)">{{ 'online_muayene'|trans }}</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-wrapper content-wrapper-document">
                        <div class="content-wrapper-links-path">
                            <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }} /</a>
                            <a href="javascript:void(0)">{{ 'online_hizmetler'|trans({'%starttag%': '', '%endtag%': ''}) }}
                                /</a>
                            <a href="javascript:void(0)">{{ 'online_muayene'|trans }}</a>
                        </div>
                        <div class="online-appointment-wrapper">
                            <!-- User Info -->
                            <div class="online-appointment-content online-appointment-content-evaluation">
                                <!-- Hasta Bilgileri -->
                                <form class="online-appointment-line" method="POST" id="onlineReviewForm">
                                    <div class="online-appointment-line-header online-appointment-line-header-info"
                                         data-aos="fade-right" data-aos-duration="1000" data-aos-delay=" 100">
                                        <h2>{{ 'hasta_bilgileri'|trans }}</h2>
                                        <p>{{ 'online_muayene_form_bilgi'|trans }}</p>
                                    </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>{{ 'hasta_hakkinda'|trans }} <span>*</span></h3>
                                        </div>
                                        <div class="online-appointment-line-inputs">
                                            <input type="text" placeholder="{{ 'adiniz'|trans~' '~'soyadiniz'|trans }}"
                                                   data-aos="fade-right"
                                                   data-aos-duration="1000" data-aos-delay="400">
                                            <input type="tel" id="phone1" placeholder="{{ 'telefon_numaraniz'|trans }}"
                                                   data-aos="fade-right" data-aos-duration="1000" data-aos-delay="500">
                                            <input type="tel" id="phone2" placeholder="{{ 'iletisim_numaraniz'|trans }}"
                                                   data-aos="fade-right" data-aos-duration="1000" data-aos-delay="600">
                                        </div>
                                    </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>{{ 'goruntu_resimleri'|trans }} <span>*</span></h3>
                                        </div>
                                        <div class="online-appointment-line-inputs">
                                            <div></div>
                                            <label class="choose-file choose-file-face"
                                                   for="online-appointment-choose-file-1-input"
                                                   data-aos="fade-right" data-aos-duration="1000" data-aos-delay="700">
                                                <span>
                                                    {{ 'dosya_secin'|trans }} (jpg,png,pdf)
                                                    <small>{{ 'foto_tam_yuz_bilgi'|trans }}</small>
                                                </span>
                                                <input type="file" id="online-appointment-choose-file-1-input">
                                                <i class="fa-solid fa-arrow-up-from-bracket"></i>
                                            </label>
                                            <label class="choose-file choose-file-smile"
                                                   for="online-appointment-choose-file-2-input" data-aos="fade-right"
                                                   data-aos-duration="1000" data-aos-delay="800">
                                                <span>
                                                    {{ 'dosya_secin'|trans }} (jpg,png,pdf)
                                                    <small>{{ 'foto_gulumseme_bilgi'|trans }}</small>
                                                </span>
                                                <input type="file" id="online-appointment-choose-file-2-input">
                                                <i class="fa-solid fa-arrow-up-from-bracket"></i>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="online-appointment-line-info">
                                        <div class="online-appointment-line-info-text">
                                            <p data-aos="fade-left" data-aos-duration="700" data-aos-delay="400">
                                                <span>*</span> {{ 'dosya_yukleme_bilgi'|trans }}
                                            </p>
                                            <p data-aos="fade-left" data-aos-duration="700" data-aos-delay="500">
                                                <span>*</span> {{ 'dosya_yukleme_bilgi2'|trans }}
                                            </p>
                                        </div>

                                        <div class="online-appointment-line-info-kvkk">
                                            <div class="online-appointment-line-info-kvkk-text" data-aos="fade-left"
                                                 data-aos-duration="700" data-aos-delay="600">
                                                <input type="checkbox" id="online-appointment-kvkk">
                                                <label for="online-appointment-kvkk">
                                                    {{ 'online_muayene_gizlilik_onay'|trans|raw }} *
                                                </label>
                                            </div>
                                            <div class="online-appointment-line-info-kvpi-text" data-aos="fade-left"
                                                 data-aos-duration="700" data-aos-delay="700">
                                                <input type="checkbox" id="online-appointment-kvpi">
                                                <label for="online-appointment-kvpi">
                                                    {{ 'online_muayene_veri_onay'|trans }}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="online-appointment-send-btn" data-aos="fade-left"
                                         data-aos-duration="800"
                                         data-aos-delay="900">
                                        <div class="g-recaptcha" data-sitekey="6LckRxApAAAAAAeKbeJLkQh-kGZjCKn56dnA3kU5"
                                             data-aos="fade-left" data-aos-duration="700" data-aos-delay="800"></div>
                                        <button type="button"
                                                class="turquoise-button muayene-send">{{ 'gonder'|trans|upper }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="online-appointment-dental-img">
                            <img loading="lazy" src="{{ asset('assets/main/img/dentmax-dis-sagligi.png') }}" alt="Dentmax Diş">
                        </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="{{ asset('assets/main/js/card.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
        AOS.init({once: true})
        document.getElementById('phone1').addEventListener('input', function (e) {
            this.value = this.value.replace(/[^0-9]/g, '');
        });

        document.getElementById('phone2').addEventListener('input', function (e) {
            this.value = this.value.replace(/[^0-9]/g, '');
        });
    </script>
{% endblock %}