ldc-loue/resources/views/back/ranges/form.blade.php

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Informations générales') }}</legend>
            <div class="row mb-3">
                <div class="col-12 col-md-6 form-group">
                    <label for="rangeModelTitle" class="col-form-label"><b>{{ __('Titre') }}</b></label>
                    <div class="word-counter" data-json='@json(['id' => 'rangeModelTitle'])'></div>
                    <input name="title" type="text" value="{{ old('title', $rangeModel->title ?? '') }}"
                        class="form-control" id="rangeModelTitle" aria-describedby="rangeModelTitleHelp"
                        placeholder="{{ __('Un titre beau et explicite') }}" required>
                    @include('back.modules.input-error', [
                        'inputName' => 'title',
                        'helperId' => 'rangeModelTitleHelp',
                        'helper' => __('Doit décrire précisément la gamme'),
                    ])
                    @include('back.modules.input-error', [
                        'inputName' => 'slug',
                    ])
                </div>
                <div class="col-12 col-md-6 form-group">
                    <label for="rangeCategory" class="col-form-label"><b>{{ __('Catégorie de la gamme') }}</b></label>
                    <select id="rangeCategory" class="form-select" name="category" aria-describedby="rangeCategoryHelp"
                        required>
                        <option value="" @if (is_null(old('category', $rangeModel->category ?? null))) selected @endif disabled>
                            {{ __('Séléctionnez une catégorie') }}</option>
                        @foreach (App\Enums\Ranges\RangeCategoryEnum::toArray() as $category)
                            <option value="{{ $category->value }}" @if (old('type', optional($rangeModel->category ?? null)->value) == $category->value) selected @endif>
                                {{ $category->label }}</option>
                        @endforeach
                    </select>
                    @include('back.modules.input-error', [
                        'inputName' => 'category',
                        'helperId' => 'rangeCategoryHelp',
                        'helper' => __('Le type de gamme'),
                    ])
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Seo') }}</legend>
            <div class="row mb-3">
                <div class="col-12 col-md-6 form-group">
                    <label for="rangeModelSeoTitle" class="col-form-label"><b>{{ __('Titre seo') }}</b></label>
                    <div class="word-counter" data-json='@json(['id' => 'rangeModelSeoTitle'])'></div>
                    <input name="seo_title" type="text" value="{{ old('seo_title', $rangeModel->seo_title ?? '') }}"
                        class="form-control" id="rangeModelSeoTitle" aria-describedby="rangeModelSeoTitleHelp"
                        placeholder="{{ __('Un titre en 70 caractères maximum') }}" required>
                    @include('back.modules.input-error', [
                        'inputName' => 'seo_title',
                        'helperId' => 'rangeModelSeoTitleHelp',
                        'helper' => __(
                            'Doit décrire précisément la gamme, recommandation pour un positionnement optimal dans les moteurs de recherche : entre 53 et 60 caractères, balise <title> '
                        ),
                    ])
                </div>
                <div class="col-12 col-md-6 form-group">
                    <label for="rangeModelSeoDescription"
                        class="col-form-label"><b>{{ __('Description seo') }}</b></label>
                    @php
                        $data = [
                            'id' => 'rangeModelSeoDescription',
                            'class' => 'form-control',
                            'name' => 'seo_description',
                            'placeholder' => __('Une description de la gamme pour les moteurs de recherche'),
                            'ariaDescribedby' => 'rangeModelSeoDescriptionHelp',
                            'required' => true,
                            'value' => old('seo_description', $rangeModel->seo_description ?? ''),
                        ];
                    @endphp
                    <div id="input-text-auto" data-json='@json($data)'></div>
                    @include('back.modules.input-error', [
                        'inputName' => 'seo_description',
                        'helperId' => 'rangeModelSeoDescriptionHelp',
                        'helper' => __(
                            'Doit décrire précisément la gamme, requiert entre 50 et 160 caractères, balise <meta> description'
                        ),
                    ])
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Publication') }}</legend>
            <div class="row mb-3">
                <div class="col">
                    <div class="form-group">
                        <label for="rangePublishedAt"><b>{{ __('Date de publication (Europe/Paris)') }}</b></label>
                        <input id="rangePublishedAt" name="publish_at" class="form-control publishTime"
                            type="datetime-local" data-form-type="date" aria-describedby="rangePublishAtHelp"
                            value="{{ old('publish_at', (isset($rangeModel) and $rangeModel->publish_at) ? $rangeModel->publish_at->format('Y-m-d\TH:i') : '') }}">
                        @include('back.modules.input-error', [
                            'inputName' => 'publish_at',
                            'helperId' => 'rangePublishAtHelp',
                            'helper' =>
                                (isset($rangeModel) and $rangeModel->publish_at)
                                    ? __('Laisser vide pour un affichage immédiat de la gamme.')
                                    : __('Vider pour un affichage immédiat de la gamme'),
                        ])
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label
                            for="rangeUnPublishedAt"><b>{{ __('Date de fin de publication (Europe/Paris)') }}</b></label>
                        <input id="rangeUnPublishedAt" name="unpublish_at" class="form-control publishTime"
                            type="datetime-local" data-form-type="date" aria-describedby="rangeUnPublishAtHelp"
                            value="{{ old('unpublish_at', (isset($rangeModel) and $rangeModel->unpublish_at) ? $rangeModel->unpublish_at->format('Y-m-d\TH:i') : '') }}">
                        @include('back.modules.input-error', [
                            'inputName' => 'unpublish_at',
                            'helperId' => 'rangeUnPublishAtHelp',
                            'helper' =>
                                (isset($rangeModel) and $rangeModel->unpublish_at)
                                    ? __('Laisser vide pour un affichage permanent de la gamme.')
                                    : __('Vider pour un affichage permanent de la gamme'),
                        ])
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Illustration') }}</legend>
            <div class="row mb-3">
                <div class="col-12 col-md-6 form-group">
                    <label for="rangePictureAlt"
                        class="col-form-label"><b>{{ __('Texte alternatif de l\'image') }}</b></label>
                    <div class="word-counter" data-json='@json(['id' => 'rangePictureAlt'])'></div>
                    <input name="picture_alt" type="text"
                        value="{{ old('picture_alt', $rangeModel->picture_alt ?? '') }}" class="form-control"
                        id="rangePictureAlt" aria-describedby="rangePictureAltHelp"
                        placeholder="{{ __('Une image de petits chatons') }}" required>
                    @include('back.modules.input-error', [
                        'inputName' => 'picture_alt',
                        'helperId' => 'rangePictureAltHelp',
                        'helper' => __(
                            'Doit décrire votre image pour les moteurs de recherches et les non voyants (5 à 6 mots)'
                        ),
                    ])
                </div>
                <div class="col-12 col-md-6 form-group">
                    <label for="rangePictureTitle" class="col-form-label"><b>{{ __('Titre de l\'image') }}</b></label>
                    <div class="word-counter" data-json='@json(['id' => 'rangePictureTitle'])'></div>
                    <input name="picture_title" type="text"
                        value="{{ old('picture_title', $rangeModel->picture_title ?? '') }}" class="form-control"
                        id="rangePictureTitle" aria-describedby="rangePictureTitleHelp"
                        placeholder="{{ __('Une description de la gamme pour les moteurs de recherche') }}" required>
                    @include('back.modules.input-error', [
                        'inputName' => 'picture_title',
                        'helperId' => 'rangePictureTitleHelp',
                        'helper' => __(
                            'Utile pour les utilisateurs, s\'affiche en passant la souris sur l\'image.'
                        ),
                    ])
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    @php
                        $data = [
                            'id' => 'rangeModelPicture',
                            'name' => 'picture',
                            'helper' => __('L\'image qui va servir de vignette à la gamme, doit être de 700px (hauteur) par 700px (largeur)'),
                            'width' => 700,
                            'height' => 700,
                            'value' => $rangeModel->picture ?? '',
                        ];
                    @endphp
                    @include('back.modules.input-error', ['inputName' => 'picture'])
                    <div class="image-input" data-json='@json($data)'></div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Vignette') }}</legend>
            <div class="row mb-3">
                <div class="col-12 col-md-6 form-group">
                    <label for="rangePictureThumbAlt"
                        class="col-form-label"><b>{{ __('Texte alternatif de l\'image') }}</b></label>
                    <div class="word-counter" data-json='@json(['id' => 'rangePictureThumbAlt'])'></div>
                    <input name="picture_thumb_alt" type="text"
                        value="{{ old('picture_thumb_alt', $rangeModel->picture_thumb_alt ?? '') }}"
                        class="form-control" id="rangePictureThumbAlt" aria-describedby="rangePictureThumbAltHelp"
                        placeholder="{{ __('Une image de petits chatons') }}" required>
                    @include('back.modules.input-error', [
                        'inputName' => 'picture_thumb_alt',
                        'helperId' => 'rangePictureThumbAltHelp',
                        'helper' => __(
                            'Doit décrire votre image pour les moteurs de recherches et les non voyants (5 à 6 mots)'
                        ),
                    ])
                </div>
                <div class="col-12 col-md-6 form-group">
                    <label for="rangePictureThumbTitle"
                        class="col-form-label"><b>{{ __('Titre de l\'image') }}</b></label>
                    <div class="word-counter" data-json='@json(['id' => 'rangePictureThumbTitle'])'></div>
                    <input name="picture_thumb_title" type="text"
                        value="{{ old('picture_thumb_title', $rangeModel->picture_thumb_title ?? '') }}"
                        class="form-control" id="rangePictureThumbTitle"
                        aria-describedby="rangePictureThumbTitleHelp"
                        placeholder="{{ __('Une description de la gamme pour les moteurs de recherche') }}" required>
                    @include('back.modules.input-error', [
                        'inputName' => 'picture_thumb_title',
                        'helperId' => 'rangePictureThumbTitleHelp',
                        'helper' => __(
                            'Utile pour les utilisateurs, s\'affiche en passant la souris sur l\'image.'
                        ),
                    ])
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    @php
                        $data = [
                            'id' => 'rangeModelThumbPicture',
                            'name' => 'picture_thumb',
                            'helper' => __('L\'image qui va servir de vignette à la gamme, doit être de 300px (hauteur) par 300px (largeur)'),
                            'width' => 300,
                            'height' => 300,
                            'value' => $rangeModel->picture_thumb ?? '',
                        ];
                    @endphp
                    @include('back.modules.input-error', ['inputName' => 'picture_thumb'])
                    <div class="image-input" data-json='@json($data)'></div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Description de la gamme') }}</legend>
            <div class="row mb-3">
                <div class="col-12 form-group">
                    @include('back.modules.input-error', [
                        'inputName' => 'description',
                        'helperId' => 'rangeModelDescriptionHelp',
                        'helper' => __('Relisez bien votre description avant de la publier.'),
                    ])
                    @php
                        $data = [
                            'name' => 'description',
                            'csrf' => csrf_token(),
                            'text' => old('description', $rangeModel->description ?? ''),
                        ];
                    @endphp
                    <div class="ck-editor-bo" data-json='@json($data)'></div>
                </div>
            </div>
        </fieldset>
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Argumentaire sur les labels') }}</legend>
            <div class="row mb-3">
                <div class="col-12 form-group">
                    @include('back.modules.input-error', [
                        'inputName' => 'argumentation',
                        'helperId' => 'rangeModelArgumentationHelp',
                        'helper' => __('Relisez bien votre argumentation avant de la publier.'),
                    ])
                    @php
                        $data = [
                            'name' => 'argumentation',
                            'csrf' => csrf_token(),
                            'text' => old('argumentation', $rangeModel->argumentation ?? ''),
                        ];
                    @endphp
                    <div class="ck-editor-bo" data-json='@json($data)'></div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Liens') }}</legend>
            <div class="row mb-3">
                <div class="col-12 form-group">
                    @include('back.modules.input-error', [
                        'inputName' => 'link1',
                        'helperId' => 'rangeModelLink1Help',
                        'helper' => __('Lien à afficher sur la gamme'),
                    ])
                    @php
                        $data = [
                            'name' => 'link1',
                            'placeholder' => __('lien numéro 1'),
                            'value' => old('link1', $rangeModel->link1 ?? null),
                        ];
                    @endphp
                    <div class="model-link" data-json='@json($data)'></div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 form-group">
                    @include('back.modules.input-error', [
                        'inputName' => 'link2',
                        'helperId' => 'rangeModelLink1Help',
                        'helper' => __('Lien à afficher sur la gamme'),
                    ])
                    @php
                        $data = [
                            'name' => 'link2',
                            'placeholder' => __('lien numéro 2'),
                            'value' => old('link2', $rangeModel->link2 ?? null),
                        ];
                    @endphp
                    <div class="model-link" data-json='@json($data)'></div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="row mb-3">
    <div class="col-12 col-md-6">
        <div class="form-check">
            <input name="status" class="form-check-input mt-2" type="checkbox" id="rangeStatus"
                aria-describedby="rangeStatusHelp" value="1" @if (old('status', $rangeModel->status ?? '')) checked @endif>
            <label class="form-check-label user-select-none pt-1"
                for="rangeStatus"><b>{{ __('Publié') }}</b></label><br>
            @include('back.modules.input-error', [
                'inputName' => 'status',
                'helperId' => 'rangeStatusHelp',
                'helper' => __('La gamme est visible ou non'),
            ])
        </div>
    </div>
</div>


@push('scripts')
    <script nonce="{{ $nonce }}">
        document.addEventListener("DOMContentLoaded", () => {

            // Publish times
            let publishTimes = document.getElementsByClassName('publishTime');
            for (let input of publishTimes) {
                let parent = input.parentNode,
                    dates = {
                        start: 0,
                        end: 0
                    };
                input.originalValue = (new Date(input.value)).valueOf();
                if (input.originalValue === NaN) {
                    input.originalValue = 0
                }
                if (input.id === 'rangePublishedAt') {
                    dates.start = input.originalValue;
                } else {
                    dates.end = input.originalValue;
                }
                let getEuropeParisTime = () => {
                    return new Date((new Date()).getTime() + (60000 * ((new Date()).getTimezoneOffset() + 60)));
                };
                let setDateHelpers = (input, parent) => {
                    let small = parent.children.rangePublishAtHelp ? parent.children.rangePublishAtHelp : parent
                        .children.rangeUnPublishAtHelp;
                    let isPlanned = false;
                    if (input.id === 'rangePublishedAt') {
                        isPlanned = dates.start > dates.end && dates.end != 0;
                    } else {
                        isPlanned = dates.start < dates.end && dates.start != 0;
                    }
                    if (isPlanned || getEuropeParisTime().valueOf() < (new Date(input.value)).valueOf()) {
                        let date = new Date(input.value);
                        // small.textContent = "{{ __('Planifié pour le ') }}" + date.toLocaleString();
                        small.textContent = input.id === 'rangePublishedAt' ?
                            "{{ __('Vider pour un affichage immédiat de la gamme.') }}" :
                            "{{ __('Vider pour un affichage permanent de la gamme.') }}";
                    } else {
                        // small.textContent = input.id === 'rangePublishedAt' ?
                        //     "{{ __('Uniquement pour planifier la publication') }}" :
                        //     "{{ __('Uniquement pour planifier la fin de la publication') }}";
                        small.textContent = input.id === 'rangePublishedAt' ?
                            "{{ __('Laisser vide pour un affichage immédiat de la gamme.') }}" :
                            "{{ __('Laisser vide pour un affichage permanent de la gamme.') }}";
                    }
                };
                setDateHelpers(input, parent);
                input.addEventListener('change', (event) => {
                    let parent = event.target.parentNode,
                        input = event.target,
                        value;
                    value = (new Date(input.value)).valueOf();
                    if (input.originalValue === NaN) {
                        value = 0
                    }
                    if (input.id === 'rangePublishedAt') {
                        dates.start = value;
                    } else {
                        dates.end = value;
                    }
                    setDateHelpers(input, parent);
                });
            }
        });
    </script>
@endpush