@if(isset($data) && is_array($data) && !empty($data))
<section id="tab">
  <div class="container">
    <div class="row">
      <div
        class="col-12 tab-style-04"
        data-anime='{ "translate": [0, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }'>
        <ul
          class="nav nav-tabs border-0 justify-content-center alt-font fs-17 fw-500">
          <li class="nav-item">
            <a
              data-bs-toggle="tab"
              href="#urun-tanitimi"
              class="nav-link active">Ürün Tanıtımı<span class="tab-border bg-dark-gray"></span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#ek-bilgiler">Ek Bilgiler<span class="tab-border bg-dark-gray"></span></a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              data-bs-toggle="tab"
              href="#urun-grubu"
              data-tab="review-tab">Ürün Grubu<span class="tab-border bg-dark-gray"></span></a>
          </li>
        </ul>
        <div class="mb-6 h-1px w-100 bg-extra-medium-gray sm-mt-10px"></div>
        <div class="tab-content">
          <!-- start tab content -->
          <div class="tab-pane fade in active show" id="urun-tanitimi">
            @if(isset($data['urun_tanitimi']) && is_array($data['urun_tanitimi']) && !empty($data['urun_tanitimi']))

            <div
              class="row align-items-center justify-content-center mb-5 sm-mb-10">
              <div class="col-xl-4 col-lg-5 md-mb-40px">
                <div class="d-flex align-items-center mb-10px">
                  <div class="col alt-font fs-15 fw-500 text-dark-gray">
                    @if(isset($data['urun_tanitimi']['urun_tanitimi_ust_alan_baslik']))
                    {{ $data['urun_tanitimi']['urun_tanitimi_ust_alan_baslik'] }}
                    @endif
                  </div>
                </div>
                <h4 class="alt-font text-dark-gray fw-700 mb-20px">
                  @if(isset($data['urun_tanitimi']['urun_tanitimi_ust_alan_baslik']))
                  {{ $data['urun_tanitimi']['urun_tanitimi_ust_alan_baslik'] }}
                  @endif
                </h4>
                <p>
                  @if(isset($data['urun_tanitimi']['urun_tanitimi_ust_alan_urun_metni']))
                  {{ $data['urun_tanitimi']['urun_tanitimi_ust_alan_urun_metni'] }}
                  @endif
                </p>
                @if(isset($data['urun_tanitimi_ust_alan_ozellik_listesi']))
                <div>
                  @foreach($data['urun_tanitimi_ust_alan_ozellik_listesi'] as $ozellikListesi)
                  <div
                    class="feature-box feature-box-left-icon-middle mb-10px">
                    @if(isset($ozellikListesi['text']))
                    <div
                      class="feature-box-icon feature-box-icon-rounded w-30px h-30px rounded-circle bg-very-light-gray me-10px">
                      <i class="fa-solid fa-check fs-12 text-dark-gray"></i>
                    </div>

                    <div class="feature-box-content">
                      <span class="d-block text-dark-gray fw-500">{{ $ozellikListesi['text'] }}</span>
                    </div>
                    @endif
                  </div>
                  @endforeach
                </div>
                @endif
              </div>
              <div class="col-lg-7 offset-xl-1">
                @if(isset($data['urun_tanitimi']['urun_tanitimi_ust_alan_urun_gorseli']))
                <img src="{{ $data['urun_tanitimi']['urun_tanitimi_ust_alan_urun_gorseli'] }}" alt="{$data['urun_tanitimi']['urun_tanitimi_ust_alan_baslik']}" class="w-100" loading="lazy" />
                @endif
              </div>
            </div>

            @endif
            @php
              $pinImage = $data['urun_tanitimi']['urun_tanitimi_orta_alan_pinli_gorsel'] ?? null;
              $pinsRaw = $data['urun_tanitimi']['urun_tanitimi_orta_alan_pinler'] ?? [];
              if (!is_array($pinsRaw)) { $pinsRaw = []; }
              $pins = array_values(array_filter($pinsRaw, function ($v, $k) { return is_int($k) && is_array($v); }, ARRAY_FILTER_USE_BOTH));
            @endphp
            @if(!empty($pinImage))
              <div class="row mb-6 sm-mb-10">
                <div class="col-12">
                  <div class="position-relative w-100">
                    <img src="{{ $pinImage }}" alt="{{ $data['urun_tanitimi']['urun_tanitimi_ust_alan_baslik'] ?? '' }}" class="w-100" loading="lazy" />
                    @foreach($pins as $i => $pin)
                      @php
                        $px = is_numeric($pin['x'] ?? null) ? (float)$pin['x'] : 0;
                        $py = is_numeric($pin['y'] ?? null) ? (float)$pin['y'] : 0;
                        $contentTop = is_numeric($pin['content_top'] ?? null) ? (float)$pin['content_top'] : 40;
                        $contentLeft = is_numeric($pin['content_left'] ?? null) ? (float)$pin['content_left'] : -100;
                        $pinImg = trim((string)($pin['image'] ?? ''));
                        $pinTitle = trim((string)($pin['title'] ?? ''));
                        // Geriye uyumluluk: eski "label" varsa title'a düşsün
                        if ($pinTitle === '') { $pinTitle = trim((string)($pin['label'] ?? '')); }
                        $pinSubtitle = trim((string)($pin['subtitle'] ?? ''));
                        $pinUrl = trim((string)($pin['url'] ?? ''));
                        $pinBtn = trim((string)($pin['button_text'] ?? 'İNCELEYİN'));
                      @endphp
                      <div class="product-pin" style="top: {{ $py }}%; left: {{ $px }}%">
                        <div class="product-pin-content" style="top: {{ $contentTop }}px; left: {{ $contentLeft }}px">
                          @if($pinImg !== '')
                            <img src="{{ $pinImg }}" class="product-pin-image" alt="" loading="lazy" />
                          @endif
                          @if($pinTitle !== '')
                            <h5 class="product-pin-title">{{ $pinTitle }}</h5>
                          @endif
                          @if($pinSubtitle !== '')
                            <h6 class="product-pin-subtitle">{{ $pinSubtitle }}</h6>
                          @endif
                          @if($pinUrl !== '')
                            <a href="{{ $pinUrl }}" target="_blank"
                               class="btn btn-extra-large btn-rounded with-rounded btn-base-color btn-box-shadow box-shadow-extra-large appear product-pin-button">
                              {{ $pinBtn !== '' ? $pinBtn : 'İNCELEYİN' }}
                              <span class="bg-white text-base-color">
                                <i class="fas fa-arrow-right"></i>
                              </span>
                            </a>
                          @endif
                        </div>
                      </div>
                    @endforeach
                  </div>
                </div>
              </div>
            @endif

            <div class="row mb-6 sm-mb-10">
              <div class="co-12 col-md-4 sm-mb-35px">
                <h5 class="text-dark-gray alt-font mb-0 fw-700">
                  @if(isset($data['urun_tanitimi']['urun_tanitimi_orta_alan_sol_baslik']))
                  {{ $data['urun_tanitimi']['urun_tanitimi_orta_alan_sol_baslik'] }}
                  @endif
                </h5>
              </div>
              <div
                class="co-12 col-md-4 sm-mb-35px outside-box-top-18 sm-outside-box-top-0"
                style="z-index: 10">
                @if(isset($data['urun_tanitimi']['urun_tanitimi_orta_alan_gorsel']))
                <img src="{{ $data['urun_tanitimi']['urun_tanitimi_orta_alan_gorsel'] }}" alt="{$data['urun_tanitimi']['urun_tanitimi_ust_alan_baslik']}" loading="lazy" />
                @endif
              </div>
              <div class="co-12 col-md-4 last-paragraph-no-margin">
                @if(isset($data['urun_tanitimi']['urun_tanitimi_orta_alan_sag_metin']))
                <p>
                  {{ $data['urun_tanitimi']['urun_tanitimi_orta_alan_sag_metin'] }}
                </p>
                @endif
              </div>
            </div>


            @if(isset($data['urun_tanitimi_kutucuk_urunler']) && is_array($data['urun_tanitimi_kutucuk_urunler']))
            <div
              class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 mb-5 sm-mb-10 border border-1 border-color-extra-medium-gray g-0">
              @foreach(array_slice($data['urun_tanitimi_kutucuk_urunler'], 0, 4) as $index => $kutucukUrunler)
              <div
                class="col border-end {{ $index < 3 ? 'xs-border-end-0' : '' }} {{ $index < 3 ? 'md-border-bottom' : '' }} {{ $index == 2 ? 'xs-border-bottom' : '' }} border-color-extra-medium-gray last-paragraph-no-margin text-center ps-3 pe-3 pt-4 pb-4 xl-ps-2 xl-pe-2 md-p-30px">
                @if(isset($kutucukUrunler['gorsel']))
                <img
                  loading="lazy"
                  src="{{ $kutucukUrunler['gorsel'] }}"
                  alt=""
                  class="border-radius-100 box-shadow-quadruple-large mb-30px" />

                @endif
                <span
                  class="d-block fs-15 fw-700 text-dark-gray text-uppercase ls-05px mb-5px">{{ strtoupper(substr($kutucukUrunler['baslik'], 0, 6)) }}</span>
                <p>{{ $kutucukUrunler['metin'] }}</p>
              </div>
              @endforeach
            </div>
            @endif

            @if(isset($data['urun_tanitimi_alt_alan_tek_metin']))
            <div class="row justify-content-center">
              <div class="col-auto text-center last-paragraph-no-margin">
                <div class="d-inline-block align-middle me-10px">
                  <i
                    class="bi bi-patch-check-fill icon-extra-medium text-dark-gray"></i>
                </div>
                <div
                  class="d-inline-block text-dark-gray text-uppercase fs-15 fw-600 ls-05px align-middle">
                  {{ $data['urun_tanitimi_alt_alan_tek_metin'] }}
                </div>
              </div>
            </div>

            @endif
          </div>
          <!-- end tab content -->
          <!-- start tab content -->
          <div class="tab-pane fade in" id="ek-bilgiler">
            <div class="materials">
              @foreach(($data['ek_bilgiler'] ?? []) as $ek)
              @php
              $raw = $ek['ek_bilgiler_urun_grubu'] ?? [];
              $title = is_array($raw) ? ($raw['title'] ?? null) : null;
              // $raw hem meta (örn. 'title') hem de numeric grupları aynı array içinde tutabiliyor.
              $groups = is_array($raw)
                ? array_values(array_filter($raw, function ($v, $k) { return is_int($k) && is_array($v); }, ARRAY_FILTER_USE_BOTH))
                : [];
              $allItems = [];
              foreach ($groups as $g) {
                $ogelerRaw = $g['ek_bilgiler_urun_grubu_ogesi'] ?? [];
                if (is_array($ogelerRaw)) {
                  // Alt array de meta + numeric item karışımı olabiliyor; sadece numeric itemleri topla.
                  $ogeler = array_values(array_filter($ogelerRaw, function ($v, $k) { return is_int($k) && is_array($v); }, ARRAY_FILTER_USE_BOTH));
                  if (!empty($ogeler)) { $allItems = array_merge($allItems, $ogeler); }
                }
              }
              @endphp
              @if(!empty($allItems))
              <div class="material-column">
                @if($title)<h3>{{ $title }}</h3>@endif
                <div class="material">
                  @foreach($allItems as $colorItem)
                  <div class="material-item">
                    @if(!empty($colorItem['color_image']))
                    <img src="{{ $colorItem['color_image'] }}" alt="material">
                    @endif
                    <p>{{ $colorItem['color_code'] ?? '' }}</p>
                  </div>
                  @endforeach
                </div>
              </div>
              @endif
              @endforeach
            </div>
            <div class="row">
              <div class="material-desc">
                <div class="material-desc-title">
                  <p>{{ $data['ek_bilgiler_material']['title'] ?? '' }}</p>
                </div>
                <div class="material-body">
                  {!! $data['ek_bilgiler_material']['material_text'] ?? '' !!}
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 last-paragraph-no-margin sm-mb-30px">
                @if(isset($data['ek_bilgiler_metin']['ek_bilgiler_left_title']))
                <div class="fs-20 alt-font text-dark-gray mb-20px fw-600">
                  {{ $data['ek_bilgiler_metin']['ek_bilgiler_left_title'] }}
                </div>
                @endif
                @if(isset($data['ek_bilgiler_metin']['ek_bilgiler_left_text']))
                <p class="w-80 md-w-100">
                  {{ $data['ek_bilgiler_metin']['ek_bilgiler_left_text'] }}
                </p>
                @endif
              </div>

              <div class="col-md-6 last-paragraph-no-margin">
                @if(isset($data['ek_bilgiler_metin']['ek_bilgiler_right_title']))
                <div class="fs-20 alt-font text-dark-gray mb-20px fw-600">
                  {{ $data['ek_bilgiler_metin']['ek_bilgiler_right_title'] }}
                </div>
                @endif
                @if(isset($data['ek_bilgiler_metin']['ek_bilgiler_right_text']))
                <p class="w-80 md-w-100">
                  {{ $data['ek_bilgiler_metin']['ek_bilgiler_right_text'] }}
                </p>
                @endif
              </div>
            </div>
          </div>
          <!-- end tab content -->

          <!-- start tab content -->
          <div class="tab-pane fade in" id="urun-grubu">
            <div class="row g-0 mb-4 md-mb-35px">
              @if(!empty($data['urun_grubu']))
              @foreach($data['urun_grubu'] as $urunGrubu)
              <div class="col-12 border-bottom border-color-extra-medium-gray pb-40px mb-40px xs-pb-30px xs-mb-30px">
                <div class="d-block d-md-flex w-100 align-items-center">
                  <div>
                    <div class="w-300px md-w-250px sm-w-100 sm-mb-10px text-center">
                      <img src="{{ $urunGrubu['urun_grubu_gorseli'] ?? '' }}" class="rounded-circle w-90px mb-10px" alt="" />
                      <span class="text-dark-gray fw-600 d-block">{{ $urunGrubu['urun_grubu_basligi'] ?? '' }}</span>
                    </div>
                    <div class="product_size_buttons mt-30px">
                      @if(!empty($urunGrubu['urun_grubu_dosyasi_1']))
                      <a href="{{ $urunGrubu['urun_grubu_dosyasi_1'] }}">
                        <img src="{{ asset(env('THEME_FOLDER') . '/assets/images/buttonOrnek.png') }}" alt="button" />
                      </a>
                      @endif
                      @if(!empty($urunGrubu['urun_grubu_dosyasi_2']))
                      <a href="{{ $urunGrubu['urun_grubu_dosyasi_2'] }}">
                        <img src="{{ asset(env('THEME_FOLDER') . '/assets/images/buttonOrnek.png') }}" alt="button" />
                      </a>
                      @endif
                      @if(!empty($urunGrubu['urun_grubu_dosyasi_3']))
                      <a href="{{ $urunGrubu['urun_grubu_dosyasi_3'] }}">
                        <img src="{{ asset(env('THEME_FOLDER') . '/assets/images/buttonOrnek.png') }}" alt="button" />
                      </a>
                      @endif
                    </div>
                  </div>
                  <div class="w-100 last-paragraph-no-margin sm-ps-0 position-relative text-center text-md-start">
                    @if(!empty($urunGrubu['urun_grubu_aciklamasi']))
                    <p class="w-85 sm-w-100 sm-mt-15px">
                      {{ $urunGrubu['urun_grubu_aciklamasi']}}
                    </p>
                    @endif
                  </div>
                </div>
              </div>
              @endforeach
              @endif
            </div>
          </div>
          <!-- end tab content -->
        </div>
      </div>
    </div>
  </div>
</section>
@endif