@php
    // Valores seguros por defecto
    $period  = $period ?? 'Mensual';
    $title   = $title ?? 'Meta';
    $target  = intval($target ?? 0);
    $current = intval($current ?? 0);

    // Evitar división por cero
    $percentage = $target > 0
        ? min(($current / $target) * 100, 100)
        : 0;

    $isAchieved = ($target > 0) && ($current >= $target);
    $difference = $current - $target;

    $periodConfig = [
        'Diario' => ['label' => 'Diario', 'badge' => 'badge-info'],
        'Semanal' => ['label' => 'Semanal', 'badge' => 'badge-secondary'],
        'Mensual' => ['label' => 'Mensual', 'badge' => 'badge-primary'],
        'Trimestral' => ['label' => 'Trimestral', 'badge' => 'badge-warning'],
        'Semestral' => ['label' => 'Semestral', 'badge' => 'badge-dark'],
        'Anual' => ['label' => 'Anual', 'badge' => 'badge-success'],
    ];

    $config = $periodConfig[$period] ?? $periodConfig['Mensual'];

    // Colores según estado
    if ($target === 0) {
        $progressClass = 'bg-secondary';
        $statusClass = 'text-muted';
    } elseif ($isAchieved) {
        $progressClass = 'bg-success';
        $statusClass = 'text-success';
    } elseif ($percentage >= 70) {
        $progressClass = 'bg-warning';
        $statusClass = 'text-warning';
    } else {
        $progressClass = 'bg-danger';
        $statusClass = 'text-danger';
    }
@endphp

<div class="card mb-4" style="box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05); border-radius: 20px;">
    <div class="card-header bg-white pb-2 d-flex justify-content-between">
        <div class="d-flex">
            <div class="mr-3">
                <i class="fa fa-bullseye fa-2x"></i>
            </div>
            <div>
                <h5 class="mb-0 font-weight-bold">
                    {{ $title ?? 'Meta' }}
                </h5>
                <small class="text-muted">
                    Objetivo: {{ $target }}
                </small>
            </div>
        </div>

        <span class="badge {{ $config['badge'] }}">
            {{ $config['label'] }}
        </span>
    </div>

    <div class="card-body">
        {{-- Progreso --}}
        <div class="mb-3">
            <small class="text-muted text-uppercase font-weight-bold">
                Progreso Actual
            </small>

            <div class="d-flex justify-content-between align-items-end">
                <div>
                    <span class="h3 font-weight-bold">
                        {{ $current }}
                    </span>
                    <small class="text-muted">
                        / {{ $target }}
                    </small>
                </div>

                <span class="badge {{ $statusClass }}">
                    {{ number_format($percentage, 0) }}%
                </span>
            </div>
        </div>

        {{-- Barra de progreso --}}
        <div class="progress mb-4" style="height: 15px; border-radius: 10px;">
            <div class="progress-bar {{ $progressClass }}" role="progressbar" style="width: {{ $percentage }}%; border-radius: 10px;"
                aria-valuenow="{{ $percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

        {{-- Estado --}}
        <div class="border p-10 d-flex justify-content-between align-items-center
            {{ $isAchieved ? 'border-success bg-light' : 'border-danger bg-light' }}" style="border-radius: 10px">

            <div class="d-flex align-items-center">
                @if ($isAchieved)
                    <i class="fa fa-check-circle-o fa-2x text-success"></i>
                @else
                    <i class="fa fa-times-circle-o fa-2x text-danger"></i>
                @endif
                <strong class="{{ $statusClass }} ml-2">
                    {{ $isAchieved ? 'Meta Cumplida' : 'Meta Pendiente' }}
                </strong>
            </div>

            <strong class="{{ $statusClass }}">
                @if ($isAchieved)
                    +{{ $difference }} sobre la meta
                @else
                    Faltan {{ abs($difference) }}
                @endif
            </strong>
        </div>
    </div>
</div>