{% extends "::author.html.twig" %}
{% block title %}::Create Article::{% endblock %}

{% block body %}
    <style>
        .easy-autocomplete-container {
            top: 35px !important;
        }

        .activate-paginator {
            border-color: #223884;
            color: #223884;
        }
    </style>
    <section id="page-title" style="padding: 16px 0;">
        <div class="row">
            <div class="col-sm-8">
                <h2 class="mainTitle"><i class="ti-pin-alt" style="color: #007aff !important;font-size: 24px;"></i>Create new Article</h2>
            </div>
        </div>
    </section>
    <div class="container-fluid container-fullw ">
        <div class="row">
            <div class="col-md-12">
                {{ include("PafcicOnlinePafcicBundle:Articles:form_create_author.html.twig") }}
            </div>
        </div>
    </div>

    {{ include("PafcicOnlinePafcicBundle:Media:widget_upload_file.html.twig") }}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        /***
         * This function allow to paginate media image
         * @param path
         * @constructor
         */
        var p = 1;
        var pp= 10000;
        var filtre = false;
        function media_paginator(path, search, content, abstract, page) {
            //capteur de pagination
            if(page != undefined) {
                if (page == 0) {
                    p++;
                } else if (page == -1) {
                    p--;
                } else {
                    p = page;
                }
            }

            //changer dynamiquement les donnees
            if (pp==10000 || pp!=p || filtre==true ) {
                $('#' + content).html('<h1 style="text-align:center;line-height:200px;">Loading ...</h1>');
                $.ajax({
                    url: path,
                    dataType: 'HTML',
                    data: {search: $('#' + search).val(), abstract: abstract,page:p},
                    success: function (data) {
                        if (data.length > 0) {
                            $('#' + content).html(data);
                            $('#' + content).find('span.page-' + p).addClass('activate-paginator');
                            pp = p;
                            console.log(data);
                        }
                    }
                });
            }
        }

        /***
         * This function allow to paginate media image
         * @param path
         * @constructor
         */
        var t = 1;
        var tt= 10000;
        var filtr = false;
        function media_paginator_picture(path, search, content, abstract, page) {
            //capteur de pagination
            if(page != undefined) {
                if (page == 0) {
                    t++;
                } else if (page == -1) {
                    t--;
                } else {
                    t = page;
                }
            }

            //changer dynamiquement les donnees
            if (tt==10000 || tt!=t || filtr==true ) {
                $('#' + content).html('<h1 style="text-align:center;line-height:200px;">Loading ...</h1>');
                $.ajax({
                    url: path,
                    dataType: 'HTML',
                    data: {search: $('#' + search).val(), abstract: abstract},
                    success: function (data) {
                        if (data.length > 0) {
                            $('#' + content).html(data);
                            $('#' + content).find('span.page-' + t).addClass('activate-paginator');
                            tt = t;
                        }
                    }
                });
            }
        }

        /**
         * This function allow test if empty
         */
        function emptyTest() {
            var abs = $('#pafciconline_pafcicbundle_articles_Add_abstract').val();
            var content = $('#pafciconline_pafcicbundle_articles_Add_content').val();

            if (abs == '') {
                alert('Article Abstract is empty');
            }
            if (content == '') {
                alert('Article Content is empty');
            }

        }

        /**
         * This function allow to insert image
         * @param container
         * @param webPath
         */
        function insertImg(container, webPath) {

            $('#' + container).summernote('insertImage', webPath);
            $('#mymodalmedia').modal('hide');

        }

        /**
         * This function alow to insert video
         * @param container
         * @param webPath
         */
        function insertVideo(container, webPath) {
            $('#' + container).summernote('createTagV', {
                text: "<video height='120px' controls><source src=" + webPath + " ></video>",
                url: '',
                newWindow: true
            });
            $('#' + container).summernote('insertImage', webPath);
            $('#mymodalmedia').modal('hide');

        }

        jQuery(document).ready(function () {
            $('#pafciconline_pafcicbundle_articles_Add_abstract').summernote({
                minHeight: 300,
                maxHeight: null,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ["fontname", ["fontname"]],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['view', ['fullscreen']],
                    ['insert', ['mymodal', 'link', 'table', 'hr', 'mymodal2']],
                ]

            });

            $('#pafciconline_pafcicbundle_articles_Add_content').summernote({
                minHeight: 300,
                maxHeight: null,
                toolbar: [
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ["fontname", ["fontname"]],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']],
                    ['view', ['fullscreen']],
                    ['insert', ['mymodalcontent', 'link', 'table', 'hr', 'mymodal2content']],
                ]
            });


            $('button[data-event="showImageDialog"]').attr('data-toggle', 'image').removeAttr('data-event');

        });
        window.onbeforeunload = function (e) {
            e = e || window.event;

            // For IE and Firefox prior to version 4
            if (e) {
                e.returnValue = 'Sure?';
            }

            // For Safari
            return 'Sure?';
        };

        /**
         * This Function allow auto-complete search fields picture
         * @param path
         * @param element
         * @param subpath
         * @param content
         * @param flag
         */
        function dynanmic_opt_picture(path, element, subpath, content, flag) {
            var option = {
                url: function (phrase) {
                    return path;
                },

                getValue: function (element) {
                    return element.name;
                },

                ajaxSettings: {
                    dataType: "json",
                    method: "GET",
                    data: {
                        dataType: "json"
                    }
                },
                adjustWidth: false,

                preparePostData: function (data) {
                    data.phrase = $('#' + element).val();
                    return data;
                },

                list: {
                    onClickEvent: function () {
                        media_paginator_picture(subpath, element, content, flag,1);
                    }
                },
                requestDelay: 400,
            };
            $('#' + element).easyAutocomplete(option);
        }

       /**
        * This Function allow auto-complete search fields picture
        * @param path
        * @param element
        * @param subpath
        * @param content
        * @param flag
        */
        function dynanmic_opt(path, element, subpath, content, flag) {
            var option = {
                url: function (phrase) {
                    return path;
                },

                getValue: function (element) {
                    return element.name;
                },

                ajaxSettings: {
                    dataType: "json",
                    method: "GET",
                    data: {
                        dataType: "json"
                    }
                },
                adjustWidth: false,

                preparePostData: function (data) {
                    data.phrase = $('#' + element).val();
                    return data;
                },

                list: {
                    onClickEvent: function () {
                        media_paginator(subpath, element, content, flag,1);
                    }
                },
                requestDelay: 400,
            };
            $('#' + element).easyAutocomplete(option);
        }

        /**
         * This section allow to initialise auto-complete
         */
        dynanmic_opt("{{ path('media_list_video') }}", "search-media-video", '{{ path('media_list_popup_video') }}', 'container-media-video', '3');
        dynanmic_opt("{{ path('media_list_video') }}", "search-media-video-content", '{{ path('media_list_popup_video') }}', 'container-media-video-content', '2');
        dynanmic_opt_picture("{{ path('media_list_image') }}", "search-media", '{{ path('media_list_popup') }}', 'container-media-image', '3');
        dynanmic_opt_picture("{{ path('media_list_image') }}", "search-media-content", '{{ path('media_list_popup') }}', 'container-media-image-content', '2');
        /**
         * This section allow to initialise filter and pagination
         */
        media_paginator('{{ path('media_list_popup_video') }}', 'search-media-video', 'container-media-video', '3', 1);
        media_paginator('{{ path('media_list_popup_video') }}', 'search-media-video-content', 'container-media-video-content', '2', 1);
        media_paginator_picture('{{ path('media_list_popup') }}', 'search-media', 'container-media-image', '3', 1);
        media_paginator_picture('{{ path('media_list_popup') }}', 'search-media-content', 'container-media-image-content', '2', 1);

        $('#myTab5_example1').on('click', '.note-btn', function () {
            $('#search-media').val('');
            $('#search-media-video').val('');
            media_paginator('{{ path('media_list_popup_video') }}', 'search-media-video', 'container-media-video', '3', 1);
            media_paginator('{{ path('media_list_popup_video') }}', 'search-media-video-content', 'container-media-video-content', '2', 1);
            media_paginator_picture('{{ path('media_list_popup') }}', 'search-media', 'container-media-image', '3', 1);
            media_paginator_picture('{{ path('media_list_popup') }}', 'search-media-content', 'container-media-image-content', '2', 1);
        });

        //capteur de filtre de recherche video
        $('#search-media-video').keydown(function(){
            filtre = true;
            p = 1;
            pp= 10000;
            media_paginator('{{ path('media_list_popup_video') }}', 'search-media-video', 'container-media-video', '3', 1);
            media_paginator('{{ path('media_list_popup_video') }}', 'search-media-video-content', 'container-media-video-content', '2', 1);
        });

        //capteur de filtre de recherche image
        $('#search-media').keydown(function(){
            filtr = true;
            t = 1;
            tt= 10000;
            media_paginator_picture('{{ path('media_list_popup') }}', 'search-media', 'container-media-image', '3', 1);
            media_paginator_picture('{{ path('media_list_popup') }}', 'search-media-content', 'container-media-image-content', '2', 1);
        });
    </script>
{% endblock %}