{{--
    Ortak quick-view header.

    Başlık düzenlenebilir OLSUN isteniyorsa modül şu prop'ları verir (bkz.
    components/quick-view/editable-title.blade.php — davranış tek yerde):
        :title-field="'name'"  :title-url="$updateFieldUrl"
        :title-value="$model->name"  :title-auto="'…'"  :title-required="true"
    Prop verilmezse başlık bugünkü gibi düz metindir → mevcut kartlar bozulmaz.
--}}
@props([
    'avatar' => null,
    'title' => null,
    'subtitle' => null,
    'metrics' => null,
    'titleField' => null,
    'titleUrl' => null,
    'titleValue' => null,
    'titleAuto' => null,
    'titleRequired' => false,
    'titlePlaceholder' => null,
    {{-- slim: minimal/kompakt header — tüm kartların hedef SABİT tasarımı.
         Avatar çizilmez, başlık + rozetler tek şeritte akar, metrik ve
         aksiyonlar küçülür. Kartlar sırayla :slim="true" ile geçirilir;
         prop verilmeyen kartlar bugünkü geniş görünümde kalır. --}}
    'slim' => false,
    {{-- Kapatma düğmesinin çağırdığı ifade. Kendi kapanış işi olan kartlar
         (satış quick-create bekleyen kaydı gönderip öyle kapanır) burayı ezer;
         verilmezse ortak kapanış çalışır. --}}
    'close' => 'closeQuickView()',
])
@php $qvEditableTitle = $titleField && $titleUrl; @endphp

<div class="qv-header {{ $slim ? 'slim' : '' }}">
    {{-- Başlık/aksiyon satırı yalnızca başlık/avatar/metrik/aksiyon geçilirse.
         Satış quick-create/quick-view kendi sqv-header'ını kullanır → burada çift buton çıkmasın. --}}
    @if($title || $avatar || $metrics || $qvEditableTitle || isset($actions))
    <div class="qv-header-top">
        <div class="d-flex align-items-center gap-4">
            @if($avatar && !$slim)
                <div class="qv-avatar-wrap">
                    <div class="qv-avatar-big {{ $avatar->attributes->get('class') }}">
                        {{ $avatar }}
                    </div>
                </div>
            @endif
            <div class="qv-title-wrap">
                <h3 class="mb-1 text-dark fw-800 d-flex align-items-center gap-2" style="font-size: 1.75rem; letter-spacing: -0.03em;">
                    @if($qvEditableTitle)
                        <x-quick-view.editable-title
                            class="qv-header-title"
                            :field="$titleField"
                            :url="$titleUrl"
                            :value="$titleValue"
                            :auto="$titleAuto"
                            :required="$titleRequired"
                            :placeholder="$titlePlaceholder" />
                    @endif
                    {{ $title }}
                </h3>
                <div class="d-flex align-items-center gap-2">
                    {{ $subtitle }}
                </div>
            </div>
        </div>

        @if($metrics)
            <div class="qv-header-metrics d-flex align-items-center gap-5 me-5">
                {{ $metrics }}
            </div>
        @endif

        <div class="qv-header-actions">
            {{ $actions ?? '' }}
            <button class="qv-action-btn qv-copy" onclick="copyQvLink()" title="Bağlantıyı kopyala"><i class="fas fa-link"></i></button>
            <button class="qv-action-btn qv-share" onclick="openQvShare()" title="Mesaj olarak gönder"><i class="fas fa-paper-plane"></i></button>
            <button class="qv-action-btn qv-minimize" onclick="minimizeQuickView()" title="Küçült"><i class="fas fa-minus"></i></button>
            <button class="qv-action-btn qv-close" onclick="{{ $close }}" title="Kapat"><i class="fas fa-times"></i></button>
        </div>
    </div>
    @endif

    @if(isset($tabs))
        <div class="qv-tabs-container">
            <div class="qv-tabs-wrap">
                {{ $tabs }}
            </div>
        </div>
    @endif
</div>

<style>
    .qv-header { 
        background: #fff; 
        border-bottom: 1px solid #f1f5f9; 
        padding: 2rem 2.5rem 0; 
        z-index: 10; 
        flex-shrink: 0; 
        box-shadow: 0 4px 20px rgba(0,0,0,0.01);
    }
    .qv-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
    
    .qv-avatar-wrap { position: relative; }
    .qv-avatar-big { 
        width: 72px; height: 72px; border-radius: 20px; 
        background: linear-gradient(135deg, #2563eb, #1e40af); 
        color: #fff; display: flex; align-items: center; justify-content: center; 
        font-size: 1.8rem; font-weight: 800; 
        box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2); 
        border: 4px solid #fff;
    }
    .qv-avatar-big.corp { background: linear-gradient(135deg, #1e40af, #0369a1); }

    /* Düzenlenebilir başlık h3'ün içinde flex öğesi: düzenlemede kutu genişler */
    .qv-header h3 > .qv-etitle { min-width: 0; }
    .qv-header h3 > .qv-etitle.editing { flex: 1 1 auto; min-width: 240px; }

    .qv-header-metrics { display: flex; }
    .qv-metric { text-align: right; }
    .qv-metric-label { font-size: 0.68rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 2px; }
    .qv-metric-val { font-size: 1.25rem; font-weight: 800; color: #1e293b; letter-spacing: -0.02em; }
    
    .qv-header-actions { display: flex; align-items: center; gap: 0.75rem; }
    .qv-action-btn {
        width: 40px; height: 40px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0;
        color: #64748b; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }
    .qv-action-btn:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
    .qv-action-btn.qv-minimize:hover { color: #2563eb; border-color: #bfdbfe; }
    .qv-action-btn.qv-close:hover { background: #fee2e2; color: #ef4444; border-color: #fecaca; transform: rotate(90deg) translateY(0); }
    .qv-action-btn.qv-share { color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed); border-color: transparent; box-shadow: 0 6px 16px -6px rgba(79,70,229,.6); }
    .qv-action-btn.qv-share:hover { color: #fff; filter: brightness(1.06); transform: translateY(-2px); }
    .qv-action-btn.qv-copy:hover { color: #4f46e5; border-color: #c7d2fe; background: #eef2ff; }

    .qv-tabs-container { margin-top: 0.5rem; }
    .qv-tabs-wrap {
        display: flex; gap: 0; position: relative;
        overflow-x: auto; scrollbar-width: none;
    }
    .qv-tabs-wrap::-webkit-scrollbar { display: none; }

    /* ═══ SLIM: minimal/kompakt header (hedef sabit tasarım) ═══
       Avatar yok; başlık + durum rozetleri tek şeritte yan yana akar,
       metrikler ve aksiyon düğmeleri küçülür — dikey alan yarıdan fazla azalır. */
    .qv-header.slim { padding: .8rem 1.25rem 0; }
    .qv-header.slim .qv-header-top { margin-bottom: .55rem; gap: 1rem; align-items: flex-start; }
    /* Başlık alanı header'ın EN GENİŞ parçasıdır: metriklere kadar tüm genişlik
       başlığındır. Rozetlerle YARIŞMAZ — başlık kendi satırında tam genişlik alır,
       rozetler ince bir alt satıra iner. Metrik/aksiyonlar sabit kalır (flex:none). */
    .qv-header.slim .qv-header-top > .d-flex { gap: .75rem !important; flex: 1 1 auto; min-width: 0; }
    .qv-header.slim .qv-title-wrap {
        flex: 1; min-width: 0;
        display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    }
    .qv-header.slim .qv-title-wrap > h3 {
        width: 100%; min-width: 0;
        font-size: 1.28rem !important; margin: 0 !important; line-height: 1.25;
        overflow-wrap: anywhere;
    }
    .qv-header.slim .qv-title-wrap > div { flex-wrap: wrap; row-gap: .15rem; }

    .qv-header.slim .qv-header-metrics { flex: none; gap: 1.15rem !important; margin-right: .9rem !important; margin-top: 2px; }
    .qv-header.slim .qv-header-actions { flex: none; }
    .qv-header.slim .qv-metric-label { font-size: .54rem; margin-bottom: 0; letter-spacing: .07em; }
    .qv-header.slim .qv-metric-val { font-size: .92rem; }

    .qv-header.slim .qv-header-actions { gap: .4rem; }
    .qv-header.slim .qv-action-btn { width: 30px; height: 30px; border-radius: 9px; font-size: .82rem; }
    .qv-header.slim .qv-tabs-container { margin-top: .2rem; }
</style>