@extends('layouts.admin')
@section('title', 'Map CSV columns')
@section('admin')
<div class="max-w-4xl">
    <h1 class="text-2xl font-bold text-white mb-1">Map CSV columns</h1>
    <p class="text-sm text-gray-400 mb-6">Tell us which column holds each field. We'll show 10 preview rows below.</p>

    <form method="POST" action="{{ route('admin.subscribers.import.commit') }}" class="space-y-4">
        @csrf
        <input type="hidden" name="stored" value="{{ $stored }}">

        <div class="bg-gray-900/60 border border-gray-800 rounded-lg p-5 grid grid-cols-1 md:grid-cols-3 gap-4">
            @php $am = $autoMap ?? ['email' => 0, 'first_name' => null, 'last_name' => null]; @endphp
            <label class="block text-sm">
                <span class="text-gray-400">Email column *</span>
                <select name="col_email" required class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
                    @foreach($headers as $i => $h)<option value="{{ $i }}" @selected((int)$am['email'] === (int)$i)>{{ $i }}: {{ $h }}</option>@endforeach
                </select>
            </label>
            <label class="block text-sm">
                <span class="text-gray-400">First-name column</span>
                <select name="col_first_name" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
                    <option value="">— skip —</option>
                    @foreach($headers as $i => $h)<option value="{{ $i }}" @selected($am['first_name'] !== null && (int)$am['first_name'] === (int)$i)>{{ $i }}: {{ $h }}</option>@endforeach
                </select>
            </label>
            <label class="block text-sm">
                <span class="text-gray-400">Last-name column</span>
                <select name="col_last_name" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
                    <option value="">— skip —</option>
                    @foreach($headers as $i => $h)<option value="{{ $i }}" @selected($am['last_name'] !== null && (int)$am['last_name'] === (int)$i)>{{ $i }}: {{ $h }}</option>@endforeach
                </select>
            </label>

            <label class="block text-sm">
                <span class="text-gray-400">Initial status</span>
                <select name="status" class="mt-1 w-full bg-gray-950 border border-gray-700 rounded-md px-3 py-2 text-white text-sm">
                    <option value="active">Active (skip DOI — only do this if you have proof of consent)</option>
                    <option value="pending">Pending (send confirmation email)</option>
                </select>
            </label>
            <label class="block text-sm md:col-span-2">
                <span class="text-gray-400">First row is header?</span>
                <div class="mt-2 text-gray-300 text-sm">
                    <label class="inline-flex items-center gap-2">
                        <input type="checkbox" name="has_header" value="1" checked> Yes, skip the first row
                    </label>
                </div>
            </label>

            <div class="md:col-span-3">
                <div class="text-sm text-gray-400 mb-2">Apply tags to all imported subscribers</div>
                <div class="flex flex-wrap gap-2">
                    @foreach($tags as $t)
                        <label class="text-xs text-gray-300 inline-flex items-center gap-1 px-2 py-1 rounded border border-gray-800">
                            <input type="checkbox" name="tag_ids[]" value="{{ $t->id }}"> {{ $t->name }}
                        </label>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="bg-gray-900/60 border border-gray-800 rounded-lg overflow-hidden">
            <div class="px-3 py-2 text-xs text-gray-400 bg-gray-950/80">Preview (first 10 rows)</div>
            <div class="overflow-x-auto">
                <table class="text-xs">
                    <thead class="bg-gray-950/40">
                        <tr>@foreach($headers as $i => $h)<th class="p-2 text-left text-gray-400">{{ $i }}: {{ $h }}</th>@endforeach</tr>
                    </thead>
                    <tbody>
                        @foreach($rows as $r)
                            <tr class="border-t border-gray-800">
                                @foreach($headers as $i => $h)<td class="p-2 text-gray-300 whitespace-nowrap">{{ $r[$i] ?? '' }}</td>@endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <div class="flex justify-end gap-2">
            <a href="{{ route('admin.subscribers.import') }}" class="px-3 py-2 text-gray-400 text-sm">Start over</a>
            <button type="submit" class="px-4 py-2 bg-red-700 hover:bg-red-600 text-white rounded-md text-sm">
                <i class="fa-solid fa-check mr-1"></i>Run import
            </button>
        </div>
    </form>
</div>
@endsection