@extends('layouts.dashboard')

@section('title', 'Import customers — map columns')

@php
    // Best-effort guess so the common case needs no clicking: match a target
    // field's own key or label against the file's header text.
    $guessColumn = function (string $field, string $label) use ($headers) {
        foreach ($headers as $index => $header) {
            $normalised = strtolower(preg_replace('/[^a-z0-9]+/i', '', $header));
            $fieldNormalised = strtolower(preg_replace('/[^a-z0-9]+/i', '', $field));
            $labelNormalised = strtolower(preg_replace('/[^a-z0-9]+/i', '', explode(' (', $label)[0]));

            if ($normalised === $fieldNormalised || $normalised === $labelNormalised) {
                return $index;
            }
        }

        return null;
    };
@endphp

@section('content')
    <div class="flex items-center justify-between mb-6 flex-wrap gap-2">
        <h1 class="font-display text-3xl">Map columns</h1>
        <a href="{{ route('dashboard.customer-imports.create') }}" class="underline text-sm">&larr; Start over</a>
    </div>

    <p class="text-sm text-muted mb-4">{{ $rowCount }} row(s) found. Match each field below to a column in the file — leave a field unmatched to skip it.</p>

    @if (count($preview))
        <div class="card p-4 overflow-x-auto mb-6">
            <h2 class="label mb-2">Preview (first {{ count($preview) }} rows)</h2>
            <table class="dashboard-table w-full text-xs">
                <thead>
                    <tr>
                        @foreach ($headers as $header)
                            <th>{{ $header }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @foreach ($preview as $row)
                        <tr>
                            @foreach ($headers as $index => $header)
                                <td>{{ $row[$index] ?? '' }}</td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

    <form method="POST" action="{{ route('dashboard.customer-imports.preview', $token) }}" class="card p-6 space-y-3 max-w-2xl">
        @csrf

        @foreach ($targetFields as $field => $label)
            <div class="grid grid-cols-2 gap-4 items-center">
                <label for="mapping_{{ $field }}" class="text-sm">{{ $label }}</label>
                <select id="mapping_{{ $field }}" name="mapping[{{ $field }}]" class="select">
                    <option value="">— Not in file —</option>
                    @foreach ($headers as $index => $header)
                        <option value="{{ $index }}" @selected(old("mapping.$field", $guessColumn($field, $label)) == $index)>{{ $header }}</option>
                    @endforeach
                </select>
            </div>
        @endforeach

        <button type="submit" class="btn btn-primary">Check import</button>
    </form>
@endsection