@extends('layouts.newapp')

  @section('title', $system->meta_title ?: $system->title)
  @section('meta_description', $system->meta_description ?: \Illuminate\Support\Str::limit(strip_tags((string) ($system->short_description ?: $system->content)), 160, ''))
  @section('meta_keywords', $system->meta_keywords ?? '')
  @section('og_image', $system->image ?? '')
  @section('og_type', 'product')

  @section('json_ld')
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'Product',
    'name' => $system->title,
    'description' => \Illuminate\Support\Str::limit(strip_tags((string) ($system->meta_description ?: $system->short_description ?: $system->content)), 300, ''),
    'image' => $system->image ? asset('storage/'.$system->image) : asset('assets/images/logo.png'),
    'brand' => ['@type' => 'Brand', 'name' => 'Kenncoat'],
    'url' => url()->current(),
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
  @endsection

  @section('content')
  <style>

  /* Modern Tab Nav */
  .modern-tabs .nav-link {
      border: none !important;
      border-radius: 50px !important;
      padding: 10px 24px;
      font-weight: 600;
      color: #555;
      background: #f1f1f1;
      margin-right: 10px;
      transition: 0.25s all ease-in-out;
  }

  .modern-tabs .nav-link.active {
      background: #ad2230;
      color: #fff !important;
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.25);
      transform: translateY(-2px);
  }

  .modern-tabs .nav-link:hover {
      background: #e2e2e2;
  }

  /* Content Card */
  .modern-tab-content {
      background: #fff;
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 4px 26px rgba(0, 0, 0, 0.08);
      animation: fadeIn 0.4s ease;
  }

  @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
  }
  /* Ürün Medya Alanı */
  .product-media-wrap {
      background: #fff;
      padding: 20px;
      border-radius: 24px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  }

  /* Ana Görsel */
  .product-main-image {
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 20px;
  }

  .product-main-image img {
      width: 100%;
      height: 100%;
      object-fit: contain; /* ürün için en iyisi */
      transition: transform .4s ease;
  }

  .product-main-image:hover img {
      transform: scale(1.05);
  }

  /* Galeri */
  .product-gallery img {
      width: 100%;
      height: 110px;
      object-fit: cover;
      border-radius: 14px;
      border: 2px solid transparent;
      transition: all .25s ease;
      background: #f3f3f3;
  }

  .gallery-thumb:hover img {
      border-color: #ad2230;
      transform: translateY(-4px);
  }

  /* Ürün İçerik */
  .product-details-content {
      padding-left: 10px;
  }

  .product-title {
      font-size: 28px;
      font-weight: 700;
      line-height: 1.3;
      color: #222;
  }

  .product-description {
      font-size: 16px;
      line-height: 1.75;
      color: #555;
  }

  /* Mobil */
  @media (max-width: 768px) {
      .product-main-image {
          aspect-ratio: 1 / 1;
      }

      .product-gallery img {
          height: 90px;
      }

      .product-title {
          font-size: 24px;
      }
  }


  .product-main-image img {
      transition: opacity .25s ease, transform .4s ease;
  }

  .gallery-thumb img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      border-radius: 14px;
      border: 2px solid transparent;
      transition: .25s ease;
      background: #f3f3f3;
      cursor: pointer;
  }

  .gallery-thumb:hover img {
      transform: translateY(-4px);
  }

  .gallery-thumb.active img {
      border-color: #ad2230;
  }

  </style>

  <section class="breadcrumb-area py-4 bg-light border-bottom">
      <div class="container">
          <div class="breadcrumb-item">

              <h2 class="title mb-3">{{ $system->title }}</h2>

              <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">

                      <!-- Anasayfa -->
                      <li class="breadcrumb-item">
                          <a href="{{ url('/') }}">Anasayfa</a>
                      </li>

                      <!-- Sistemler listesi (varsa kategoriler ekleriz) -->
                      <li class="breadcrumb-item">
                          <a href="#">Ürünler</a>
                      </li>

                      <!-- Mevcut Sistem -->
                      <li class="breadcrumb-item active" aria-current="page">
                          {{ $system->title }}
                      </li>

                  </ol>
              </nav>

          </div>
      </div>
  </section>

  <!-- 🔹 TEMEL BİLGİLER BÖLÜMÜ -->
  <!-- 🔹 ÜRÜN TEMEL BİLGİLER -->
  <section class="product-details-area pt-30 pb-60">
      <div class="container">
          <div class="row align-items-start  gy-4">

              <!-- 🔹 ÜRÜN GÖRSELLERİ -->
              <div class="col-lg-6">
                <div class="product-media-wrap">

                    {{-- ANA GÖRSEL --}}
                    <div class="product-main-image">
                        <img
                            id="mainProductImage"
                            src="{{ asset('storage/' . $system->image) }}"
                            alt="{{ $system->title }}"
                            class="img-fluid">
                    </div>

                    {{-- GALERİ --}}
                    @if(!empty($system->gallery) && is_array($system->gallery))
                        <div class="product-gallery row g-3 mt-3">

                            {{-- DEFAULT ANA GÖRSEL (ilk thumbnail) --}}
                            <div class="col-4">
                                <a href="javascript:void(0)"
                                   class="gallery-thumb active"
                                   onclick="changeMainImage('{{ asset('storage/' . $system->image) }}', this)">
                                    <img
                                        src="{{ asset('storage/' . $system->image) }}"
                                        alt="{{ $system->title }}">
                                </a>
                            </div>

                            {{-- GALERİ RESİMLERİ --}}
                            @foreach($system->gallery as $img)
                                <div class="col-4">
                                    <a href="javascript:void(0)"
                                       class="gallery-thumb"
                                       onclick="changeMainImage('{{ asset('storage/' . $img) }}', this)">
                                        <img
                                            src="{{ asset('storage/' . $img) }}"
                                            loading="lazy"
                                            alt="{{ $system->title }}">
                                    </a>
                                </div>
                            @endforeach

                        </div>
                    @endif

                </div>
            </div>


              <!-- 🔹 ÜRÜN BİLGİLERİ -->
              <div class="col-lg-6">
                  <div class="product-details-content">

                      <h2 class="product-title mb-3">
                          {{ $system->title }}
                      </h2>

                      <div class="product-description">
                          {!! $system->content !!}
                      </div>


                        @php
                            if (!function_exists('isHtmlEmpty')) {
                                function isHtmlEmpty($html) {
                                    return trim(strip_tags($html)) === '';
                                }
                            }
                        @endphp

                        <!-- 🔥 DİNAMİK TABLAR (Boş alanlar görünmez) -->
                        @php
                            $tabs = [];

                            if(!isHtmlEmpty($system->product_info)) {
                                $tabs['urun'] = 'Ürün Bilgileri';
                            }
                            if(!isHtmlEmpty($system->application)) {
                                $tabs['uygulama'] = 'Uygulama';
                            }
                            if(!isHtmlEmpty($system->warnings)) {
                                $tabs['uyarilar'] = 'Uyarılar ve Öneriler';
                            }
                            $tabs['dokuman'] = ui('tds_tab', 'Teknik Dokümanlar');
                        @endphp


                        <!-- 🔥 MODERN TABLAR -->
                        @if(count($tabs))
                        <section id="system-tabs" class="container py-5">

                            <!-- TAB BUTONLARI -->
                            <ul class="nav modern-tabs mb-4" id="myTab" role="tablist">

                                @foreach($tabs as $key => $label)
                                <li class="nav-item" role="presentation">
                                    <button
                                        class="nav-link {{ $loop->first ? 'active' : '' }}"
                                        id="{{ $key }}-tab"
                                        data-bs-toggle="tab"
                                        data-bs-target="#{{ $key }}"
                                        type="button"
                                        role="tab">
                                        {{ $label }}
                                    </button>
                                </li>
                                @endforeach

                            </ul>

                            <!-- TAB İÇERİKLERİ -->
                            <div class="tab-content modern-tab-content">

                                <!-- Ürün Bilgileri -->
                                @if(!empty($system->product_info))
                                <div
                                    class="tab-pane fade show {{ array_key_first($tabs) === 'urun' ? 'active' : '' }}"
                                    id="urun" role="tabpanel">
                                    {!! $system->product_info !!}
                                </div>
                                @endif

                                <!-- Uygulama -->
                                @if(!empty($system->application))
                                <div class="tab-pane fade" id="uygulama" role="tabpanel">
                                    {!! $system->application !!}
                                </div>
                                @endif

                                <!-- Uyarılar -->
                                @if(!empty($system->warnings))
                                <div class="tab-pane fade" id="uyarilar" role="tabpanel">
                                    {!! $system->warnings !!}
                                </div>
                                @endif

                                <!-- Dökümanlar — indirme yok, TDS talep -->
                                <div class="tab-pane fade {{ array_key_first($tabs) === 'dokuman' ? 'show active' : '' }}" id="dokuman" role="tabpanel">
                                    <h4 class="mb-3">{{ ui('tds_tab', 'Teknik Dokümanlar') }}</h4>
                                    @include('partials.tds-request-form', [
                                        'itemType' => 'product',
                                        'itemId' => $system->id,
                                        'docs' => is_array($system->technical_docs ?? null) ? $system->technical_docs : [],
                                    ])
                                </div>

                            </div>

                        </section>
                        @endif

                  </div>
              </div>

          </div>
      </div>
  </section>




  <script>
  function changeMainImage(src, el) {
      const mainImage = document.getElementById('mainProductImage');

      // fade effect
      mainImage.style.opacity = 0;

      setTimeout(() => {
          mainImage.src = src;
          mainImage.style.opacity = 1;
      }, 150);

      // aktif thumbnail
      document.querySelectorAll('.gallery-thumb').forEach(t => {
          t.classList.remove('active');
      });

      el.classList.add('active');
  }
  </script>

  @endsection