{% 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>
        .fc-event-title {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .fc-event-title i {
            font-size: 1em;
        }
        .appointment-type-filter {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding: 5px;
            border-radius: 4px;
            cursor: pointer;
        }
        .appointment-type-filter:hover {
            background-color: #f8f9fa;
        }
        .appointment-type-filter.active {
            background-color: #e9ecef;
        }
        .appointment-type-color {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            margin-right: 10px;
        }
        .container-filter {
            margin-bottom: 20px;
        }
        .fc-event {
            border-left-width: 4px !important;
        }
        .fc-event-container {
            cursor: pointer;
        }
        .event-container-badge {
            font-size: 0.8em;
            padding: 2px 4px;
            border-radius: 3px;
            margin-left: 5px;
            background-color: rgba(255, 255, 255, 0.2);
        }
        .fc-event-title {
            white-space: normal !important;
            overflow: visible !important;
        }
        .fc-event-main {
            padding: 2px 4px;
        }
        .fc-event-time {
            display: none;
        }
        .fc-event-title-container {
            padding: 0 !important;
        }
        .fc-event-title {
            font-size: 0.9em;
        }
        .fc-event-title i {
            margin-right: 4px;
        }
        .fc-event:hover {
            z-index: 1000 !important;
        }
        .fc-event:hover .fc-event-title {
            white-space: normal !important;
            overflow: visible !important;
        }
        .fc-event:hover .fc-event-main {
            background-color: rgba(0, 0, 0, 0.1);
        }
        .fc-event:hover .event-details {
            display: block;
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 1000;
            min-width: 200px;
            max-width: 300px;
        }
        .event-details {
            display: none;
        }
        .event-details h6 {
            margin: 0 0 8px 0;
            font-weight: bold;
        }
        .event-details p {
            margin: 4px 0;
            font-size: 0.9em;
        }
        .event-details i {
            width: 16px;
            text-align: center;
            margin-right: 8px;
        }
    </style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Container Kalender</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <select class="form-select" id="containerFilter">
                            <option value="">Alle Container</option>
                            {% for container in containers %}
                                <option value="{{ container.id }}">{{ container.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-8">
                        <div class="btn-group" role="group" id="typeFilter">
                            {% for type in appointmentTypes %}
                                <input type="checkbox" class="btn-check" id="type{{ type.id }}" value="{{ type.id }}" checked>
                                <label class="btn btn-outline-primary" for="type{{ type.id }}" style="border-color: {{ type.color }}; color: {{ type.color }}">
                                    <i class="fas {{ type.icon }}"></i> {{ type.name }}
                                </label>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                <div id="calendar"></div>
            </div>
        </div>
    </div>
</div>

<!-- Appointment Modal -->
<div class="modal fade" id="appointmentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Termin</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="appointmentForm">
                    <input type="hidden" id="appointmentId">
                    <div class="mb-3">
                        <label for="title" class="form-label">Titel</label>
                        <input type="text" class="form-control" id="title" required>
                    </div>
                    <div class="mb-3">
                        <label for="start" class="form-label">Start</label>
                        <input type="datetime-local" class="form-control" id="start" required>
                    </div>
                    <div class="mb-3">
                        <label for="end" class="form-label">Ende</label>
                        <input type="datetime-local" class="form-control" id="end" required>
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Beschreibung</label>
                        <textarea class="form-control" id="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="type" class="form-label">Typ</label>
                        <select class="form-select" id="type" required>
                            {% for type in appointmentTypes %}
                                <option value="{{ type.id }}">{{ type.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="container" class="form-label">Container</label>
                        <select class="form-select" id="container">
                            <option value="">Allgemein</option>
                            {% for container in containers %}
                                <option value="{{ container.id }}">{{ container.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-danger" id="deleteButton" style="display: none;">Löschen</button>
                <button type="button" class="btn btn-primary" id="saveButton">Speichern</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales/de.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            let selectedContainerId = '';
            let selectedTypeIds = [];
            const containers = {{ containers|map(c => ({id: c.id, name: c.name}))|json_encode|raw }};

            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'de',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: function(info, successCallback, failureCallback) {
                    let url = '/ksbdueren/public/api/container-appointments';
                    const params = new URLSearchParams();
                    
                    if (selectedContainerId) {
                        params.append('containerId', selectedContainerId);
                    }
            
                    if (selectedTypeIds.length > 0) {
                        params.append('typeIds', selectedTypeIds.join(','));
                    }
            
                    fetch(url + '?' + params.toString())
                        .then(response => response.json())
                        .then(data => {
                            successCallback(data);
                        })
                        .catch(error => {
                            failureCallback(error);
                        });
                },
                eventContent: function(arg) {
                    return {
                        html: `
                            <div class="fc-event-title">
                                <i class="fas ${arg.event.extendedProps.icon}"></i>
                                ${arg.event.title}
                                ${arg.event.extendedProps.containerName ? 
                                    `<span class="event-container-badge">${arg.event.extendedProps.containerName}</span>` : 
                                    ''}
                            </div>
                            <div class="event-details">
                                <h6>${arg.event.title}</h6>
                                <p><i class="fas fa-clock"></i>${arg.event.start.toLocaleTimeString()} - ${arg.event.end.toLocaleTimeString()}</p>
                                <p><i class="fas ${arg.event.extendedProps.icon}"></i>${arg.event.extendedProps.typeName}</p>
                                ${arg.event.extendedProps.containerName ? 
                                    `<p><i class="fas fa-box"></i>${arg.event.extendedProps.containerName}</p>` : 
                                    ''}
                                ${arg.event.extendedProps.description ? 
                                    `<p><i class="fas fa-info-circle"></i>${arg.event.extendedProps.description}</p>` : 
                                    ''}
                            </div>
                        `
                    };
                },
                editable: true,
                selectable: true,
                selectMirror: true,
                dayMaxEvents: true,
                select: function(info) {
                    showAppointmentModal(null, info.start, info.end);
                },
                eventClick: function(info) {
                    showAppointmentModal(info.event);
                },
                eventDrop: function(info) {
                    updateAppointment(info.event);
                },
                eventResize: function(info) {
                    updateAppointment(info.event);
                }
            });
            
            calendar.render();
            
            // Container filter
            document.getElementById('containerFilter').addEventListener('change', function() {
                selectedContainerId = this.value;
                calendar.refetchEvents();
            });
            
            // Type filter
            document.querySelectorAll('#typeFilter input[type="checkbox"]').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    selectedTypeIds = Array.from(document.querySelectorAll('#typeFilter input[type="checkbox"]:checked'))
                        .map(cb => cb.value);
                    calendar.refetchEvents();
                });
            });
            
            // Appointment modal
            const appointmentModal = new bootstrap.Modal(document.getElementById('appointmentModal'));
            const appointmentForm = document.getElementById('appointmentForm');
            const deleteButton = document.getElementById('deleteButton');
            
            function showAppointmentModal(event, start, end) {
                const modal = document.getElementById('appointmentModal');
                const form = document.getElementById('appointmentForm');
                
                if (event) {
                    // Edit existing appointment
                    document.getElementById('appointmentId').value = event.id;
                    document.getElementById('title').value = event.title;
                    document.getElementById('start').value = event.start.toISOString().slice(0, 16);
                    document.getElementById('end').value = event.end.toISOString().slice(0, 16);
                    document.getElementById('description').value = event.extendedProps.description || '';
                    document.getElementById('type').value = event.extendedProps.typeId;
                    document.getElementById('container').value = event.extendedProps.containerId || '';
                    deleteButton.style.display = 'block';
                } else {
                    // Create new appointment
                    form.reset();
                    document.getElementById('appointmentId').value = '';
                    document.getElementById('start').value = start.toISOString().slice(0, 16);
                    document.getElementById('end').value = end.toISOString().slice(0, 16);
                    document.getElementById('container').value = selectedContainerId || '';
                    deleteButton.style.display = 'none';
                }
                
                appointmentModal.show();
            }
            
            // Save appointment
            document.getElementById('saveButton').addEventListener('click', function() {
                const form = document.getElementById('appointmentForm');
                const appointmentId = document.getElementById('appointmentId').value;
                
                const data = {
                    title: document.getElementById('title').value,
                    start: document.getElementById('start').value,
                    end: document.getElementById('end').value,
                    description: document.getElementById('description').value,
                    type: document.getElementById('type').value,
                    container: document.getElementById('container').value
                };
                
                const url = appointmentId ? '/ksbdueren/public/api/container-appointments/' + appointmentId : '/ksbdueren/public/api/container-appointments';
                const method = appointmentId ? 'PUT' : 'POST';
                
                fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('Fehler: ' + data.error);
                    } else {
                        appointmentModal.hide();
                        calendar.refetchEvents();
                    }
                })
                .catch(error => {
                    alert('Fehler beim Speichern des Termins.');
                });
            });
            
            // Delete appointment
            document.getElementById('deleteButton').addEventListener('click', function() {
                if (!confirm('Möchten Sie diesen Termin wirklich löschen?')) {
                    return;
                }
                
                const appointmentId = document.getElementById('appointmentId').value;
                
                fetch('{{ path('api_container_appointments_update', {id: 'PLACEHOLDER'}) }}'.replace('PLACEHOLDER', appointmentId), {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('Fehler: ' + data.error);
                    } else {
                        appointmentModal.hide();
                        calendar.refetchEvents();
                    }
                })
                .catch(error => {
                    alert('Fehler beim Löschen des Termins.');
                });
            });
            
            function updateAppointment(event) {
                const data = {
                    title: event.title,
                    start: event.start.toISOString(),
                    end: event.end.toISOString(),
                    type: event.extendedProps.typeId,
                    container: event.extendedProps.containerId
                };
                
                fetch('{{ path('api_container_appointments_update', {id: 'PLACEHOLDER'}) }}'.replace('PLACEHOLDER', event.id), {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        alert('Fehler: ' + data.error);
                        calendar.refetchEvents();
                    }
                })
                .catch(error => {
                    alert('Fehler beim Aktualisieren des Termins.');
                    calendar.refetchEvents();
                });
            }
        });
    </script>
{% endblock %}