@push('title')
    Bulk Import Logs
@endpush
<x-app-layout>
    <div class="row mb-3">
        <div class="col-md-12">
            <ul class="nav nav-pills flex-column flex-sm-row mb-4">
                <li class="nav-item mr-1">
                    <a class="btn btn-secondary" href="{{ route('products') }}">
                        Back to Products
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">
                Bulk Import Logs
            </h5>
            <span class="text-muted small">Shows the last {{ $logs->total() }} import job(s)</span>
        </div>
        <div class="card-body p-0">
            @forelse($logs as $log)
                @php
                    $statusClass = match ($log->status) {
                        'Success' => 'success',
                        'Partial' => 'warning',
                        'Failed' => 'danger',
                        default => 'secondary',
                    };
                    $statusIcon = match ($log->status) {
                        'Success' => 'bx-check-circle',
                        'Partial' => 'bx-error',
                        'Failed' => 'bx-x-circle',
                        default => 'bx-time',
                    };
                    $succeeded = $log->total_rows - $log->failed_rows_count;
                @endphp

                <div class="border-bottom p-3">
                    {{-- Log header --}}
                    <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
                        <span
                            class="badge bg-{{ $statusClass }} bg-opacity-15 text-{{ $statusClass }} fs-6 px-3 py-2 text-white">
                            {{ $log->status }}
                        </span>
                        <div class="flex-grow-1">
                            <strong>{{ $log->file_name ?? 'Unknown File' }}</strong>
                            <span class="text-muted ms-2 small">
                                by {{ $log->user?->name ?? 'System' }} &mdash; {{ $log->created_at->format('Y-m-d H:i:s') }}
                                ({{ $log->created_at->diffForHumans() }})
                            </span>
                        </div>
                        <div class="d-flex gap-3 small">
                            <span><strong>{{ $log->total_rows }}</strong> total</span>
                            <span class="text-success"><strong>{{ $succeeded }}</strong> ok</span>
                            @if($log->failed_rows_count > 0)
                                <span class="text-danger">{{ $log->failed_rows_count }}</strong> failed</span>
                            @endif
                        </div>
                    </div>

                    {{-- System-level error (e.g. file unreadable) --}}
                    @if($log->error_message)
                        <div class="alert alert-danger py-2 mb-2">
                            <strong>System Error:</strong> {{ $log->error_message }}
                        </div>
                    @endif

                    {{-- Row-level errors — pure vanilla JS toggle, no Bootstrap collapse --}}
                    @if($log->failed_rows_count > 0 && !empty($log->failed_rows_data))
                        <div class="border rounded">
                            <button
                                type="button"
                                onclick="toggleImportErrors('errPanel-{{ $log->id }}', 'errIcon-{{ $log->id }}')"
                                class="btn btn-link text-danger text-decoration-none w-100 text-start py-2 px-3 d-flex align-items-center justify-content-between"
                                style="box-shadow: none;">
                                <span>
                                    <i class="bx bx-error-circle me-1"></i>
                                    Show {{ $log->failed_rows_count }} failed row(s)
                                </span>
                                <i id="errIcon-{{ $log->id }}" class="bx bx-chevron-down" style="transition: transform 0.2s;"></i>
                            </button>
                            <div id="errPanel-{{ $log->id }}" style="display:none; overflow:hidden;">
                                <table class="table table-sm table-borderless mb-0">
                                    <thead class="table-danger">
                                        <tr>
                                            <th style="width:80px">Row #</th>
                                            <th style="width:200px">Product Name</th>
                                            <th>Error Message</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($log->failed_rows_data as $failedRow)
                                            <tr>
                                                <td>
                                                    <span class="badge bg-danger">Row {{ $failedRow['row'] }}</span>
                                                </td>
                                                <td class="text-muted">{{ $failedRow['product'] ?? 'N/A' }}</td>
                                                <td>{{ $failedRow['error'] }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    @elseif($log->status === 'Success')
                        <div class="text-success small">
                            All rows imported without errors.
                        </div>
                    @endif
                </div>
            @empty
                <div class="text-center py-5 text-muted">
                    <p class="mt-2">No import logs found yet. Import a product file to get started.</p>
                </div>
            @endforelse
        </div>

        @if($logs->hasPages())
            <div class="card-footer">
                {{ $logs->links() }}
            </div>
        @endif
    </div>

    <script>
        function toggleImportErrors(panelId, iconId) {
            var panel = document.getElementById(panelId);
            var icon  = document.getElementById(iconId);

            if (!panel) return;

            var isOpen = panel.style.display !== 'none';

            panel.style.display = isOpen ? 'none' : 'block';

            if (icon) {
                icon.style.transform = isOpen ? 'rotate(0deg)' : 'rotate(180deg)';
            }
        }
    </script>
</x-app-layout>