@extends('layouts.app')

@section('title', 'Issue #' . $issue->id)

@section('content')
    <h1>Issue #{{ $issue->id }}</h1>
    <p class="subtitle">{{ $issue->job_no }} · {{ $issue->responsible_officer }}</p>

    <div class="card">
        <p>
            <span class="badge {{ $issue->category }}">{{ ucfirst($issue->category) }}</span>
            <span class="badge {{ $issue->status }}">{{ ucfirst($issue->status) }}</span>
        </p>
        <p><strong>Subcategory:</strong> {{ $issue->subcategory }}</p>
        @if ($issue->job_description)
            <p><strong>Project description:</strong> {{ $issue->job_description }}</p>
        @endif
        <p><strong>Officer:</strong> {{ $issue->responsible_officer }}</p>
        @if ($issue->description)
            <p><strong>Details:</strong><br>{{ $issue->description }}</p>
        @endif
        @if ($issue->reported_by)
            <p class="hint">Reported by {{ $issue->reported_by }} on {{ $issue->created_at->format('Y-m-d H:i') }}</p>
        @endif
    </div>

    <div class="card">
        <h3 style="margin-top:0">Photos</h3>
        @if ($issue->photos->count())
            <div class="photo-list">
                @foreach ($issue->photos as $photo)
                    @php
                        $mismatch = $photo->ai_suggested_category && $photo->ai_suggested_category !== $issue->category;
                    @endphp
                    <a class="photo-item" href="{{ route('safety-quality.photo', [$issue, $photo]) }}" target="_blank" rel="noopener">
                        <img src="{{ route('safety-quality.photo', [$issue, $photo]) }}" alt="{{ $photo->original_filename }}" loading="lazy">
                        <div class="photo-caption">
                            <div class="photo-name">{{ $photo->original_filename }}</div>
                            @if ($photo->ai_analyzed_at)
                                <small class="hint" style="display:block; margin-top:4px;">
                                    🤖 AI suggested:
                                    @if ($photo->ai_suggested_category)
                                        <strong>{{ ucfirst($photo->ai_suggested_category) }}</strong>@if ($photo->ai_suggested_subcategory) — {{ $photo->ai_suggested_subcategory }} @endif
                                    @else
                                        (no suggestion)
                                    @endif
                                    @if ($mismatch)
                                        <span style="color:var(--danger); font-weight:600;"> · differs from logged category</span>
                                    @endif
                                </small>
                                @if ($photo->ai_summary)
                                    <small class="hint" style="display:block;">{{ $photo->ai_summary }}</small>
                                @endif
                            @endif
                        </div>
                    </a>
                @endforeach
            </div>
        @else
            <p class="hint">No photos attached.</p>
        @endif
    </div>

    <a class="btn secondary w-full" href="{{ route('safety-quality.index') }}">Back to List</a>
@endsection