@extends('layouts.bo-layout')

@section('content')
    <form action="{{route('bo.ranges.store')}}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
            <h1 class="h2"><a href="{{route('bo.ranges.index')}}" class="h2 text-decoration-none"><</a> Gammes de produits <small class="text-muted">Création</small></h1>
            <div class="btn-toolbar mb-2 mb-md-0">
                <button type="submit" class="btn btn-sm btn-primary">Enregistrer</a>
            </div>
        </div>
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="form-group">
            <label for="name">Nom de la gamme</label>
            <input type="text" id="name" name="name" class="form-control" placeholder="Nom de la gamme" value="{{ old('name') }}" required>
        </div>
        <div class="form-group">
            <label>Description</label>
            <textarea class="form-control" id="description" name="description" placeholder="Description *"></textarea>
        </div>
        <div class="form-group">
            <label for="picture">Image <small class="text-muted">- JPEG/PNG, 2Mo max.</small></label></br>
            <input type="file" id="picture" name="picture" accept="image/png, image/jpeg">
        </div>
        <div class="form-group">
            <label>
                <input type="checkbox" name="status">
                Publié ?
            </label>
        </div>
    </form>
@endsection

@section('scripts')
    <script type="text/javascript">
        ClassicEditor
            .create( document.querySelector( '#value' ), {
                removePlugins: ["Image", "ImageCaption", "ImageStyle", "ImageToolbar", "ImageUpload"],
                toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'blockQuote', 'insertTable', '|', 'undo', 'redo' ],
                heading: {
                    options: [
                        { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                        { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                        { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                        { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                        { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' }
                    ]
                },
                table: {
                    contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
                }
            } )
            .catch( error => {
                console.error( error );
            } );
    </script>
@endsection