@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 — Map Columns</h3>
        <div class="heading-btn in-re">
            <a href="{{ route('helpdesk-ticket-import.index') }}" class="green-btn-inner waves-effect">
                <i class="bx bx-arrow-back"></i> Start Over
            </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 active">
                <div class="step-circle">2</div>
                <div class="step-label">Map Columns</div>
            </div>
            <div class="step-line"></div>
            <div class="import-step">
                <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">
        <p class="text-muted small mb-0">
            File: <strong>{{ $job->original_filename }}</strong>
            &nbsp;|&nbsp; {{ count($job->raw_headers ?? []) }} columns detected.
            &nbsp;Match each ticket field to the corresponding column from your file.
        </p>
    </div>

    <form action="{{ route('helpdesk-ticket-import.map.store', $job->id) }}" method="POST" id="mapForm">
        @csrf
        <div class="table-responsive px-3">
            <table class="table table-bordered table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th style="width:22%">Ticket Field</th>
                        <th style="width:12%">Required</th>
                        <th style="width:35%">Source Column</th>
                        <th>Sample Value</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($targetFields as $fieldKey => $fieldMeta)
                    @php
                        $autoMatch  = $autoMapping[$fieldKey] ?? null;
                        $savedMatch = $job->column_mapping[$fieldKey] ?? $autoMatch;
                    @endphp
                    <tr>
                        <td>
                            <strong>{{ $fieldMeta['label'] }}</strong>
                            @if($autoMatch)
                                <span class="badge bg-success ms-1" title="Auto-detected">Auto</span>
                            @endif
                        </td>
                        <td>
                            @if($fieldMeta['required'])
                                <span class="badge bg-danger">Required</span>
                            @else
                                <span class="badge bg-secondary">Optional</span>
                            @endif
                        </td>
                        <td>
                            <select name="column_mapping[{{ $fieldKey }}]"
                                    class="form-select form-select-sm col-map-select"
                                    data-field="{{ $fieldKey }}"
                                    {{ $fieldMeta['required'] ? 'required' : '' }}>
                                <option value="">— Skip this field —</option>
                                @foreach($job->raw_headers ?? [] as $header)
                                    <option value="{{ $header }}"
                                        {{ $savedMatch === $header ? 'selected' : '' }}>
                                        {{ $header }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <span class="sample-preview text-muted small" id="sample_{{ $fieldKey }}">
                                @if($savedMatch && isset(($job->sample_rows ?? [[]])[0][$savedMatch]))
                                    {{ ($job->sample_rows[0])[$savedMatch] }}
                                @else
                                    —
                                @endif
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Validation error --}}
        <div class="px-3 d-none" id="mapErrorWrap">
            <div class="alert alert-danger" role="alert" id="mapErrorMsg"></div>
        </div>

        <div class="text-end px-3 pb-3 mt-2">
            <a href="{{ route('helpdesk-ticket-import.index') }}" class="btn btn-outline-secondary me-2">
                <i class="bx bx-x me-1"></i> Cancel
            </a>
            <button type="submit" class="green-btn-inner waves-effect" id="mapSubmitBtn">
                <i class="bx bx-right-arrow-alt me-1"></i> Save &amp; Continue
            </button>
        </div>
    </form>
</div>

@endsection

@push('page_script')
<script>
    window.SampleRows = @json($job->sample_rows ?? []);
</script>
<script>
(function(){
    'use strict';

    var sampleRows = window.SampleRows || [];

    // Update sample preview on select change
    document.querySelectorAll('.col-map-select').forEach(function(sel){
        sel.addEventListener('change', function(){
            var fieldKey  = this.getAttribute('data-field');
            var colName   = this.value;
            var preview   = document.getElementById('sample_' + fieldKey);
            if (!preview) return;
            if (!colName || sampleRows.length === 0) {
                preview.textContent = '—';
                return;
            }
            var val = sampleRows[0][colName];
            preview.textContent = (val !== undefined && val !== null && val !== '') ? val : '—';
        });
    });

    // Client-side validation: Subject must be mapped
    document.getElementById('mapForm').addEventListener('submit', function(e){
        var subjectSel = document.querySelector('select[name="column_mapping[subject]"]');
        if (subjectSel && !subjectSel.value) {
            e.preventDefault();
            var errWrap = document.getElementById('mapErrorWrap');
            var errMsg  = document.getElementById('mapErrorMsg');
            errMsg.textContent = 'The "Subject" field is required — please select the column that contains ticket subjects.';
            errWrap.classList.remove('d-none');
            subjectSel.closest('tr').querySelector('td:nth-child(3)').scrollIntoView({behavior:'smooth', block:'center'});
        }
    });
})();
</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