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

@if(!isset($slider))
<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <div class="col-12 col-md-6 form-group">
                <label for="sliderType" class="col-form-label"><b>{{ __('Type de slider') }}</b></label>
                <select id="sliderType" class="form-select" name="type" aria-describedby="sliderTypeHelp" required>
                    <option value="" @if(is_null(old('type', $slider->type ?? null))) selected @endif disabled>{{ __('Séléctionnez un type') }}</option>
                    @foreach(App\Enums\Sliders\SliderType::toArray() as $type)
                    <option value="{{ $type->value }}" @if(old('type', optional($slider->type ?? null)->value) == $type->value) selected @endif>{{ $type->label }}</option>
                    @endforeach
                </select>
                @include('back.modules.input-error', [
                    'inputName' => 'type', 'helperId' => 'sliderTypeHelp' , 'helper' => __('Le type de slider à créer')
                ])
            </div>
        </fieldset>
    </div>
</div>
@endif

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Titre et Sous-titre') }}</legend>
            <div class="row mb-3">
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        <label for="sliderTitle"><b>{{ __('Titre') }}</b></label>
                        <div class="word-counter" data-json='@json(['id' => 'sliderTitle'])'></div>
                        <input name="title" type="text" value="{{ old('title', $slider->title ?? '') }}" class="form-control"
                            id="sliderTitle" aria-describedby="sliderTitleHelp" placeholder="{{ __('Un nom beau et explicite') }}" required>
                        @include('back.modules.input-error', [
                            'inputName' => 'title', 'helperId' => 'sliderTitleHelp' , 'helper' => __('Doit décrire précisément le slider')
                        ])
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        @php
                        $data = [
                            'id' => 'sliderTitleColor',
                            'name' => 'title_color',
                            'value' => old('title_color', optional($slider ?? null)->title_color),
                            'title' => __('Choisi ta couleur'),
                            'label' => __('Couleur du titre'),
                            'rgbaMode' => true,
                            'nullable' => true,
                            'ariaDescribedby' => 'sliderTitleColorHelp'
                        ];
                        @endphp
                        @include('back.modules.input-error', [ 'inputName' => 'title_color'])
                        <div class="color-picker" data-json='@json($data)'></div>
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        @php
                        $data = [
                            'id' => 'sliderTitleBgColor',
                            'name' => 'title_color_bg',
                            'value' => old('title_color_bg', optional($slider ?? null)->title_color_bg),
                            'title' => __('Choisi ta couleur'),
                            'label' => __('Couleur de fond du titre'),
                            'rgbaMode' => true,
                            'nullable' => true,
                            'ariaDescribedby' => 'sliderTitleBgColorHelp'
                        ];
                        @endphp
                        @include('back.modules.input-error', [ 'inputName' => 'title_color_bg'])
                        <div class="color-picker" data-json='@json($data)'></div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        <label for="sliderSubTitle"><b>{{ __('Sous-titre') }}</b></label>
                        <div class="word-counter" data-json='@json(['id' => 'sliderSubTitle'])'></div>
                        <input name="subtitle" type="text" value="{{ old('subtitle', optional($slider ?? null)->subtitle ?? '') }}" class="form-control"
                            id="sliderSubTitle" aria-describedby="sliderSubTitleHelp" placeholder="{{ __('Un nom beau et explicite') }}" required>
                        @include('back.modules.input-error', [
                            'inputName' => 'subtitle', 'helperId' => 'sliderSubTitleHelp' , 'helper' => __('Doit décrire précisément le slider')
                        ])
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        @php
                        $data = [
                            'id' => 'sliderSubTitleColor',
                            'name' => 'subtitle_color',
                            'value' => old('subtitle_color', optional($slider ?? null)->subtitle_color),
                            'title' => __('Choisi ta couleur'),
                            'label' => __('Couleur du sous-titre'),
                            'rgbaMode' => true,
                            'nullable' => true,
                            'ariaDescribedby' => 'sliderSubTitleColorHelp'
                        ];
                        @endphp
                        @include('back.modules.input-error', [ 'inputName' => 'subtitle_color'])
                        <div class="color-picker" data-json='@json($data)'></div>
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        @php
                        $data = [
                            'id' => 'sliderSubTitleBgColor',
                            'name' => 'subtitle_color_bg',
                            'value' => old('subtitle_color_bg', optional($slider ?? null)->subtitle_color_bg),
                            'title' => __('Choisi ta couleur'),
                            'label' => __('Couleur de fond du sous-titre'),
                            'rgbaMode' => true,
                            'nullable' => true,
                            'ariaDescribedby' => 'sliderSubTitleBgColorHelp'
                        ];
                        @endphp
                        @include('back.modules.input-error', [ 'inputName' => 'subtitle_color_bg'])
                        <div class="color-picker" data-json='@json($data)'></div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-md-6 form-group">
                    <label for="sliderTextPosition" class="col-form-label"><b>{{ __('Position des textes') }}</b></label>
                    <select id="sliderTextPosition" class="form-select" name="text_position_desktop" aria-describedby="sliderTextPositionHelp" required>
                        <option value="" @if(is_null(old('text_position_desktop', $slider->text_position_desktop ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
                        @foreach(App\Enums\Sliders\SliderElementPosition::toArray() as $status)
                        <option value="{{ $status->value }}" @if(old('text_position_desktop', optional($slider->text_position_desktop ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
                        @endforeach
                    </select>
                    @include('back.modules.input-error', [
                        'inputName' => 'text_position_desktop', 'helperId' => 'sliderTextPositionHelp' , 'helper' => __('Positionnement du titre/sous-titre et bouton sur l\'image (en desktop)')
                    ])
                </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="sliderPublishedAt"><b>{{ __('Date de publication (Europe/Paris)') }}</b></label>
                        <input id="sliderPublishedAt" name="publish_at" class="form-control publishTime" type="datetime-local" data-form-type="date" aria-describedby="sliderPublishAtHelp" value="{{ old('publish_at', ((isset($slider) and $slider->publish_at) ? $slider->publish_at->format('Y-m-d\TH:i') : '')) }}">
                        @include('back.modules.input-error', [
                            'inputName' => 'publish_at', 'helperId' => 'sliderPublishAtHelp' , 'helper' => (isset($slider) and $slider->publish_at) ? __('Laisser vide pour un affichage immédiat du slider.') : __('Vider pour un affichage immédiat du slider')
                        ])
                    </div>
                </div>
                <div class="col">
                    <div class="form-group">
                        <label for="sliderUnPublishedAt"><b>{{ __('Date de fin de publication (Europe/Paris)') }}</b></label>
                        <input id="sliderUnPublishedAt" name="unpublish_at" class="form-control publishTime" type="datetime-local" data-form-type="date" aria-describedby="sliderUnPublishAtHelp" value="{{ old('unpublish_at', ((isset($slider) and $slider->unpublish_at) ? $slider->unpublish_at->format('Y-m-d\TH:i') : '')) }}">
                        @include('back.modules.input-error', [
                            'inputName' => 'unpublish_at', 'helperId' => 'sliderUnPublishAtHelp' , 'helper' => (isset($slider) and $slider->unpublish_at) ? __('Laisser vide pour un affichage permanent du slider.') : __('Vider pour un affichage permanent du slider')
                        ])
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <div class="row mb-1">
                <div class="col">
                    <span class="h4">{{ __('Image du slider') }}</span>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-12 col-md-6 form-group">
                    <label for="sliderPicturePosition" class="col-form-label"><b>{{ __('Position de centrage') }}</b></label>
                    <select id="sliderPicturePosition" class="form-select" name="picture_position_mobile" aria-describedby="sliderPicturePositionHelp" required>
                        <option value="" @if(is_null(old('picture_position_mobile', $slider->picture_position_mobile ?? null))) selected @endif disabled>{{ __('Séléctionnez une position de centrage') }}</option>
                        @foreach(App\Enums\Sliders\SliderElementPosition::toArray() as $status)
                        <option value="{{ $status->value }}" @if(old('picture_position_mobile', optional($slider->picture_position_mobile ?? null)->value) == $status->value) selected @endif>{{ $status->label }}</option>
                        @endforeach
                    </select>
                    @include('back.modules.input-error', [
                        'inputName' => 'picture_position_mobile', 'helperId' => 'sliderPicturePositionHelp' , 'helper' => __('Le centrage de l\'image en version mobile (responsive)')
                    ])
                </div>

                <div class="row">
                    <div class="col-12">
                        @php
                        $data = [
                            'id' => 'sliderImageInput',
                            'name' => 'picture',
                            'helper' => __('L\'image qui sera affiché sur le slide, doit être de 630px (hauteur) par 1400px (largeur)'),
                            'width' => 1400,
                            'height' => 630,
                            'value' => $slider->picture ?? '',
                            'pushString' => false
                        ];
                        @endphp
                        @include('back.modules.input-error', [ 'inputName' => 'picture'])
                        <div id="image-input" data-json='@json($data)'></div>
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
</div>

<div class="row">
    <div class="col">
        <fieldset class="border p-3 mb-3">
            <legend>{{ __('Lien') }}</legend>
            <div class="row mb-3">
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        <label for="sliderLink"><b>{{ __('Lien') }}</b></label>
                        <input name="link" type="text" value="{{ old('link', $slider->link ?? '') }}" class="form-control"
                            id="sliderLink" aria-describedby="sliderLinkHelp" placeholder="{{ __('Url') }}" required>
                        @include('back.modules.input-error', [
                            'inputName' => 'link', 'helperId' => 'sliderLinkHelp' , 'helper' => __('Le lien vers lequel le bouton du slider renvois.')
                        ])
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        <label for="sliderLinkLabel"><b>{{ __('Titre du lien') }}</b></label>
                        <div class="word-counter" data-json='@json(['id' => 'sliderLinkLabel'])'></div>
                        <input name="link_title" type="text" value="{{ old('link_title', $slider->link_title ?? '') }}" class="form-control"
                            id="sliderLinkLabel" aria-describedby="sliderLinkLabelHelp" placeholder="{{ __('Text du lien') }}" required>
                        @include('back.modules.input-error', [
                            'inputName' => 'link_title', 'helperId' => 'sliderLinkLabelHelp' , 'helper' => __('Le texte affiché du lien')
                        ])
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        @php
                        $data = [
                            'id' => 'sliderLinkColor',
                            'name' => 'link_color',
                            'value' => old('link_color', optional($slider ?? null)->link_color),
                            'title' => __('Choisi ta couleur'),
                            'label' => __('Couleur du lien'),
                            'rgbaMode' => true,
                            'nullable' => true,
                            'ariaDescribedby' => 'sliderLinkColorHelp'
                        ];
                        @endphp
                        @include('back.modules.input-error', [ 'inputName' => 'link_color'])
                        <div class="color-picker" data-json='@json($data)'></div>
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        @php
                        $data = [
                            'id' => 'sliderLinkBGColor',
                            'name' => 'link_color_bg',
                            'value' => old('link_color_bg', optional($slider ?? null)->link_color_bg),
                            'title' => __('Choisi ta couleur'),
                            'label' => __('Couleur de fond du lien'),
                            'rgbaMode' => true,
                            'nullable' => true,
                            'ariaDescribedby' => 'sliderLinkBGColorHelp'
                        ];
                        @endphp
                        @include('back.modules.input-error', [ 'inputName' => 'link_color_bg'])
                        <div class="color-picker" data-json='@json($data)'></div>
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        @php
                        $data = [
                            'id' => 'sliderLinkHoverColor',
                            'name' => 'link_color_hover',
                            'value' => old('link_color_hover', optional($slider ?? null)->link_color_hover),
                            'title' => __('Choisi ta couleur'),
                            'label' => __('Couleur du lien (au survol)'),
                            'rgbaMode' => true,
                            'nullable' => true,
                            'ariaDescribedby' => 'sliderLinkHoverColorHelp'
                        ];
                        @endphp
                        @include('back.modules.input-error', [ 'inputName' => 'link_color_hover'])
                        <div class="color-picker" data-json='@json($data)'></div>
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-group">
                        @php
                        $data = [
                            'id' => 'sliderLinkBGHoverColor',
                            'name' => 'link_color_bg_hover',
                            'value' => old('link_color_bg_hover', optional($slider ?? null)->link_color_bg_hover),
                            'title' => __('Choisi ta couleur'),
                            'label' => __('Couleur de fond du lien (au survol)'),
                            'rgbaMode' => true,
                            'nullable' => true,
                            'ariaDescribedby' => 'sliderLinkBGHoverColorHelp'
                        ];
                        @endphp
                        @include('back.modules.input-error', [ 'inputName' => 'link_color_bg_hover'])
                        <div class="color-picker" data-json='@json($data)'></div>
                    </div>
                </div>
                <div class="col-12 col-md-6 mb-3">
                    <div class="form-check">
                        <input name="link_new_tab" class="form-check-input mt-2" type="checkbox" id="sliderLinkNewtab" aria-describedby="sliderLinkColorHelp" value="1" @if(old('link_new_tab', $slider->link_new_tab ?? ''))checked @endif>
                        <label class="form-check-label user-select-none pt-1" for="sliderLinkNewtab"><b>{{ __('Nouvel onglet') }}</b></label><br>
                        @include('back.modules.input-error', [
                            'inputName' => 'link_new_tab', 'helperId' => 'sliderLinkColorHelp' , 'helper' => __('Le lien doit s\'ouvrir dans un nouvel onglet')
                        ])
                    </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="sliderStatus" aria-describedby="sliderStatusHelp" value="1" @if(old('status', $slider->status ?? ''))checked @endif>
            <label class="form-check-label user-select-none pt-1" for="sliderStatus"><b>{{ __('Publié') }}</b></label><br>
            @include('back.modules.input-error', [
                'inputName' => 'status', 'helperId' => 'sliderStatusHelp' , 'helper' => __('Le slider 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 === 'sliderPublishedAt') {
            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.sliderPublishAtHelp ? parent.children.sliderPublishAtHelp : parent.children.sliderUnPublishAtHelp;
            let isPlanned = false;
            if(input.id === 'sliderPublishedAt') {
                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 === 'sliderPublishedAt' ?
                    "{{ __('Vider pour un affichage immédiat du slider.') }}" :
                    "{{ __('Vider pour un affichage permanent du slider.') }}";
            } else {
                // small.textContent = input.id === 'sliderPublishedAt' ?
                //     "{{ __('Uniquement pour planifier la publication') }}" :
                //     "{{ __('Uniquement pour planifier la fin de la publication') }}";
                small.textContent = input.id === 'sliderPublishedAt' ?
                    "{{ __('Laisser vide pour un affichage immédiat du slider.') }}" :
                    "{{ __('Laisser vide pour un affichage permanent du slider.') }}";
            }
        };
        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 === 'sliderPublishedAt') {
                dates.start = value;
            } else {
                dates.end = value;
            }
            setDateHelpers(input, parent);
        });
    }
});
</script>
@endpush