@extends('layouts.app')
@section('title', 'Switches importieren')
@section('content')
    @if (session('import_errors'))
        <div class="alert alert-error">
            <strong>Übersprungene Zeilen:</strong>
            <ul>@foreach (array_slice(session('import_errors'), 0, 25) as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
    @endif

    <section class="grid grid-2">
        <div class="panel"><div class="panel-head"><h2>CSV-Datei hochladen</h2></div><div class="panel-body">
            <form method="POST" action="{{ route('switches.import') }}" enctype="multipart/form-data">
                @csrf
                <div class="field">
                    <label for="customer_id">Kunde *</label>
                    <select id="customer_id" name="customer_id" required>
                        @foreach ($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label for="file">CSV-Datei (Trennzeichen Semikolon, UTF-8) *</label>
                    <input id="file" name="file" type="file" accept=".csv,text/csv" required>
                    <div class="help">Maximal {{ number_format(config('barox.security.upload_max_kb') / 1024, 0) }} MB.
                        Die Datei wird ausserhalb des Webverzeichnisses verarbeitet und nicht dauerhaft gespeichert.</div>
                </div>
                <label class="check">
                    <input type="checkbox" name="update_existing" value="1">
                    <span>Vorhandene Geräte (gleiche Management-IP) aktualisieren</span>
                </label>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Import starten</button>
                    <a href="{{ route('switches.index') }}" class="btn btn-ghost">Abbrechen</a>
                </div>
            </form>
        </div></div>

        <div class="panel"><div class="panel-head"><h2>Erwartete Spalten</h2></div><div class="panel-body">
            <p class="small">Die erste Zeile muss die Spaltennamen enthalten. Nicht benötigte Spalten dürfen fehlen.</p>
            <p class="mono small">{{ implode('; ', $columns) }}</p>
            <p class="small muted">
                <code>management_protocols</code> und <code>uplink_ports</code> werden mit <code>|</code> getrennt.
                <code>is_production</code> akzeptiert <code>ja</code> / <code>nein</code>.
                Zugangsdaten werden bewusst nicht importiert – diese werden separat verschlüsselt hinterlegt.
            </p>
        </div></div>
    </section>
@endsection