{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as macro %}
{% import "popup/popup.html.twig" as popupTemplate %}

{% block title %}
    INSTALL BOIS
{% endblock %}

{% block head %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('externalJS/datepicker-fr.js') }}"></script>
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Administration | Fiche popup
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    {{ form_start(form, {'attr': {'id':'popupForm' }}) }}
    <div class="container-fluid">
        <div class="row" style="width: 100%">
            {% if '_edit' in app.current_route %}
                <button class="boutonAction pull-right" type="button"
                        data-toggle="modal" data-target="#popup-danger-{{ popup.id }}">
                    Supprimer
                </button>
            {% endif %}
            {% if popup.status in ['SCHEDULED', 'STOPPED'] %}
                <a href="{{ path('popup_' ~ (popup.status === 'STOPPED' ? 'publish' : 'stop'), {'id': popup.id}) }}">
                    <button class="boutonAction pull-right" type="button">
                        {{ popup.status === 'STOPPED' ? 'Reprendre' : 'Mettre en pause' }}
                    </button>
                </a>
            {% elseif popup.status === 'DRAFT' %}
                <a href="{{ path('popup_publish', {'id': popup.id}) }}">
                    <button class="boutonAction pull-right" type="button">Publier</button>
                </a>
            {% elseif popup.status is null %}
                <input type="hidden" name="publish" value="1">
                <button class="boutonAction pull-right" type="submit">Publier</button>
            {% endif %}
        </div>
        <div class="row">
            <div class="rubrique col-sm-6 col-md-6 col-lg-6">
                <div class="rubrique_titre">
                <span>
                    Informations popup
                </span>
                </div>
                <div>
                    <div class="box-body">
                        <div class="form-group requiredInput">
                            {{ form_row(form.title) }}
                        </div>
                        <div class="form-group requiredInput">
                            {{ form_row(form.text) }}
                        </div>
                        <div style="margin-top: 2%;position: relative;width: 400px;">
                            {{ form_label(form.image) }}
                            <div id="containerImgPopup" style="width: 100%;">
                                {% set fileName = popup.image|split('/')|last %}
                                <span id="nameFile">{{ fileName ? fileName : "Non renseigné" }}</span>
                                <div>
                                    <a id="removeFileBtn" type="button" class="txtlibre txtUnderline" style="cursor:pointer;padding-left: 10px{{ fileName ?"" : ';display: none' }}">
                                        <span>Supprimer</span>
                                    </a>
                                    <div id="picture" class="previewFile" style="top: 30px !important;">
                                        {% if fileName %}
                                            <img src="{{ asset(popup.image) }}"/>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex; flex-direction: row;margin-top: 10px">
                            <label for="popup_image" class="boutonAction" style="padding-top: 2px">
                                Parcourir...
                            </label>
                            <small style="color: red;margin-top: 10px">
                                <b>Veuillez sélectionner un document de type PNG/JPG.
                                    La taille maximale autorisée est de
                                    10Mo</b>
                            </small>
                        </div>
                        {{ form_widget(form.image, { 'attr' : { 'style' : 'opacity:0','accept':'image/png, image/jpeg'}}) }}
                        <input type="hidden" name="delete-image" value="0">
                        <br>
                        <div class="form-group">
                            {{ form_row(form.labelLink) }}
                            {{ form_row(form.link) }}
                            {{ form_row(form.linkPosition) }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="rubrique col-sm-6 col-md-6 col-lg-6">
                <div class="rubrique_titre">
                    <span>
                        Paramètres
                    </span>
                </div>
                <div class="container-input-popup">
                    <div class="form-group requiredInput">
                        {{ form_row(form.dateStart) }}
                        {{ form_widget(form.timeStart) }}
                    </div>
                    <div class="form-group requiredInput">
                        {{ form_row(form.dateEnd) }}
                        {{ form_widget(form.timeEnd) }}
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox">Publier comme actu
                        </label>
                    </div>
                </div>
                <div class="form-group requiredInput">
                    {{ form_row(form.displayNumber) }}
                </div>
                <div class="container-input-popup" style="gap:2rem">
                    <div class="form-group" style="flex: 1">
                        <label for="publicationTarget">Cible de la publication <span class="asterix">*</span></label>
                        <select id="publicationTarget" name="publication-target" class="form-control">
                            <option value="all" {{ popup.personalizedTarget ? '' : 'selected' }}>Tous</option>
                            <option value="personalized" {{ popup.personalizedTarget ? 'selected' : '' }}>Personnalisée</option>
                        </select>
                    </div>
                    <div class="form-group" style="flex: 1">
                        {{ form_row(form.roles) }}
                    </div>
                </div>

                <div id="personalizedFields" style="display: none">
                    <div class="personalized-row">
                        ET
                        {{ form_row(form.typeLicence) }}
                    </div>
                    <div class="personalized-row">
                        ET
                        {{ form_row(form.contractFrequency) }}
                    </div>
                    <div class="personalized-row">
                        ET
                        {{ form_row(form.contractType) }}
                    </div>
                    <div class="personalized-row">
                        ET
                        {{ form_row(form.partnerPromo) }}
                    </div>
                    <div class="personalized-row">
                        ET
                        {{ form_row(form.cvStatus) }}
                    </div>
                    <div class="personalized-row">
                        ET
                        {{ form_row(form.monthStartContract) }}
                    </div>
                    <div class="personalized-row">
                        ET
                        {{ form_row(form.brands) }}
                    </div>
                    <div class="personalized-row">
                        ET
                        {{ form_row(form.invoiceStatus) }}
                    </div>
                    <div class="personalized-row">
                        ET
                        {{ form_row(form.serviceUnused) }}
                    </div>
                </div>
                <div class="modal-footer" style="float: right">
                    <button type="button" class="boutonAction" data-toggle="modal" data-target="#popup-template-{{ popup.id }}">
                        Visualiser
                    </button>
                    <button id="btnSubmitPopup" type="submit" class="boutonAction">
                        {% if popup.status is null %}
                            {{ button_label|default('Enregistrer comme brouillon') }}
                        {% else %}
                            {{ button_label|default('Enregistrer') }}
                        {% endif %}
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{ form_end(form) }}
    {{ popupTemplate.popup(popup) }}
    {{ macro.popup("danger", "popup-delete", path('popup_delete', {'id': popup.id}), popup.id) }}
    <script type="text/javascript" src="{{ asset('install-bois/datepickerCompanyConfig.js') }}"></script>
    <script type="text/javascript">
        const isEdit = {{ ('_edit' in app.current_route)|json_encode|raw }};
        const timeStart = {{ popup.dateStart|date('H:i')|json_encode|raw }};
        const timeEnd = {{ popup.dateEnd|date('H:i')|json_encode|raw }};
        $(document).ready(function () {
            $("#popup_image").value = {{ popup.image|json_encode|raw }};

            const select2ToInit = [
                'roles',
                'typeLicence',
                'contractFrequency',
                'contractType',
                'cvStatus',
                'partnerPromo',
                'brands',
                'monthStartContract',
                'invoiceStatus',
                'serviceUnused'
            ];
            for (let value of select2ToInit) {
                $('#popup_' + value).select2({
                    width: '100%'
                });
            }
            if (isEdit) {
                setTimeout(() => {
                    $('#publicationTarget').change()
                }, 10);
                $('#popup_timeStart_hour').val(parseInt(timeStart.split(':')[0]));
                $('#popup_timeStart_minute').val(parseInt(timeStart.split(':')[1]));
                $('#popup_timeEnd_hour').val(parseInt(timeEnd.split(':')[0]));
                $('#popup_timeEnd_minute').val(parseInt(timeEnd.split(':')[1]));
            }

            $('#popup_link').attr('required', $('#popup_labelLink').val() !== '');
            $('#popup_linkPosition input[name="popup[linkPosition]"]').attr('required', $('#popup_labelLink').val() !== '');
            if ($('#popup_labelLink').val() !== '') {
                $('#popup_link').parent().show();
                $('#popup_linkPosition').parent().show();
            }
            $('#popup_labelLink').on('input', function () {
                let value = $(this).val();
                if (value) {
                    $('#popup_link').parent().show();
                    $('#popup_link').attr('required', true);
                    $('#popup_linkPosition').parent().show();
                    $('#popup_linkPosition input[name="popup[linkPosition]"]').attr('required', true);
                } else {
                    $('#popup_link').parent().hide();
                    $('#popup_link').attr('required', false);
                    $('#popup_linkPosition').parent().hide();
                    $('#popup_linkPosition input[name="popup[linkPosition]"]').attr('required', false);
                }
                loadPopupContent('label-link');
            });
            $('#popup_link').on('input', function () {
                loadPopupContent('link');
            });
            $('input[name="popup[linkPosition]"]').on('change', function () {
                loadPopupContent('link-position');
            });
            $('#popup_title').on('input', function () {
                loadPopupContent('title');
            });
            CKEDITOR.instances.popup_text.on('change', function () {
                loadPopupContent('text');
            });

            $('#publicationTarget').on('change', function () {
                let value = $(this).val();
                if (value === 'all') {
                    $('#personalizedFields').hide();
                } else {
                    $('#personalizedFields').show();
                }
            });
        });

        initDatePicker("0d", null);

        $('#popup_image').change(function (e) {
            const result = true;
            if (result) {
                if (typeof (FileReader) != "undefined") {
                    let image_holder = $("#picture");
                    image_holder.empty();
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        $("<img />", {
                            "src": e.target.result
                        }).appendTo(image_holder);
                        loadPopupContent('image', e.target.result);
                    }
                    image_holder.show();
                    reader.readAsDataURL($(this)[0].files[0]);
                }
                let fileName = e.target.files[0].name;
                $('#nameFile').text(fileName);
                $('#removeFileBtn').show();
                $('#popup_image').hide();
                $('input[name="delete-image"]').val('0');
            }
        });
        $('#removeFileBtn').click(function () {
            $('#popup_image').val('');
            $("#picture").text('');
            $('#nameFile').text("Non renseigné");
            $('#imgOverview').hide();
            $('#removeFileBtn').hide();
            $('#popup-image').parent().hide();
            $('input[name="delete-image"]').val('1');
        });

        $('#btnSubmitPopup').on('click', function () {
            let inputPublish = $('input[name="publish"]');
            if (inputPublish != null) {
                inputPublish.val('0');
            }
        });

        $('#popupForm').on('submit', function (e) {
            if ($('#publicationTarget').val() === 'all') {
                $('#personalizedFields :input').each(function (element) {
                    element.val('');
                })
                e.preventDefault();
            }
        });

        const loadPopupContent = (name, imagePath = null) => {
            let linkTop = $('.popup-template-link-top');
            let linkBottom = $('.popup-template-link-bottom');
            switch (name) {
                case 'label-link':
                    linkTop.text($('#popup_labelLink').val());
                    linkBottom.text($('#popup_labelLink').val());
                    break;
                case 'link':
                    linkTop.attr('href', $('#popup_link').val());
                    linkBottom.attr('href', $('#popup_link').val());
                    break;
                case 'link-position':
                    let boxChecked = $('input[name="popup[linkPosition]"]:checked');
                    if (boxChecked.val() === 'top') {
                        linkTop.show();
                        linkBottom.hide();
                    } else {
                        linkBottom.show();
                        linkTop.hide();
                    }
                    break;
                case 'title':
                    $('.popup-template-title').text($('#popup_title').val());
                    break;
                case 'text':
                    $('.popup-message').html(CKEDITOR.instances.popup_text.getData());
                    break;
                case 'image':
                    $('#popup-image').parent().show();
                    $('#popup-image').attr('src', imagePath);
                    break;
            }
        }
    </script>
{% endblock %}