{% extends 'main_base.html.twig' %}
{% block styles %}
    <style>
        #profile {
            padding: 10vh 0;
        }
    </style>
{% endblock %}
{% block content %}
    <section id="profile">
        <div class="d-flex row m-20">
            <div class="col-xl-3">
                <div class="row">

                    <div class="col-lg-12 col-md-4 col-sm-4 mt-3 mt-sm-0">

                    </div>
                    <div class="col-lg-12 col-md-4 col-sm-4 mt-3 mt-sm-0">
                        <div class="card h-lg-100 h-md-75 h-sm-100 mb-lg-0 mb-lg-10 shadow-sm animate__animated animate__fadeInLeft"
                             data-animate="animate__fadeInLeft">
                            <div class="card-body d-flex flex-column text-center">
                                <img src="/fonuniq/public/assets/main/img/canli-destek.png"
                                     class="h-lg-70px h-md-50px mt-lg-10 mt-md-2 mx-auto w-lg-85px w-md w-md-30px w-md-55px">
                                <h3 class="card-title">Destek Hattı</h3>
                                <span class="fs-5 fs-lg-5 fs-md-7">Yardıma mı ihtiyacınız var?</span>
                                <div class="mt-sm-5 mt-md-1 text-center">
                                    <button id="butondestek" type="button" class="btn btn-sm btn-success rounded-0">
                                        Bizimle İrtibata Geçin
                                    </button>
                                </div>

                            </div>
                            <!--end::Card body-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-9 mt-10 mt-md-0">
                <!--begin::General Widget 1-->
                <div class="mb-10">

                    <!--begin::Tab content-->
                    <div class="card">
                        <div class="card-body">

                            <div class="border-bottom">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-600">Yatırımlar</span>
                                </h3>
                            </div>
                            <div class="row mt-5">
                                <div class="col-lg-8 ">
                                    <div class="card">
                                        <div class="card-body p-lg-17">
                                            <!--begin::Hero-->
                                            <div class="position-relative">
                                                <!--begin::Overlay-->
                                                <div class="overlay overlay-show">


                                                </div>
                                                <!--end::Overlay-->
                                            </div>
                                            <!--end::-->
                                            <!--begin::Layout-->
                                            <div class="d-flex flex-column flex-lg-row mb-17">
                                                <!--begin::Content-->
                                                <div class="flex-lg-row-fluid me-0 me-lg-20">
                                                    <!--begin::Job-->
                                                    <div class="mb-17">
                                                        <!--begin::Section-->
                                                        <div class="m-0">
                                                            <!--begin::Heading-->
                                                            <div class="align-items-center collapsed collapsible d-flex justify-content-between mb-0 py-3 toggle"
                                                                 data-bs-toggle="collapse" data-bs-target="#kt_job_1_1"
                                                                 aria-expanded="false">
                                                                <h4 class="text-gray-700 fw-bolder cursor-pointer mb-0">
                                                                    Girişim yada yatırımlarımla ilgili taleplerimi nasıl iletebilirim?
                                                                </h4><!--begin::Icon-->
                                                                <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                                                                    <span class="svg-icon toggle-on svg-icon-primary svg-icon-1">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="" style=" border: 2px solid #CE2929;">


																	<rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
																</svg>
															</span>
                                                                    <!--end::Svg Icon-->
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                                                    <span class="svg-icon toggle-off svg-icon-1">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="" style=" border: 2px solid #CE2929;">

																	<rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="black"></rect>
																	<rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
																</svg>
															</span>
                                                                    <!--end::Svg Icon-->
                                                                </div>
                                                                <!--end::Icon-->
                                                                <!--begin::Title-->

                                                                <!--end::Title-->
                                                            </div>
                                                            <!--end::Heading-->
                                                            <!--begin::Body-->
                                                            <div id="kt_job_1_1" class="fs-6 ms-1 collapse" style="">
                                                                <!--begin::Item-->
                                                                <div class="mb-4">
                                                                    <!--begin::Item-->
                                                                    <div class="d-flex mb-n1">
                                                                        <!--begin::Bullet-->
                                                                        <span class="bullet me-3 mt-3"></span>
                                                                        <!--end::Bullet-->
                                                                        <!--begin::Label-->
                                                                        <div class="text-gray-600 fw-bold fs-6">
                                                                            Telefon: Müşteri Hizmetlerimize Vodafone hatlarınızdan 542 ‘yi; diğer operatörlerden ve sabit hatlardan 0 (542) 542 00 00’ı, yurt dışından ise 00 90 (542) 542 00 00’ı arayarak ulaşabilirsiniz. Vodafone faturalı ve faturasız hatlardan müşteri hizmetleri numaraları arandığında, varsa tarifede bulunan dakika hakkından düşülür; dakika kullanım hakkı yok ise, sahip olunan tarifenin yurt içi görüşme ücreti üzerinden dakika başına ücretlendirme yapılır.
                                                                        </div>
                                                                        <!--end::Label-->
                                                                    </div>
                                                                    <!--end::Item-->
                                                                </div>
                                                                <!--end::Item-->

                                                            </div>
                                                            <!--end::Content-->
                                                            <!--begin::Separator-->
                                                            <div class="separator separator-dashed"></div>
                                                            <!--end::Separator-->
                                                        </div>
                                                        <!--end::Section-->
                                                        <!--begin::Section-->
                                                        <div class="m-0">
                                                            <!--begin::Heading-->
                                                            <div class="d-flex align-items-center justify-content-between collapsible py-3 toggle collapsed mb-0"
                                                                 data-bs-toggle="collapse" data-bs-target="#kt_job_1_2">
                                                                <!--begin::Icon-->
                                                                <h4 class="text-gray-700 fw-bolder cursor-pointer mb-0">
                                                                    Müşteri Hizmetleri Destek Hattı’na nasıl ulaşabilirim?</h4>
                                                                <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                                                                    <span class="svg-icon toggle-on svg-icon-primary svg-icon-1">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="" style=" border: 2px solid #CE2929;">


																	<rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
																</svg>
															</span>
                                                                    <!--end::Svg Icon-->
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                                                    <span class="svg-icon toggle-off svg-icon-1">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="" style=" border: 2px solid #CE2929;">

																	<rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="black"></rect>
																	<rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
																</svg>
															</span>
                                                                    <!--end::Svg Icon-->
                                                                </div>
                                                                <!--end::Icon-->
                                                                <!--begin::Title-->

                                                                <!--end::Title-->
                                                            </div>
                                                            <!--end::Heading-->
                                                            <!--begin::Body-->
                                                            <div id="kt_job_1_2" class="collapse fs-6 ms-1">
                                                                <!--begin::Item-->
                                                                <div class="mb-4">
                                                                    <!--begin::Item-->
                                                                    <div class="d-flex mb-n1">
                                                                        <!--begin::Bullet-->
                                                                        <span class="bullet me-3 mt-3"></span>
                                                                        <!--end::Bullet-->
                                                                        <!--begin::Label-->
                                                                        <div class="text-gray-600 fw-bold fs-6">
                                                                            Telefon: Müşteri Hizmetlerimize Vodafone hatlarınızdan 542 ‘yi; diğer operatörlerden ve sabit hatlardan 0 (542) 542 00 00’ı, yurt dışından ise 00 90 (542) 542 00 00’ı arayarak ulaşabilirsiniz. Vodafone faturalı ve faturasız hatlardan müşteri hizmetleri numaraları arandığında, varsa tarifede bulunan dakika hakkından düşülür; dakika kullanım hakkı yok ise, sahip olunan tarifenin yurt içi görüşme ücreti üzerinden dakika başına ücretlendirme yapılır.
                                                                        </div>
                                                                        <!--end::Label-->
                                                                    </div>
                                                                    <!--end::Item-->
                                                                </div>
                                                                <!--end::Item-->

                                                                <!--end::Item-->
                                                            </div>
                                                            <!--end::Content-->
                                                            <!--begin::Separator-->
                                                            <div class="separator separator-dashed"></div>
                                                            <!--end::Separator-->
                                                        </div>
                                                        <!--end::Section-->
                                                        <!--begin::Section-->
                                                        <div class="m-0">
                                                            <!--begin::Heading-->
                                                            <div class="d-flex align-items-center justify-content-between collapsible py-3 toggle collapsed mb-0"
                                                                 data-bs-toggle="collapse" data-bs-target="#kt_job_1_3">
                                                                <h4 class="text-gray-700 fw-bolder cursor-pointer mb-0">
                                                                    WhatsApp Chatbot’ta 7 gün 24 saat çevrimiçiyiz!</h4><!--begin::Icon-->
                                                                <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                                                                    <span class="svg-icon toggle-on svg-icon-primary svg-icon-1">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="" style=" border: 2px solid #CE2929;">


																	<rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
																</svg>
															</span>
                                                                    <!--end::Svg Icon-->
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                                                    <span class="svg-icon toggle-off svg-icon-1">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="" style=" border: 2px solid #CE2929;">

																	<rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="black"></rect>
																	<rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
																</svg>
															</span>
                                                                    <!--end::Svg Icon-->
                                                                </div>
                                                                <!--end::Icon-->
                                                                <!--begin::Title-->

                                                                <!--end::Title-->
                                                            </div>
                                                            <!--end::Heading-->
                                                            <!--begin::Body-->
                                                            <div id="kt_job_1_3" class="collapse fs-6 ms-1">
                                                                <!--begin::Item-->
                                                                <div class="mb-4">
                                                                    <!--begin::Item-->
                                                                    <div class="d-flex mb-n1">
                                                                        <!--begin::Bullet-->
                                                                        <span class="bullet me-3 mt-3"></span>
                                                                        <!--end::Bullet-->
                                                                        <!--begin::Label-->
                                                                        <div class="text-gray-600 fw-bold fs-6">
                                                                            Telefon: Müşteri Hizmetlerimize Vodafone hatlarınızdan 542 ‘yi; diğer operatörlerden ve sabit hatlardan 0 (542) 542 00 00’ı, yurt dışından ise 00 90 (542) 542 00 00’ı arayarak ulaşabilirsiniz. Vodafone faturalı ve faturasız hatlardan müşteri hizmetleri numaraları arandığında, varsa tarifede bulunan dakika hakkından düşülür; dakika kullanım hakkı yok ise, sahip olunan tarifenin yurt içi görüşme ücreti üzerinden dakika başına ücretlendirme yapılır.
                                                                        </div>
                                                                        <!--end::Label-->
                                                                    </div>
                                                                    <!--end::Item-->
                                                                </div>
                                                                <!--end::Item-->

                                                            </div>
                                                            <!--end::Content-->
                                                            <!--begin::Separator-->
                                                            <div class="separator separator-dashed"></div>
                                                            <!--end::Separator-->
                                                        </div>
                                                        <!--end::Section-->
                                                        <!--begin::Section-->
                                                        <div class="m-0">
                                                            <!--begin::Heading-->
                                                            <div class="d-flex align-items-center justify-content-between collapsible py-3 toggle collapsed mb-0"
                                                                 data-bs-toggle="collapse" data-bs-target="#kt_job_1_4">
                                                                <h4 class="text-gray-700 fw-bolder cursor-pointer mb-0">
                                                                    Bilgi, Talep ve Eleştiri
                                                                </h4><!--begin::Icon-->
                                                                <div class="btn btn-sm btn-icon mw-20px btn-active-color-primary me-5">
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen036.svg-->
                                                                    <span class="svg-icon toggle-on svg-icon-primary svg-icon-1">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="" style=" border: 2px solid #CE2929;">


																	<rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
																</svg>
															</span>
                                                                    <!--end::Svg Icon-->
                                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen035.svg-->
                                                                    <span class="svg-icon toggle-off svg-icon-1">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" class="" style=" border: 2px solid #CE2929;">

																	<rect x="10.8891" y="17.8033" width="12" height="2" rx="1" transform="rotate(-90 10.8891 17.8033)" fill="black"></rect>
																	<rect x="6.01041" y="10.9247" width="12" height="2" rx="1" fill="black"></rect>
																</svg>
															</span>
                                                                    <!--end::Svg Icon-->
                                                                </div>
                                                                <!--end::Icon-->
                                                                <!--begin::Title-->

                                                                <!--end::Title-->
                                                            </div>
                                                            <!--end::Heading-->
                                                            <!--begin::Body-->
                                                            <div id="kt_job_1_4" class="collapse fs-6 ms-1">
                                                                <!--begin::Item-->
                                                                <div class="mb-4">
                                                                    <!--begin::Item-->
                                                                    <div class="d-flex mb-n1">
                                                                        <!--begin::Bullet-->
                                                                        <span class="bullet me-3 mt-3"></span>
                                                                        <!--end::Bullet-->
                                                                        <!--begin::Label-->
                                                                        <div class="text-gray-600 fw-bold fs-6">
                                                                            Telefon: Müşteri Hizmetlerimize Vodafone hatlarınızdan 542 ‘yi; diğer operatörlerden ve sabit hatlardan 0 (542) 542 00 00’ı, yurt dışından ise 00 90 (542) 542 00 00’ı arayarak ulaşabilirsiniz. Vodafone faturalı ve faturasız hatlardan müşteri hizmetleri numaraları arandığında, varsa tarifede bulunan dakika hakkından düşülür; dakika kullanım hakkı yok ise, sahip olunan tarifenin yurt içi görüşme ücreti üzerinden dakika başına ücretlendirme yapılır.
                                                                        </div>
                                                                        <!--end::Label-->
                                                                    </div>
                                                                    <!--end::Item-->
                                                                </div>                                                                <!--end::Item-->

                                                            </div>
                                                            <!--end::Content-->
                                                        </div>
                                                        <!--end::Section-->
                                                        <!--end::Accordion-->
                                                        <!--begin::Apply-->

                                                        <!--end::Apply-->
                                                    </div>
                                                    <!--end::Job-->
                                                    <!--begin::Job-->

                                                    <!--end::Job-->
                                                </div>
                                                <!--end::Content-->
                                                <!--begin::Sidebar-->

                                                <!--end::Sidebar-->
                                            </div>
                                            <!--end::Layout-->
                                            <!--begin::Section-->

                                            <!--end::Section-->
                                            <!--begin::Card-->

                                            <!--end::Card-->
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-4">

                                    <div class="card">
                                        <div class="card-body">
                                            <div class="animate__animated animate__fadeInRight"
                                                 data-animate="animate__fadeInRight">
                                                <h4 class="mb-10 bg-">Bize yazın</h4>
                                                <form action="">
                                                    <div class="row">
                                                        <div class="col-lg-6">
                                                            <div class="form-floating mb-7">
                                                                <input type="text"
                                                                       class="form-control rounded-0 bg-transparent border-left-0 border-right-0 border-top-0"
                                                                       id="form_Ad" placeholder="Adınız">
                                                                <label class="required" for="form_Ad">Adınız</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-floating mb-7">
                                                                <input type="text"
                                                                       class="form-control rounded-0 bg-transparent border-left-0 border-right-0 border-top-0"
                                                                       id="form_Soyad" placeholder="Soyadınız">
                                                                <label class="required"
                                                                       for="form_Soyad">Soyadınız</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-floating mb-7">
                                                                <input type="email"
                                                                       class="form-control rounded-0 bg-transparent border-left-0 border-right-0 border-top-0"
                                                                       id="form_Eposta" placeholder="E-Posta">
                                                                <label class="required"
                                                                       for="form_Eposta">E-Posta</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="form-floating mb-7">
                                                                <input type="text"
                                                                       class="form-control rounded-0 bg-transparent border-left-0 border-right-0 border-top-0"
                                                                       id="form_Telefon" placeholder="Telefon">
                                                                <label class="required"
                                                                       for="form_Telefon">Telefon</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="form-floating mb-7">
                                                                <textarea
                                                                        class="form-control rounded-0 bg-transparent h-100px"
                                                                        id="form_Mesaj"
                                                                        placeholder="Mesajınız"></textarea>
                                                                <label for="form_Mesaj">Mesajınız</label>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="text-end">
                                                        <button id="destekButton" type="submit"
                                                                class="w-50 btn text-white rounded-pill btn-active-success rounded-0 text-center mt-10">
                                                            GÖNDER
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

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

{% block scripts %}
    <script>
        $(document).ready(function () {
            let $tabProfil = $('#tabProfil .nav-link[data-bs-toggle="tab"]');
            let $ustKartLinks = $('#ustkartlar .nav-link[data-bs-toggle="tab"]');
            $ustKartLinks.on('show.bs.tab', function () {
                $tabProfil.removeClass("active");
                $("#tab_Profil").removeClass("active show");
            });
            $tabProfil.on('show.bs.tab', function () {
                $ustKartLinks.removeClass("active");
                $("#ustKartTabs .tab-pane").removeClass("active show");
            });
        });
    </script>
{% endblock %}