{% extends 'main_base.html.twig' %}
{% block styles %}
    <style>
        .yatirim-box-link {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
        }
    </style>
{% endblock %}
{% block content %}
    <section class="position-relative" id="banner">
        <img src="{{ asset('assets/main/img/yatirim-girisimler-banner.png') }}" alt="Banner" class="img-fluid w-100">
        <div class="position-absolute start-0 bottom-0 w-100">
            <div class="container-90">
                <ol class="breadcrumb pb-2">
                    <li class="breadcrumb-item"><a href="#" class="text-white">ANASAYFA</a></li>
                    <li class="breadcrumb-item text-dark">YATIRIM & GİRİŞİMLER</li>
                </ol>
            </div>
        </div>
    </section>
    <section class="py-20" id="filter">
        <div class="container-80">
            <div class="card shadow-sm">
                <div class="card-header align-items-center">
                    <div class="d-flex align-items-center">
                        <label class="me-5 fw-bolder" for="filterSector">FİLTRELE</label>
                        <select class="form-select border-success rounded-pill" id="filterSector">
                            <option value="">Tüm Sektörler</option>
                        </select>
                    </div>
                    <div class="d-flex align-items-center p-1 bg-gray-200 rounded-pill mt-3 mt-md-0 row">
                        <button class="col w-150px form-control form-control-transparent bg-white rounded-pill">Tümü
                        </button>
                        <select class="col w-auto form-select form-select-transparent" id="filterStatus">
                            <option value="">Durumu</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-20" id="yatirimlar">
        <div class="container-80">
            <div class="row" id="yatirimlar-liste">
                {% for i in 1..4 %}
                    <div class="col-lg-6 mb-10 animate__animated" data-animate="animate__fadeInUp">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <a href="{{ path('app_proje_detay') }}" class="yatirim-box-link"></a>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-7 col-12">
                                        <img src="/fonuniq/public/assets/main/img/plus-vc.png" alt="" class="img-fluid">
                                        <div class="text-center">
                                            <span class="text-success"><b>13</b> Gün Kaldı</span>
                                            <img src="/fonuniq/public/assets/main/img/alarm.png" alt="" class="p-1 bg-success rounded-circle translate-middle-y">
                                            <span>29 EKİM 2022</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-5 col-12">
                                        <div class="text-end">
                                            <svg class="svg-graphic" viewBox="0 0 250 250" width="250" height="250" xmlns="http://www.w3.org/2000/svg">
                                                <style>
                                                    .corner-value {
                                                        font: bold 18px sans-serif;
                                                        fill: var(--color-main);
                                                    }
                                                    .corner-label {
                                                        font: normal 18px sans-serif;
                                                        fill: var(--color-main);
                                                    }
                                                    .circle-value {
                                                        font: bold 21px sans-serif;
                                                    }
                                                    .circle-label {
                                                        font: normal 18px sans-serif;
                                                    }
                                                </style>
                                                <text x="15" y="18" class="corner-value">493</text>
                                                <text x="15" y="36" class="corner-label">Yatırımcı</text>
                                                <text x="105" y="120" class="circle-value">%23</text>
                                                <text x="100" y="140" class="circle-label">Biriken</text>
                                                <circle cx="125" cy="125" r="75" fill="none" stroke="black" stroke-width="10" />
                                            </svg>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                        <h3>PLUS.VC</h3>
                                        <div>PROJE SAHİBİ: TECHNOONE YAZILIM SİSTEMLERİ</div>
                                        <p>
                                            Accent, Moskova ve Rusya Federasyonu’
                                            nun diğer büyük şehirlerindeki ticari
                                            gayrimenkul yatırımlarına
                                            odaklanmaktadır.
                                        </p>
                                        <div>
                                            <span>FONLANAN <b>₺4.567.890</b></span>
                                            <span>FONLANAN <b>₺6.000.000</b></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        <div class="mt-10 text-center">
            <a href="" class="btn btn-bg-dark btn-active-success btn-text-light btn-active-text-dark rounded-pill">TÜM KAMPANYALAR</a>
        </div>
    </section>
    <section class="d-flex justify-content-center align-items-center animate__animated" id="istatistik" data-animate="animate__fadeIn">
        <p class="mw-750px text-center fw-bolder fs-1 text-white">
            Ülkemizin girişimci ruhunu tetikleyerek filizlenmesi için,
            destek mekanizmalarını daha iyi kullanabilmeleri için ortak paydada
            aracı olmayı hedefliyoruz...
        </p>
    </section>
    <section class="py-20" id="sektor">
        <div class="container-80">
            <h3 class="mb-10 text-success">Sektörel Gelişmeler</h3>
            <div class="row">
                {% for i in 1..4 %}
                    <div class="col-lg-3 mb-5 mb-lg-0 mb-md-5 mb-sm-5 animate__animated" data-animate="animate__fadeInUp">
                        <div class="card shadow-sm bg-white bg-hover-dark text-dark text-hover-light">
                            <div class="card-body">
                                <img src="{{ asset('assets/main/img/plus-vc.png') }}" alt="" class="img-fluid mb-5">
                                <h3 class="text-reset">Girişim teşviklerinden nasıl yararlanırsınız?</h3>
                                <p>
                                    Girişim borcu, Fonuniq’e sermayelerini
                                    sabit bir faiz oranında yatırma ve aynı
                                    zamanda genç büyüme şirketlerinin
                                    ekonomik başarısından yararlanma
                                    fırsatı sunuyor.
                                    Yeni yatırım modeli hakkında daha
                                    fazla bilgiyi burada bulabilirsiniz.
                                </p>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            <div class="mt-10 text-center">
                <a href="" class="btn btn-success btn-active-dark rounded-pill">TÜM KAMPANYALAR</a>
            </div>
        </div>
    </section>
    {#<div id="dev">
        <svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="10" />
            #}{#<circle class="outer" cx="100" cy="100" r="75" fill="none" stroke="green" stroke-width="10"
                    transform="rotate(-90)" transform-origin="100 100" />
            <circle class="track" cx="100" cy="25" r="10" fill="green"
                    transform="rotate(0)" transform-origin="100 100" />#}{#
        </svg>
    </div>#}
{% endblock %}

{% block scripts %}
    <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
    <script>
        $(function () {
            $("#yatirimlar-liste").children().each(function (i,e) {
                let devSvg = e.getElementsByClassName("svg-graphic")[0],
                    devSvgNS = devSvg.getAttribute("xmlns");

                let devCircleOuterRadius = Math.round(2 * Math.PI * 100);
                let devCircleCalcRadius = Math.round((100 * 157) / devCircleOuterRadius);
                let devCircleCalcRadiusRevert = 100 - devCircleCalcRadius;
                let devCircleTrackCalcRadius = Math.round(360 / 100 * devCircleCalcRadiusRevert);

                let devCreateOuterCircle = document.createElementNS(devSvgNS, "circle");
                devCreateOuterCircle.setAttribute("cx", "75");
                devCreateOuterCircle.setAttribute("cy", "125");
                devCreateOuterCircle.setAttribute("r", "100");
                devCreateOuterCircle.setAttribute("fill", "none");
                devCreateOuterCircle.setAttribute("stroke", "#2DAF9C");
                devCreateOuterCircle.setAttribute("stroke-width", "10");
                devCreateOuterCircle.setAttribute("stroke-dashoffset", devCircleOuterRadius);
                devCreateOuterCircle.setAttribute("stroke-dasharray", devCircleOuterRadius);
                devCreateOuterCircle.setAttribute("transform", "rotate(-90)");
                devCreateOuterCircle.setAttribute("transform-origin", "100 100");

                let devCreateOuterCircleAnimate = document.createElementNS(devSvgNS, "animate");
                devCreateOuterCircleAnimate.setAttribute("attributeName", "stroke-dashoffset");
                devCreateOuterCircleAnimate.setAttribute("from", devCircleOuterRadius);
                devCreateOuterCircleAnimate.setAttribute("to", "157");
                devCreateOuterCircleAnimate.setAttribute("dur", "1s");
                devCreateOuterCircleAnimate.setAttribute("fill", "freeze");

                devSvg.appendChild(devCreateOuterCircle);
                devCreateOuterCircle.appendChild(devCreateOuterCircleAnimate);

                let devCreateTrackCircle = document.createElementNS(devSvgNS, "circle");
                devCreateTrackCircle.setAttribute("cx", "125");
                devCreateTrackCircle.setAttribute("cy", "25");
                devCreateTrackCircle.setAttribute("r", "10");
                devCreateTrackCircle.setAttribute("fill", "#2DAF9C");
                devCreateTrackCircle.setAttribute("transform", "rotate(0)");
                devCreateTrackCircle.setAttribute("transform-origin", "125 125");

                let devCreateTrackCircleAnimate = document.createElementNS(devSvgNS, "animateTransform");
                devCreateTrackCircleAnimate.setAttribute("attributeName", "transform");
                devCreateTrackCircleAnimate.setAttribute("type", "rotate");
                devCreateTrackCircleAnimate.setAttribute("from", "0");
                devCreateTrackCircleAnimate.setAttribute("to", devCircleTrackCalcRadius);
                devCreateTrackCircleAnimate.setAttribute("dur", "1s");
                devCreateTrackCircleAnimate.setAttribute("fill", "freeze");

                devSvg.appendChild(devCreateTrackCircle);
                devCreateTrackCircle.appendChild(devCreateTrackCircleAnimate);
            });
        });
    </script>
{% endblock %}