netgescon-master/netgescon-laravel/resources/views/components/widgets/alert-box.blade.php

{{-- 
========================================
ALERT BOX ATOMICO RIUTILIZZABILE
========================================
Componente atomico per alert box con diversi tipi e stili.
Completamente riutilizzabile in tutta l'applicazione.

Props:
- type: danger, warning, info, success
- title: Titolo dell'alert
- message: Messaggio dell'alert  
- icon: Icona FontAwesome (opzionale)
- actionText: Testo del pulsante (opzionale)
- actionUrl: URL del pulsante (opzionale)
- dismissible: Se l'alert è chiudibile (default true)
- size: sm, md, lg (default md)

Esempio utilizzo:
<x-widgets.alert-box 
    type="danger" 
    title="Tickets Urgenti!" 
    message="1 ticket richiede attenzione immediata"
    icon="fas fa-exclamation-triangle"
    action-text="Visualizza Urgenti"
    action-url="#" />

Autore: NetGesCon Development Team
Data: 2024
========================================
--}}

@props([
    'type' => 'info',           // danger, warning, info, success
    'title' => '',              // Titolo dell'alert
    'message' => '',            // Messaggio principale
    'icon' => null,             // Icona FontAwesome
    'actionText' => null,       // Testo pulsante azione
    'actionUrl' => '#',         // URL pulsante azione
    'dismissible' => true,      // Se chiudibile
    'size' => 'md'              // sm, md, lg
])

@php
// Mappa dei colori per tipo
$typeColors = [
    'danger' => ['bg' => 'danger', 'text' => 'white', 'border' => 'danger'],
    'warning' => ['bg' => 'warning', 'text' => 'dark', 'border' => 'warning'], 
    'info' => ['bg' => 'info', 'text' => 'white', 'border' => 'info'],
    'success' => ['bg' => 'success', 'text' => 'white', 'border' => 'success'],
    'primary' => ['bg' => 'primary', 'text' => 'white', 'border' => 'primary']
];

$colors = $typeColors[$type] ?? $typeColors['info'];

// Icone di default per tipo
$defaultIcons = [
    'danger' => 'fas fa-exclamation-triangle',
    'warning' => 'fas fa-exclamation-circle', 
    'info' => 'fas fa-info-circle',
    'success' => 'fas fa-check-circle',
    'primary' => 'fas fa-bell'
];

$finalIcon = $icon ?? $defaultIcons[$type] ?? 'fas fa-info-circle';

// Classi per dimensioni
$sizeClasses = [
    'sm' => 'p-2',
    'md' => 'p-3', 
    'lg' => 'p-4'
];

$sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
@endphp

<div class="alert-box-atomic alert alert-{{ $colors['bg'] }} border-{{ $colors['border'] }} {{ $sizeClass }} d-flex align-items-start {{ $dismissible ? 'alert-dismissible' : '' }}" 
     role="alert">
     
    {{-- Icona --}}
    @if($finalIcon)
        <div class="alert-icon me-3 flex-shrink-0 mt-1">
            <i class="{{ $finalIcon }}" style="font-size: 1.2rem;"></i>
        </div>
    @endif
    
    {{-- Contenuto principale --}}
    <div class="alert-content flex-grow-1">
        {{-- Titolo --}}
        @if($title)
            <h6 class="alert-heading mb-2 fw-bold">{{ $title }}</h6>
        @endif
        
        {{-- Messaggio --}}
        @if($message)
            <div class="alert-message mb-2">{{ $message }}</div>
        @endif
        
        {{-- Slot per contenuto aggiuntivo --}}
        @if($slot->isNotEmpty())
            <div class="alert-extra-content">
                {{ $slot }}
            </div>
        @endif
        
        {{-- Pulsante azione --}}
        @if($actionText)
            <div class="alert-actions mt-2">
                <a href="{{ $actionUrl }}" 
                   class="btn btn-outline-{{ $colors['bg'] === 'warning' ? 'dark' : 'light' }} btn-sm">
                    {{ $actionText }}
                </a>
            </div>
        @endif
    </div>
    
    {{-- Pulsante chiusura --}}
    @if($dismissible)
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Chiudi"></button>
    @endif
</div>

{{-- CSS per miglioramenti --}}
@push('styles')
<style>
.alert-box-atomic {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border-width: 1px;
    border-style: solid;
}

.alert-box-atomic:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.alert-box-atomic .alert-icon {
    opacity: 0.9;
}

.alert-box-atomic .alert-heading {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.alert-box-atomic .alert-message {
    font-size: 0.9rem;
    line-height: 1.4;
}

.alert-box-atomic .alert-actions .btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
}

.alert-box-atomic .btn-close {
    opacity: 0.7;
    padding: 0.5rem;
}

.alert-box-atomic .btn-close:hover {
    opacity: 1;
}

/* Varianti di stile specifiche */
.alert-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
}

.alert-warning {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #212529;
}

.alert-info {
    background: linear-gradient(135deg, #0dcaf0 0%, #0bb5d6 100%);
    color: white;
}

.alert-success {
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
    color: white;
}

.alert-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
    color: white;
}
</style>
@endpush