@extends('adminlte::page')

@section('title', 'Submission #' . $submission->id)

@section('content_header')
<div class="d-flex justify-content-between align-items-center">
    <div>
        <h1 class="m-0">Submission #{{ $submission->id }}</h1>
        <ol class="breadcrumb mt-1 p-0 bg-transparent">
            <li class="breadcrumb-item"><a href="{{ url('admin') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.submissions.index') }}">Submissions</a></li>
            <li class="breadcrumb-item active">#{{ $submission->id }}</li>
        </ol>
    </div>
    <div>
        <a href="{{ route('admin.submissions.index') }}" class="btn btn-sm btn-default mr-1">
            <i class="fas fa-arrow-left mr-1"></i>Back
        </a>
        <form action="{{ route('admin.submissions.destroy', $submission) }}" method="POST" class="d-inline"
              onsubmit="return confirm('Move this submission to trash?')">
            @csrf @method('DELETE')
            <button class="btn btn-sm btn-danger"><i class="fas fa-trash mr-1"></i>Delete</button>
        </form>
    </div>
</div>
@endsection

@section('content')

{{-- ── Meta card ────────────────────────────────────────────────────────────── --}}
<div class="row mb-3">
    <div class="col-md-6">
        <div class="card card-outline card-info">
            <div class="card-header"><h3 class="card-title">Metadata</h3></div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <tr><th width="140">Form</th><td>{{ $form?->title ?? $submission->form_slug }}</td></tr>
                    <tr><th>Submitted by</th><td>{{ $submission->submitted_by ?: '—' }}</td></tr>
                    <tr><th>Submitted at</th><td>{{ $submission->created_at->format('d M Y, H:i') }}</td></tr>
                    <tr><th>Client IP</th><td>{{ $submission->client_ip }}</td></tr>
                    <tr><th>User agent</th><td class="text-muted small">{{ $submission->user_agent }}</td></tr>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- ── Field data grouped by section ──────────────────────────────────────── --}}
@foreach ($grouped as $sectionTitle => $rows)
<div class="card card-outline card-primary mb-3">
    <div class="card-header">
        <h3 class="card-title">
            <i class="fas fa-layer-group mr-1 text-primary"></i>
            {{ $sectionTitle ?: 'Fields' }}
        </h3>
    </div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead class="thead-light">
                <tr>
                    <th width="120" class="text-muted small">Key</th>
                    <th>Question</th>
                    <th>Answer</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($rows as $row)
                <tr>
                    <td class="text-muted small">{{ $row['field_key'] }}</td>
                    <td>{{ $row['label'] }}</td>
                    <td>
                        @if ($row['type'] === 'file_image' && $row['raw'])
                            <a href="{{ Storage::url($row['raw']) }}" target="_blank">
                                <img src="{{ Storage::url($row['raw']) }}"
                                     alt="photo"
                                     class="img-thumbnail"
                                     style="max-height:120px; max-width:180px; cursor:zoom-in;">
                            </a>
                        @elseif (is_array($row['raw']))
                            @foreach ($row['raw'] as $v)
                                <span class="badge badge-secondary mr-1">{{ $v }}</span>
                            @endforeach
                        @else
                            {{ $row['value'] }}
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endforeach

@endsection