@extends('layouts.app')

@section('title', 'Submission: ' . $submission->ticket_id)

@section('content')
<div class="content-header">
    <div>
        <h1 style="display:flex; align-items:center; gap:10px;">
            <span style="display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent-primary)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
            </span>
            Submission <code class="fb-ticket-code">{{ $submission->ticket_id }}</code>
        </h1>
        <p class="text-secondary">
            Submitted {{ $submission->submitted_at->diffForHumans() }}
            @if($submission->submitter) by {{ $submission->submitter->name }} @endif
        </p>
    </div>
    <a href="{{ route('form-builder.submissions', $form) }}" class="btn btn-ghost" style="border:1px solid rgba(99,102,241,0.12);">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
        Back
    </a>
</div>

<div class="td-layout" style="grid-template-columns: 1fr 300px;">
    <div class="td-main">
        {{-- Response Data --}}
        <div class="td-section" style="background:linear-gradient(145deg, var(--bg-secondary), rgba(26,29,46,0.92)); border-color:rgba(99,102,241,0.08);">
            <div class="td-section-header">
                <div class="td-section-icon" style="background:linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12)); color:#818cf8;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                </div>
                <span class="td-section-title">Response Data</span>
            </div>

            @foreach($form->fields as $field)
                @if(!$field->isDisplayOnly())
                <div class="fb-sub-field">
                    <label class="fb-sub-label">{{ $field->label }}</label>
                    @if($field->type === 'file' && !empty($submission->data[$field->field_key]))
                        <div class="fb-sub-value">
                            <a href="{{ asset('storage/' . $submission->data[$field->field_key]) }}" target="_blank" class="text-link" style="display:inline-flex; align-items:center; gap:6px; font-weight:600;">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
                                {{ basename($submission->data[$field->field_key]) }}
                            </a>
                        </div>
                    @else
                        <div class="fb-sub-value">{{ $submission->getFieldDisplay($field->field_key, $field) ?: '—' }}</div>
                    @endif
                </div>
                @endif
            @endforeach
        </div>

        {{-- Linked Task --}}
        @if($submission->task)
        <div class="td-section" style="background:linear-gradient(145deg, var(--bg-secondary), rgba(26,29,46,0.92)); border-color:rgba(99,102,241,0.08);">
            <div class="td-section-header">
                <div class="td-section-icon" style="background:linear-gradient(135deg, rgba(34,197,94,0.12), rgba(22,163,74,0.12)); color:#22c55e;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                </div>
                <span class="td-section-title">Linked Task</span>
            </div>
            <div class="fb-sub-field" style="border:none; padding:0;">
                <a href="{{ route('tasks.show', $submission->task) }}" class="fb-linked-task">
                    <span>{{ $submission->task->title }}</span>
                    <span class="status-badge" style="background: {{ $submission->task->status_color }}15; color: {{ $submission->task->status_color }}; border: 1px solid {{ $submission->task->status_color }}25; font-weight:700;">
                        {{ ucfirst(str_replace('_', ' ', $submission->task->status)) }}
                    </span>
                </a>
            </div>
        </div>
        @endif
    </div>

    {{-- Sidebar --}}
    <div class="td-sidebar">
        <div class="td-details-card" style="background:linear-gradient(145deg, var(--bg-secondary), rgba(26,29,46,0.95)); border-color:rgba(99,102,241,0.08);">
            <div class="td-details-header" style="border-color:rgba(99,102,241,0.06);">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent-primary)" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                Details
            </div>
            <div class="td-details-meta" style="border-color:rgba(99,102,241,0.06);">
                <div class="td-meta-row">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>
                    Status
                    <span class="td-meta-value" style="color: {{ $submission->status_color }}; font-weight:700;">{{ ucfirst($submission->status) }}</span>
                </div>
                <div class="td-meta-row">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg>
                    Submitted
                    <span class="td-meta-value">{{ $submission->submitted_at->format('M d, Y H:i') }}</span>
                </div>
                <div class="td-meta-row">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    Submitter
                    <span class="td-meta-value">{{ $submission->submitter?->name ?? 'Anonymous' }}</span>
                </div>
                <div class="td-meta-row">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/></svg>
                    IP
                    <span class="td-meta-value" style="font-family:monospace; font-size:0.75rem;">{{ $submission->ip_address ?? '—' }}</span>
                </div>
                @if($submission->sla_deadline_at)
                <div class="td-meta-row">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    SLA Deadline
                    <span class="td-meta-value {{ $submission->is_sla_breached ? 'text-danger' : '' }}" style="font-weight:700;">
                        {{ $submission->sla_deadline_at->format('M d, H:i') }}
                        @if($submission->is_sla_breached) ⚠️ @endif
                    </span>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection