title = "Proje Detay Uptade"
url = "/proje-uptade/:slug"
layout = "master"
is_hidden = 0
contentType = "html"
force_show = 0
==
<?php
use Cms\Classes\LanguageController;

function onStart(){
    $slug = $this->param("slug");
    $lang = LanguageController::GetLang();
    
    $details       = Db::table('flatart_contentmanager_')->where("status", 1)->where("lang", $lang)->where("category", "proje")->where("slug", $slug)->orderBy("id", "desc")->first();
    if(!$details){
          return $this->controller->run('404');
    }
    $this['details']                 = $details;
    $this->page->meta_title             = $details->meta_title. " - Villa Yapı Prefabrik";
    $this->page->meta_description       = $details->meta_description;
    
    $this['gallery'] = json_decode($details->gallery, true);
    $this['project_detail'] = json_decode($details->project_detail, true);
    
    $lastBlogs         = Db::table('flatart_contentmanager_')->where("status", 1)->where("lang", $lang)->where("category", "proje")->orderBy("id", "DESC")->take(4)->get();
    $this['lastBlogs']                 = $lastBlogs;
    
    $this['hreflang']       = Db::table('flatart_contentmanager_')->where("status", 1)->where("hreflang", $details->hreflang)->get();
    
    foreach($this['hreflang'] as $item){
        if($item->lang == 'tr'){
            $this->page->turkishlink = "/tr/proje/".$item->slug."/";
        }elseif($item->lang == 'en'){
            $this->page->englishlink = "/en/project/".$item->slug."/";
        }
    }
    
    if(!$this->page->turkishlink){
        $this->page->turkishlink = "/tr/projeler/";
    }
    
    if(!$this->page->englishlink){
        $this->page->englishlink = "/en/projects/";
    }
    
    if($lang == 'tr'){
        $this->page->canonical              = "https://villayapi.com/".$lang."/proje/".$details->slug."/";
    }else{
        $this->page->canonical              = "https://villayapi.com/".$lang."/project/".$details->slug."/";
    }
   
}
?>
==
<section class="page-title page-title-layout11 text-center">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-sm-12 col-md-12 col-lg-12">
            <nav>
              <ol class="breadcrumb justify-content-center mb-20">
                <li class="breadcrumb-item"><a href="{{ "/tr"|_ }}">{{ "Ana Sayfa"|_ }}</a></li>
                <li class="breadcrumb-item"><a href="{{ "/tr/projeler"|_ }}/">{{ "Projeler"|_ }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ details.name }}</li>
              </ol>
            </nav>
          </div><!-- /.col-xl-6 -->
        </div><!-- /.row -->
      </div><!-- /.container -->
    </section><!-- /.page-title -->

    <!-- ======================
     portfolio single
    ========================= -->

   <div class="container mt-5">
        <div class="row justify-content-center">
            <!-- Left side: Image (8 columns) -->
<div class="col-md-7">
    <div class="swiper uptade-proje">
        <div class="swiper-wrapper">
         {% for item in gallery %}
            <div class="swiper-slide"> 
            <a class="popup-gallery-item" href="{{ item.photo|media }}">
                <img src="{{ item.photo|media}}" alt="portfolio" class="img-fluid" style="border-radius: 8px;"> 
            </a>    
            </div>
             {% endfor %}
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
    </div>
</div>


            <!-- Right side: Details (4 columns) -->
            <div class="col-md-5">
                <div class="project-details">
                    <h3><i class="fas fa-info-circle"></i> Proje Detayları</h3>
                    {% for item in project_detail %}
                    <ul class="list-unstyled mt-4">
                        <li><i class="fas fa-globe"></i><strong>Ülke:</strong> <span>{{item.ulke}}</span></li>
                        <li><i class="fas fa-tags"></i><strong>Proje Türü:</strong> <span>{{item.doing}}</span></li>
                        <li><i class="fas fa-calendar-alt"></i><strong>Proje Tarihi:</strong> <span>{{item.year}}</span></li>
                        <li><i class="fas fa-map-marker-alt"></i><strong>Proje Yeri:</strong> <span>{{item.customer}}</span></li>
                    </ul>
                    {% endfor %}
                </div>
            </div>

        </div>
    </div>

<section class="portfolio-grid pt-50 pb-50 border-top" style="background: #eee;">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="text-block">
                    <div class="text-block__title mb-30 heading-title">{{ "Açıklama"|_ }}</div>
                    <div class="text-block__content">
                        <p class="text-block__desc"></p>
                    </div>
                </div><!-- /.text-block -->
            </div><!-- /.col-lg-6 -->
        </div>
    </div>
</section>


  
    <section class="portfolio-grid pt-50 pb-50 border-top">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 col-md-12 col-lg-6 offset-lg-3">
            <div class="heading text-center mb-40">
              <h2 class="heading__title fz-25">{{ "Diğer Projelerimiz"|_ }}</h2>
            </div><!-- /heading -->
          </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
        <div class="row">
        {% for item in lastBlogs %}
          <!-- portfolio item #1 -->
          <div class="col-sm-12 col-md-3 col-lg-3">
            <div class="portfolio-item">
              <div class="portfolio-item__img">
                <a class="popup-gallery-itmem" href="{{ "/tr/proje"|_ }}/{{ item.slug }}/">
                  <img src="{{ item.cover|media }}" alt="portfolio img">
                </a>
              </div><!-- /.portfolio-img -->
              <div class="portfolio-item__content">
                <div class="portfolio-item__title"><a href="{{ "/tr/proje"|_ }}/{{ item.slug }}/">{{ item.name }}</a></div>
              </div><!-- /.portfolio-content -->
            </div><!-- /.portfolio-item -->
          </div><!-- /.col-lg-4 -->
          {% endfor %}
  
        </div><!-- /.row-->
      </div><!-- /.container -->
    </section>
    




  <style>
  .heading-title {
    color: #D81B60; /* Set the text color */
    font-size: 24px; /* Adjust the font size */
    font-weight: bold; /* Make the text bold */
    position: relative; /* Positioning for the underline */
    display: inline-block;
    border-bottom: 1px #e2e2e2 solid;
    padding: 0 0 5px;
}

.heading-title::after {
   background-color: #ff4c01;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 80px;
    height: 1px;
    content: "";
    display: inline-block;
}

.heading-title::before {
    background-color: #ff4c01;
      position: absolute;
    bottom: -3px;
    left: 20px;
    width: 35px;
    height: 5px;
    content: "";
    display: inline-block;
}

  .portfolio-item .portfolio-item__title a {
    font-size: 18px;
}
  .mt-5 {
    margin-bottom: 30px;
}
 @media screen and (max-width: 680px) {
 .project-details ul li span {
    font-size: 12px !important;
}
.project-details ul li strong {
    font-size: 13px;
}
} 
  
.swiper {
  position: relative; /* Allows absolute positioning of children */
}

/* Style for the navigation buttons */
.swiper-button-next,
.swiper-button-prev {
  color: #fff; /* White color for the buttons */
  position: absolute;
  top: 50%; /* Vertically center the buttons */
  transform: translateY(-50%); /* Adjust for proper centering */
  z-index: 10; /* Ensure the buttons are above other elements */
  width: 44px; /* Adjust the size as necessary */
  height: 44px; /* Adjust the size as necessary */
  cursor: pointer;
  opacity: 1; /* Ensure the buttons are fully visible */
}

/* Adding Font Awesome icons */
.swiper-button-next::before,
.swiper-button-prev::before {
  font-family: "Font Awesome 5 Free"; /* Specify the Font Awesome family */
  font-weight: 900; /* Use the solid style */
  font-size: 30px; /* Adjust the size of the icons */
  content: "\f104"; /* Default icon (prev arrow) */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; /* White color for the icons */
}

/* Next button icon */
.swiper-button-next::before {
  content: "\f105"; /* Use the next arrow icon */
}

/* Background styling for better visibility (optional) */
.swiper-button-next::after,
.swiper-button-prev::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .23);
  color: #fff;
  transform: translate(-50%, -50%);
  z-index: -1; /* Ensure background is behind the icon */
}

/* Positioning the next button */
.swiper-button-next {
  right: 10px; /* Distance from the right edge */
}

/* Positioning the previous button */
.swiper-button-prev {
  left: 10px; /* Distance from the left edge */
}

/* Ensuring slides are visible */
.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
     .project-details {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
        }
        .project-details h3 {
            color: #ff4c01;
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 0px;
            border-bottom: 3px solid #ff4c01;
            padding-bottom: 5px;
            display: inline-block;
        }
        .project-details ul {
            padding-left: 0;
            list-style: none;
        }
        .project-details ul li {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 1.1em;
            
        }
        .project-details ul li i {
            color: gray;
            margin-right: 10px;
        }
        .project-details ul li strong {
            font-weight: bold;
            color: #ff4c01;
            margin-right: 10px;
        }
        .project-details ul li span {
            
            font-size: 14px;
        }
        .fa-tags:before {
        content: "\f02c";
        font-size: 11px;
        }
    </style>