<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>公演一覧</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: sans-serif;
            line-height: 1.7;
            margin: 0;
            background: #fff;
            color: #222;
        }

        .container {
            max-width: 960px;
            margin: 0 auto;
            padding: 24px;
        }

        h1 {
            margin-bottom: 24px;
        }

        .performance-list {
            display: grid;
            gap: 16px;
        }

        .card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 16px;
        }

        .meta {
            color: #666;
            font-size: 14px;
            margin-top: 8px;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .works {
            margin-top: 8px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>公演一覧</h1>

        <div class="performance-list">
            @forelse ($performances as $performance)
                <div class="card">
                    <h2>
                        <a href="{{ route('performances.show', $performance) }}">
                            {{ $performance->display_name }}
                        </a>
                    </h2>

                    <div class="meta">
                        組：{{ $performance->troupe?->name ?? '未設定' }}
                        ／ 公演区分：{{ $performance->performanceType?->name ?? '未設定' }}
                    </div>

                    @if ($performance->performanceWorks->isNotEmpty())
                        <div class="works">
                            演目：
                            {{ $performance->performanceWorks->sortBy('act_order')->pluck('work.title')->filter()->implode(' / ') }}
                        </div>
                    @endif

                    @if ($performance->runs->isNotEmpty())
                        <div class="works">
                            上演：
                            {{ $performance->runs->pluck('theater')->filter()->implode(' / ') }}
                        </div>
                    @endif
                </div>
            @empty
                <p>まだ公演データがありません。</p>
            @endforelse
        </div>
    </div>
</body>

</html>
