@extends('layouts.app')
@section('title', 'Bulk Import Airports | PairingPal')
@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-3">
    <h1 class="h4 mb-0">Bulk Import Airports</h1>
    <a class="btn btn-outline-secondary" href="{{ route('airports.index') }}">Back to Airports</a>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-body">
        <p class="text-muted mb-3">
            Upload a CSV file with columns for
            <code>Abbr</code>, <code>Airport Full Name</code>, <code>Location</code>, and <code>Timezone</code>.
            Existing airports are updated by abbreviation and new airports are created automatically.
            Delimiters supported: comma (<code>,</code>), semicolon (<code>;</code>), tab, and pipe (<code>|</code>).
        </p>

        <form action="{{ route('airports.import') }}" method="POST" enctype="multipart/form-data" class="d-flex flex-column gap-3">
            @csrf

            <div>
                <label for="csv_file" class="form-label">CSV file</label>
                <input type="file" id="csv_file" name="csv_file" accept=".csv,text/csv" class="form-control @error('csv_file') is-invalid @enderror" required>
                @error('csv_file')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <button type="submit" class="btn btn-primary">Start Import</button>
            </div>
        </form>
    </div>
</div>
@endsection