@extends('layouts.app')

@section('title', 'Konflikte')

@section('content')
<div class="container-xxl mt-4">
    <h1>Terminkonflikte</h1>
    <div id="conflicts-list" class="mt-3">
        <div class="spinner-border" role="status"><span class="visually-hidden">Laden...</span></div>
    </div>
</div>
@endsection

@push('scripts')
<script>
fetch('{{ route("calendar.server.conflicts") }}')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var el = document.getElementById('conflicts-list');
        el.replaceChildren();

        if (data.length === 0) {
            var alert = document.createElement('div');
            alert.className = 'alert alert-success';
            alert.textContent = 'Keine Konflikte gefunden.';
            el.appendChild(alert);
            return;
        }

        var table = document.createElement('table');
        table.className = 'table table-striped';
        var thead = document.createElement('thead');
        var headerRow = document.createElement('tr');
        ['Event', 'Raum', 'Start', 'Ende'].forEach(function(h) {
            var th = document.createElement('th');
            th.textContent = h;
            headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);
        table.appendChild(thead);

        var tbody = document.createElement('tbody');
        data.forEach(function(c) {
            var tr = document.createElement('tr');
            [c.label, c.roomId || '-', new Date(c.startTimestamp * 1000).toLocaleString('de-DE'), new Date(c.endTimestamp * 1000).toLocaleString('de-DE')].forEach(function(val) {
                var td = document.createElement('td');
                td.textContent = val;
                tr.appendChild(td);
            });
            tbody.appendChild(tr);
        });
        table.appendChild(tbody);
        el.appendChild(table);
    });
</script>
@endpush