@extends('dashboard.layouts.app')

@section('content')
    <div class="container-fluid">
        <x-alert />

        <div class="card h-100 border-0 shadow-sm overflow-hidden p-3">
            <div class="card-header border-bottom py-3 px-5 d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="mb-0">Failed Journal Imports</h5>
                    <div class="text-muted small">Failed requests coming from external systems</div>
                </div>

                <a href="{{ route('journal_entries.index') }}" class="btn btn-outline-secondary btn-sm">
                    Back to Journal Entries
                </a>
            </div>

            <div class="card-body">
                <form method="GET" class="row g-2 align-items-end mb-3">
                    <div class="col-12 col-md-3">
                        <label class="form-label small text-muted">Source System</label>
                        <input type="text" name="source_system" value="{{ request('source_system') }}" class="form-control" placeholder="ERP, CRM, ...">
                    </div>
                    <div class="col-12 col-md-6">
                        <label class="form-label small text-muted">Search</label>
                        <input type="text" name="q" value="{{ request('q') }}" class="form-control" placeholder="error, reference, source...">
                    </div>
                    <div class="col-12 col-md-3 d-flex gap-2">
                        <button class="btn btn-primary w-100" type="submit">Filter</button>
                        <a class="btn btn-outline-secondary w-100" href="{{ route('journal_entries.failed_imports') }}">Reset</a>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-sm table-hover align-middle">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 90px;">#</th>
                                <th style="width: 180px;">When</th>
                                <th style="width: 160px;">Source</th>
                                <th style="width: 180px;">External Ref</th>
                                <th>Error</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($failedImports as $item)
                                <tr>
                                    <td class="fw-semibold">{{ $item->id }}</td>
                                    <td class="text-muted">{{ optional($item->created_at)->format('Y-m-d H:i') }}</td>
                                    <td>
                                        <span class="badge bg-light text-dark border">
                                            {{ $item->source_system ?: 'Unknown' }}
                                        </span>
                                    </td>
                                    <td class="text-muted">{{ $item->external_reference ?: '-' }}</td>
                                    <td>
                                        <div class="text-danger fw-semibold">
                                            {{ $item->error_message }}
                                        </div>
                                        <details class="mt-2">
                                            <summary class="text-muted small">Payload</summary>
                                            <pre class="bg-light border rounded p-3 small mt-2 mb-0" style="white-space: pre-wrap;">{{ json_encode($item->payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                                        </details>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-4">
                                        No failed imports found.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($failedImports instanceof \Illuminate\Pagination\LengthAwarePaginator)
                    <div class="mt-3">
                        {{ $failedImports->links('pagination::bootstrap-5') }}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection