{% extends 'main/base.html.twig' %}
{% set pageCode = "online-appointment" %}
{# {% block title %}{{ sayfa.title }}{% endblock %} #}
{# {% block description %}{{ sayfa.description }}{% endblock %} #}
{% block pageMeta %}
    {% for lang in get_diller() %}
        <link rel="alternate" hreflang="{{ lang|default }}" href="{{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': lang}))) }}">
    {% endfor %}

    <link rel="canonical" href="{{ absolute_url(path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge({'_locale': app.request.locale}))) }}">

{% endblock %}
{% block pageStyle %}

    <style>
        .iti__selected-dial-code {
            color: #fff
        }

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


    </style>
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet">
    <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/components/online-appointment.css') }}">
    <style>
        nav {
            background: none !important;
            border: none !important;
        }

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

        }
    </style>
{% endblock %}
{% block content %}
    {#    {% 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_randevu'|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('build/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 role="button" tabindex="0">{{ 'online_hizmetler'|trans({'%starttag%': '', '%endtag%': ''}) }}
                    /</a>
                <a role="button" tabindex="0">{{ 'online_randevu'|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">
                        <section class="section-oa online-appointment-page px-4" style="background-color:unset;">
                            {% set step = app.request.query.get('Step') %}
                            {% if step != 'AppointmentReNew' and entity is not null and entity.tamamlandi %}
                                <div class="container mt-5 pt-5 px-5">
                                    <div class="online-appointment-info-container">
                                        <div class="online-appointment-info-content">
                                            <div class="online-appointment-info-content-icon">
                                                <svg style="width: 90px;height:90px;" viewBox="0 0 100 100"
                                                     xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_59_5400)">
                                                        <path d="M50.255 100C43.5377 100 37.022 98.6888 30.8896 96.0866C24.969 93.5852 19.6435 89.9945 15.0745 85.4255C10.5055 80.8565 6.92489 75.5411 4.41343 69.6104C1.8112 63.478 0.5 56.9623 0.5 50.255C0.5 43.5477 1.8112 37.022 4.41343 30.8896C6.9148 24.969 10.5055 19.6435 15.0745 15.0745C19.6435 10.5055 24.9589 6.92489 30.8896 4.41343C37.022 1.8112 43.5377 0.5 50.255 0.5C56.9724 0.5 61.2691 1.40775 66.4736 3.20309C68.743 3.98981 69.9533 6.46092 69.1666 8.74039C68.3799 11.0199 65.9088 12.2201 63.6293 11.4334C59.3326 9.95074 54.8342 9.20436 50.245 9.20436C39.2813 9.20436 28.9732 13.4708 21.2271 21.2271C13.4708 28.9833 9.20436 39.2914 9.20436 50.245C9.20436 61.1985 13.4708 71.5167 21.2271 79.2628C28.9833 87.0191 39.2813 91.2856 50.245 91.2856C61.2086 91.2856 71.5167 87.0191 79.2628 79.2628C87.0191 71.5066 91.2856 61.1985 91.2856 50.245C91.2856 39.2914 90.5593 41.3086 89.1372 37.0825C88.3707 34.803 89.5911 32.3319 91.8706 31.5654C94.15 30.7988 96.6211 32.0193 97.3877 34.2987C99.1225 39.4225 100 44.7883 100 50.245C100 55.7016 98.6888 63.478 96.0866 69.6104C93.5852 75.531 89.9945 80.8565 85.4255 85.4255C80.8565 89.9945 75.5411 93.5751 69.6104 96.0866C63.478 98.6787 56.9623 100 50.245 100H50.255Z"
                                                              fill="#3BC451"></path>
                                                        <path d="M45.7566 73.5137C44.6068 73.5137 43.4973 73.0598 42.6803 72.2429L26.0079 55.5704C24.3034 53.8659 24.3034 51.1123 26.0079 49.4179C27.7125 47.7133 30.466 47.7133 32.1605 49.4179L45.1615 62.4189L83.7411 7.08624C85.1128 5.10935 87.826 4.6353 89.8029 6.00702C91.7798 7.37873 92.2538 10.0919 90.8821 12.0688L49.3271 71.6478C48.5908 72.7068 47.4208 73.3826 46.1399 73.4935C46.0088 73.5036 45.8877 73.5137 45.7566 73.5137Z"
                                                              fill="#3BC451"></path>
                                                    </g>
                                                    <defs>
                                                        <clippath id="clip0_59_5400">
                                                            <rect width="99.5" height="99.5" fill="white"
                                                                  transform="translate(0.5 0.5)"></rect>
                                                        </clippath>
                                                    </defs>
                                                </svg>
                                            </div>

                                            <div class="online-appointment-info-content-title"
                                                 style="color: var(--c-success);">
                                                Randevu Talebin Başarılı
                                            </div>
                                            <div class="online-appointment-info-content-text">
                                                Randevun başarıyla oluşturuldu. Seni bekliyoruz.
                                            </div>
                                            <div class="online-appointment-info-content-info">
                                                <div class="online-appointment-info-content-infoImage">
                                                    {% if entity.hekimAvatar is null %}
                                                        <img loading="lazy" src="{{ asset('assets/main/img/user.webp') }}"
                                                             alt="{{ entity.hekimAdi }}">
                                                    {% else %}
                                                        <img loading="lazy" src="{{ entity.hekimAvatar }}" alt="{{ entity.hekimAdi }}">
                                                    {% endif %}
                                                </div>
                                                <div class="online-appointment-info-content-infoClinic">
                                                    {{ entity.klinikAdi }}
                                                </div>
                                                <div class="online-appointment-info-content-infoDoctor">
                                                    {{ entity.hekimAdi }}
                                                </div>
                                                <div class="online-appointment-info-content-infoPNR">
                                                    PNR No: {{ entity.pnr }}
                                                </div>
                                                <div class="online-appointment-info-content-infoDate">
                                                    {# 27 May 2024 Pazartesi 18:00 #}
                                                    {{ entity.randevuTarihi|date('Y-m-d H:i') }}
                                                </div>
                                                <div class="online-appointment-info-content-infoPayment">
                                                    {{ entity.odemeSecenegi == 'clinic' ? 'Klinikte Ödenecek' : 'Online Ödendi' }}
                                                    <br>Toplam Tutar : {{ entity.odemeTutari }}
                                                </div>
                                            </div>
                                            <div class="online-appointment-info-content-button">
                                                <a href="{{ path('app_main_default') }}" class="btn btn--alternate">
                                                    <div class="px-3 text-dark">Ana Sayfaya Dön</div>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <div class="container">
                                    <div class="section-oa-row">
                                        <div class="section-oa-row-left">
                                            <div class="section-oa-info">
                                                <div class="section-oa-info-content active">
                                                    <div class="section-oa-info-image"
                                                         style="width: 100%;opacity: 0.5;">
                                                        <img loading="lazy" id="logoSmile" src="{{ asset('assets/main/img/logoSmileTurkuaz.png') }}" alt="icon" style="max-width: 20%;">
                                                    </div>
                                                    <div class="section-oa-info-content-clinic">Maslak Diş Kliniği</div>
                                                    <div class="section-oa-info-content-doctor">
                                                        <div class="section-oa-info-content-doctor-name"></div>
                                                        <div class="section-oa-info-content-doctor-roles"
                                                             style="width: 50%;"></div>
                                                        <div class="section-oa-info-content-doctor-image hidden">
                                                            <img loading="lazy" src="{{ asset('assets/main/img/logo.png') }}" alt="">
                                                        </div>
                                                    </div>
                                                    <div class="section-oa-info-content-sd"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="section-oa-row-right">
                                            <h4>{{ 'online_randevu'|trans }}</h4>
                                            <div class="steps">
                                                <div class="step-item  {{ entity is null or step != 'AppointmentReNew' ? 'active' : '' }}">
                                                    01
                                                </div>

                                                <div class="step-item {{ entity is null ? '' : 'active' }}">02</div>
                                                <div class="step-item {{ entity is null ? '' : 'active' }} {{ step == 'AppointmentReNew' ? 'active' : '' }}">
                                                    03
                                                </div>
                                                <div class="step-item {{ entity is null ? '' : 'active' }}">04</div>
                                                <div class="step-item">05</div>
                                                <progress id="progress" value="0" max="100"></progress>
                                            </div>
                                            <p class="text-center">
                                                {{ 'randevu_olustur'|trans }}
                                            </p>
                                            <form class="section-oa-form" method="POST" autocomplete="off">
                                                <input type="hidden" name="ClinicID" value="">
                                                <input type="hidden" name="DoctorID" value="">
                                                <input type="hidden" name="SD" value="">
                                                <input type="hidden" name="ST" value="">
                                                {% if entity is not null and entity.tamamlandi %}
                                                    <input type="hidden" name="DataCheckerReNew" value="">
                                                {% endif %}
                                                {% if entity is null or step == 'AppointmentReNew' %}
                                                    <div class="section-oa-form-item {{ step != 'AppointmentReNew' ? 'active' : '' }}"
                                                         data-step="1">
                                                        <div class="select-dropdown select-dropdown--clinic">
                                                            <div class="select-dropdown-content">
                                                                <div class="select-dropdown-content-text">
                                                                    {{ 'klinik_seciniz'|trans }}
                                                                </div>
                                                                <div class="select-dropdown-content-icon">
                                                                    <i class="fa fa-chevron-down"></i>
                                                                </div>
                                                            </div>
                                                            <div class="select-dropdown-content-data"></div>
                                                        </div>
                                                        <div class="appointment-change mt-4 text-center">
                                                            <button type="button" data-onclick="Appointment.ReNewModal()" class="aHref txt--font600">
                                                                {{ 'randevu_degisiklik'|trans }}
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="section-oa-form-item" data-step="2">
                                                        <div class="select-dropdown select-dropdown--doctor">
                                                            <div class="select-dropdown-content">
                                                                <div class="select-dropdown-content-text">
                                                                    {{ 'doktor_seciniz'|trans }}
                                                                </div>
                                                                <div class="select-dropdown-content-icon">
                                                                    <img loading="lazy" src="{{ asset('build/main/img/icons/tooth.png') }}"
                                                                         style="width:30px">
                                                                </div>
                                                            </div>
                                                            <div class="select-dropdown-content-data"></div>
                                                        </div>
                                                        <div class="section-oa-form-item-footer">
                                                            <div class="section-oa-form-item-footer-item prev-step-button"
                                                                 data-onclick="Appointment.formStepper(1)">
                                                                <button class="btn" type="button">
                                                                    <div class="btn-txt text-dark">
                                                                        {{ 'geri'|trans|capitalize }} <i class="fa fa-chevron-left"></i>
                                                                    </div>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="section-oa-form-item {{ step == 'AppointmentReNew' ? 'active' : '' }}"
                                                         data-step="3">
                                                        <div class="doctor-hour-container">
                                                            <div class="doctor-hour-container-icon doctor-hour-container-icon-prev"
                                                                 data-onclick="Appointment.PrevDate()">
                                                                <i class="fa fa-chevron-left text-white"></i>
                                                            </div>
                                                            <div class="doctor-hour-container-icon doctor-hour-container-icon-next"
                                                                 data-onclick="Appointment.NextDate()">
                                                                <i class="fa fa-chevron-right text-white"></i>
                                                            </div>
                                                            <div class="row doctor-hour-container-content"></div>
                                                            <div class="section-oa-form-item-footer">
                                                                <div class="section-oa-form-item-footer-item prev-step-button"
                                                                     data-onclick="Appointment.formStepper(2)">
                                                                    <button class="btn" type="button">
                                                                        <div class="btn-txt text-dark">

                                                                            {{ 'geri'|trans|capitalize }}<i class="fa fa-chevron-left"></i>
                                                                        </div>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="section-oa-form-item" data-step="4">
                                                        <div class="row g-4 g-md-3 section-oa-patient-step">
                                                            <div>
                                                                <div class="input-item">
                                                                    <input type="text" name="PatientNumber" id="PatientNumber" placeholder="TC / Pasaport no" maxlength="11">
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <div class="input-item">
                                                                    <input type="text" name="PatientFirstName" id="PatientFirstName" placeholder="{{ 'adiniz'|trans }}">
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <div class="input-item">
                                                                    <input type="text" name="PatientLastName" id="PatientLastName" placeholder="{{ 'soyadiniz'|trans }}">
                                                                </div>
                                                            </div>
                                                            <div class="section-oa-patient-step__phone">
                                                                <div class="input-item input-item--phone">
                                                                    <input type="tel" class="phone" id="phone" autocomplete="off" placeholder="(  )">
                                                                </div>
                                                                <input type="hidden" name="ContactRegion" id="ContactRegion" value="90">
                                                                <input type="hidden" name="ContactMobile" id="ContactMobile">
                                                            </div>
                                                            <div>
                                                                <div class="input-item">
                                                                    <input type="text" name="ContactEmail" id="ContactEmail" placeholder="{{ 'eposta'|trans }} (*)">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="section-oa-form-item-footer">
                                                            <div class="section-oa-form-item-footer-item prev-step-button"
                                                                 data-onclick="Appointment.formStepper(3)">
                                                                <button class="btn" type="button">
                                                                    <div class="btn-txt text-dark">
                                                                        {{ 'geri'|trans|capitalize }} <i class="fa fa-chevron-left"></i>
                                                                    </div>
                                                                </button>
                                                            </div>
                                                            <div class="section-oa-form-item-footer-item next-step-button">
                                                                <button class="btn" type="button" id="FormGetKVKK"
                                                                        data-onclick="Appointment.FormGetKVKK()">
                                                                    <div class="btn-txt text-dark">
                                                                        {{ 'ileri'|trans }} <i class="fa fa-chevron-right"></i>
                                                                    </div>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% else %}

                                                    <div class="section-oa-form-item active" data-step="5">

                                                        <div class="row g-4 g-md-5">
                                                            <div class="radio-type-container">
                                                                <label for="clinicRadioType" class="radio-type-container-item radio">
                                                                    <input type="radio" name="PaymentType"
                                                                           id="clinicRadioType" value="clinic"
                                                                           data-onclick="$('.nextStep4').removeClass('disabled').removeAttr('disabled');$('#buttonText').html('İlerle');">
                                                                    <div class="radio-check-icon"></div>
                                                                    <div class="radio-content">
                                                                        <div class="radio-content-main-title pb-1">{{ 'newMeeting'|trans }} ({{ doctorRole|default }})</div>
                                                                        <div class="price-and-deposito-wrap d-flex gap-md-5 gap-sm-3 gap-3 pb-3 flex-wrap">
                                                                            <div class="radio-content-title">{{ 'price'|trans }}: {{ clinicPrice|default('') }} ₺</div>
                                                                            <div class="radio-content-deposito-text d-flex">
                                                                                <div class="radio-content-deposito-price ps-sm-2 ps-0 radio-content-title">
                                                                                    {{ 'deposit'|trans }} {{ depositPrice|default('') }} ₺ + {{ notDepositClinicPrice }} ₺ {{ 'klinikte_oderseniz'|trans }}
                                                                                </div>
                                                                            </div>
                                                                            <div class="radio-content-title">
                                                                                {{ 'clinicDuration'|trans }}
                                                                            </div>

                                                                        </div>
                                                                        <div class="radio-content-title radio-content-description hide">
                                                                            {{ 'clinicDescription'|trans }}
                                                                        </div>

                                                                    </div>
                                                                </label>
                                                                <label for="onlineRadioType" class="radio-type-container-item">
                                                                    <input type="radio" name="PaymentType"
                                                                           id="onlineRadioType" value="online"
                                                                           data-onclick="$('.nextStep4').removeClass('disabled').removeAttr('disabled');$('#buttonText').html('İlerle');">
                                                                    <div class="radio-check-icon"></div>
                                                                    <div class="radio-content">
                                                                        <div class="radio-content-title">{{ 'simdi_oderseniz'|trans }}: ({{ 'getDiscount'|trans }})</div>
                                                                        <div class="radio-content-main-title pb-1">{{ 'newMeeting'|trans }} ({{ doctorRole|default }})</div>
                                                                        <div class="price-and-deposito-wrap d-flex gap-md-5 gap-sm-3 gap-3 pb-3 flex-wrap">
                                                                            <div class=" radio-content-title">{{ 'price'|trans }}: {{ onlinePrice|default('') }} ₺</div>
                                                                            <div class="radio-content-deposito d-flex radio-content-title">
                                                                                <div class="radio-content-deposito-price ps-sm-2 ps-0 radio-content-title">
                                                                                    {{ 'deposit'|trans }} {{ onlinePrice|default('') }} ₺
                                                                                </div>
                                                                            </div>
                                                                            <div class="radio-content-title">
                                                                                {{ 'clinicDuration'|trans }}
                                                                            </div>
                                                                        </div>
                                                                        <div class="radio-content-title radio-content-description hide">
                                                                            {{ 'clinicDescription'|trans }}
                                                                        </div>
                                                                    </div>
                                                                </label>
                                                            </div>
                                                            <div class="section-oa-form-companycode">
                                                                <div class="section-oa-form-companycode-input">
                                                                    <div class="input-item">
                                                                        <input type="text" name="CompanyCode" value=""
                                                                               placeholder="{{ 'kurum_kodu'|trans }}">
                                                                    </div>
                                                                    <div class="button-item">
                                                                        <button class="btn company-code-checker" type="button"
                                                                                data-onclick="Appointment.CompanyCodeChecker()">
                                                                            <div class="btn-txt text-dark">
                                                                                <i class="fa fa-check"></i>
                                                                            </div>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                                <div class="section-oa-form-companycode-btn"
                                                                     data-onclick="$('.section-oa-form-companycode-input').addClass('d-flex')">
                                                                    <i class="fa fa-home"></i>
                                                                    {{ 'kurum_sigorta_kodu'|trans }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="section-oa-form-item-footer">
                                                            <div class="section-oa-form-item-footer-item next-step-button">
                                                                <button class="btn nextStep4 disabled payment-type-submit" type="button"
                                                                        disabled="disabled"
                                                                        data-onclick="Appointment.PaymentTypeSubmit('onlineStep')">
                                                                    <div class="btn-txt text-dark">
                                                                        <span id="buttonText">{{ 'randevu_tamamla'|trans }}</span>
                                                                        <i class="fa fa-chevron-right"></i>
                                                                    </div>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="section-oa-form-item" data-step="6">

                                                        <div class="section-oa-form-payment__card row g-2 g-md-2">
                                                            <div class="col-12">
                                                                <div class="input-item">
                                                                    <input type="text" name="ccName" placeholder="{{ 'kart_uzerindeki_ad_soyad'|trans }}" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-12">
                                                                <div class="input-item">
                                                                    <input type="text" name="ccNo" placeholder="{{ 'kart_numarasi'|trans }}" maxlength="16" required>
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="input-item input-item--select">
                                                                    <select name="ccMonth" required>
                                                                        <option value="none" selected="" disabled="" hidden="">{{ 'ay'|trans }}</option>
                                                                        <option value="01">Ocak(01)</option>
                                                                        <option value="02">Şubat(02)</option>
                                                                        <option value="03">Mart(03)</option>
                                                                        <option value="04">Nisan(04)</option>
                                                                        <option value="05">May(05)</option>
                                                                        <option value="06">Haziran(06)</option>
                                                                        <option value="07">Temmuz(07)</option>
                                                                        <option value="08">Ağustos(08)</option>
                                                                        <option value="09">Eylül(09)</option>
                                                                        <option value="10">Ekim(10)</option>
                                                                        <option value="11">Kasım(11)</option>
                                                                        <option value="12">Aralık(12)</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-3">
                                                                <div class="input-item input-item--select ">
                                                                    <select name="ccYear" required>
                                                                        <option value="none" selected="" disabled="" hidden="">{{ 'yil'|trans }}</option>
                                                                        <option value="24">2024</option>
                                                                        <option value="25">2025</option>
                                                                        <option value="26">2026</option>
                                                                        <option value="27">2027</option>
                                                                        <option value="28">2028</option>
                                                                        <option value="29">2029</option>
                                                                        <option value="30">2030</option>
                                                                        <option value="31">2031</option>
                                                                        <option value="32">2032</option>
                                                                        <option value="33">2033</option>
                                                                        <option value="34">2034</option>
                                                                        <option value="35">2035</option>
                                                                        <option value="36">2036</option>
                                                                        <option value="37">2037</option>
                                                                        <option value="38">2038</option>
                                                                        <option value="39">2039</option>
                                                                        <option value="40">2040</option>
                                                                        <option value="41">2041</option>
                                                                        <option value="42">2042</option>
                                                                        <option value="43">2043</option>
                                                                        <option value="44">2044</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-6">
                                                                <div class="input-item">
                                                                    <input type="text" name="ccCvv" placeholder="CVV" required>
                                                                </div>
                                                            </div>

                                                            <div class="col-12 mt-4 px-4">
                                                                <label class="checkbox-label" for="kvkk">
                                                                    <input type="checkbox" name="kvkk" id="kvkk" required>
                                                                    <span class="checkbox-check-icon"></span>
                                                                    <span class="checkbox-text">
                                                                        {{ 'kisisel_vk'|trans|raw }}
                                                            </span>
                                                                </label>
                                                            </div>
                                                            <div class="col-12 mt-4 px-4">
                                                                <label class="checkbox-label" for="info">
                                                                    <input type="checkbox" name="info" id="info" required>
                                                                    <span class="checkbox-check-icon"></span>
                                                                    <span class="checkbox-text">
                                                                Hizmet sunumu için verdiğim bilgilerimin kullanılmasına izin veriyorum.
                                                            </span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="randevu_online_odeme"></div>
                                                        <div class="section-oa-form-item-footer">
                                                            <div class="section-oa-form-item-footer-item prev-step-button">
                                                                <button class="btn" type="button"
                                                                        data-onclick="Appointment.formStepper(5)">
                                                                    <div class="btn-txt text-dark">
                                                                        {{ 'geri'|trans|capitalize }} <i class="fa fa-chevron-left"></i>
                                                                    </div>
                                                                </button>
                                                            </div>
                                                            <div class="section-oa-form-item-footer-item next-step-button">
                                                                <button class="btn" type="button"
                                                                        data-onclick="Appointment.PaymentTypeSubmit('onlineAjax')">
                                                                    <div class="btn-txt text-dark">
                                                                        {{ 'ileri'|trans|capitalize }} <i class="fa fa-chevron-right"></i>
                                                                    </div>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                {% endif %}
                                            </form>

                                            <!-- KVKK Modal -->
                                            <div class="modal fade" id="GetKVKKModal" tabindex="-1" aria-labelledby="GetKVKKModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-xl modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-title">
                                                            {{ 'kvkk_kodu'|trans }}
                                                        </div>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        <div class="modal-body text-center">
                                                            <div class="col-12 col-lg-12 text-start p-5">
                                                                <div class="input-item">
                                                                    <input type="text" name="SetCode" class="" placeholder="">
                                                                </div>
                                                            </div>
                                                            <button class="btn" type="button" id="FormSetKVKK" data-onclick="Appointment.FormSetKVKK()">
                                                                <div class="btn-txt text-dark txt--rem22 mt-3">{{ 'ileri'|trans }} <i class="fa fa-chevron-right"></i></div>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- ReNew Modal -->
                                            <div class="modal fade" id="ReNewModal" tabindex="-1" data-step="1"
                                                 aria-labelledby="ReNewModalLabel" style="display: none;"
                                                 aria-hidden="true">
                                                <div class="modal-dialog modal-xl modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-body text-center">
                                                            <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                                            <div class="modal-body-content">
                                                                <div class="col-12 col-lg-12 text-start p-5 mb-4">
                                                                    <div class="modal-title">
                                                                        {{ 'randevu_sorgula'|trans }}
                                                                    </div>
                                                                    <div class="">
                                                                        <label for="">PNR No</label>
                                                                        <div class="input-item">
                                                                            <input type="text" name="AppointmentPNR"
                                                                                   class="">
                                                                        </div>
                                                                    </div>
                                                                    <div class="mt-4">
                                                                        <label for=""> {{ 'kimlik_no'|trans }}</label>
                                                                        <div class="input-item">
                                                                            <input type="text" name="AppointmentCode"
                                                                                   class="">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <button class="btn" type="button" id="FormSetKVKK"
                                                                        data-onclick="Appointment.GetAppointmentInfo(`Step2`)">
                                                                    <div class="btn-txt text-dark txt--rem22 mt-3">
                                                                        {{ 'ileri'|trans }}
                                                                        <i class="fa fa-chevron-right"></i>
                                                                    </div>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </section>
                    </div>
                </div>
            </div>
        </div>
    {% endblock %}
{% endblock %}
{% block pageScript %}
    <script>
        {% if durum == 1 %}
            document.addEventListener("DOMContentLoaded", ()=>{
                $('.online-appointment-info-wrapper').addClass('active');
                $('.online-appointment-info-exit').click(function () {
                    $('.online-appointment-info-wrapper').removeClass('active');
                });
            });
        {% endif %}
    </script>
{% endblock %}