{{-- ─── Target Section Partial ──────────────────────────────────────── --}}
<style>
    .product-row-card {
        background: #ffffff;
        border-radius: 18px;
        border: 1px solid var(--border, #e2e8f0);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: block;
        text-decoration: none;
    }
    .product-row-card:hover {
        background: #f0f7ff !important;
        border-color: var(--cp, #2563eb) !important;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(37,99,235,0.09);
    }
    .product-row-card:hover .icon-box { transform: scale(1.12); }
    .btn-create-quick {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        border-radius: 10px;
        color: var(--cp, #2563eb);
        background: var(--cp-light, #eff6ff);
        border: 1px solid rgba(37,99,235,0.12);
        transition: all 0.2s;
        flex-shrink: 0;
    }
    .btn-create-quick:hover {
        background: var(--cp, #2563eb) !important;
        color: #fff !important;
        border-color: var(--cp, #2563eb) !important;
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(37,99,235,0.25);
    }

    /* Total progress bar */
    .total-progress-wrap {
        position: relative;
        height: 28px;
        border-radius: 10px;
        overflow: hidden;
        background: #f1f5f9;
    }
    .total-progress-fill {
        height: 100%;
        border-radius: 10px;
        background: linear-gradient(90deg, #06b6d4, #2563eb);
        transition: width 1s ease;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 10px;
    }
    .total-progress-fill span {
        font-size: 0.72rem;
        font-weight: 800;
        color: #fff;
        white-space: nowrap;
    }
    .total-today-line {
        position: absolute;
        top: 0; bottom: 0;
        width: 3px;
        background: #22c55e;
        z-index: 5;
        box-shadow: 0 0 8px rgba(34,197,94,0.5);
    }

    /* Today badge (outside the overflow:hidden container) */
    .today-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #fff;
        border: 1px solid #dcfce7;
        border-radius: 20px;
        padding: 3px 10px;
        font-size: 0.7rem;
        font-weight: 800;
        color: #166534;
        box-shadow: 0 2px 6px rgba(34,197,94,0.15);
    }
    .today-dot {
        width: 8px; height: 8px;
        background: #22c55e;
        border-radius: 50%;
        animation: pulse-green 1.5s infinite;
    }
    @keyframes pulse-green {
        0%, 100% { opacity: 1; transform: scale(1); }
        50%       { opacity: 0.6; transform: scale(0.8); }
    }
</style>

<div class="card border-0 shadow-sm mb-4" style="border-radius: 22px; overflow: hidden; border: 1px solid var(--border, #e2e8f0);">
    <div class="card-body p-4 p-md-5">

        {{-- ─── Card Header ──────────────────────────────────────────── --}}
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-4">
            <div>
                <h5 style="font-weight: 800; color: var(--text-main,#0f172a); margin: 0 0 0.35rem; font-size: 1.3rem;">
                    <i class="fas fa-bullseye me-2" style="color:var(--cp,#2563eb);font-size:1.1rem;"></i>
                    Satış Hedefleri
                </h5>
                <div class="d-flex align-items-center gap-2" style="flex-wrap:wrap;">
                    <span style="font-size: 0.875rem; color: var(--text-muted,#64748b); font-weight: 600;">Genel Hedef</span>
                    <span style="font-size: 1.35rem; font-weight: 900; color: var(--cp,#2563eb); letter-spacing:-0.5px;">
                        @if($targetType === 'revenue')
                            ₺{{ number_format($totalTarget, 0, ',', '.') }}
                        @else
                            {{ number_format($totalTarget, 0, ',', '.') }} Adet
                        @endif
                    </span>
                </div>
            </div>
            <div class="d-flex align-items-center gap-2">
                <div class="today-badge">
                    <div class="today-dot"></div>
                    Bugün – {{ now()->translatedFormat('d F Y') }}
                    ({{ $yearProgress }}%)
                </div>
                <div style="font-size: 0.75rem; color: var(--text-muted,#64748b); font-weight: 600;
                     background: #f8fafc; border: 1px solid var(--border,#e2e8f0);
                     border-radius: 10px; padding: 5px 12px;">
                    @if($targetPeriod === 'month')
                        {{ \Carbon\Carbon::create(null, $currentMonth)->translatedFormat('F') }} {{ $currentYear }}
                    @else
                        {{ $currentYear }}
                    @endif
                </div>
                <button class="btn btn-sm px-3 py-2"
                        data-bs-toggle="modal" data-bs-target="#targetSettingsModal"
                        style="border-radius: 10px; font-weight: 700; font-size:0.8rem;
                               background: var(--cp-light,#eff6ff); color: var(--cp,#2563eb);
                               border: 1px solid rgba(37,99,235,0.15);">
                    <i class="fas fa-sliders-h me-1"></i> Hedefleri Düzenle
                </button>
            </div>
        </div>

        {{-- ─── Per-Product Progress Rows ───────────────────────────── --}}
        <div class="d-flex flex-column gap-3 mb-4">
            @foreach($salesTargets as $ptId => $t)
                <div class="product-row-card p-3 p-md-4"
                     style="cursor:pointer;"
                     onclick="window.location.href='{{ route('agency.sales.index', array_merge(request()->query(), ['view' => 'list', 'product_type_id' => $ptId])) }}'">

                    <div class="d-flex justify-content-between align-items-center mb-3">
                        {{-- Left: icon + name --}}
                        <div class="d-flex align-items-center gap-3">
                            <div class="icon-box d-flex align-items-center justify-content-center"
                                 style="width:46px; height:46px; border-radius:14px;
                                        background: {{ $t['color'] }}18; color: {{ $t['color'] }};
                                        transition: transform 0.3s ease; flex-shrink:0;">
                                <i class="fas {{ $productTypes->find($ptId)->icon ?? 'fa-cube' }}"
                                   style="font-size: 1.1rem;"></i>
                            </div>
                            <div>
                                <h6 style="font-weight:800; color:var(--text-main,#0f172a); margin:0 0 2px; font-size:1rem;">
                                    {{ $t['name'] }}
                                </h6>
                                <span style="font-size:0.72rem; color:var(--cp,#2563eb); font-weight:700;">
                                    Satışları Listele <i class="fas fa-chevron-right" style="font-size:0.55rem;"></i>
                                </span>
                            </div>
                        </div>

                        {{-- Right: values + quick add --}}
                        <div class="d-flex align-items-center gap-3">
                            <div class="text-end">
                                <div style="font-size:0.82rem; color:var(--text-muted,#64748b); font-weight:600; margin-bottom:3px;">
                                    @if($targetType === 'revenue')
                                        <span style="color:var(--text-main,#0f172a); font-weight:800; font-size:1rem;">
                                            ₺{{ number_format($t['achieved'], 0, ',', '.') }}
                                        </span>
                                        <span style="color:#cbd5e1; margin:0 3px;">/</span>
                                        ₺{{ number_format($t['target'], 0, ',', '.') }}
                                    @else
                                        <span style="color:var(--text-main,#0f172a); font-weight:800; font-size:1rem;">
                                            {{ number_format($t['achieved'], 0, ',', '.') }}
                                        </span>
                                        <span style="color:#cbd5e1; margin:0 3px;">/</span>
                                        {{ number_format($t['target'], 0, ',', '.') }} Adet
                                    @endif
                                </div>
                                <span class="badge rounded-pill"
                                      style="font-size:0.68rem; font-weight:800; padding:3px 10px;
                                             {{ $t['percentage'] >= 100
                                                ? 'background:#dcfce7; color:#166534;'
                                                : ($t['percentage'] >= 75
                                                   ? 'background:#fef9c3; color:#854d0e;'
                                                   : 'background:var(--cp-light,#eff6ff); color:var(--cp,#2563eb);') }}">
                                    %{{ $t['percentage'] }} tamamlandı
                                </span>
                            </div>
                            <a href="{{ route('agency.sales.create', ['product_type_id' => $ptId]) }}"
                               class="btn-create-quick"
                               onclick="event.stopPropagation();"
                               title="Yeni {{ $t['name'] }} Satışı">
                                <i class="fas fa-plus"></i>
                            </a>
                        </div>
                    </div>

                    {{-- Progress bar --}}
                    <div style="position:relative;">
                        <div style="height:9px; border-radius:50px; background:#f1f5f9; overflow:hidden;">
                            <div role="progressbar"
                                 style="height:100%; border-radius:50px;
                                        width:{{ $t['percentage'] }}%;
                                        background-color: {{ $t['color'] }};
                                        transition: width 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);"
                                 aria-valuenow="{{ $t['percentage'] }}" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            @if(empty($salesTargets))
                <div style="text-align:center; padding:3rem 1rem; color:var(--text-muted,#64748b);">
                    <i class="fas fa-chart-bar" style="font-size:2rem; margin-bottom:1rem; opacity:0.3;"></i>
                    <p style="font-weight:600; margin:0;">Henüz satış hedefi tanımlanmamış.</p>
                </div>
            @endif
        </div>

        {{-- ─── Genel İlerleme Barı ──────────────────────────────────── --}}
        <div class="pt-4" style="border-top: 1px solid var(--border,#e2e8f0);">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span style="font-size:0.9rem; font-weight:800; color:var(--text-main,#0f172a);">
                    Genel İlerleme
                </span>
                <span style="font-size:0.82rem; font-weight:700; color:var(--cp,#2563eb);">
                    @if($targetType === 'revenue')
                        ₺{{ number_format($totalAchieved, 0, ',', '.') }}
                    @else
                        {{ number_format($totalAchieved, 0, ',', '.') }} Adet
                    @endif
                    — %{{ $totalPercentage }}
                </span>
            </div>

            <div class="total-progress-wrap">
                <div class="total-progress-fill" style="width: {{ $totalPercentage }}%">
                    @if($totalPercentage > 8)
                        <span>%{{ $totalPercentage }}</span>
                    @endif
                </div>
                {{-- Today line --}}
                <div class="total-today-line" style="left: {{ $yearProgress }}%;"></div>
            </div>

            {{-- Period labels --}}
            <div style="position:relative; height:22px; margin-top:6px;">
                <span style="position:absolute; left:0; font-size:0.72rem; color:#94a3b8; font-weight:700;">
                    {{ $targetPeriod === 'month'
                        ? '1 ' . \Carbon\Carbon::create(null, $currentMonth)->translatedFormat('F')
                        : '1 Ocak' }}
                </span>

                {{-- "Today" label positioned at yearProgress --}}
                @if($yearProgress > 5 && $yearProgress < 95)
                    <div style="position:absolute; left:{{ $yearProgress }}%; transform:translateX(-50%); text-align:center;">
                        <div style="width:1px; height:10px; background:#22c55e; margin:0 auto 2px;"></div>
                        <span style="font-size:0.68rem; color:#22c55e; font-weight:800; white-space:nowrap;">
                            {{ now()->translatedFormat('d M') }}
                        </span>
                    </div>
                @endif

                <span style="position:absolute; right:0; font-size:0.72rem; color:#94a3b8; font-weight:700;">
                    {{ $targetPeriod === 'month'
                        ? \Carbon\Carbon::create(null, $currentMonth)->daysInMonth . ' ' . \Carbon\Carbon::create(null, $currentMonth)->translatedFormat('F')
                        : '31 Aralık' }}
                </span>
            </div>
        </div>

    </div>
</div>

{{-- Hedef Ayarları Modalı --}}
@include('agency.sales.partials.target_modal')