<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Veranstaltungen</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f9f9f9; }
        main { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
        h1 { text-align: center; margin-bottom: 30px; font-size: 2.5em; }
        .filters { background: white; padding: 25px; border-radius: 8px; margin-bottom: 40px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; align-items: flex-end; }
        .filter-group { display: flex; flex-direction: column; }
        .filter-group label { font-weight: 600; margin-bottom: 6px; font-size: 0.9em; }
        .filter-group input, .filter-group select { padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.95em; }
        .filter-group input:focus, .filter-group select:focus { outline: none; border-color: #667eea; box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1); }
        .btn-filter { padding: 10px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; }
        .btn-filter:hover { transform: translateY(-1px); }
        .events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
        .event-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; flex-direction: column; height: 100%; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid #eee; }
        .event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
        .event-stripe { height: 4px; width: 100%; }
        .event-content { padding: 22px; flex-grow: 1; display: flex; flex-direction: column; }
        .event-category { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.72em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; width: fit-content; }
        .event-title { font-size: 1.2em; font-weight: 700; margin-bottom: 8px; line-height: 1.35; color: #1a1a2e; }
        .event-description { color: #6b7280; font-size: 0.875em; margin-bottom: 16px; flex-grow: 1; line-height: 1.55; }
        .event-meta { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid #f3f4f6; font-size: 0.82em; color: #6b7280; margin-bottom: 16px; }
        .event-meta span { display: flex; align-items: center; gap: 6px; }
        .event-link { display: block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 11px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; text-align: center; font-size: 0.875em; letter-spacing: 0.02em; transition: opacity 0.2s; }
        .event-link:hover { opacity: 0.9; }
        .no-events { text-align: center; padding: 60px 20px; background: white; border-radius: 12px; color: #9ca3af; }
    </style>
</head>
<body>
    @include('partials.header')
    <main>
        <h1>Veranstaltungen</h1>
        
        <div class="filters">
            <form method="GET" action="/">
                <div class="filter-row">
                    <div class="filter-group">
                        <label for="from">Von:</label>
                        <input type="date" id="from" name="from" value="{{ request('from') }}">
                    </div>
                    <div class="filter-group">
                        <label for="to">Bis:</label>
                        <input type="date" id="to" name="to" value="{{ request('to') }}">
                    </div>
                    <div class="filter-group">
                        <label for="category">Kategorie:</label>
                        <select id="category" name="category">
                            <option value="">-- Alle Kategorien --</option>
                            @foreach($categories as $category)
                                <option value="{{ $category }}" {{ request('category') === $category ? 'selected' : '' }}>
                                    {{ $category }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="location">Ort:</label>
                        <select id="location" name="location">
                            <option value="">-- Alle Orte --</option>
                            @foreach($locations as $location)
                                <option value="{{ $location }}" {{ request('location') === $location ? 'selected' : '' }}>
                                    {{ $location }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn-filter">🔍 Filtern</button>
                </div>
            </form>
        </div>

        @if($events->count() > 0)
            <div class="events-grid">
                @foreach($events as $event)
                    @php
                        $colors = [
                            'Musik'      => ['stripe' => '#8b5cf6', 'bg' => '#f3f0ff', 'text' => '#6d28d9'],
                            'Film'       => ['stripe' => '#ec4899', 'bg' => '#fdf2f8', 'text' => '#be185d'],
                            'Sport'      => ['stripe' => '#10b981', 'bg' => '#ecfdf5', 'text' => '#065f46'],
                            'Kunst'      => ['stripe' => '#f59e0b', 'bg' => '#fffbeb', 'text' => '#92400e'],
                            'Literatur'  => ['stripe' => '#3b82f6', 'bg' => '#eff6ff', 'text' => '#1d4ed8'],
                            'Kulinarik'  => ['stripe' => '#ef4444', 'bg' => '#fef2f2', 'text' => '#b91c1c'],
                            'Theater'    => ['stripe' => '#f97316', 'bg' => '#fff7ed', 'text' => '#c2410c'],
                        ];
                        $color = $colors[$event->category] ?? ['stripe' => '#667eea', 'bg' => '#f0f0ff', 'text' => '#4338ca'];
                    @endphp
                    <div class="event-card">
                        <div class="event-stripe" style="background: {{ $color['stripe'] }};"></div>
                        <div class="event-content">
                            @if($event->category)
                                <span class="event-category" style="background: {{ $color['bg'] }}; color: {{ $color['text'] }};">
                                    {{ $event->category }}
                                </span>
                            @endif
                            <h2 class="event-title">{{ $event->title }}</h2>
                            <p class="event-description">{{ Str::limit($event->description, 110) }}</p>
                            <div class="event-meta">
                                @if($event->occurrences && $event->occurrences->count() > 0)
                                    <span>📅 {{ $event->occurrences->first()->start_datetime->format('d.m.Y') }}</span>
                                @endif
                                @if($event->location_id && $event->location)
                                    <span>📍 {{ $event->location->name }}</span>
                                @endif
                            </div>
                            <a href="{{ route('event.detail', $event) }}" class="event-link">Details ansehen →</a>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="no-events">
                <h3>Keine Veranstaltungen gefunden</h3>
                <p>Versuchen Sie, Ihre Filter anzupassen</p>
            </div>
        @endif
    </main>

    @include('partials.footer')
</body>
</html>
