@props([
    'card',
    'variant' => 'card',
    'showFooter' => null,
])

@php
    $isDetail = $variant === 'detail';
    $showFooter = $showFooter ?? ! $isDetail;
    $timelineSteps = $card['timeline_steps'];
    $activeStepIndex = (int) $card['active_step_index'];
    $timelineRows = array_chunk($timelineSteps, 4);
    $timelineProgress = min(100, max(0, (int) ($card['progress_percent'] ?? 0)));
@endphp

<div @class([
    'eca-service-showcase',
    'eca-service-showcase--detail' => $isDetail,
    'eca-service-showcase--card' => ! $isDetail,
])>
    @if ($isDetail)
        <header class="eca-service-showcase__status-bar">
            <div class="eca-service-showcase__status-main min-w-0">
                <p class="eca-service-showcase__tracking">
                    <span class="eca-service-showcase__tracking-label">{{ __('site.card_tracking') }}</span>
                    <strong dir="ltr">{{ $card['status_label'] }} -    {{ $card['tracking_code'] }}</strong>


                    
                    
                </p>
            </div>
            <div class="eca-smart-card__progress-ring eca-service-showcase__progress-ring" style="--progress: {{ $timelineProgress }}">
                <svg viewBox="0 0 36 36" class="h-16 w-16   " aria-hidden="true">
                    <path class="eca-smart-card__ring-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                    <path
                        class="eca-smart-card__ring-fill"
                        stroke="var(--eca-primary)"
                        stroke-dasharray="{{ $timelineProgress }}, 100"
                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                    />
                </svg>
                <span class="eca-smart-card__progress-label">{{ $timelineProgress }}%</span>
            </div>
        </header>

        <div class="eca-service-showcase__layout">
            <div class="eca-service-showcase__primary">
                @include('partials.site.service-showcase-timeline', [
                    'timelineRows' => $timelineRows,
                    'activeStepIndex' => $activeStepIndex,
                    'timelineProgress' => $timelineProgress,
                    'isDetail' => true,
                ])
            </div>

            <div class="eca-service-showcase__sidebar">
                @include('partials.site.service-showcase-sidebar', [
                    'card' => $card,
                    'timelineProgress' => $timelineProgress,
                    'isDetail' => true,
                    'showFooter' => $showFooter,
                ])
            </div>
        </div>
    @else
        @include('partials.site.service-showcase-timeline', [
            'timelineRows' => $timelineRows,
            'activeStepIndex' => $activeStepIndex,
            'timelineProgress' => $timelineProgress,
            'isDetail' => false,
        ])

        @include('partials.site.service-showcase-sidebar', [
            'card' => $card,
            'timelineProgress' => $timelineProgress,
            'isDetail' => false,
            'showFooter' => $showFooter,
        ])
    @endif
</div>