@extends('admin.layouts.netgescon')

@section('title', $moduleTitle ?? 'Modulo')

@section('content')
<div class="container-fluid">
    <!-- Header Modulo -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    @if(isset($moduleBreadcrumb))
                        @foreach(explode(' > ', $moduleBreadcrumb) as $crumb)
                            <li class="breadcrumb-item{{ $loop->last ? ' active' : '' }}">{{ $crumb }}</li>
                        @endforeach
                    @else
                        <li class="breadcrumb-item active">Moduli</li>
                    @endif
                </ol>
            </nav>
            <h1 class="h2 mb-0">
                @if(isset($moduleIcon))
                    <i class="{{ $moduleIcon }} me-2 text-primary"></i>
                @endif
                {{ $moduleTitle ?? 'Modulo' }}
            </h1>
        </div>
        <div class="ms-auto">
            @yield('module-actions')
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>
            <strong>Attenzione!</strong> Ci sono alcuni errori:
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <!-- Contenuto Modulo -->
    @yield('module-content')
</div>

@push('styles')
<style>
/* Stili aggiuntivi per i moduli usando il sistema NetGescon esistente */
.module-stats-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-left: 4px solid var(--bs-primary);
    height: 100%;
}

.module-stats-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.module-stats-label {
    color: var(--bs-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

.btn-module-primary {
    background: var(--bs-primary);
    border: 1px solid var(--bs-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-module-primary:hover {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--bs-primary-rgb), 0.25);
}

.module-card {
    background: white;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.module-card-header {
    background: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.25rem;
}

.module-card-body {
    padding: 1.25rem;
}

.module-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-dark);
    display: flex;
    align-items: center;
}

.module-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--bs-secondary);
}

.module-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}
</style>
@endpush

@push('scripts')
<script>
// JavaScript comune per tutti i moduli
document.addEventListener('DOMContentLoaded', function() {
    // Auto-dismiss alerts dopo 5 secondi
    setTimeout(function() {
        var alerts = document.querySelectorAll('.alert-dismissible');
        alerts.forEach(function(alert) {
            if (bootstrap?.Alert) {
                var bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            }
        });
    }, 5000);
    
    // Tooltips per bottoni azione
    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
});
</script>
@endpush