@php
    $claimState = $card['claim_state'] ?? 'unclaimed';
    $canWork = $card['can_work'] ?? true;
    $cardClass = 'mh-card';
    if ($claimState === 'other') {
        $cardClass .= ' mh-card--locked';
    } elseif ($claimState === 'mine') {
        $cardClass .= ' mh-card--mine';
    }
@endphp
<article class="{{ $cardClass }}" data-order-id="{{ $card['id'] }}" data-invoice="{{ $card['invoice_id'] }}"
         data-claim-state="{{ $claimState }}"
         data-can-work="{{ $canWork ? '1' : '0' }}">
    <div class="mh-card-head">
        <div>
            <span class="mh-invoice">#{{ $card['invoice_id'] }}</span>
            @if(!empty($card['is_new']))
            <span class="mh-new-badge">NEW</span>
            @endif
        </div>
        <span class="mh-amount">{{ $card['amount_label'] }}</span>
    </div>

    <h3 class="mh-customer">{{ $card['customer'] }}</h3>
    @if($card['phone'])
    <a href="{{ $card['phone_tel'] }}" class="mh-phone">{{ $card['phone'] }}</a>
    @endif

    @if(!empty($card['items']))
    <ul class="mh-items">
        @foreach($card['items'] as $item)
        <li>{{ $item }}</li>
        @endforeach
    </ul>
    @endif

    <div class="mh-card-meta">{{ $card['created_full'] ?? $card['created_at'] }}</div>

    <div class="mh-assign-bar">
        @if($claimState === 'unclaimed')
        <span class="mh-assign-status mh-assign-status--open"><i class="fas fa-user-clock"></i> Open order</span>
        @if($card['can_claim'] ?? true)
        <button type="button" class="mh-assign-btn" data-action="claim">
            <i class="fas fa-user-check"></i> Assign to me
        </button>
        @else
        <span class="mh-assign-status mh-assign-status--blocked">
            <i class="fas fa-exclamation-circle"></i>
            একসাথে ১টি order —
            @if(!empty($card['active_claim_invoice']))
            #{{ $card['active_claim_invoice'] }} release করুন
            @else
            My Assigned release করুন
            @endif
        </span>
        @endif
        @elseif($claimState === 'mine')
        <span class="mh-assign-status mh-assign-status--mine">
            <i class="fas fa-lock"></i> Assigned: <strong>{{ auth()->user()->name }}</strong>
        </span>
        <button type="button" class="mh-assign-btn mh-assign-btn--release" data-action="release">
            <i class="fas fa-unlock"></i> Release
        </button>
        @else
        <span class="mh-assign-status mh-assign-status--other">
            <i class="fas fa-lock"></i> Assigned: <strong>{{ $card['claimed_by_name'] ?? 'Moderator' }}</strong>
        </span>
        @endif
    </div>

    <div class="mh-actions">
        @if($canWork && $card['phone_tel'])
        <button type="button" class="mh-btn mh-btn-call" data-action="call" data-phone="{{ $card['phone_tel'] }}">
            <i class="fas fa-phone"></i> Call
        </button>
        @endif
        @if($canWork && !empty($card['whatsapp_url']))
        <a href="{{ $card['whatsapp_url'] }}" target="_blank" rel="noopener" class="mh-btn mh-btn-wa">
            <i class="fab fa-whatsapp"></i> WA
        </a>
        @endif
        @if($canWork)
        <button type="button" class="mh-btn mh-btn-note" data-action="note">
            <i class="fas fa-sticky-note"></i> Note
        </button>
        @endif
        <a href="{{ $card['show_url'] }}" class="mh-btn mh-btn-view" title="Open order">
            <i class="fas fa-external-link-alt"></i>
        </a>
    </div>
</article>