{{-- Partial: modules/job-order/partials/kanban-card.blade.php --}}
@php
    $pct       = $jo->oplah_target > 0 ? round($jo->oplah_ok / $jo->oplah_target * 100) : 0;
    $barColor  = $pct >= 100 ? '#059669' : ($pct >= 60 ? '#1D4ED8' : '#D97706');
    $deadline  = $jo->tgl_selesai_target;
    $diffDays  = now()->diffInDays($deadline, false);
    $isLate    = $diffDays < 0;
    $isUrgent  = $diffDays >= 0 && $diffDays <= 2;
    $prioritas = $jo->salesOrder?->prioritas ?? 'normal';
@endphp

<div class="pf-jo-card"
     id="jo-card-{{ $jo->id }}"
     data-jo-id="{{ $jo->id }}"
     data-status="{{ $jo->status }}"
     draggable="true"
     onclick="window.location.href='/job-orders/{{ $jo->id }}'">

    {{-- Urgent Badge --}}
    @if($isLate)
        <span class="pf-jo-card-urgent" style="background:#FEE2E2;color:#DC2626">
            ⚠ Terlambat
        </span>
    @elseif($isUrgent || $prioritas === 'urgent')
        <span class="pf-jo-card-urgent" style="background:#FEF3C7;color:#D97706">
            🔥 Urgent
        </span>
    @elseif($prioritas === 'express')
        <span class="pf-jo-card-urgent" style="background:#EDE9FE;color:#7C3AED">
            ⚡ Express
        </span>
    @endif

    {{-- No JO --}}
    <div class="pf-jo-card-no">{{ $jo->no_jo }}</div>

    {{-- Judul --}}
    <div class="pf-jo-card-title">{{ $jo->nama_pekerjaan }}</div>

    {{-- Progress Bar --}}
    @if($jo->oplah_cetak > 0)
    <div class="pf-jo-progress">
        <div class="pf-jo-progress-bar" style="width:{{ min($pct, 100) }}%;background:{{ $barColor }}"></div>
    </div>
    <div style="font-size:10.5px;color:{{ $barColor }};font-weight:600;font-family:var(--pf-font-mono);margin-bottom:6px">
        {{ $pct }}% — {{ number_format($jo->oplah_ok) }}/{{ number_format($jo->oplah_target) }} lbr
        @if($jo->oplah_reject > 0)
            <span class="text-danger">| ❌ {{ number_format($jo->oplah_reject) }} reject</span>
        @endif
    </div>
    @endif

    {{-- Meta Info --}}
    <div class="pf-jo-card-meta">
        @if($jo->mesin)
        <span title="Mesin"><i class="bi bi-printer me-1"></i>{{ $jo->mesin->nama }}</span>
        @endif
        @if($jo->operator)
        <span title="Operator"><i class="bi bi-person me-1"></i>{{ $jo->operator->name }}</span>
        @endif
    </div>

    {{-- Deadline --}}
    <div class="d-flex align-items-center justify-content-between mt-2">
        <span style="font-size:11px;{{ $isLate ? 'color:#DC2626;font-weight:600' : ($isUrgent ? 'color:#D97706;font-weight:600' : 'color:var(--pf-text-muted)') }}">
            <i class="bi bi-calendar3 me-1"></i>
            {{ $deadline?->format('d/m/Y') }}
            @if($isLate)
                ({{ abs((int)$diffDays) }}h terlambat)
            @elseif(!$isLate)
                ({{ (int)$diffDays }}h lagi)
            @endif
        </span>
        <div class="d-flex gap-1" onclick="event.stopPropagation()">
            <button class="btn btn-xs btn-outline-success" title="Update Progress"
                    onclick="updateProgress({{ $jo->id }})">
                <i class="bi bi-graph-up"></i>
            </button>
        </div>
    </div>

    {{-- SO Reference --}}
    @if($jo->salesOrder)
    <div style="margin-top:8px;padding-top:8px;border-top:1px dashed var(--pf-border);font-size:10.5px;color:var(--pf-text-muted)">
        <i class="bi bi-cart me-1"></i>{{ $jo->salesOrder->no_so }}
        @if($jo->salesOrder->pelanggan)
            · {{ $jo->salesOrder->pelanggan->nama }}
        @endif
    </div>
    @endif
</div>