@extends('layouts.landing')

@section('title', 'Inicio')

@section('content')
<div class="container-fluid">

    {{-- Anuncios vigentes para este usuario --}}
    @if(isset($anuncios) && $anuncios->count())
        <div class="mb-4">
            @foreach($anuncios as $anuncio)
                @php $cfg = $anuncio->typeConfig(); @endphp
                <div class="alert alert-{{ $cfg['color'] }} alert-dismissible fade show shadow-sm mb-3" role="alert">
                    <div class="d-flex align-items-start">
                        <i class="fas {{ $cfg['icon'] }} fa-lg mr-3 mt-1"></i>
                        <div class="flex-grow-1">
                            <h6 class="font-weight-bold mb-1">{{ $anuncio->title }}</h6>
                            @if($anuncio->body)
                                <p class="mb-1" style="white-space:pre-line">{{ $anuncio->body }}</p>
                            @endif
                            @if($anuncio->image_path)
                                <img src="{{ Storage::url($anuncio->image_path) }}"
                                     alt="{{ $anuncio->title }}"
                                     class="img-fluid rounded mt-2"
                                     style="max-height:300px; max-width:100%; object-fit:contain">
                            @endif
                            @if($anuncio->expires_at)
                                <div class="mt-1">
                                    <small class="opacity-75">
                                        <i class="fas fa-clock mr-1"></i>
                                        Válido hasta {{ $anuncio->expires_at->format('d/m/Y H:i') }}
                                    </small>
                                </div>
                            @endif
                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endforeach
        </div>
    @endif

    {{-- Contenido de bienvenida --}}
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body text-center py-5">
                    <i class="fas fa-graduation-cap fa-3x text-primary mb-3"></i>
                    <h4 class="font-weight-bold">Bienvenido al Sistema Educativo SECUIEP</h4>
                    <p class="text-muted">Utiliza el menú lateral para acceder a los módulos disponibles.</p>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection