@php
    $statusValue = $authenticityItem->status instanceof \App\Enums\AuthenticityStatus
        ? $authenticityItem->status->value
        : (string) $authenticityItem->status;
    $statusMeta = match ($statusValue) {
        'approved' => ['label' => 'تأییدشده', 'class' => 'approved', 'icon' => 'fa-circle-check'],
        'rejected' => ['label' => 'تأییدنشده', 'class' => 'rejected', 'icon' => 'fa-circle-xmark'],
        default => ['label' => 'در انتظار بررسی', 'class' => 'pending', 'icon' => 'fa-clock'],
    };
@endphp

<article class="auth-request-card">
    <header class="auth-request-card__header">
        <div>
            <small>کد رهگیری</small>
            <strong dir="ltr">{{ $authenticityItem->tracking_code }}</strong>
        </div>
        <span class="auth-request-status auth-request-status--{{ $statusMeta['class'] }}">
            <i class="fa-duotone fa-solid {{ $statusMeta['icon'] }}" aria-hidden="true"></i>
            {{ $statusMeta['label'] }}
        </span>
    </header>

    <div class="auth-request-card__details">
        <div>
            <i class="fa-duotone fa-solid fa-calendar-days" aria-hidden="true"></i>
            <span>تاریخ ثبت</span>
            <strong>{{ jdate($authenticityItem->created_at)->format('Y/m/d H:i') }}</strong>
        </div>
        <div>
            <i class="fa-duotone fa-solid fa-store" aria-hidden="true"></i>
            <span>محل خرید</span>
            <strong>{{ $authenticityItem->purchasePlatform?->title ?? '—' }}</strong>
        </div>
        <div>
            <i class="fa-duotone fa-solid fa-shapes" aria-hidden="true"></i>
            <span>دسته‌بندی</span>
            <strong>{{ $authenticityItem->category?->title ?? '—' }}</strong>
        </div>
        <div>
            <i class="fa-duotone fa-solid fa-barcode" aria-hidden="true"></i>
            <span>سریال کارت</span>
            <strong dir="ltr">{{ $authenticityItem->authenticity_serial }}</strong>
        </div>
    </div>

    @if($statusValue === 'rejected' && $authenticityItem->rejection_reason)
        <div class="auth-request-card__reason">
            <i class="fa-duotone fa-solid fa-circle-info" aria-hidden="true"></i>
            <div>
                <strong>دلیل تأیید نشدن</strong>
                <p>{{ $authenticityItem->rejection_reason }}</p>
            </div>
        </div>
    @endif
</article>

@once
    @push('styles')
        <style>
            .auth-request-card {
                padding: 1.25rem;
                border: 1px solid #e8e0d3;
                border-radius: 14px;
                background: #fff;
            }
            .auth-request-card__header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 1rem;
                padding-bottom: 1rem;
                border-bottom: 1px solid #eee7dc;
            }
            .auth-request-card__header small,
            .auth-request-card__header strong {
                display: block;
            }
            .auth-request-card__header small,
            .auth-request-card__details span {
                color: #7b7166;
            }
            .auth-request-card__header strong {
                margin-top: .25rem;
                color: #2f2922;
                font-size: 1.1rem;
                letter-spacing: .04em;
            }
            .auth-request-status {
                display: inline-flex;
                align-items: center;
                gap: .4rem;
                padding: .45rem .75rem;
                border-radius: 999px;
                white-space: nowrap;
                font-weight: 700;
            }
            .auth-request-status--pending { color: #805b00; background: #fff5d8; }
            .auth-request-status--approved { color: #17623a; background: #e8f7ee; }
            .auth-request-status--rejected { color: #9a2e27; background: #fdeceb; }
            .auth-request-card__details {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1rem;
                padding-top: 1rem;
            }
            .auth-request-card__details > div {
                display: grid;
                grid-template-columns: 22px 1fr;
                gap: .25rem .5rem;
                align-items: center;
            }
            .auth-request-card__details i {
                grid-row: 1 / span 2;
                color: #b2862e;
                font-size: 1.05rem;
            }
            .auth-request-card__details strong {
                color: #342d25;
                overflow-wrap: anywhere;
            }
            .auth-request-card__reason {
                display: flex;
                gap: .75rem;
                margin-top: 1rem;
                padding: .9rem 1rem;
                color: #843029;
                background: #fff3f1;
                border-radius: 10px;
            }
            .auth-request-card__reason p {
                margin: .25rem 0 0;
            }
            @media (max-width: 575.98px) {
                .auth-request-card__header { align-items: flex-start; }
                .auth-request-card__details { grid-template-columns: 1fr; }
            }
        </style>
    @endpush
@endonce