@extends('layouts.backend')

@section('content')
<form action="{{route('bo.encarts.update', $encart->id)}}" method="POST" enctype="multipart/form-data">
    @method('PUT')
    @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.home')}}" class="h2 text-decoration-none">
            < </a> {{ __('Présentation') }} <small class="text-muted">{{ __('Edition') }}</small></h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <button type="submit" class="btn btn-sm btn-primary">{{ __('Enregistrer') }}</a>
        </div>
    </div>
    <div class="form-group">
        <label for="title">{{ __('Titre') }} *</label>
        <input type="text" id="title" name="title" class="form-control" placeholder="{{ __('Titre') }} *" value="{{ old('title', $encart->title ?? '') }}" required>
        @include('back.modules.input-error', ['inputName'=>'title'])
    </div>
    <?php if(!$encart->page->equals(Page::marqueBloc3()) && !$encart->page->equals(Page::marqueBloc4())) { ?>
    <div class="form-group">
        <label for="subtitle">{{ __('Sous-titre') }} *</label>
        <input type="text" id="subtitle" name="subtitle" class="form-control" placeholder="{{ __('Sous-titre') }} *" value="{{ old('subtitle', $encart->subtitle ?? '') }}" required>
        @include('back.modules.input-error', ['inputName'=>'subtitle'])
    </div>
    <?php } ?>
    <div class="form-group">
        <label for="text">{{ __('Texte') }}</label>
        <textarea class="form-control" id="text" name="text" placeholder="{{ __('Texte') }}" style="height: 300px; width: 50%;">{{ old('text', $encart->text) }}</textarea>
        @include('back.modules.input-error', ['inputName'=>'text'])
    </div>
    <?php if(!$encart->page->equals(Page::marqueHeader())) { ?>
    <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">
        @if (!empty($encart->picture))
        <br />
        <br />
        <img src="{{$encart->picture}}" alt="{{$encart->title}}" style="max-height: 100px;">
        @endif
        @include('back.modules.input-error', ['inputName'=>'picture'])
    </div>
    <div class="form-group">
        <label for="name">{{ __('Text alternatif de l\'image') }} *</label>
        <input type="text" id="alt_text_picture" name="alt_text_picture" class="form-control" placeholder="{{ __('Texte alternatif de l\'image') }} *" value="{{ old('alt_text_picture', $encart->alt_text_picture ?? '') }}" required>
        @include('back.modules.input-error', ['inputName'=>'alt_text_picture'])
    </div>
    <?php } ?>
</form>
@endsection

@push('scripts')
<script type="text/javascript">
    var editorConfig = {
        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']
        }
    };
    ClassicEditor
        .create(document.querySelector('#text'), editorConfig)
        .catch(error => {
            console.error(error);
        });
</script>
@endpush