{% extends '../master.html' %}
{% load i18n debug static widget_tweaks base form %}
{% block title %}dnoticias | Backoffice{% endblock %}
{% block description %}Latest updates and statistic charts{% endblock %}

{% block style_template %}
<!--begin::Page Vendors Styles(used by this page) -->
<link href="{% static 'backoffice/vendors/custom/jstree/jstree.bundle.css' %}" rel="stylesheet" type="text/css" />

<!--begin:: Global Mandatory Vendors -->
<link href="{% static 'backoffice/vendors/general/perfect-scrollbar/css/perfect-scrollbar.css' %}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block style_develop %}
<style>
.kt-avatar .kt-avatar__holder.kt-image {
   width: 269px;
   height: 151px;
   border-radius: 3px;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
}
</style>
{% endblock %}

{% block content %}
    {% trans 'Editar Notificação' as edit_notification_label %}
    {% trans 'Criar Notificação' as create_notification_label %}
        <!--begin::Form-->
        <form class="kt-form" method="POST" enctype="multipart/form-data">
            {% render_field form.id %}
            {% render_field form.object_id %}
            {% render_field form.content_type_id %}
            {% render_field form.remote_image_url %}
            {% render_field form.remote_icon_url %}
            <!-- begin:: Content -->
            <div class="kt-container kt-container--fluid kt-grid__item row">
                <div class="col-lg-12">
                    <div class="kt-portlet">
                        <div class="kt-portlet__head kt-portlet__head--lg">
                            <div class="kt-portlet__head-label">
                                <a href="{% url 'fcm-notification-list' %}" class="btn btn-clean kt-margin-r-10">
                                    <i class="la la-arrow-left"></i>
                                    <span class="kt-hidden-mobile">Ver Lista</span>
                                </a>
                            </div>
                            <div class="kt-portlet__head-toolbar">
                                {% if form.instance.pk %}
                                <button data-pk="{{form.instance.pk}}" data-model="{% get_class_name form.instance %}" data-link="{% url 'fcm-notification-delete' pk=form.instance.pk %}" data-redirect="{% url 'fcm-notification-list' %}" data-toggle="popover" type="button" class="delete-action btn btn-danger">
                                    <i class="fa fa-trash"></i> {% trans 'Eliminar' %}
                                </button>
                                {% endif %}
                                <button type="submit" class="btn btn-brand loading-trigger disable-on-loading">
                                    <i style="display: none;" class="m-3 kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light on-loading"></i>
                                    <i class="before-loading la la-check"></i> {% trans 'Guardar' %}
                                </button>
                            </div>
                        </div>

                            {% csrf_token %}
                            <div class="kt-portlet__body">
                                <div class="kt-form__section kt-form__section--first">

                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="container">
                                                {% if form.title %}
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.title.label }}:</label>
                                                    <div class="col-lg-6 slug_edit_group">
                                                        {% trans 'Título' as title_placeholder %}

                                                        {% assign_variable "form-control" as form_title_classes %}

                                                        {% if form.is_bound %}
                                                            {% if form.errors.title %}
                                                                {% assign_variable "is-invalid" as validation_class %}
                                                            {% else %}
                                                                {% assign_variable "is-valid" as validation_class %}
                                                            {% endif %}
                                                        {% else %}
                                                            {% assign_variable "" as validation_class %}
                                                        {% endif %}
                                                        {% add_string form_title_classes " " validation_class as form_title_classes_with_validation %}

                                                        {% render_field form.title class+=form_title_classes_with_validation placeholder+=title_placeholder %}
                                                        {% include "../includes/hidden_help_block_field.html" with valid_feedback=valid_feedback invalid_feedback=invalid_feedback input_html_name=form.title.html_name only %}
                                                    </div>
                                                </div>
                                                {% endif %}

                                                {% if form.body %}
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.body.label }}:</label>
                                                    <div class="col-lg-6">

                                                        {% trans 'Corpo' as body_placeholder %}

                                                        {% assign_variable "form-control" as form_body_classes %}

                                                        {% if form.is_bound %}
                                                            {% if form.errors.body %}
                                                                {% assign_variable "is-invalid" as validation_class %}
                                                            {% else %}
                                                                {% assign_variable "is-valid" as validation_class %}
                                                            {% endif %}
                                                        {% else %}
                                                            {% assign_variable "" as validation_class %}
                                                        {% endif %}
                                                        {% add_string form_body_classes " " validation_class as form_body_classes_with_validation %}

                                                        {% render_field form.body class+=form_body_classes_with_validation placeholder+=body_placeholder %}
                                                        {% include "../includes/hidden_help_block_field.html" with valid_feedback=valid_feedback invalid_feedback=invalid_feedback input_html_name=form.body.html_name only %}
                                                    </div>
                                                </div>
                                                {% endif %}

                                                {% if form.scrap_url %}
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.scrap_url.label }}:</label>
                                                    <div class="col-lg-6">
                                                        {% trans 'Hiperligação' as redirect_url_placeholder %}

                                                            {% assign_variable "form-control" as form_redirect_url_classes %}

                                                            {% if form.is_bound %}
                                                                {% if form.errors.scrap_url %}
                                                                    {% assign_variable "is-invalid" as validation_class %}
                                                                {% else %}
                                                                    {% assign_variable "is-valid" as validation_class %}
                                                                {% endif %}
                                                            {% else %}
                                                                {% assign_variable "" as validation_class %}
                                                            {% endif %}
                                                            {% add_string form_redirect_url_classes " " validation_class as form_redirect_url_classes_with_validation %}

                                                            {% render_field form.scrap_url class+=form_redirect_url_classes_with_validation placeholder+=redirect_url_placeholder %}
                                                            {% include "../includes/hidden_help_block_field.html" with valid_feedback=valid_feedback invalid_feedback=invalid_feedback input_html_name=form.scrap_url.html_name only %}
                                                    </div>
                                                </div>
                                                {% endif %}

                                                {% if form.redirect_url_web %}
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.redirect_url_web.label }}:</label>
                                                    <div class="col-lg-6">
                                                        {% trans 'Hiperligação' as redirect_url_placeholder %}

                                                            {% assign_variable "form-control" as form_redirect_url_classes %}

                                                            {% if form.is_bound %}
                                                                {% if form.errors.redirect_url_web %}
                                                                    {% assign_variable "is-invalid" as validation_class %}
                                                                {% else %}
                                                                    {% assign_variable "is-valid" as validation_class %}
                                                                {% endif %}
                                                            {% else %}
                                                                {% assign_variable "" as validation_class %}
                                                            {% endif %}
                                                            {% add_string form_redirect_url_classes " " validation_class as form_redirect_url_classes_with_validation %}

                                                            {% render_field form.redirect_url_web class+=form_redirect_url_classes_with_validation placeholder+=redirect_url_placeholder %}
                                                            {% include "../includes/hidden_help_block_field.html" with valid_feedback=valid_feedback invalid_feedback=invalid_feedback input_html_name=form.redirect_url_web.html_name only %}
                                                    </div>
                                                </div>
                                                {% endif %}


                                                {% if form.redirect_url_app %}
                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.redirect_url_app.label }}:</label>
                                                    <div class="col-lg-6">
                                                        {% trans 'Hiperligação' as redirect_url_placeholder %}

                                                            {% assign_variable "form-control" as form_redirect_url_classes %}

                                                            {% if form.is_bound %}
                                                                {% if form.errors.redirect_url_app %}
                                                                    {% assign_variable "is-invalid" as validation_class %}
                                                                {% else %}
                                                                    {% assign_variable "is-valid" as validation_class %}
                                                                {% endif %}
                                                            {% else %}
                                                                {% assign_variable "" as validation_class %}
                                                            {% endif %}
                                                            {% add_string form_redirect_url_classes " " validation_class as form_redirect_url_classes_with_validation %}

                                                            {% render_field form.redirect_url_app class+=form_redirect_url_classes_with_validation placeholder+=redirect_url_placeholder %}
                                                            {% include "../includes/hidden_help_block_field.html" with valid_feedback=valid_feedback invalid_feedback=invalid_feedback input_html_name=form.redirect_url_app.html_name only %}
                                                    </div>
                                                    <div style="display: none;" id="scrap-wrapper" class="col-lg-2">
                                                        <button class="btn btn-primary" id="scrap" type="button">Retirar dados</button>
                                                    </div>
                                                </div>
                                                {% endif %}


                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.icon.label }}</label>
                                                    <div class="col-lg-6">
                                                        <div class="kt-avatar kt-avatar--outline" id="kt_icon">
                                                            <div class="kt-avatar__holder"
                                                            style="background-image: url('{% if form.icon_url %}{{form.icon_url.value}}{% elif form.site_icon_url %}{{form.site_icon_url}}{% else %}{% static 'backoffice/media/client-logos/logo3.png' %}{% endif %}');background-size: cover;background-position: center center;"></div>
                                                                <label class="kt-avatar__upload" data-toggle="kt-tooltip" title="" data-original-title="{% trans 'Alterar icon' %}">
                                                                    <i class="fa fa-pen"></i>
                                                                    {% render_field form.icon %}
                                                                </label>
                                                                <span class="kt-avatar__cancel" data-toggle="kt-tooltip" title="" data-original-title="{% trans 'Cancelar icon' %}">
                                                                    <i class="fa fa-times"></i>
                                                                </span>
                                                        </div>
                                                        {% render_field form.icon_url %}
                                                    </div>
                                                </div>

                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.image.label }}</label>
                                                    <div class="col-lg-6">
                                                        <div class="kt-avatar kt-avatar--outline" id="kt_image">
                                                        <div class="kt-avatar__holder kt-image" style="background-image: url('{% if form.image_url %}{{form.image_url.value}}{% else %}{% static 'backoffice/media/client-logos/logo3.png' %}{% endif %}');background-size: cover;background-position: center center;"></div>
                                                        <label class="kt-avatar__upload" data-toggle="kt-tooltip" title="" data-original-title="{% trans 'Alterar imagem' %}">
                                                            <i class="fa fa-pen"></i>
                                                            {% render_field form.image %}
                                                        </label>
                                                        <span class="kt-avatar__cancel" data-toggle="kt-tooltip" title="" data-original-title="{% trans 'Cancelar imagem' %}">
                                                            <i class="fa fa-times"></i>
                                                        </span>
                                                        </div>
                                                        {% render_field form.image_url %}
                                                    </div>
                                                </div>

                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.topics.label }}</label>
                                                    <div class="col-lg-6">
                                                        {% render_field form.topics class+=form_topics_classes_with_validation placeholder+=topics_placeholder %}
                                                    </div>
                                                </div>


                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.is_scheduled.label }}</label>
                                                    <div class="col-lg-6">
                                                        <span class="kt-switch">
                                                            <label>
                                                                {% render_field form.is_scheduled %}
                                                                <span></span>
                                                            </label>
                                                        </span>
                                                    </div>
                                                </div>

                                                <div style="display: none;" id="scheduled-info">
                                                    <div class="form-group row">
                                                        <label class="col-lg-4 col-form-label">{{ form.scheduled_for.label }}:</label>
                                                        <div class="col-lg-6 slug_edit_group">
                                                            {% trans 'Data de agendamento' as scheduled_for_placeholder %}

                                                            {% assign_variable "form-control" as form_scheduled_for_classes %}

                                                            {% if form.is_bound %}
                                                                {% if form.errors.scheduled_for %}
                                                                    {% assign_variable "is-invalid" as validation_class %}
                                                                {% else %}
                                                                    {% assign_variable "is-valid" as validation_class %}
                                                                {% endif %}
                                                            {% else %}
                                                                {% assign_variable "" as validation_class %}
                                                            {% endif %}
                                                            {% add_string form_scheduled_for_classes " " validation_class as form_scheduled_for_classes_with_validation %}

                                                            {% render_field form.scheduled_for class+=form_scheduled_for_classes_with_validation placeholder+=scheduled_for_placeholder %}
                                                            {% include "../includes/hidden_help_block_field.html" with valid_feedback=valid_feedback invalid_feedback=invalid_feedback input_html_name=form.scheduled_for.html_name only %}
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-group row">
                                                    <label class="col-lg-4 col-form-label">{{ form.to_send.label }}</label>
                                                    <div class="col-lg-6">
                                                        <span class="kt-switch">
                                                            <label>
                                                                {% render_field form.to_send %}
                                                                <span></span>
                                                            </label>
                                                        </span>
                                                    </div>
                                                </div>


                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        <!--end::Form-->
                    </div>
                </div>
            </div>
            <!-- end:: Content -->

        </form>
{% endblock %}

{% block script_template %}
	<!--begin::Page Vendors(used by this page) -->
    <script src="{% static 'backoffice/vendors/custom/jstree/jstree.bundle.js' %}" type="text/javascript"></script>
    <script src="{% static 'backoffice/vendors/custom/jquery-ui/jquery-ui.bundle.js' %}" type="text/javascript"></script>
    <!--end::Page Vendors -->

   	<!--begin::Page Scripts(used by this page) -->
    <script src="{% static 'backoffice/js/pages/crud/forms/widgets/bootstrap-select.js' %}" type="text/javascript"></script>
    <!--end::Page Scripts -->

    <script>
        {% get_settings_value "DATETIME_GERAL_FORMAT_JS" as DATETIME_GERAL_FORMAT_JS %}
        {% get_settings_value "DATETIME_GERAL_MOMENT_FORMAT_JS" as DATETIME_GERAL_MOMENT_FORMAT_JS %}
        moment.locale("pt");
        var KtIcon;
        var KtImage;

        {% include "../includes/post.js" %}

        function setTitle(){
            $(".notification__title").text($("#{{form.title.auto_id}}").val());
        }

        function setBody(){
            $(".notification__body").text($("#{{form.body.auto_id}}").val());
        }

        function readURL(input, elements) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    elements.css('background-image', 'url(' + e.target.result + ')');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        jQuery(document).ready(function() {
            KtIcon = new KTAvatar("kt_icon");
            KtImage = new KTAvatar("kt_image");

            $("#{{form.topics.auto_id}}").select2({
                placeholder : "{% trans 'Selecione um tópico das notificações' %}",
                {% comment %} ajax: {
                    url: '{% url "fcm-topic-select2" %}',
                    dataType: 'json'
                }, {% endcomment %}
                width: "100%"
            })

            $('#{{form.scheduled_for.auto_id}}').datetimepicker({
                format: 'yyyy-mm-dd hh:ii',
                minDate: 0,
				language: "pt",
				autoclose: true,
				pickerPosition: "top-right",
                date: "null",
                minuteStep: 5,
                todayHighlight: true,
			}).on("changeDate", function(e) {
                console.log(e);
                var date = moment(e.date, "{{DATETIME_GERAL_MOMENT_FORMAT_JS}}", true);
                var isValidDate = date.isValid();
                if(isValidDate){
					$("#{{form.activate_date.auto_id}}").val(date.format('YYYY-MM-DD HH:mm'));
                }
            });

            setTitle();
            setBody();

            $("#{{form.title.auto_id}}").on("input", function(){
                setTitle();
            });

            $("#{{form.body.auto_id}}").on("input", function(){
                setBody();
            });

            var verifyIfIsValidUrl = function(url){
                var pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
                    '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
                    '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
                    '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
                    '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
                    '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
                return !!pattern.test(url);
            }

            var OnChangeRedirectUrl = function(event){
                var url = $("#{{form.scrap_url.auto_id}}").val();
                var isValidUrl = verifyIfIsValidUrl(url);
                console.log("isValidUrl", isValidUrl);
                var wrapper = $("#scrap-wrapper");
                if(isValidUrl){
                    wrapper.show();
                }else{
                    wrapper.hide();
                }
            }

            $("#{{form.scrap_url.auto_id}}").on("input", OnChangeRedirectUrl);
            OnChangeRedirectUrl();

            $("#{{form.image.auto_id}}").change(function() {
                readURL(this, $(".notification__image"));
            });

            $("#{{form.icon.auto_id}}").change(function() {
                readURL(this, $(".notification__icon"));
            });

            var OnScrapClick = function(event){
                var url = $("#{{form.scrap_url.auto_id}}").val();
                $.get("{% url 'notification-scrapping' %}", { "url" : url}, function(data, status, xhr){
                    var title = data.title ? data.title : "";
                    var body = data.description ? data.description : "";
                    $("#{{form.title.auto_id}}").val(title);
                    $("#{{form.body.auto_id}}").val(body);

                    if(data.icon){
                        KTUtil.css(KtIcon.holder, 'background-image', 'url('+ data.icon +')');
                        KTUtil.addClass(KtIcon.element, 'kt-avatar--changed');
                        $("#{{form.icon_url.auto_id}}").val(data.icon);
                        $("#{{form.icon.auto_id}}").val("");
                    }else{
                        KTUtil.removeClass(KtIcon.element, 'kt-avatar--changed');
                        KTUtil.css(KtIcon.holder, 'background-image', KtIcon.src);
                        KtIcon.input.value = "";
                    }

                    if(data.image){
                        KTUtil.css(KtImage.holder, 'background-image', 'url('+ data.image +')');
                        KTUtil.addClass(KtImage.element, 'kt-avatar--changed');
                        $("#{{form.image_url.auto_id}}").val(data.image);
                        $("#{{form.image.auto_id}}").val("");
                    }else{
                        KTUtil.removeClass(KtImage.element, 'kt-avatar--changed');
                        KTUtil.css(KtImage.holder, 'background-image', KtImage.src);
                        KtImage.input.value = "";
                    }

                    if(data.urls){
                        var outputs = Object.keys(data.urls);
                        console.log(data.urls)
                        for (let i = 0; i < outputs.length; i++) {
                            const output = outputs[i];
                            $("#id_redirect_url_" + output + "").val(data.urls[output]);
                        }
                    }

                });
            }

            $("#scrap").on("click", OnScrapClick);

            {% comment %} $("#{{form.icon.auto_id}}").on("change", function(event){
                $("#{{form.icon_url.auto_id}}").val("");
            });

            $("#{{form.image.auto_id}}", function(event){
                $("#{{form.image_url.auto_id}}").val("");
            }); {% endcomment %}

            {% if form.instance.pk and not form.instance.sent %}
                {% include "../includes/delete_popover.js" %}
            {% endif %}

            function OnToSendChange(event){
                var isChecked = $("#{{form.to_send.auto_id}}").is(":checked");
                var scheduledInput = $("#{{form.scheduled_for.auto_id}}");

                if(isChecked){
                    $("#scheduled-info").hide();
                    scheduledInput.prop("disabled", true);
                    scheduledInput.prop("checked", false);
                    $("#{{form.scheduled_for.auto_id}}").val("");
                }else{
                    scheduledInput.prop("disabled", false);
                }
            }

            OnToSendChange();
            $("#{{form.to_send.auto_id}}").on("change", OnToSendChange);

            function OnScheduledChange(event){
                var isChecked = $("#{{form.is_scheduled.auto_id}}").prop("checked");
                var toSentInput = $("#{{form.to_send.auto_id}}");
                if(isChecked){
                    $("#scheduled-info").show();
                    toSentInput.prop("disabled", true);
                    toSentInput.prop("checked", false);
                }else{
                    $("#scheduled-info").hide();
                    toSentInput.prop("disabled", false);
                }
            }

            OnScheduledChange();
            $("#{{form.is_scheduled.auto_id}}").on("change", OnScheduledChange);

        });
    </script>
{% endblock %}