{{--
    Reusable dashboard stat/list card. Use anywhere (MEC dashboard, reports, etc.).

    Metric card:
        <x-dashboard-card type="metric" :number="156" title="Under Process" icon="fas fa-cogs" subText="↑ +45 this month" background="#1A3B73" />

    List card:
        <x-dashboard-card type="list" :items="[['label' => 'Infrastructure', 'value' => '756'], ['label' => 'Social', 'value' => '289', 'icon' => 'fas fa-industry'], ['label' => 'Sectors Distribution', 'header' => true]]" background="#e65100" />
        Use backgroundGradient for gradient, e.g. backgroundGradient="linear-gradient(180deg,#e65100,#ff9800)"

    Optional: iconBg (icon circle color), rounded (true/false), extra slot for footer content. Pass id, class via attributes.
--}}
@props([
    'type' => 'metric',
    'background' => '#1A3B73',
    'backgroundGradient' => null,
    'number' => null,
    'title' => '',
    'icon' => null,
    'subText' => null,
    'meta' => null,
    'trend' => null,
    'layout' => 'compact',
    'iconBg' => 'rgba(255,255,255,0.2)',
    'items' => [],
    'rounded' => true,
])

@once
@push('styles')
<style>
    .dashboard-card {
        color: #fff;
        padding: 1rem 1.25rem;
        min-height: 100px;
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .dashboard-card--rounded { border-radius: 0.5rem; }
    .dashboard-card__metric {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        flex: 1;
        min-height: 0;
    }
    .dashboard-card__icon-wrap {
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .dashboard-card__icon-wrap i { font-size: 1.1rem; color: #fff; }
    .dashboard-card__metric-body {
        min-width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .dashboard-card__number { font-size: 1.75rem; font-weight: 700; line-height: 1.2; flex-shrink: 0; }
    .dashboard-card__title {
        font-size: 0.95rem;
        opacity: 0.95;
        margin-top: auto;
        padding-top: 0.35rem;
        line-height: 1.3;
        word-wrap: break-word;
    }
    .dashboard-card__sub { font-size: 0.8rem; opacity: 0.9; margin-top: 0.25rem; flex-shrink: 0; }
    .dashboard-card__hero { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; min-height: 0; }
    .dashboard-card__hero-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5rem;
        min-height: 2.5rem;
    }
    .dashboard-card__meta {
        font-size: 0.65rem;
        opacity: 0.85;
        text-align: right;
        line-height: 1.25;
        max-width: 55%;
    }
    .dashboard-card__number--hero { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
    .dashboard-card__trend {
        display: inline-flex;
        align-self: flex-start;
        font-size: 0.72rem;
        font-weight: 600;
        padding: 0.2rem 0.55rem;
        border-radius: 999px;
        background: rgba(0,0,0,0.18);
    }
    .dashboard-card__hero .dashboard-card__title {
        margin-top: 0;
        padding-top: 0;
        font-size: 0.88rem;
        font-weight: 600;
    }
    .dashboard-card__list { display: flex; flex-direction: column; gap: 0.5rem; }
    .dashboard-card__list-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .dashboard-card__list-row--header { font-weight: 600; }
    .dashboard-card__list-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }
    .dashboard-card__list-value { font-weight: 700; flex-shrink: 0; }
    .dashboard-card__extra { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.25); }
    .dark-mode .dashboard-card { color: #fff; }
</style>
@endpush
@endonce

@php
    $isList = $type === 'list' || (empty($number) && empty($title) && !empty($items));
    $bgStyle = $backgroundGradient
        ? 'background: ' . $backgroundGradient . ';'
        : 'background-color: ' . $background . ';';
@endphp

<div
    {{ $attributes->merge(['class' => 'dashboard-card dashboard-card--' . ($isList ? 'list' : 'metric') . ($rounded ? ' dashboard-card--rounded' : '')])->except(['type', 'background', 'backgroundGradient', 'number', 'title', 'icon', 'subText', 'meta', 'trend', 'layout', 'iconBg', 'items', 'rounded']) }}
    style="{{ $bgStyle }}"
>
    @if($isList)
        {{-- List / distribution layout --}}
        <div class="dashboard-card__list">
            @foreach($items as $item)
                @php
                    $rowLabel = is_array($item) ? ($item['label'] ?? $item['text'] ?? '') : $item;
                    $rowValue = is_array($item) ? ($item['value'] ?? null) : null;
                    $rowIcon = is_array($item) ? ($item['icon'] ?? null) : null;
                    $isHeader = is_array($item) && ($item['header'] ?? false) || (empty($rowValue) && !empty($rowLabel));
                @endphp
                <div class="dashboard-card__list-row {{ $isHeader ? 'dashboard-card__list-row--header' : '' }}">
                    <div class="dashboard-card__list-label">
                        @if($rowIcon)
                            <span class="dashboard-card__icon-wrap" style="background: {{ $iconBg }};">
                                <i class="{{ $rowIcon }}"></i>
                            </span>
                        @endif
                        <span>{{ $rowLabel }}</span>
                    </div>
                    @if($rowValue !== null && $rowValue !== '')
                        <div class="dashboard-card__list-value">{{ $rowValue }}</div>
                    @endif
                </div>
            @endforeach
        </div>
    @else
        @if($layout === 'hero')
            <div class="dashboard-card__hero">
                <div class="dashboard-card__hero-top">
                    @if($icon)
                        <span class="dashboard-card__icon-wrap" style="background: {{ $iconBg }};">
                            <i class="{{ $icon }}"></i>
                        </span>
                    @endif
                    @if($meta !== null && $meta !== '')
                        <span class="dashboard-card__meta">{{ $meta }}</span>
                    @endif
                </div>
                @if($number !== null && $number !== '')
                    <div class="dashboard-card__number dashboard-card__number--hero">{{ $number }}</div>
                @endif
                @if($title !== '')
                    <div class="dashboard-card__title">{{ $title }}</div>
                @endif
                @if($trend !== null && $trend !== '')
                    <div class="dashboard-card__trend">{{ $trend }}</div>
                @endif
                @if($subText !== null && $subText !== '')
                    <div class="dashboard-card__sub">{{ $subText }}</div>
                @endif
            </div>
        @else
            <div class="dashboard-card__metric">
                @if($icon)
                    <span class="dashboard-card__icon-wrap" style="background: {{ $iconBg }};">
                        <i class="{{ $icon }}"></i>
                    </span>
                @endif
                <div class="dashboard-card__metric-body">
                    @if($number !== null && $number !== '')
                        <div class="dashboard-card__number">{{ $number }}</div>
                    @endif
                    @if($title !== '')
                        <div class="dashboard-card__title">{{ $title }}</div>
                    @endif
                    @if($subText !== null && $subText !== '')
                        <div class="dashboard-card__sub">{{ $subText }}</div>
                    @endif
                </div>
            </div>
        @endif
    @endif

    {{-- Optional extra content (footer, custom block) --}}
    @if(isset($extra))
        <div class="dashboard-card__extra">{{ $extra }}</div>
    @endif
</div>