{{--
Componente de Estado Genérico (Estilizado)
Modos:
1. Solid (default): Badge con fondo sólido
2. Soft: Fondo translúcido con texto del color (Estilo SaaS moderno)
3. Outline: Borde del color con fondo transparente
Props:
- style: 'solid' | 'soft' | 'outline' (default: 'solid')
- pill: boolean (default: false) -> Borde redondeado completo
--}}
@props([
'value',
'type' => 'boolean',
'map' => null,
'color' => null,
'tooltip' => null,
'style' => 'solid', // nuevo: solid, soft, outline
'pill' => false, // nuevo: redondeado tipo píldora
])
@php
$baseColor = $color ?? 'secondary';
$text = $value;
$title = $tooltip ?? '';
// Lógica de mapeo (igual que antes)
if ($map && isset($map[$value])) {
$entry = $map[$value];
$baseColor = $entry['color'] ?? 'secondary';
$text = isset($entry['icon'])
? '' . ($entry['text'] ?? $value)
: ($entry['text'] ?? $value);
$title = $tooltip ?? ($entry['tooltip'] ?? '');
} elseif ($value === null && $type === 'boolean') {
$baseColor = 'warning';
$text = 'Sin Asignar';
$title = 'Sin Asignar';
} elseif ($type === 'boolean' && !$color) {
$baseColor = $value ? 'success' : 'danger';
$text = $value ? 'Activo' : 'Inactivo'; // Texto por defecto si no es icono
// Podemos usar iconos si preferimos
if (!isset($map) && $type === 'boolean') {
$text = $value ? '' : '';
}
$title = $tooltip ?? ($value ? 'Activo' : 'Inactivo');
}
// Determinación de clases según estilo
$classMap = [
'solid' => "badge-$baseColor",
'outline' => "badge-outline-$baseColor",
'soft' => "badge-soft-$baseColor",
];
$styleClass = $classMap[$style] ?? "badge-$baseColor";
$pillClass = $pill ? 'badge-pill' : '';
@endphp
merge([
'class' => "badge $styleClass $pillClass px-2 py-1 shadow-sm border-0",
'style' => 'cursor: help; letter-spacing: 0.5px;'
]) }}
data-toggle="tooltip"
title="{{ $title }}">
@if($value === null) Sin Asignar @elseif($value) Activo @else Inactivo @endif
{!! $text !!}
@pushonce('css')
@endpushonce