@extends('layouts.app')
@section('title', 'Map columns')

@section('content')
<form method="POST" action="{{ route('imports.confirm', $import) }}" class="mx-auto max-w-4xl space-y-6">
    @csrf

    <ol class="flex items-center gap-2 text-xs font-medium text-slate-500">
        <li class="flex items-center gap-1.5"><span class="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-500 text-white">✓</span> Upload</li>
        <li aria-hidden="true">→</li>
        <li class="flex items-center gap-1.5"><span class="flex h-5 w-5 items-center justify-center rounded-full bg-brand-600 text-white">2</span> Map columns</li>
        <li aria-hidden="true">→</li>
        <li class="flex items-center gap-1.5"><span class="flex h-5 w-5 items-center justify-center rounded-full bg-slate-300 text-white dark:bg-slate-700">3</span> Process</li>
    </ol>

    <div class="card-pad">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">{{ $import->original_filename }}</h2>
        <p class="mt-1 text-sm text-slate-500">Match each spreadsheet column to a contact field. At minimum, map the <strong>Email</strong> column.</p>
        <x-field-error field="mapping"/>

        <div class="mt-4 overflow-x-auto">
            <table class="table">
                <thead>
                <tr>
                    <th>Spreadsheet column</th>
                    <th>Sample values</th>
                    <th class="w-52">Maps to</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                @foreach ($headers as $index => $header)
                    <tr>
                        <td class="font-medium">{{ $header ?: 'Column '.($index + 1) }}</td>
                        <td class="max-w-md truncate text-slate-500">
                            {{ collect($rows)->pluck($index)->filter()->take(3)->implode(' · ') }}
                        </td>
                        <td>
                            <select name="mapping[{{ $index }}]" class="input">
                                <option value="">— Skip column —</option>
                                @foreach ($fields as $key => $label)
                                    <option value="{{ $key }}" @selected(old('mapping.'.$index, $suggested[$index] ?? null) === $key)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="card-pad">
        <span class="label">If an email already exists in the CRM</span>
        <div class="mt-1 flex flex-col gap-2 text-sm">
            <label class="flex items-center gap-2">
                <input type="radio" name="duplicate_handling" value="skip" class="text-brand-600" @checked(old('duplicate_handling', 'skip') === 'skip')>
                Skip it (keep the existing contact unchanged, still add to the selected list)
            </label>
            <label class="flex items-center gap-2">
                <input type="radio" name="duplicate_handling" value="update" class="text-brand-600" @checked(old('duplicate_handling') === 'update')>
                Update empty and changed fields with values from the file
            </label>
        </div>
        <p class="help mt-2">Suppressed, unsubscribed, bounced or complained contacts are never modified or reactivated, regardless of this setting.</p>
    </div>

    <div class="flex justify-between">
        <x-confirm-form :action="route('imports.cancel', $import)" buttonClass="btn-secondary" message="Cancel this import and delete the uploaded file?">
            Cancel import
        </x-confirm-form>
        <button class="btn-primary">Start import</button>
    </div>
</form>
@endsection