@extends('layouts.app')

@section('title', 'Import de Contacts')

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h4>Importer des Contacts</h4>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <h5>Instructions</h5>
                    <p>Vous pouvez importer des contacts depuis un fichier Excel (.xlsx, .xls) ou CSV.</p>
                    <p>Le fichier doit contenir les colonnes suivantes :</p>
                    <ul>
                        <li><strong>Colonne A</strong> : Nom</li>
                        <li><strong>Colonne B</strong> : Prénom</li>
                        <li><strong>Colonne C</strong> : Email</li>
                        <li><strong>Colonne D</strong> : Téléphone</li>
                        <li><strong>Colonne E</strong> : Fonction</li>
                        <li><strong>Colonne F</strong> : Service</li>
                    </ul>
                </div>

                <form action="{{ route('import') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="mb-3">
                        <label for="file" class="form-label">Fichier à importer</label>
                        <input type="file" class="form-control @error('file') is-invalid @enderror" id="file" name="file" accept=".xlsx,.xls,.csv" required>
                        @error('file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="alert alert-warning">
                        <strong>Attention :</strong> Les fichiers doivent faire moins de 2 Mo.
                    </div>

                    <button type="submit" class="btn btn-primary">Importer</button>
                    <a href="{{ route('contacts.index') }}" class="btn btn-secondary">Annuler</a>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection