@extends('layouts.app')

@section('content')
<div class="row py-5">
    <div class="col-lg-7 mx-auto">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">
                    Importer des URL
                </h5>

                <div id="js-uploadMessage" class="d-none alert alert-success alert-dismissible fade show" role="alert">
                    {!! session('success') !!}
                </div>

                @include('components.alert_error')
                <form class="form-horizontal" method="POST" action="{{ route('short_url.import')  }}">
                    {{ csrf_field() }}


                    <div class="mb-3">
                        <label for="prefix" class="col-form-label">Préfixe</label>
                        <input id="prefix" type="text" class="form-control"  name="prefix" placeholder="Préfixe de l'url courte" maxlength="16">
                        <small class="form-text text-muted">
                        Préfixe de l'url courte (16 cararactères max)
                        </small>
                        @if ($errors->has('prefix'))
                        <div class="invalid-feedback">
                            {{ $errors->first('prefix') }}
                        </div>
                        @endif
                    </div>

                    <div class="form-group mb-3">
                        <label for="minLength">Longueur de l'URL</label>
                        <input type="number" name="length" value='6' class="form-control" id="minLength" aria-describedby="shortUrlMinLength" min="1" placeholder="Longueur url courte">
                    </div>

                    <div class="mb-3">
                        <label for="url">Importer un fichier</label>
                        <input id="url_file" type="file" name="url_file">
                    </div>

                    <div class="text-center">
                        <button type="submit" class="btn btn-primary">Créer les URL courtes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
@vite('resources/js/views/short_url_import.js')
@endpush