@php
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    );
@endphp
@extends('admin.layouts.layout', $headerOption)
@section('content')

<div class="project-box">
    <div class="heading-btn-sec brd-bottom">
        <h3>Import Tickets — Results</h3>
        <div class="heading-btn in-re">
            @if($job->status === 'complete')
                <a href="{{ route('merchant-helpdesk-tickets.index') }}" class="green-btn-inner waves-effect">
                    <i class="bx bx-list-ul me-1"></i> View Tickets
                </a>
            @endif
            <a href="{{ route('helpdesk-ticket-import.index') }}" class="btn btn-outline-secondary">
                <i class="bx bx-plus me-1"></i> New Import
            </a>
        </div>
    </div>

    {{-- Step Progress Bar --}}
    <div class="px-3 pt-3 pb-2">
        <div class="d-flex align-items-center justify-content-center import-steps">
            <div class="import-step complete">
                <div class="step-circle"><i class="bx bx-check" style="font-size:1rem;"></i></div>
                <div class="step-label">Upload File</div>
            </div>
            <div class="step-line step-line-done"></div>
            <div class="import-step complete">
                <div class="step-circle"><i class="bx bx-check" style="font-size:1rem;"></i></div>
                <div class="step-label">Map Columns</div>
            </div>
            <div class="step-line step-line-done"></div>
            <div class="import-step complete">
                <div class="step-circle"><i class="bx bx-check" style="font-size:1rem;"></i></div>
                <div class="step-label">Check Duplicates</div>
            </div>
            <div class="step-line step-line-done"></div>
            <div class="import-step {{ $job->status === 'complete' ? 'complete' : 'active' }}">
                <div class="step-circle">
                    @if($job->status === 'complete')
                        <i class="bx bx-check" style="font-size:1rem;"></i>
                    @else
                        <i class="bx bx-x" style="font-size:1rem;"></i>
                    @endif
                </div>
                <div class="step-label">Import</div>
            </div>
        </div>
    </div>

    @if($job->status === 'failed')
    <div class="px-3 pb-2">
        <div class="alert alert-danger d-flex align-items-center" role="alert">
            <i class="bx bx-error-circle me-2 fs-5"></i>
            <div>Import failed due to an unexpected error. Please try again or contact support.</div>
        </div>
    </div>
    @endif

    {{-- KPI Cards --}}
    <div class="px-3 pb-3">
        <div class="row g-3">
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm text-center h-100">
                    <div class="card-body">
                        <p class="text-muted small mb-1">Total Rows</p>
                        <h3 class="fw-bold mb-0">{{ number_format($job->total_rows) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm text-center h-100 border-start border-success border-3">
                    <div class="card-body">
                        <p class="text-muted small mb-1">Imported</p>
                        <h3 class="fw-bold text-success mb-0">{{ number_format($job->imported_count) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm text-center h-100 border-start border-warning border-3">
                    <div class="card-body">
                        <p class="text-muted small mb-1">Skipped</p>
                        <h3 class="fw-bold text-warning mb-0">{{ number_format($job->skipped_count) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm text-center h-100 border-start border-danger border-3">
                    <div class="card-body">
                        <p class="text-muted small mb-1">Errors</p>
                        <h3 class="fw-bold text-danger mb-0">{{ number_format($job->error_count) }}</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Error Table --}}
    @if($job->error_count > 0 && !empty($job->error_rows))
    <div class="px-3 pb-3">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <p class="fw-semibold mb-0">Error Details ({{ count($job->error_rows) }} rows):</p>
            <a href="{{ route('helpdesk-ticket-import.errors.download', $job->id) }}"
               class="btn btn-sm btn-outline-danger">
                <i class="bx bx-download me-1"></i> Export Error CSV
            </a>
        </div>
        <div style="max-height:350px; overflow-y:auto; border:1px solid #dee2e6; border-radius:4px;">
            <table class="table table-sm table-bordered mb-0">
                <thead class="table-light sticky-top">
                    <tr>
                        <th style="width:70px;">Row #</th>
                        <th style="width:140px;">Field</th>
                        <th>Message</th>
                        <th style="width:100px;">Severity</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($job->error_rows as $errRow)
                    <tr>
                        <td>{{ $errRow['row'] ?? '—' }}</td>
                        <td>{{ $errRow['field'] ?? '—' }}</td>
                        <td>{{ $errRow['msg'] ?? '—' }}</td>
                        <td>
                            @php $sev = $errRow['severity'] ?? 'error'; @endphp
                            @if($sev === 'warning')
                                <span class="badge bg-warning text-dark">Warning</span>
                            @else
                                <span class="badge bg-danger">Error</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <div class="text-end pb-3">
        <a href="{{ route('helpdesk-ticket-import.history') }}" class="btn btn-outline-secondary me-2">
            <i class="mdi mdi-history me-1"></i> View History
        </a>
    </div>
</div>

@endsection

@push('page_script')
<style>
    .import-steps { gap: 0; }
    .import-step  { display:flex; flex-direction:column; align-items:center; min-width:90px; }
    .step-circle  { width:32px; height:32px; border-radius:50%; background:#dee2e6; color:#6c757d;
                    display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.85rem; }
    .import-step.active   .step-circle { background:#dc3545; color:#fff; }
    .import-step.complete .step-circle { background:#198754; color:#fff; }
    .step-label   { font-size:.75rem; margin-top:4px; color:#6c757d; text-align:center; }
    .import-step.active   .step-label  { color:#dc3545; }
    .import-step.complete .step-label  { color:#198754; }
    .step-line      { flex:1; height:2px; background:#dee2e6; margin-bottom:18px; min-width:30px; }
    .step-line-done { background:#198754; }
</style>
@endpush