{% block pageScript %}
    {% if redirect is not defined or not redirect %}
        {{ encore_entry_script_tags('online-appointment-component') }}
    {% endif %}
{% endblock %}
{% block pageStyle %}
    {{ encore_entry_link_tags('online-appointment-component') }}
{% endblock %}
<section class="section-oa online-appointment-page px-4" style="background-color:unset;">
    <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 active">01</div>
                    <div class="step-item">02</div>
                    <div class="step-item">03</div>
                    <div class="step-item">04</div>
                    <div class="step-item">05</div>
                    <progress id="progress" value="0" max="100"></progress>
                </div>
                <p class="text-center randevu__text">{{ 'randevu_olustur'|trans }}</p>
                <form class="section-oa-form" method="POST" autocomplete="off" action="{{ path('app_main_online_randevu') }}">
                    <input type="hidden" name="ClinicID" value="">
                    <input type="hidden" name="DoctorID" value="">
                    <input type="hidden" name="SD" value="">
                    <input type="hidden" name="ST" value="">

                    <div class="section-oa-form-item 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" style="color: #000;"></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" 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|capitalize }} <i class="fa fa-chevron-right"></i>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                </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-body text-center">
                                <button type="button" class="btn-close"
                                        data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                <div class="col-12 col-lg-12 text-start p-5">
                                    <div class="modal-title">{{ 'kvkk_kodu'|trans }}</div>
                                    <div class="input-item">
                                        <input type="text" name="SetCode" class="">
                                    </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"
                     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>
</section>