@model ResultProjectDto

@{
    ViewData["Title"] = Model.Title;
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>@Model.Title</title>
    <meta name="description" content="">
    <meta name="keywords" content="">

    <!-- Favicons -->
    <link href="~/SeedData/favicon-16x16.png" rel="icon">
    <link href="~/SeedData/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="~/EstateAgency/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="~/EstateAgency/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="~/EstateAgency/assets/vendor/aos/aos.css" rel="stylesheet">
    <link href="~/EstateAgency/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="~/EstateAgency/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

    <!-- Main CSS File -->
    <link href="~/EstateAgency/assets/css/main.css" rel="stylesheet">

</head>

<body class="property-single-page">
    <main class="main">
        <!-- Page Title -->
        <div class="page-title" data-aos="fade">
            <div class="heading">
                <div class="container">
                    <div class="row d-flex justify-content-center text-center">
                        <div class="col-lg-8">
                            <h1>@Model.Title</h1>
                            <p class="mb-0">@Model.ShortDescription</p>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- End Page Title -->
        <!-- Real Estate 2 Section -->
        <section id="real-estate-2" class="real-estate-2 section">

            <div class="container" data-aos="fade-up">

                <div class="portfolio-details-slider swiper init-swiper">
                    <script type="application/json" class="swiper-config">
                        {
                          "loop": true,
                          "speed": 600,
                          "autoplay": {
                            "delay": 5000
                          },
                          "slidesPerView": "auto",
                          "navigation": {
                            "nextEl": ".swiper-button-next",
                            "prevEl": ".swiper-button-prev"
                          },
                          "pagination": {
                            "el": ".swiper-pagination",
                            "type": "bullets",
                            "clickable": true
                          }
                        }
                    </script>
                    <div class="swiper-wrapper align-items-center">
                        @if (Model.ImageUrls != null && Model.ImageUrls.Any())
                        {
                            foreach (var img in Model.ImageUrls)
                            {
                                <div class="swiper-slide">
                                    <img src="@img" alt="">
                                </div>
                            }
                        }
                        else
                        {
                            <div class="swiper-slide">
                                <img src="@Model.CoverUrl" alt="">
                            </div>
                        }
                    </div>

                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-pagination"></div>
                </div>

                <div class="row justify-content-between gy-4 mt-4">

                    <div class="col-lg-12" data-aos="fade-up">

                        <div class="portfolio-description">
                            <h2>Proje Detayları</h2>
                            <p>
                                @Model.LongDescription
                            </p>
                        </div><!-- End Portfolio Description -->
                        <!-- Tabs -->
                        <ul class="nav nav-pills mb-3">
                            <li><a class="nav-link active" data-bs-toggle="pill" href="#real-estate-2-tab1">Video</a></li>
                            <li><a class="nav-link" data-bs-toggle="pill" href="#real-estate-2-tab2">Kat Planı</a></li>
                            <li><a class="nav-link" data-bs-toggle="pill" href="#real-estate-2-tab3">Lokasyon</a></li>
                        </ul><!-- End Tabs -->
                        <!-- Tab Content -->
                        <div class="tab-content">

                            <div class="tab-pane fade show active" id="real-estate-2-tab1">
                                <div class="ratio ratio-16x9">
                                    @{
                                        var url = Model.VideoUrl;
                                        var vid = ConstructorAppUI.Helpers.YouTubeHelper.ExtractVideoId(url);
                                        var embedUrl = string.IsNullOrEmpty(vid) ? "" : $"https://www.youtube.com/embed/{vid}?autoplay=1";
                                    }
                                    <p>Embed URL: @embedUrl</p>
                                    @if (!string.IsNullOrEmpty(embedUrl))
                                    {
                                        <iframe src="@embedUrl" style="width: 100%; height: 400px;" frameborder="0" allowfullscreen></iframe>
                                    }

                                </div>
                            </div><!-- End Tab 1 Content -->

                            <div class="tab-pane fade" id="real-estate-2-tab2">
                          @*       <img width="750" height="750" src="@Model.FloorPlanUrl alt="Görsel" /> *@
                                <img src="@Model.FloorPlanUrl" alt="Görsel" width="750" height="750" />

                            </div><!-- End Tab 2 Content -->

                            <div class="tab-pane fade" id="real-estate-2-tab3">
                                <iframe src="@Html.Raw(Model.GoogleMapIFrame)" style="border:0; width:100%; height:400px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

                            </div><!-- End Tab 3 Content -->
                        </div><!-- End Tab Content -->
                    </div>
                </div>

            </div>

        </section><!-- /Real Estate 2 Section -->

    </main>



    <!-- Scroll Top -->
    <a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

    <!-- Preloader -->
    <div id="preloader"></div>

    <!-- Vendor JS Files -->
    <script src="~/EstateAgency/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="~/EstateAgency/assets/vendor/php-email-form/validate.js"></script>
    <script src="~/EstateAgency/assets/vendor/aos/aos.js"></script>
    <script src="~/EstateAgency/assets/vendor/swiper/swiper-bundle.min.js"></script>
    <script src="~/EstateAgency/assets/vendor/purecounter/purecounter_vanilla.js"></script>

    <!-- Main JS File -->
    <script src="~/EstateAgency/assets/js/main.js"></script>

</body>

</html>