{% extends 'base.html.twig' %}

{% block title %}Modifier une annonce{% endblock %}

{% block body %}
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                {{ form_start(form, {'action': path('news_edit', {'idNews':news.id}), 'attr': {'class': 'row g-3'}}) }}
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-xs-12">
                            {{ form_label(form.title, 'Titre de l\'annonce', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.title, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.subTitle, 'Sous-titre de l\'annonce', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.subTitle, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.description, 'Description de l\'annonce', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.description, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.text, 'Texte complet de l\'annonce', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.text, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.link, 'Lien externe de l\'annonce', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.link, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.background, 'Fond de l\'annonce', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.background, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-xs-12">
                            {{ form_label(form.beginAt, 'Date de début de parution', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.beginAt, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.endAt, 'Date de début de parution', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.endAt, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.socials.facebook, 'Lien facebook', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.socials.facebook, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.socials.instagram, 'Lien instagram', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.socials.instagram, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.socials.tiktok, 'Lien Tiktok', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.socials.tiktok, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                </div>
                <div class="col-md-12 text-center">
                    <button id="preview" class="btn btn-primary rounded-pill">Prévisualiser</button>
                    {{ form_widget(form.save) }}
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        // Date format options
        const dateFormatOption = {weekday: "long", year: "numeric", month: "long", day: "numeric"};

        const mdPicker_DateBegin = new mdDateTimePicker.default({
            type: "date",
            orientation: "PORTRAIT",
            past: moment().subtract(2, 'years'),
            future: moment().subtract(-3, 'years')
        });
        const mdPicker_DateBeginInput = document.querySelector("#news_beginAt");

        // Dispatch input event
        mdPicker_DateBegin.trigger = mdPicker_DateBeginInput;

        // Text input events
        mdPicker_DateBeginInput.addEventListener("focus", () => mdPicker_DateBegin.toggle());
        mdPicker_DateBeginInput.addEventListener("onOk", () => mdPicker_DateBeginInput.value = new Date(mdPicker_DateBegin.time.toString()).toLocaleDateString([], 'dd/MM/YYYY'));

        const mdPicker_DateEnd = new mdDateTimePicker.default({
            type: "date",
            orientation: "PORTRAIT",
            past: moment().subtract(2, 'years'),
            future: moment().subtract(-3, 'years')
        });
        const mdPicker_DateEndInput = document.querySelector("#news_endAt");

        // Dispatch input event
        mdPicker_DateEnd.trigger = mdPicker_DateEndInput;

        // Text input events
        mdPicker_DateEndInput.addEventListener("focus", () => mdPicker_DateEnd.toggle());
        mdPicker_DateEndInput.addEventListener("onOk", () => mdPicker_DateEndInput.value = new Date(mdPicker_DateEnd.time.toString()).toLocaleDateString([], 'dd/MM/YYYY'));

        $('#preview').on('click', function (e) {
            e.preventDefault();
            var url = 'https://www.lesptitsjoueurs.com/preview?';
            url += 't=' + $('#news_title').val() + '&';
            url += 'st=' + $('#news_subTitle').val() + '&';
            url += 'd=' + $('#news_description').val() + '&';
            url += 'b=' + ($('#news_link').val().length > 0) + '&';
            url += 'fb=' + $('#news_socials_facebook').val() + '&';
            url += 'in=' + $('#news_socials_instagram').val() + '&';
            url += 'tt=' + $('#news_socials_tiktok').val() + '&';
            window.open(url, '_blank').focus();
        });

    </script>
{% endblock %}