@extends('layouts.app')
@section('additionnalCSS')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/multiplechosen/component-chosen.min.css') }}" >
@stop
@section('content')
    <div class="container mb-5">
        <div class="row justify-content-md-center mt-3">
            <div class="col col-lg-3">
            </div>
            <div class="col-lg-6">
                <form method="POST" action="{{ route('equipment.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="name">Nom</label>
                        <input name="name" type="text" class="form-control @error('name') is-invalid @enderror" id="name" placeholder="Entrez le nom de l'objet" required>
                        @error('name')
                        <div class="alert alert-danger mt-2">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea name="description" class="form-control @error('description') is-invalid @enderror" id="description" placeholder="Description de l'objet"></textarea>
                        @error('description')
                        <div class="alert alert-danger mt-2">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="seriallNumber">No de série</label>
                        <input name="seriallNumber" type="text" class="form-control @error('seriallNumber') is-invalid @enderror" id="seriallNumber" placeholder="numéro de série de l'objet">
                        @error('seriallNumber')
                        <div class="alert alert-danger mt-2">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <div class="row">
                            <div class="col-lg-3">
                                <label for="internal">interne</label>
                            </div>
                            <div class="col-lg-1">
                                <input name="internal" type="checkbox" class="@error('internal') is-invalid @enderror" id="internal" value="true">
                            </div>
                            <div class="col-lg-8">
                            </div>
                        </div>
                        @error('internal')
                        <div class="alert alert-danger mt-2">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="categories">Catégorie</label>
                        <select name='categories[]' id="multiple" class="form-control form-control-chosen" data-placeholder="Please select..." multiple>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="image">Image</label>
                        <input type="file" name="image" class="form-control" id="image" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Envoyer</button>
                </form>
            </div>
            <div class="col col-lg-3">
            </div>
        </div>
    </div>

@stop
@section('additionnalScript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.6/chosen.jquery.min.js"></script>
    <script>
        $('.form-control-chosen').chosen({
            // Chosen options here
        });
    </script>
@stop