@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 — Duplicate Check</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 active">
                <div class="step-circle">3</div>
                <div class="step-label">Check Duplicates</div>
            </div>
            <div class="step-line"></div>
            <div class="import-step">
                <div class="step-circle">4</div>
                <div class="step-label">Import</div>
            </div>
        </div>
    </div>

    <div class="px-3 pb-2">
        @if($duplicateCount > 0)
            <div class="alert alert-warning d-flex align-items-center" role="alert">
                <i class="bx bx-error-circle me-2 fs-5"></i>
                <div>
                    <strong>{{ $duplicateCount }} duplicate{{ $duplicateCount !== 1 ? 's' : '' }} found</strong>
                    out of {{ $totalFileRows }} rows.
                    Choose how to handle them below.
                    @if($duplicateCount > 50)
                        &nbsp;(Showing first 50)
                    @endif
                </div>
            </div>
        @else
            <div class="alert alert-success d-flex align-items-center" role="alert">
                <i class="bx bx-check-circle me-2 fs-5"></i>
                <div>No duplicates found — all {{ $totalFileRows }} rows are new.</div>
            </div>
        @endif
    </div>

    <form action="{{ route('helpdesk-ticket-import.duplicates.store', $job->id) }}" method="POST" id="dupForm">
        @csrf

        <div class="px-3 mb-3">
            <label class="form-label fw-semibold">Duplicate Strategy:</label>
            <div class="d-flex flex-wrap gap-3">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="duplicate_strategy"
                           id="stratSkip" value="skip"
                           {{ ($job->duplicate_strategy ?? 'skip') === 'skip' ? 'checked' : '' }}>
                    <label class="form-check-label" for="stratSkip">
                        <strong>Skip</strong> — leave existing tickets unchanged, don't import the duplicate row
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="duplicate_strategy"
                           id="stratOverwrite" value="overwrite"
                           {{ ($job->duplicate_strategy ?? '') === 'overwrite' ? 'checked' : '' }}>
                    <label class="form-check-label" for="stratOverwrite">
                        <strong>Overwrite</strong> — replace all mapped fields on the existing ticket with import values
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="duplicate_strategy"
                           id="stratMerge" value="merge"
                           {{ ($job->duplicate_strategy ?? '') === 'merge' ? 'checked' : '' }}>
                    <label class="form-check-label" for="stratMerge">
                        <strong>Merge</strong> — only fill in empty fields on the existing ticket (non-destructive)
                    </label>
                </div>
            </div>
        </div>

        @if(count($duplicates) > 0)
        <div class="px-3 mb-3">
            <p class="fw-semibold mb-1">Duplicate Rows Preview:</p>
            <div style="max-height:320px; overflow-y:auto; border:1px solid #dee2e6; border-radius:4px;">
                <table class="table table-sm table-bordered table-hover mb-0">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th style="width:60px;">Row #</th>
                            <th>Subject</th>
                            <th>External ID</th>
                            <th style="width:120px;">Existing Ticket</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($duplicates as $dup)
                        <tr>
                            <td>{{ $dup['row_num'] }}</td>
                            <td>{{ Str::limit($dup['subject'], 80) }}</td>
                            <td>{{ $dup['external_id'] ?? '—' }}</td>
                            <td>
                                @if($dup['existing_ticket_id'])
                                    <a href="{{ route('merchant-helpdesk-tickets.show', $dup['existing_ticket_id']) }}"
                                       target="_blank" class="text-decoration-none">
                                        #{{ $dup['existing_ticket_id'] }}
                                        <i class="bx bx-link-external ms-1" style="font-size:.7rem;"></i>
                                    </a>
                                @else
                                    —
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

        <div class="text-end px-3 pb-3 mt-2">
            <a href="{{ route('helpdesk-ticket-import.map', $job->id) }}" class="btn btn-outline-secondary me-2">
                <i class="bx bx-arrow-back me-1"></i> Back
            </a>
            <button type="submit" class="green-btn-inner waves-effect">
                <i class="bx bx-right-arrow-alt me-1"></i> Save &amp; Continue
            </button>
        </div>
    </form>
</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:#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