{{-- Object input: Sol liste alan adları + sağda seçilen alanın input'u --}}
@php
    $safePath = preg_replace('/[^A-Za-z0-9_-]+/', '_', $path);
    $fields = is_array($groupFields ?? null) ? $groupFields : (is_array($inputType ?? null) ? $inputType : []);
    $keys = array_keys($fields);
    $activeField = method_exists($this, 'getActiveField') ? ($this->getActiveField($path) ?: ($keys[0] ?? null)) : ($keys[0] ?? null);
    $title = ucfirst(str_replace('_',' ', $groupName ?? $inputName ?? $path));
@endphp

<div id="card_{{$safePath}}" class="card mb-7 border-dashed border-secondary border-2">
  <div class="card-header d-flex align-items-center justify-content-between gap-3">
    <h3 class="card-title fw-bold text-primary mb-0 d-flex align-items-center">
      <i class="fas fa-cog me-2"></i>{{ $title }}
    </h3>
    <div class="d-flex align-items-center gap-2">
      <input type="text" class="form-control form-control-sm w-auto" placeholder="Ara..."
        oninput="(function(i){var q=(i.value||'').toLowerCase();var ul=document.getElementById('olist_{{$safePath}}');if(!ul)return;Array.from(ul.querySelectorAll('[data-field]')).forEach(function(li){var label=(li.getAttribute('data-label')||'').toLowerCase();li.style.display=!q||label.indexOf(q)>-1?'':'none';});})(this)">
    </div>
  </div>

  <div class="card-body">
    <div class="row g-5">
      <div class="col-lg-4">
        <ul id="olist_{{$safePath}}" class="list-group">
          @foreach($fields as $fieldName => $fieldType)
            @php
              $label = ucwords(str_replace('_',' ',$fieldName));
              $isActive = ($fieldName === $activeField);
            @endphp
            <li class="list-group-item d-flex align-items-center {{ $isActive ? 'active' : '' }}" data-field="{{$fieldName}}" data-label="{{$label}}" wire:key="oi-li-{{$safePath}}-{{$fieldName}}">
              <button type="button" class="btn btn-link ps-0 text-start flex-grow-1 text-wrap overflow-hidden"
                      wire:click="setActiveField('{{$path}}','{{$fieldName}}')">
                {{ $label }}
              </button>
            </li>
          @endforeach
        </ul>
      </div>

      <div class="col-lg-8">
        @if(!$activeField)
          <div class="alert alert-info">Bir alan seçiniz.</div>
        @else
          @php
            $inp = $fields[$activeField] ?? 'string';
            $currentPath = $path . '.' . $activeField;
            $fieldId = str_replace('.', '_', $currentPath);
            $wireModel = 'data.' . $currentPath;
          @endphp

          <div class="card shadow-sm" wire:key="oi-detail-{{$safePath}}-{{$activeField}}">
            <div class="card-header py-3">
              <div class="card-title fw-bold text-gray-800 d-flex align-items-center">
                <i class="ki-outline ki-element-11 me-2"></i>
                {{ ucwords(str_replace('_',' ',$activeField)) }}
              </div>
            </div>
            <div class="card-body">
              @switch($inp)
                @case('text')
                  <div class="fv-row mb-7">
                    <label class="fw-semibold fs-6 mb-2">{{ ucwords(str_replace('_', ' ', $activeField)) }}</label>
                    <div wire:ignore>
                      <div id="ckeditor_{{$fieldId}}" style="min-height: 200px;">{!! data_get($data, $currentPath, '') !!}</div>
                    </div>
                    <input type="hidden" id="ckeditor_input_{{$fieldId}}" wire:model="{{$wireModel}}">
                  </div>
                @break
                @case('string')
                  <div class="fv-row mb-7">
                    <label class="fw-semibold fs-6 mb-2">{{ ucwords(str_replace('_', ' ', $activeField)) }}</label>
                    <input type="text" wire:model.defer="{{$wireModel}}" class="form-control form-control-solid" placeholder="{{ ucwords(str_replace('_', ' ', $activeField)) }}" />
                  </div>
                @break
                @case('textarea')
                  <div class="fv-row mb-7">
                    <label class="fw-semibold fs-6 mb-2">{{ ucwords(str_replace('_', ' ', $activeField)) }}</label>
                    <textarea wire:model.defer="{{$wireModel}}" rows="6" class="form-control form-control-solid" placeholder="{{ ucwords(str_replace('_', ' ', $activeField)) }}"></textarea>
                  </div>
                @break
                @case('number')
                  <div class="fv-row mb-7">
                    <label class="fw-semibold fs-6 mb-2">{{ ucwords(str_replace('_', ' ', $activeField)) }}</label>
                    <input type="number" wire:model.defer="{{$wireModel}}" class="form-control form-control-solid" placeholder="{{ ucwords(str_replace('_', ' ', $activeField)) }}" />
                  </div>
                @break
                @case('boolean')
                  <div class="fv-row mb-7">
                    <label class="fw-semibold fs-6 mb-2">{{ ucwords(str_replace('_', ' ', $activeField)) }}</label>
                    <select wire:model.defer="{{$wireModel}}" class="form-control form-control-solid">
                      <option value="1">Doğru</option>
                      <option value="0">Yanlış</option>
                    </select>
                  </div>
                @break
                @case('select')
                  <div class="fv-row mb-7">
                    <label class="fw-semibold fs-6 mb-2">{{ ucwords(str_replace('_', ' ', $activeField)) }}</label>
                    <select wire:model.defer="{{$wireModel}}" class="form-control form-control-solid">
                      <option value="">Seçiniz: {{ ucwords(str_replace('_', ' ', $activeField)) }}</option>
                      @php
                        $selectOptions = [];
                        if($activeField == 'form_id') {
                            $forms = \App\Models\Form::orderBy('name', 'asc')->get();
                            foreach ($forms as $form) { 
                                $statusLabel = $form->status ? ' (Aktif)' : ' (Pasif)';
                                $selectOptions[$form->id] = $form->name . ' (' . $form->slug . ')' . $statusLabel; 
                            }
                        }
                        @endphp
                        @foreach($selectOptions as $value => $label)
                            <option value="{{$value}}">{{$label}}</option>
                        @endforeach
                    </select>
                  </div>
                @break
                @case('file')
                  <div class="fv-row mb-7">
                    <label class="fw-semibold fs-6 mb-2">{{ ucwords(str_replace('_', ' ', $activeField)) }}</label>
                    <div class="input-group">
                      <input type="text" id="{{$fieldId}}" wire:model.live="{{$wireModel}}" name="{{$fieldId}}" class="form-control form-control-solid" placeholder="{{ ucwords(str_replace('_', ' ', $activeField)) }}" readonly />
                      <button type="button" class="btn btn-primary" onclick="openFileManagerNested('{{$fieldId}}', '{{$currentPath}}')"><i class="fas fa-folder-open"></i> {{ __('common.browse') }}</button>
                      <button type="button" class="btn btn-light btn-sm" onclick="OriginCmsFile.clear('{{$fieldId}}')">Temizle</button>
                    </div>
                    @if(data_get($data, $currentPath))
                      <div class="mt-3">
                        @php
                          $isPinImage = ($activeField === 'urun_tanitimi_orta_alan_pinli_gorsel');
                          $pinsPath = $path . '.urun_tanitimi_orta_alan_pinler';
                          $pinsRaw = data_get($data, $pinsPath, []);
                          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));
                          $imgId = $fieldId . '_pinimg';
                        @endphp

                        @if($isPinImage)
                          <div class="position-relative d-inline-block" style="max-width: 520px; width: 100%; cursor: crosshair;"
                               onclick="(function(ev){
                                  var img=document.getElementById('{{$imgId}}');
                                  if(!img) return;
                                  var rect=img.getBoundingClientRect();
                                  if(!rect.width||!rect.height) return;
                                  var x=((ev.clientX-rect.left)/rect.width)*100;
                                  var y=((ev.clientY-rect.top)/rect.height)*100;
                                  x=Math.max(0,Math.min(100,x));
                                  y=Math.max(0,Math.min(100,y));
                                  // Eğer seçili pin varsa, konumu güncelle; yoksa yeni pin ekle.
                                  try {
                                    window.__originPins = window.__originPins || {};
                                    var sel = window.__originPins['{{$pinsPath}}'];
                                    if (typeof sel === 'number' && sel >= 0) {
                                      @this.call('updatePinPosition', '{{$pinsPath}}', sel, x, y);
                                    } else {
                                      @this.call('addPin', '{{$pinsPath}}', x, y);
                                    }
                                  } catch(e){}
                               })(event)">
                            <img id="{{$imgId}}" class="img-thumbnail w-100" src="{{ data_get($data, $currentPath) }}" alt="preview" style="max-width: 520px;">
                            @foreach($pins as $pi => $pin)
                              @php
                                $px = is_numeric($pin['x'] ?? null) ? (float)$pin['x'] : 0;
                                $py = is_numeric($pin['y'] ?? null) ? (float)$pin['y'] : 0;
                                $puid = $pin['__uid'] ?? ($imgId . '_' . $pi);
                                $activePinIdx = method_exists($this, 'getActivePinIndex') ? $this->getActivePinIndex($pinsPath) : null;
                                $isSelectedPin = ($activePinIdx !== null && (int)$activePinIdx === (int)$pi);
                              @endphp
                              <button type="button"
                                      wire:key="pin-dot-{{$puid}}"
                                      class="position-absolute btn p-0"
                                      style="left: {{$px}}%; top: {{$py}}%; transform: translate(-50%, -50%);"
                                      onclick="event.stopPropagation(); window.__originPins = window.__originPins || {}; window.__originPins['{{$pinsPath}}']={{$pi}};"
                                      wire:click.stop="setActivePinIndex('{{$pinsPath}}', {{$pi}})"
                                      title="Pin seç: sonra görsele tıklayıp taşıyabilirsiniz">
                                <span class="badge {{ $isSelectedPin ? 'badge-primary' : 'badge-danger' }}" style="border-radius: 999px; width: 22px; height: 22px; display:inline-flex; align-items:center; justify-content:center;">
                                  {{ $pi + 1 }}
                                </span>
                              </button>
                            @endforeach
                          </div>

                          <div class="mt-4">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                              <div class="fw-semibold">Pinler</div>
                              <div class="text-muted small">Görsel üzerine tıklayarak pin ekleyin.</div>
                              <div class="text-muted small">Pinlerin yerini değiştirmek için pin üzerine tıklayıp maviye dönüştükten sonra taşıyabilirsiniz.</div>
                            </div>
                            @if(empty($pins))
                              <div class="text-muted small">Henüz pin yok.</div>
                            @else
                              <div class="d-flex flex-column gap-2">
                                @foreach($pins as $pi => $pin)
                                  @php
                                    $puid = $pin['__uid'] ?? ($imgId . '_' . $pi);
                                    $pinModel = 'data.' . $pinsPath . '.' . $pi;
                                    $pinImageId = $imgId . '_pin_' . $pi . '_image';
                                    $pinImagePath = $pinsPath . '.' . $pi . '.image';
                                  @endphp
                                  <div wire:key="pin-row-{{$puid}}" class="d-flex flex-column gap-2 p-3 border rounded bg-light">
                                    <div class="d-flex align-items-center justify-content-between gap-2">
                                      <div class="d-flex align-items-center gap-2">
                                        <span class="badge badge-light-primary">#{{ $pi + 1 }}</span>
                                        <span class="text-muted small">Pin içeriği</span>
                                      </div>
                                      <button type="button" class="btn btn-icon btn-sm btn-light-danger"
                                              onclick="event.stopPropagation()"
                                              wire:click="removePin('{{$pinsPath}}', {{$pi}})">
                                        <i class="ki-outline ki-trash"></i>
                                      </button>
                                    </div>

                                    <div class="row g-2">
                                      <div class="col-12 col-lg-6">
                                        <label class="form-label fw-semibold mb-1">Pin görseli</label>
                                        <div class="input-group input-group-sm">
                                          <input type="text" id="{{$pinImageId}}" class="form-control form-control-solid"
                                                 wire:model.live="{{ $pinModel }}.image"
                                                 placeholder="Pin görseli" readonly />
                                          <button type="button" class="btn btn-primary"
                                                  onclick="event.stopPropagation(); openFileManagerNested('{{$pinImageId}}', '{{$pinImagePath}}')">
                                            <i class="fas fa-folder-open"></i>
                                          </button>
                                          <button type="button" class="btn btn-light"
                                                  onclick="event.stopPropagation(); OriginCmsFile.clear('{{$pinImageId}}', { lwId: '{{ $this->getId() }}', lwPath: '{{ $pinModel }}.image' })">
                                            Temizle
                                          </button>
                                        </div>
                                      </div>

                                      <div class="col-12 col-md-6 col-lg-3">
                                        <label class="form-label fw-semibold mb-1">Başlık</label>
                                        <input type="text" class="form-control form-control-solid form-control-sm"
                                               wire:model.defer="{{ $pinModel }}.title"
                                               placeholder="Başlık" />
                                      </div>
                                      <div class="col-12 col-md-6 col-lg-3">
                                        <label class="form-label fw-semibold mb-1">Alt başlık</label>
                                        <input type="text" class="form-control form-control-solid form-control-sm"
                                               wire:model.defer="{{ $pinModel }}.subtitle"
                                               placeholder="Alt başlık" />
                                      </div>

                                      <div class="col-12 col-md-6">
                                        <label class="form-label fw-semibold mb-1">Link</label>
                                        <input type="text" class="form-control form-control-solid form-control-sm"
                                               wire:model.defer="{{ $pinModel }}.url"
                                               placeholder="Link" />
                                      </div>
                                      <div class="col-12 col-md-6">
                                        <label class="form-label fw-semibold mb-1">Buton yazısı</label>
                                        <input type="text" class="form-control form-control-solid form-control-sm"
                                               wire:model.defer="{{ $pinModel }}.button_text"
                                               placeholder="Buton yazısı" />
                                      </div>

                                      <div class="col-12 col-md-6">
                                        <label class="form-label fw-semibold mb-1">X (%)</label>
                                        <input type="number" step="0.5" class="form-control form-control-solid form-control-sm"
                                               wire:model.defer="{{ $pinModel }}.x"
                                               placeholder="x%" />
                                      </div>
                                      <div class="col-12 col-md-6">
                                        <label class="form-label fw-semibold mb-1">Y (%)</label>
                                        <input type="number" step="0.5" class="form-control form-control-solid form-control-sm"
                                               wire:model.defer="{{ $pinModel }}.y"
                                               placeholder="y%" />
                                      </div>
                                      <div class="col-12 col-md-6">
                                        <label class="form-label fw-semibold mb-1">Popup Top (px)</label>
                                        <input type="number" step="1" class="form-control form-control-solid form-control-sm"
                                               wire:model.defer="{{ $pinModel }}.content_top"
                                               placeholder="top(px)" />
                                      </div>
                                      <div class="col-12 col-md-6">
                                        <label class="form-label fw-semibold mb-1">Popup Left (px)</label>
                                        <input type="number" step="1" class="form-control form-control-solid form-control-sm"
                                               wire:model.defer="{{ $pinModel }}.content_left"
                                               placeholder="left(px)" />
                                      </div>
                                    </div>
                                  </div>
                                @endforeach
                              </div>
                            @endif
                          </div>
                        @else
                          <img class="img-thumbnail media-thumb" src="{{ data_get($data, $currentPath) }}" alt="preview" style="max-width: 220px;">
                        @endif
                      </div>
                    @endif
                  </div>
                @break
                @default
                  <div class="fv-row mb-7">
                    <label class="fw-semibold fs-6 mb-2">{{ ucwords(str_replace('_', ' ', $activeField)) }}</label>
                    <input type="text" wire:model.defer="{{$wireModel}}" class="form-control form-control-solid" />
                  </div>
              @endswitch
            </div>
          </div>
        @endif
      </div>
    </div>
  </div>
</div>