@extends('layouts.app')

@section('title', 'Contenidos')

@section('content')
<style>
    @media (min-width: 576px) {
        .imagen {
            width: 25vw !important;
        }
    }
</style>
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>Eventos</h1>
        <form action="{{ route('tableros.clearSession', ['identifier' => 'EVENTOS']) }}" method="GET">
            @csrf
            <button type="submit" class="btn btn-secondary">Volver</button>
        </form>
    </div>
    <div class="row">
        @forelse ($contenidos as $contenido)
            @php
                $dt = new DateTime();
                $dt->setTimestamp($contenido->fecha);
                $duedate = $dt->format('d/m/Y H:i');
                $inputDate = date('Y-m-d\TH:i', $contenido->fecha);
            @endphp
            <div class="col-12 mb-3">
                <div class="card">
                    <div class="card-body position-relative" style="padding-top: 0.5rem; padding-bottom: 2.5rem;">
                        {{-- Fecha arriba a la izquierda --}}
                        <div onclick="showEditDate({{ $contenido->id }})" class="text-primary fw-semibold" style="font-size: 1.1rem;">
                            {{ $duedate }}
                        </div>

                        {{-- Evento centrado --}}
                        <div class="d-flex">
                            <h5 class="card-title mb-4">
                                {{ ucfirst($contenido->evento) }}
                            </h5>
                        </div>

                        {{-- Situación abajo a la derecha --}}
                        @php
                            $background = match ($contenido->situacion) {
                                'Cubierto' => '#198754',  
                                'Previsto' => '#fd7e14',  
                                'Propuesto' => '#fd7e14', 
                                default => '#d63384',      
                            };
                        @endphp
                        <div class="position-absolute text-end border rounded px-3 py-2 shadow-sm"
                             style="bottom: 0.5rem; right: 1rem; background-color: {{ $background }}; color: white;">
                            <p class="card-text mb-0">{{ $contenido->situacion }}</p>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-12">
                <div class="alert alert-info text-center">
                    No hay contenidos disponibles.
                </div>
            </div>
        @endforelse
    </div>
</div> 
<script>
    function showEditDate(contentId) {
        let modal = new bootstrap.Modal(document.getElementById('editDate' + contentId));
        modal.show();
    }
</script>
@endsection