@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 — Confirm &amp; Run</h3>
    </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 active">
                <div class="step-circle">4</div>
                <div class="step-label">Import</div>
            </div>
        </div>
    </div>

    <div class="px-3 py-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h5 class="card-title mb-3">Import Summary</h5>
                <table class="table table-borderless mb-0" style="max-width:500px;">
                    <tr>
                        <th class="ps-0" style="width:45%">File:</th>
                        <td>{{ $job->original_filename }}</td>
                    </tr>
                    <tr>
                        <th class="ps-0">Total Rows:</th>
                        <td>{{ number_format($totalRows) }}</td>
                    </tr>
                    <tr>
                        <th class="ps-0">Duplicate Strategy:</th>
                        <td>
                            @if($job->duplicate_strategy === 'overwrite')
                                <span class="badge bg-warning text-dark">Overwrite</span>
                            @elseif($job->duplicate_strategy === 'merge')
                                <span class="badge bg-info text-dark">Merge</span>
                            @else
                                <span class="badge bg-secondary">Skip</span>
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <th class="ps-0">Fields Mapped:</th>
                        <td>{{ count(array_filter($job->column_mapping ?? [])) }}</td>
                    </tr>
                </table>

                <div class="alert alert-info mt-3 mb-0" role="alert">
                    <i class="bx bx-info-circle me-1"></i>
                    The import runs synchronously. Do not close or navigate away from this page until it completes.
                    Large files may take up to 2 minutes.
                </div>
            </div>
        </div>
    </div>

    <div class="text-end px-3 pb-3">
        <a href="{{ route('helpdesk-ticket-import.duplicates', $job->id) }}" class="btn btn-outline-secondary me-2">
            <i class="bx bx-arrow-back me-1"></i> Back
        </a>
        <form action="{{ route('helpdesk-ticket-import.execute', $job->id) }}" method="POST" style="display:inline;" id="executeForm">
            @csrf
            <button type="submit" class="green-btn-inner waves-effect" id="runImportBtn">
                <i class="bx bx-play me-1"></i> Run Import
            </button>
        </form>
    </div>
</div>

@endsection

@push('page_script')
<script>
(function(){
    document.getElementById('executeForm').addEventListener('submit', function(){
        var btn = document.getElementById('runImportBtn');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span> Importing…';
    });
})();
</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:#28a745; 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:#28a745; font-weight:600; }
    .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