
<style>
    /* ── Ürün tipi hedef satırı: satırın kendisi ilerleme barı ──
       Dolgu katmanı (pt-meter-fill) hedef yüzdesi kadar tüm satıra yayılır;
       içerik üstte tek kompakt hat olarak durur. */
    .pt-meter {
        position: relative; overflow: hidden; cursor: pointer;
        background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: 14px;
        transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s, border-color .22s;
    }
    .pt-meter:hover {
        transform: translateY(-2px);
        border-color: var(--tc, #2563eb);
        box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--tc, #2563eb) 45%, rgba(15,23,42,.2));
    }
    .pt-meter-fill {
        position: absolute; top: 0; bottom: 0; left: 0; z-index: 0;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--tc, #2563eb) 22%, #fff),
            color-mix(in srgb, var(--tc, #2563eb) 9%, #fff));
        border-right: 3px solid var(--tc, #2563eb);
        transform-origin: left; animation: ptMeterGrow 1.1s cubic-bezier(.34,1.2,.64,1) both;
    }
    .pt-meter.done .pt-meter-fill { border-right: none; }
    @keyframes ptMeterGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .pt-meter-body { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 9px 12px; }
    .pt-meter-ico {
        width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center; font-size: .95rem;
        background: #fff; color: var(--tc, #2563eb);
        border: 1px solid color-mix(in srgb, var(--tc, #2563eb) 30%, #fff);
        box-shadow: 0 3px 8px -3px color-mix(in srgb, var(--tc, #2563eb) 40%, transparent);
        transition: transform .22s ease;
    }
    .pt-meter:hover .pt-meter-ico { transform: scale(1.1); }
    .pt-meter-name { min-width: 0; }
    .pt-meter-name b { display: block; font-size: .9rem; font-weight: 800; color: var(--text-main, #0f172a); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pt-meter-name small { display: block; font-size: .64rem; font-weight: 700; color: var(--tc, #2563eb); opacity: 0; transform: translateY(-2px); transition: all .2s ease; }
    .pt-meter:hover .pt-meter-name small { opacity: 1; transform: none; }
    .pt-meter-vals { margin-left: auto; text-align: right; white-space: nowrap; font-size: .78rem; font-weight: 600; color: var(--text-muted, #64748b); }
    .pt-meter-vals b { font-size: .92rem; font-weight: 800; color: var(--text-main, #0f172a); }
    .pt-meter-pct {
        flex-shrink: 0; font-size: .68rem; font-weight: 800; border-radius: 20px; padding: 3px 10px; white-space: nowrap;
    }
    .pt-meter-add {
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 32px; height: 32px; border-radius: 10px; text-decoration: none;
        color: var(--tc, #2563eb); background: #fff;
        border: 1px solid color-mix(in srgb, var(--tc, #2563eb) 28%, #fff);
        transition: all .18s;
    }
    .pt-meter-add:hover {
        background: var(--tc, #2563eb); color: #fff; border-color: var(--tc, #2563eb);
        transform: scale(1.1);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--tc, #2563eb) 35%, transparent);
    }

    /* 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">

        
        <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;">
                        <?php if($targetType === 'revenue'): ?>
                            ₺<?php echo e(number_format($totalTarget, 0, ',', '.')); ?>

                        <?php else: ?>
                            <?php echo e(number_format($totalTarget, 0, ',', '.')); ?> Adet
                        <?php endif; ?>
                    </span>
                </div>
            </div>
            <div class="d-flex align-items-center gap-2">
                <div class="today-badge">
                    <div class="today-dot"></div>
                    Bugün – <?php echo e(now()->translatedFormat('d F Y')); ?>

                    (<?php echo e($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;">
                    <?php if($targetPeriod === 'month'): ?>
                        <?php echo e(\Carbon\Carbon::create(null, $currentMonth)->translatedFormat('F')); ?> <?php echo e($currentYear); ?>

                    <?php else: ?>
                        <?php echo e($currentYear); ?>

                    <?php 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>

        
        <div class="d-flex flex-column gap-2 mb-4">
            <?php $__currentLoopData = $salesTargets; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ptId => $t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="pt-meter <?php echo e($t['percentage'] >= 100 ? 'done' : ''); ?>"
                     style="--tc: <?php echo e($t['color']); ?>;"
                     role="progressbar" aria-valuenow="<?php echo e($t['percentage']); ?>" aria-valuemin="0" aria-valuemax="100"
                     title="<?php echo e($t['name']); ?> — %<?php echo e($t['percentage']); ?> tamamlandı"
                     onclick="window.location.href='<?php echo e(route('agency.sales.index', array_merge(request()->query(), ['view' => 'list', 'product_type_id' => $ptId]))); ?>'">

                    
                    <div class="pt-meter-fill" style="width: <?php echo e(min(100, max(0, $t['percentage']))); ?>%; animation-delay: <?php echo e($loop->index * 0.08); ?>s;"></div>

                    <div class="pt-meter-body">
                        <div class="pt-meter-ico">
                            <i class="fas <?php echo e($productTypes->find($ptId)->icon ?? 'fa-cube'); ?>"></i>
                        </div>
                        <div class="pt-meter-name">
                            <b><?php echo e($t['name']); ?></b>
                            <small>Satışları Listele <i class="fas fa-chevron-right" style="font-size:0.5rem;"></i></small>
                        </div>
                        <div class="pt-meter-vals">
                            <?php if($targetType === 'revenue'): ?>
                                <b>₺<?php echo e(number_format($t['achieved'], 0, ',', '.')); ?></b>
                                <span style="color:#cbd5e1;">/</span> ₺<?php echo e(number_format($t['target'], 0, ',', '.')); ?>

                            <?php else: ?>
                                <b><?php echo e(number_format($t['achieved'], 0, ',', '.')); ?></b>
                                <span style="color:#cbd5e1;">/</span> <?php echo e(number_format($t['target'], 0, ',', '.')); ?> Adet
                            <?php endif; ?>
                        </div>
                        <span class="pt-meter-pct"
                              style="<?php echo e($t['percentage'] >= 100
                                        ? 'background:#dcfce7; color:#166534;'
                                        : ($t['percentage'] >= 75
                                           ? 'background:#fef9c3; color:#854d0e;'
                                           : 'background:color-mix(in srgb, ' . $t['color'] . ' 14%, #fff); color:' . $t['color'] . ';')); ?>">
                            <?php if($t['percentage'] >= 100): ?><i class="fas fa-circle-check me-1"></i><?php endif; ?>%<?php echo e($t['percentage']); ?>

                        </span>
                        <a href="javascript:void(0)"
                           class="pt-meter-add"
                           onclick="event.stopPropagation(); openDraftQuickView('<?php echo e(route('agency.sales.quick-draft', ['product_type_id' => $ptId])); ?>');"
                           title="Yeni <?php echo e($t['name']); ?> Satışı">
                            <i class="fas fa-plus"></i>
                        </a>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

            <?php 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>
            <?php endif; ?>

        </div>

        
        <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);">
                    <?php if($targetType === 'revenue'): ?>
                        ₺<?php echo e(number_format($totalAchieved, 0, ',', '.')); ?>

                    <?php else: ?>
                        <?php echo e(number_format($totalAchieved, 0, ',', '.')); ?> Adet
                    <?php endif; ?>
                    — %<?php echo e($totalPercentage); ?>

                </span>
            </div>

            <div class="total-progress-wrap">
                <div class="total-progress-fill" style="width: <?php echo e($totalPercentage); ?>%">
                    <?php if($totalPercentage > 8): ?>
                        <span>%<?php echo e($totalPercentage); ?></span>
                    <?php endif; ?>
                </div>
                
                <div class="total-today-line" style="left: <?php echo e($yearProgress); ?>%;"></div>
            </div>

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

                </span>

                
                <?php if($yearProgress > 5 && $yearProgress < 95): ?>
                    <div style="position:absolute; left:<?php echo e($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;">
                            <?php echo e(now()->translatedFormat('d M')); ?>

                        </span>
                    </div>
                <?php endif; ?>

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

                </span>
            </div>
        </div>

    </div>
</div>
<?php /**PATH C:\xampp\htdocs\acente\resources\views/agency/sales/partials/target_section.blade.php ENDPATH**/ ?>