@extends('layouts.dashboard')
@section('page-title', 'Incident #' . $incident->id)

@section('content')

<div class="flex items-center gap-3 mb-6" style="flex-wrap:wrap;">
    <a href="{{ route('payment-dashboard.developer') }}" class="btn btn-ghost" style="font-size:12px;">← Zurück</a>
    <span class="badge badge-{{ $incident->severity }}">{{ ucfirst($incident->severity) }}</span>
    <span class="badge badge-{{ $incident->status }}">{{ $incident->status_label }}</span>
    <span style="font-size:13px; color:var(--text-muted);">{{ $incident->provider_label }} · {{ $incident->detected_at->format('d.m.Y H:i') }} · {{ $incident->duration }}</span>
</div>

<div class="grid-2">
    {{-- ── Incident-Details ── --}}
    <div>
        <div class="card mb-4">
            <div class="card-title">Incident-Details</div>
            <div style="font-size:20px; font-weight:800; margin-bottom:12px;">{{ $incident->title }}</div>

            @if($incident->description)
            <div style="background:var(--surface-2); border:1px solid var(--border); border-radius:7px; padding:14px; font-size:13px; color:var(--text-muted); margin-bottom:16px;">
                {{ $incident->description }}
            </div>
            @endif

            <table style="width:100%; font-size:13px;">
                <tr>
                    <td style="padding:6px 0; color:var(--text-muted); width:140px;">Anbieter</td>
                    <td style="padding:6px 0; font-weight:600;">{{ $incident->provider_label }}</td>
                </tr>
                <tr>
                    <td style="padding:6px 0; color:var(--text-muted);">Typ</td>
                    <td style="padding:6px 0;">{{ $incident->type }}</td>
                </tr>
                <tr>
                    <td style="padding:6px 0; color:var(--text-muted);">Erkannt</td>
                    <td style="padding:6px 0;">{{ $incident->detected_at->format('d.m.Y H:i') }} Uhr</td>
                </tr>
                @if($incident->resolved_at)
                <tr>
                    <td style="padding:6px 0; color:var(--text-muted);">Gelöst</td>
                    <td style="padding:6px 0; color:var(--green);">{{ $incident->resolved_at->format('d.m.Y H:i') }} Uhr</td>
                </tr>
                @endif
                <tr>
                    <td style="padding:6px 0; color:var(--text-muted);">Dauer</td>
                    <td style="padding:6px 0;">{{ $incident->duration }}</td>
                </tr>
                @if($incident->ticket_number)
                <tr>
                    <td style="padding:6px 0; color:var(--text-muted);">Ticket-Nr.</td>
                    <td style="padding:6px 0; color:var(--accent); font-weight:600;">{{ $incident->ticket_number }}</td>
                </tr>
                @endif
                @if($incident->affected_orders > 0)
                <tr>
                    <td style="padding:6px 0; color:var(--text-muted);">Bestellungen</td>
                    <td style="padding:6px 0; color:var(--red);">{{ $incident->affected_orders }} betroffen</td>
                </tr>
                @endif
                @if($incident->affected_revenue > 0)
                <tr>
                    <td style="padding:6px 0; color:var(--text-muted);">Umsatz</td>
                    <td style="padding:6px 0; color:var(--red); font-weight:700;">{{ number_format($incident->affected_revenue, 2, ',', '.') }} €</td>
                </tr>
                @endif
            </table>
        </div>

        {{-- Status ändern --}}
        <div class="card mb-4">
            <div class="card-title">Status aktualisieren</div>
            <form action="{{ route('payment-dashboard.status.update', $incident) }}" method="POST" class="flex gap-2">
                @csrf @method('PATCH')
                <select name="status" style="flex:1;">
                    <option value="open" {{ $incident->status === 'open' ? 'selected' : '' }}>Offen</option>
                    <option value="in_progress" {{ $incident->status === 'in_progress' ? 'selected' : '' }}>In Bearbeitung</option>
                    <option value="waiting_provider" {{ $incident->status === 'waiting_provider' ? 'selected' : '' }}>Wartet auf Anbieter</option>
                    <option value="resolved" {{ $incident->status === 'resolved' ? 'selected' : '' }}>Gelöst</option>
                    <option value="closed" {{ $incident->status === 'closed' ? 'selected' : '' }}>Geschlossen</option>
                </select>
                <button type="submit" class="btn btn-primary">Speichern</button>
            </form>
        </div>

        {{-- Aktivität hinzufügen --}}
        <div class="card">
            <div class="card-title">Aktivität hinzufügen</div>
            <form action="{{ route('payment-dashboard.activity.store', $incident) }}" method="POST">
                @csrf
                <div class="form-group">
                    <label>Typ</label>
                    <select name="type">
                        <option value="note">📝 Notiz</option>
                        <option value="email">✉️ E-Mail</option>
                        <option value="call">📞 Telefonat</option>
                        <option value="ticket">🎫 Support-Ticket</option>
                        <option value="provider_response">💬 Anbieter-Antwort</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Titel *</label>
                    <input type="text" name="title" placeholder="z.B. Ticket bei PAYONE eingereicht" required>
                </div>
                <div class="form-group">
                    <label>Details</label>
                    <textarea name="content" rows="3" placeholder="Inhalt der Mail, Antwort des Anbieters, Notizen..."></textarea>
                </div>
                <button type="submit" class="btn btn-primary" style="width:100%;">Aktivität speichern</button>
            </form>
        </div>
    </div>

    {{-- ── Aktivitäts-Timeline ── --}}
    <div>
        <div class="section-title">Kommunikations-Verlauf ({{ $incident->activities->count() }} Einträge)</div>
        <div class="card">
            @if($incident->activities->count() > 0)
            <div class="timeline">
                @foreach($incident->activities->sortByDesc('created_at') as $activity)
                <div class="timeline-item">
                    <div class="timeline-dot" style="background: {{ match($activity->type) {
                        'provider_response' => 'var(--green)',
                        'email' => 'var(--accent)',
                        'call' => 'var(--yellow)',
                        'ticket' => 'var(--orange)',
                        'status_change' => 'var(--text-muted)',
                        default => 'var(--accent)'
                    } }};"></div>
                    <div class="timeline-title">
                        {{ $activity->type_icon }} {{ $activity->title }}
                    </div>
                    <div class="timeline-meta">
                        {{ $activity->type_label }} · {{ $activity->author }} · {{ $activity->created_at->format('d.m.Y H:i') }} Uhr
                        · <span style="color: var(--text-muted)">{{ $activity->created_at->diffForHumans() }}</span>
                    </div>
                    @if($activity->content)
                        <div class="timeline-content">{{ $activity->content }}</div>
                    @endif
                </div>
                @endforeach
            </div>
            @else
                <div class="text-muted" style="text-align:center; padding:24px;">Noch keine Aktivitäten erfasst.</div>
            @endif
        </div>
    </div>
</div>

@endsection