{% extends 'base.html.twig' %}

{% block title %}Container Kalender{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
    <style>
        .container-calendar {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin: 20px 0;
        }
        
        .container-header {
            border-bottom: 2px solid #e9ecef;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .container-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .info-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            border-left: 4px solid #007bff;
        }
        
        .info-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 5px;
            font-size: 0.9rem;
        }
        
        .info-value {
            color: #212529;
            font-size: 1.1rem;
        }
        
        .back-button {
            background: #6c757d;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            text-decoration: none;
            display: inline-block;
            margin-bottom: 20px;
            transition: background 0.3s;
        }
        
        .back-button:hover {
            background: #5a6268;
            color: white;
            text-decoration: none;
        }
        
        #calendar {
            max-width: 100%;
            margin: 0 auto;
        }
    </style>
{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <a href="{{ path('calendar_index') }}" class="back-button">
                <i class="fas fa-arrow-left"></i> Zurück zum Hauptkalender
            </a>
            
            <div class="container-calendar">
                <div class="container-header">
                    <h2><i class="fas fa-cube"></i> Container Kalender</h2>
                    <p class="text-muted">Kalenderansicht für Container ID: {{ containerId }}</p>
                </div>
                
                <div class="container-info">
                    <div class="info-card">
                        <div class="info-label">Container ID</div>
                        <div class="info-value">{{ containerId }}</div>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">Verfügbare Container</div>
                        <div class="info-value">{{ containers|length }}</div>
                    </div>
                    
                    <div class="info-card">
                        <div class="info-label">Aktueller Container</div>
                        <div class="info-value">
                            {% for container in containers %}
                                {% if container.id == containerId %}
                                    {{ container.name ?? 'Unbekannt' }}
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <div id="calendar"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'de',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: function(fetchInfo, successCallback, failureCallback) {
                    // Hier könnten Container-spezifische Events geladen werden
                    // Für jetzt zeigen wir ein Beispiel-Event
                    var events = [
                        {
                            title: 'Container {{ containerId }} - Wartung',
                            start: new Date(),
                            color: '#dc3545'
                        }
                    ];
                    successCallback(events);
                },
                eventClick: function(info) {
                    alert('Event: ' + info.event.title);
                }
            });
            calendar.render();
        });
    </script>
{% endblock %}