@extends('admin.layouts.main', ['fluid' => true])

@section('content')
    <p style="margin: 12px 0;">
        <a href="{{ url('admin/octoparse') }}">&larr; Back to Octoparse dashboard</a>
    </p>
    <h1 style="margin-top: 0;">{{ $taskConfig['label'] ?? $taskId }}</h1>
    <p>
        <small class="text-muted">Task ID:</small> <code>{{ $taskId }}</code>
        @if (!empty($taskConfig['unique_key_field']))
            &middot;
            <small class="text-muted">Unique key:</small> <code>{{ $taskConfig['unique_key_field'] }}</code>
        @endif
    </p>

    <div class="row" style="margin-bottom: 12px;">
        <div class="col-md-6">
            <form method="get" class="form-inline">
                <div class="form-group">
                    <label for="octoparse-search" class="sr-only">Search</label>
                    <input type="text" name="q" id="octoparse-search" value="{{ $search }}"
                           class="form-control" placeholder="Search external key or payload..." />
                </div>
                <button type="submit" class="btn btn-default">Search</button>
                @if ($search !== '')
                    <a href="{{ url('admin/octoparse/tasks/' . $taskId) }}" class="btn btn-link">Clear</a>
                @endif
            </form>
        </div>
        <div class="col-md-6 text-right">
            @if ($canRun && ($taskConfig['enabled'] ?? false))
                <form method="post" action="{{ url('admin/octoparse/run/' . $taskId) }}" style="display:inline;">
                    @csrf
                    <button type="submit" class="btn btn-primary">Run now</button>
                </form>
            @endif
        </div>
    </div>

    @php
        $sortLink = function ($col) use ($sort, $dir, $search) {
            $newDir = ($sort === $col && $dir === 'asc') ? 'desc' : 'asc';
            $params = array_filter([
                'q' => $search,
                'sort' => $col,
                'dir' => $newDir,
            ], fn($v) => $v !== '' && $v !== null);
            return '?' . http_build_query($params);
        };
        $arrow = fn($col) => $sort === $col ? ($dir === 'asc' ? ' ▲' : ' ▼') : '';
    @endphp

    <table class="table table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th style="width: 60px;"><a href="{{ $sortLink('id') }}">ID{!! $arrow('id') !!}</a></th>
                <th><a href="{{ $sortLink('external_key') }}">External key{!! $arrow('external_key') !!}</a></th>
                <th>Payload (preview)</th>
                <th style="width: 150px;"><a href="{{ $sortLink('scraped_at') }}">Scraped at{!! $arrow('scraped_at') !!}</a></th>
                <th style="width: 150px;"><a href="{{ $sortLink('imported_at') }}">Imported at{!! $arrow('imported_at') !!}</a></th>
            </tr>
        </thead>
        <tbody>
        @forelse ($records as $record)
            @php
                $payloadJson = json_encode($record->payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
                $payloadPreview = mb_substr($payloadJson, 0, 240);
                $modalId = 'octoparse-row-' . $record->id;
            @endphp
            <tr>
                <td>{{ $record->id }}</td>
                <td style="word-break: break-all;">{{ $record->external_key }}</td>
                <td>
                    <code style="white-space: pre-wrap;">{{ $payloadPreview }}@if (mb_strlen($payloadJson) > 240)…@endif</code>
                    <br>
                    <a href="#" data-toggle="modal" data-target="#{{ $modalId }}">View full payload</a>
                    <div class="modal fade" id="{{ $modalId }}" tabindex="-1" role="dialog">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    <h4 class="modal-title">Record #{{ $record->id }} — payload</h4>
                                </div>
                                <div class="modal-body">
                                    <pre style="max-height: 480px; overflow: auto;">{{ $payloadJson }}</pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
                <td>{{ optional($record->scraped_at)->format('Y-m-d H:i') ?: '—' }}</td>
                <td>{{ optional($record->imported_at)->format('Y-m-d H:i') ?: '—' }}</td>
            </tr>
        @empty
            <tr>
                <td colspan="5" class="text-center text-muted">No records imported yet for this task.</td>
            </tr>
        @endforelse
        </tbody>
    </table>

    <div class="text-center" style="margin-bottom: 24px;">
        {{ $records->links() }}
    </div>
@stop