@extends('layouts.app')
@section('title', 'New import')

@section('content')
<form method="POST" action="{{ route('imports.store') }}" enctype="multipart/form-data"
      class="mx-auto max-w-2xl space-y-6" x-data="{ fileName: '' }">
    @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-brand-600 text-white">1</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-slate-300 text-white dark:bg-slate-700">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 space-y-5">
        <div>
            <span class="label">Contact file (CSV, XLSX or XLS — max {{ $maxFileMb }} MB)</span>
            <label class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-slate-300 px-6 py-10 text-center transition hover:border-brand-400 dark:border-slate-600"
                   for="file">
                <svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
                <span class="text-sm text-slate-600 dark:text-slate-300" x-text="fileName || 'Click to choose a file'"></span>
                <span class="text-xs text-slate-400">First row must contain column headers</span>
            </label>
            <input id="file" name="file" type="file" required accept=".csv,.xlsx,.xls" class="sr-only"
                   @change="fileName = $event.target.files[0]?.name ?? ''">
            <x-field-error field="file"/>
        </div>

        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label class="label" for="contact_list_id">Import into existing list</label>
                <select id="contact_list_id" name="contact_list_id" class="input">
                    <option value="">— No list —</option>
                    @foreach ($lists as $list)
                        <option value="{{ $list->id }}" @selected(request('list') == $list->id)>{{ $list->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="label" for="new_list_name">…or create a new list</label>
                <input id="new_list_name" name="new_list_name" class="input" placeholder="e.g. LeadFinder July 2026">
            </div>
        </div>

        <div class="rounded-lg bg-slate-50 p-4 text-xs leading-relaxed text-slate-500 dark:bg-slate-800/60 dark:text-slate-400">
            The importer automatically: trims spaces · lowercases emails · rejects malformed addresses ·
            skips duplicates &amp; blank rows · protects against spreadsheet formula injection ·
            checks the unsubscribe and suppression lists · never reactivates suppressed contacts.
        </div>
    </div>

    <div class="flex justify-end gap-2">
        <a href="{{ route('imports.index') }}" class="btn-secondary">Cancel</a>
        <button class="btn-primary">Upload &amp; continue</button>
    </div>
</form>
@endsection