@extends('layouts.app')

@section('title', 'Import Progress')

@section('content')
<x-breadcrumb :items="[
    ['label' => 'Imports', 'url' => route('imports.index')],
    ['label' => $import->original_name ?? 'Import', 'url' => route('imports.show', $import)],
    ['label' => 'Progress'],
]" />

<x-page-header title="Import Progress" subtitle="Live processing status for this import job.">
    <x-slot name="actions">
        <a href="{{ route('imports.show', $import) }}" class="procure-btn"><i class="fas fa-arrow-left"></i> Back</a>
    </x-slot>
</x-page-header>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="procure-form-card text-center">
            <div class="mb-3">
                <x-status-badge :status="$import->status" />
            </div>
            <p class="progress-ring-label mb-1" id="progressPct">
                @php
                    $total = max(1, (int) ($import->total_rows ?? 0));
                    $done = (int) ($import->imported_rows ?? 0) + (int) ($import->invalid_rows ?? 0);
                    $pct = $import->total_rows ? min(100, round(($done / $total) * 100)) : 0;
                @endphp
                {{ $pct }}%
            </p>
            <p class="text-muted mb-4">Processing {{ $import->original_name }}</p>

            <div class="progress mb-4" style="height:12px;border-radius:8px;">
                <div id="progressBar" class="progress-bar bg-primary" role="progressbar"
                     style="width: {{ $pct }}%;border-radius:8px;"
                     aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

            <div class="row text-left">
                <div class="col-6 col-md-3 mb-3">
                    <p class="procure-detail-label">Total</p>
                    <p class="procure-detail-value" id="statTotal">{{ $import->total_rows ?? 0 }}</p>
                </div>
                <div class="col-6 col-md-3 mb-3">
                    <p class="procure-detail-label">Imported</p>
                    <p class="procure-detail-value" id="statImported">{{ $import->imported_rows ?? 0 }}</p>
                </div>
                <div class="col-6 col-md-3 mb-3">
                    <p class="procure-detail-label">Invalid</p>
                    <p class="procure-detail-value" id="statInvalid">{{ $import->invalid_rows ?? 0 }}</p>
                </div>
                <div class="col-6 col-md-3 mb-3">
                    <p class="procure-detail-label">Status</p>
                    <p class="procure-detail-value" id="statStatus">{{ ucfirst(str_replace('_', ' ', $import->status ?? '')) }}</p>
                </div>
            </div>

            <p class="small text-muted mb-0">
                Started: {{ optional($import->processing_started_at)->format('Y-m-d H:i:s') ?? '—' }}
                · Completed: {{ optional($import->processing_completed_at)->format('Y-m-d H:i:s') ?? '—' }}
            </p>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    var statusUrl = @json(route('imports.status', $import));
    var poll = setInterval(function () {
        $.getJSON(statusUrl).done(function (data) {
            var total = Math.max(1, parseInt(data.total_rows || 0, 10));
            var done = parseInt(data.imported_rows || 0, 10) + parseInt(data.invalid_rows || 0, 10);
            var pct = data.total_rows ? Math.min(100, Math.round((done / total) * 100)) : 0;
            $('#progressPct').text(pct + '%');
            $('#progressBar').css('width', pct + '%').attr('aria-valuenow', pct);
            $('#statTotal').text(data.total_rows || 0);
            $('#statImported').text(data.imported_rows || 0);
            $('#statInvalid').text(data.invalid_rows || 0);
            $('#statStatus').text((data.status || '').replace(/_/g, ' '));
            if (['completed', 'failed'].indexOf(data.status) !== -1) {
                clearInterval(poll);
            }
        });
    }, 3000);
})();
</script>
@endpush