@extends('layouts.newapp')

@section('title', $page->meta_title ?: $page->title)
@section('meta_description', $page->meta_description ?: \Illuminate\Support\Str::limit(strip_tags((string) ($compiledContent ?? $page->content ?? '')), 160, ''))
@section('meta_keywords', $page->meta_keywords ?? '')
@section('og_type', 'website')

@section('content')
<style>

.product-thumb {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: 16px;
}

.product-thumb img.product-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
}

.product-thumb img.product-img.active {
    opacity: 1;
}


/* OKLAR */
.product-thumb .nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);   /* 🔥 asıl merkezleme */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: none;
    cursor: pointer;

    display: flex;                /* 🔥 ikon da ortalansın */
    align-items: center;
    justify-content: center;

    font-size: 22px;
    opacity: 0;
    transition: .25s ease;
    z-index: 5;
}

.product-thumb .prev {
    left: 12px;
}

.product-thumb .next {
    right: 12px;
}

.product-card:hover .nav {
    opacity: 1;
}



</style>

<section class="breadcrumb-area py-4 bg-light border-bottom">
    <div class="container">
        <div class="breadcrumb-item">
            <h2 class="title mb-3">{{ $page->title }}</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    @foreach ($breadcrumb as $i => $item)
                        @if ($i === count($breadcrumb) - 1)
                            <li class="breadcrumb-item active" aria-current="page">{{ $item['title'] }}</li>
                        @else
                            <li class="breadcrumb-item active">
                                {{ $item['title'] }}
                            </li>
                        @endif
                    @endforeach
                </ol>
            </nav>
        </div>
    </div>
</section>

{!! $compiledContent !!}

@if($systems->count())
<section class="infetech-project-3-area infetech-project-slider-area-2 services py-5">
    <div class="container">

        <!-- Başlık Alanı -->
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center">
                <div class="section-title">
                    <span>Uygulama Sistemleri</span>
                </div>
            </div>
        </div>

        <div class="row g-4">

          @foreach($systems as $sys)
          <div class="col-lg-4 col-md-6">
              <div class="single-project-slider-item product-card">

                  <div class="thumb product-thumb">

                      {{-- KAPAK GÖRSEL --}}
                      <img
                          src="{{ asset('storage/'.$sys->image) }}"
                          class="product-img active"
                          alt="{{ $sys->title }}">

                      {{-- GALERİDEN 1 GÖRSEL (VARSA) --}}
                      @if(!empty($sys->gallery) && is_array($sys->gallery))
                          <img
                              src="{{ asset('storage/'.$sys->gallery[0]) }}"
                              class="product-img"
                              alt="{{ $sys->title }}">
                      @endif

                      {{-- OKLAR (SADECE GALERİ VARSA) --}}
                      @if(!empty($sys->gallery))
                          <button class="nav prev" onclick="prevImg(this)">‹</button>
                          <button class="nav next" onclick="nextImg(this)">›</button>
                      @endif

                  </div>

                  <div class="content">
                      <h4 class="title">
                          <a href="{{ locale_url('/sistem/'.$sys->slug) }}">
                              {{ $sys->title }}
                          </a>
                      </h4>

                      <span>{{ $sys->short_description }}</span>

                      <a class="link" href="{{ locale_url('/sistem/'.$sys->slug) }}">
                          <i class="fal fa-chevron-right"></i>
                      </a>
                  </div>

              </div>
          </div>
          @endforeach


        </div>

    </div>
</section>
@endif


@if($products->count())
<section class="infetech-project-3-area infetech-project-slider-area-2 services py-5">
    <div class="container">

        <!-- Başlık Alanı -->
        <div class="row justify-content-center">
            <div class="col-lg-6 text-center">
                <div class="section-title">
                    <span>Ürünler</span>
                </div>
            </div>
        </div>

        <div class="row g-4">

            @foreach($products as $pro)
            <div class="col-lg-4 col-md-6">
                <div class="single-project-slider-item">

                    <div class="thumb">
                        <img
                            src="{{ asset('storage/' . $pro->image) }}"
                            alt="{{ $pro->title }}"
                            style="width:100%; height:260px; object-fit:cover;"
                        >
                    </div>

                    <div class="content">
                        <h4 class="title">
                            <a href="{{ locale_url('/product/'.$pro->slug) }}">
                                {{ $pro->title }}
                            </a>
                        </h4>

                        <span>{{ $pro->short_description }}</span>

                        <a class="link" href="{{ locale_url('/product/'.$pro->slug) }}">
                            <i class="fal fa-chevron-right"></i>
                        </a>
                    </div>

                </div>
            </div>
            @endforeach

        </div>

    </div>
</section>
@endif


<script>
function showNextImage(wrapper) {
    const imgs = wrapper.querySelectorAll('.product-img');
    let index = [...imgs].findIndex(i => i.classList.contains('active'));

    imgs[index].classList.remove('active');
    index = (index + 1) % imgs.length;
    imgs[index].classList.add('active');
}

// Otomatik slider başlat
document.querySelectorAll('.product-thumb').forEach(wrapper => {

    // sadece 1 görsel varsa çalışmasın
    if (wrapper.querySelectorAll('.product-img').length < 2) return;

    let interval = setInterval(() => {
        showNextImage(wrapper);
    }, 7000);

    // kullanıcı hover ederse durdur
    wrapper.addEventListener('mouseenter', () => {
        clearInterval(interval);
    });

    // hover bitince tekrar başlat
    wrapper.addEventListener('mouseleave', () => {
        interval = setInterval(() => {
            showNextImage(wrapper);
        }, 7000);
    });
});

// Manuel butonlar
function nextImg(btn) {
    const wrapper = btn.closest('.product-thumb');
    showNextImage(wrapper);
}

function prevImg(btn) {
    const wrapper = btn.closest('.product-thumb');
    const imgs = wrapper.querySelectorAll('.product-img');
    let index = [...imgs].findIndex(i => i.classList.contains('active'));

    imgs[index].classList.remove('active');
    index = (index - 1 + imgs.length) % imgs.length;
    imgs[index].classList.add('active');
}
</script>




@endsection