@extends('layouts.app')

@section('title', 'Submissions: ' . $form->title)

@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>
            {{ $form->title }}
        </h1>
        <p class="text-secondary">{{ $form->submissions_count }} total submissions</p>
    </div>
    <div style="display:flex; gap:8px;">
        <a href="{{ route('form-builder.submissions.export', $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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Export CSV
        </a>
        <a href="{{ route('form-builder.edit', $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 to Builder
        </a>
    </div>
</div>

@if($submissions->isEmpty())
<div class="empty-state-card" style="text-align:center; padding:80px 20px; background:linear-gradient(145deg, var(--bg-secondary), rgba(26,29,46,0.92)); border:1px solid rgba(99,102,241,0.08); border-radius:18px;">
    <div style="width:72px; height:72px; margin:0 auto 20px; border-radius:20px; background:linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1)); display:flex; align-items:center; justify-content:center;">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="var(--accent-primary)" stroke-width="1.5" style="opacity:.7;"><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>
    <h3 style="color:var(--text-primary); font-weight:800; margin-bottom:8px;">No submissions yet</h3>
    <p style="color:var(--text-tertiary); font-size:0.88rem;">Share the form link to start collecting responses</p>
</div>
@else
<div class="table-container" style="background:linear-gradient(145deg, var(--bg-secondary), rgba(26,29,46,0.92)); border:1px solid rgba(99,102,241,0.08); border-radius:16px; overflow:hidden;">
    <table class="data-table">
        <thead>
            <tr>
                <th>Ticket ID</th>
                <th>Date</th>
                <th>Status</th>
                @foreach($form->fields->take(3) as $field)
                    @unless($field->isDisplayOnly())
                    <th>{{ Str::limit($field->label, 20) }}</th>
                    @endunless
                @endforeach
                <th>Task</th>
                <th>SLA</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach($submissions as $sub)
            <tr style="transition: background .2s;">
                <td><code class="fb-ticket-code">{{ $sub->ticket_id }}</code></td>
                <td class="text-secondary" style="font-size:0.82rem;">{{ $sub->submitted_at->format('M d, Y H:i') }}</td>
                <td>
                    <span class="status-badge" style="background: {{ $sub->status_color }}15; color: {{ $sub->status_color }}; border: 1px solid {{ $sub->status_color }}25; font-weight:700;">
                        {{ ucfirst($sub->status) }}
                    </span>
                </td>
                @foreach($form->fields->take(3) as $field)
                    @unless($field->isDisplayOnly())
                    <td style="font-size:0.85rem;">{{ Str::limit($sub->getFieldDisplay($field->field_key, $field), 30) }}</td>
                    @endunless
                @endforeach
                <td>
                    @if($sub->task)
                    <a href="{{ route('tasks.show', $sub->task) }}" class="text-link" style="font-weight:600; font-size:0.85rem;">{{ Str::limit($sub->task->title, 20) }}</a>
                    @else
                    <span class="text-tertiary">—</span>
                    @endif
                </td>
                <td>
                    @if($sub->sla_deadline_at)
                        @if($sub->is_sla_breached)
                        <span class="fb-sla-badge breached">Breached</span>
                        @else
                        <span class="fb-sla-badge ok">OK</span>
                        @endif
                    @else
                    <span class="text-tertiary">—</span>
                    @endif
                </td>
                <td>
                    <a href="{{ route('form-builder.submission.show', [$form, $sub]) }}" class="btn btn-ghost btn-xs" style="border:1px solid rgba(99,102,241,0.1); font-weight:600;">View</a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<div style="margin-top:20px;">{{ $submissions->links() }}</div>
@endif
@endsection