{{--
  CARDS GROUP
  Các variant: card (container), section-card (có header), stat-card (KPI), card-grid-2x2 (grid 2x2 với 4 named slots item1..item4)
  Usage: <x-ui.cards type="card" ... /> hoặc <x-ui.cards type="stat-card" ... />
--}}
@props([
    'type' => 'card', // 'card' | 'section-card' | 'stat-card' | 'card-grid-2x2'
    
    // Common
    'class' => '',
    'cardClass' => '',
    
    // section-card
    'title' => null,
    'headerActions' => null,
    
    // stat-card
    'value' => '0',
    'label' => '',
    'sub' => '',
    'subExpr' => null, // Alpine x-html expression cho footer, thay thế sub (dùng cho reactive text)
    'icon' => null,
    'colorClass' => '',
    'trend' => null,
    'trendText' => '',
])

@switch($type)
    
    @case('card')
        <div class="card {{ $class }}">
            @if(isset($header))
                <div class="card-header">{{ $header }}</div>
            @endif
            <div class="card-body">{{ $slot }}</div>
            @if(isset($footer))
                <div class="card-footer">{{ $footer }}</div>
            @endif
        </div>
        @break

    @case('section-card')
        <div class="section-card {{ $cardClass }}" {{ $attributes }}>
            @if($title || isset($header))
                <div class="section-card-header">
                    @if($title)<h3 class="section-card-title">{!! $title !!}</h3>@endif
                    @if(isset($header))<div class="section-card-actions section-card-actions-full">{{ $header }}</div>@endif
                </div>
            @endif
            <div class="section-card-body">{{ $slot }}</div>
        </div>
        @break

    @case('stat-card')
        @php
            $trendHtml = '';
            if ($trend !== null) {
                $trendClass = ($trend > 0) ? 'up' : (($trend < 0) ? 'down' : 'flat');
                $trendSymbol = ($trend > 0) ? '▲' : (($trend < 0) ? '▼' : '—');
                $trendAbs = number_format(abs((int)$trend), 0, ',', '.');
                $trendHtml = "<span class=\"stat-trend {$trendClass}\">{$trendSymbol} {$trendAbs}</span>";
            }
            $classes = trim("stat-card {$colorClass} {$class}");
        @endphp
        <div class="{{ $classes }}" {{ $attributes }}>
            <div class="stat-card-content">
                <div class="stat-label">{{ $label }}</div>
                @if(trim((string) $slot) !== '')
                    <div class="stat-value">{!! $slot !!}</div>
                @else
                    <div class="stat-value">{{ $value }}</div>
                @endif
                @if($subExpr)
                    <div class="stat-footer" x-html="{{ $subExpr }}"></div>
                @elseif($sub || $trendHtml)
                    <div class="stat-footer">
                        @if($sub)<span class="stat-sub">{{ $sub }}</span>@endif
                        {!! $trendHtml !!}
                    </div>
                @endif
            </div>
            @if($icon)
                <div class="stat-icon">{!! $icon !!}</div>
            @endif
        </div>
        @break

    {{-- CARD GRID 2x2 — Grid 2 hàng 2 cột dùng chung
         Usage:
         <x-ui.cards type="card-grid-2x2">
             <x-slot name="item1">nội dung trên-trái</x-slot>
             <x-slot name="item2">nội dung trên-phải</x-slot>
             <x-slot name="item3">nội dung dưới-trái</x-slot>
             <x-slot name="item4">nội dung dưới-phải</x-slot>
         </x-ui.cards>
    --}}
    @case('card-grid-2x2')
        <div class="card-grid-2x2 {{ $class }}">
            <div class="card-grid-item-1">{!! $item1 ?? '' !!}</div>
            <div class="card-grid-item-2">{!! $item2 ?? '' !!}</div>
            <div class="card-grid-item-3">{!! $item3 ?? '' !!}</div>
            <div class="card-grid-item-4">{!! $item4 ?? '' !!}</div>
        </div>
        @break

@endswitch
