{% extends "YOUCommercantBundle::layout.html.twig" %}

{% block container %}

    <style>




    </style>

    <div class="form-presentation-boutique">
        <br/>



        {% import 'YOUCommercantBundle::macros.html.twig' as macros %}

        {{ macros.ariane({
    'Tableau de bord':{'url':path('you_commercant_secured_homepage')},
    'Présentation de la boutique':{},
    }) }}


        <form action="" class="longForm form-v2" id="formulaireAjout" novalidate method="post" {{ form_enctype(form) }}>

            <div class="row-fluid">        <h1 class="titretdb">Présentation de la boutique {{ boutique.nom }}</h1>
                <br/><br/>
                {% for flashMessage in app.session.flashbag.get('erreur') %}
                    <div class="flash-message alert alert-error ">
                        {{ flashMessage }}
                    </div>
                {% endfor %}
                {% for flashMessage in app.session.flashbag.get('message') %}
                    <div class="flash-message alert alert-success ">
                        {{ flashMessage }}
                    </div>
                {% endfor %}
                <div class="span8">

                    <div>
                        <div>
                            <h2>Logo</h2>
                            {% if boutique.presentation.logoValidation == true %}
                                <p>Un logo est en cours de validation.</p>
                            {% endif %}
                            <fieldset>
                                <div class="content_form span10">
                                    <div class="error">
                                        {{ form_errors(form.logos) }}
                                    </div>
                                    <div class="clearfix" id="photoContainer2">
                                        <a href="#" class="photosBox">Modifier</a>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <h2>Photos</h2>

                        <fieldset>
                            <div class="content_form span10">
                                <div class="error">
                                    {{ form_errors(form.images) }}
                                </div>
                                <div class="clearfix" id="photoContainer">
                                    <a href="#" class="photosBox">Ajouter</a>
                                </div>
                            </div>
                        </fieldset>
                    </div>


                    <div class="separator"></div>

                    <h2>Informations utiles</h2>

                    <fieldset>
                        <div class="label_form span3">
                            {{ form_label(form.presentation) }}
                        </div>
                        <div class="content_form span9">
                            <p class="information span6">
                                <b>Soyez bref et efficace.</b> Il s’agit d’attirer des visiteurs vers votre boutique, en éveillant leur curiosité. Présentez ce que vous faites, comment, pour qui, avec quels avantages... tout en mettant en avant vos atoûts.
                            </p>
                            <div class="error">
                                {{ form_errors(form.presentation) }}
                            </div>
                            {{ form_widget(form.presentation) }}
                        </div>
                    </fieldset>

                    <fieldset>
                        <div class="label_form span3">
                            {{ form_label(form.tel) }}
                        </div>
                        <div class="content_form span9">
                            <div class="error">
                                {{ form_errors(form.tel) }}
                            </div>
                            {{ form_widget(form.tel) }}
                        </div>
                    </fieldset>

                    <fieldset>
                        <div class="label_form span3">
                            {{ form_label(form.horaires) }}
                        </div>
                        <div class="content_form span9">
                            <div class="error">
                                {{ form_errors(form.horaires) }}
                            </div>
                            <a href="" id="openPopupHoraire" class="btn btn-green">Définir les horaires</a>
                            <div id="CurrentHoraireSelect"></div>
                        </div>
                    </fieldset>

                    <fieldset>
                        <div class="label_form span3">
                            {{ form_label(form.imghoraire) }}
                            <label>vous ne souhaitez pas afficher des horaires d’ouverture, insérez une image.</label>
                        </div>
                        <div class="content_form span9">
                            <div class="error">
                                {{ form_errors(form.imghoraire) }}
                            </div>
                            {# {{ form_widget(form.imghoraire) }} #}
                            <div class="clearfix" id="photoContainer3">
                                <a href="#" class="photosBox">Modifier</a>
                            </div>
                        </div>
                    </fieldset>


                    <fieldset>
                        <div class="label_form span3">
                            {{ form_label(form.services) }}
                        </div>
                        <div class="content_form span9">
                            <div class="error">
                                {{ form_errors(form.services) }}
                            </div>
                            <div class="checkbox-list">
                                {% for service in form.services %}
                                    <div>
                                        {{ form_widget(service) }}
                                        {{ form_label(service) }}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </fieldset>


                    <fieldset>
                        <div class="label_form span3">
                            {{ form_label(form.seuil) }}
                        </div>
                        <div class="content_form span9">
                            <div class="error">
                                {{ form_errors(form.seuil) }}
                            </div>
                            <div class="content_form span1">
                                <div>
                                    <span>{{ form_widget(form.seuil) }}<span style="position:relative;margin-left:40px;top:-31px">&euro;</span></span>

                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <div class="separator"></div>

                    <input type="submit" class="btn btn-green" value="Sauvegarder">

                    <div id="hiddenForm">

                        {{ form_rest(form) }}

                    </div>
                </div>

            </div>
        </form>


    </div>


{% endblock %}

{% block append_javascript %}

    {{ parent() }}

    <script>

        $('p.information').hide();
        $('p.permanence').show();

        $('input,textarea').bind('focus', function () {
            $(this).parent().find('p.information').fadeIn(100);
        }).bind('blur', function () {
            $(this).parent().find('p.information').fadeOut(100);
        });

        var urlPhotos = "{{ path('you_commercant_boutique_get_picture',{id:'__ID__'}) }}";


        listIMGid = [];
        function setUploadEnd(id, path) {
            if (listIMGid == undefined || listIMGid.length == 0) {
                listIMGid = [];
            }
            listIMGid[listIMGid.length] = id;
            loadPicturePict(id);
            reloadArrayPict();
        }

        function setUploadEnd2(id, path) {
            $('.boutiqueImageSelect2').html('<option value="' + id + '">' + id + '</option>');
            $('.boutiqueImageSelect2').val(id);
            $.ajax({url: urlPhotos.replace(/__ID__/g, id), success: function (data) {

                    $('#photoContainer2').html('<div class="photoBox"><img src="' + data + '" /></div>');
                    $('#photoContainer2 .photoBox').click(function (e) {
                        e.preventDefault();
                        nino_OverlayShow(
                                '{{ path('you_commercant_boutique_upload_logo') }}',
                                [
                                    {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'}

                                ]
                                );
                    });
                }})
        }
        function setUploadEnd3(id, path) {
            $('.boutiqueImageSelect3').html('<option value="' + id + '">' + id + '</option>');
            $('.boutiqueImageSelect3').val(id);
            $.ajax({url: urlPhotos.replace(/__ID__/g, id), success: function (data) {

                    $('#photoContainer3').html('<div class="photoBox"><img src="' + data + '" /></div>');
                    $('#photoContainer3 .photoBox').click(function (e) {
                        e.preventDefault();
                        nino_OverlayShow(
                                '{{ path('you_commercant_boutique_upload_horaire') }}',
                                [
                                    {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'}

                                ]
                                );
                    });
                }})
        }

        $('#photoContainer .photosBox').click(function (e) {
            e.preventDefault();
            nino_OverlayShow(
                    '{{ path('you_commercant_boutique_upload') }}',
                    [
                        {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'}

                    ]
                    );
        });

        $('#photoContainer2 .photosBox').click(function (e) {
            e.preventDefault();
            nino_OverlayShow(
                    '{{ path('you_commercant_boutique_upload_logo') }}',
                    [
                        {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'}

                    ]
                    );
        });

        $('#photoContainer3 .photosBox').click(function (e) {
            e.preventDefault();
            nino_OverlayShow(
                    '{{ path('you_commercant_boutique_upload_horaire') }}',
                    [
                        {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'}

                    ]
                    );
        });

        function reloadArrayPict() {
            var htmlSelect = '';
            for (var i = 0; i != listIMGid.length; i++) {
                if (listIMGid[i] != false) {
                    htmlSelect += '<option value="' + listIMGid[i] + '">' + listIMGid[i] + '</option>';
                }
            }
            $('.boutiqueImageSelect').html(htmlSelect).val(listIMGid);
            listIMGid = $('.boutiqueImageSelect').val();

            if (listIMGid.length == 5) {
                $('.photosBox').hide();
            } else {
                $('.photosBox').show();
            }
        }
        function loadPicturePict(id) {
            $.ajax({url: urlPhotos.replace(/__ID__/g, id), success: function (data) {
                    $('#photoContainer').prepend('<div class="photoBox"><a href="#" photoId="' + id + '">Supprimer [<i class="icon icon-trash"></i>]</a><img src="' + data + '" /></div>');
                    $('.photoBox a[photoId="' + id + '"]').click(function (e) {
                        $(this).parent().remove();
                        e.preventDefault();
                        for (var i = 0; i != listIMGid.length; i++) {
                            if (listIMGid[i] != false) {
                                if (listIMGid[i] == id) {
                                    listIMGid[i] = false;
                                }
                            }
                        }
                        reloadArrayPict();
                    });
                }})
        }

        popupServiceHoraireChoisirAction = function (popup) {
            var value = popup.getValue();
            if (value.id === false) {
                popup.addMessage('Vous devez selectionner un horaire.');
            } else {
                $('.realValue_horaire').val(value.id);
                $('#CurrentHoraireSelect').html(value.html);
                popup.close();
            }
        };

        $(document).ready(function () {
            $("#openPopupHoraire").click(function (e) {
                e.preventDefault();
                nino_OverlayShow(
                        '{{ path('you_commercant_horaire') }}',
                        [
                            {text: 'Choisir ces horaires', class: 'btn-green', action: 'popupServiceHoraireChoisirAction(popup)'},
                            {text: 'Annuler', class: 'btn-default', action: 'popup.cancel()'}

                        ]
                        );
            });


            if ($('.realValue_horaire').val() > 0) {
                var url = "{{ path('you_commercant_horaire_name_list',{id:'__value__'}) }}";
                url = url.replace(/__value__/g, $('.realValue_horaire').val());

                $("#CurrentHoraireSelect").load(url);
            }

            listImage = [{% for item in boutique.presentation.images %}{{ item.id }},{% endfor %}];
                $('.boutiqueImageSelect').val(listImage)
                if (listImage) {
                    for (i = 0; i != listImage.length; i++) {
                        if (i < 5) {
                            listIMGid[listIMGid.length] = listImage[i];
                            loadPicturePict(listImage[i]);
                        }
                    }
                }

        {% if boutique.presentation.logo is not null %}
                logo = {{ boutique.presentation.logo.id }};
                        $.ajax({url: urlPhotos.replace(/__ID__/g, logo), success: function (data) {
                                $('#photoContainer2').prepend('<div class="photoBox"><p>logo</p><img src="' + data + '" /></div>');
                            }})
        {% endif %}
        {% if boutique.presentation.imgHoraire is not null %}
                logo = {{ boutique.presentation.imgHoraire.id }};
                        $.ajax({url: urlPhotos.replace(/__ID__/g, logo), success: function (data) {
                                $('#photoContainer3').prepend('<a href="{{path('you_commercant_boutique_img_horaire_delete', {id:boutique.presentation.imgHoraire.id})}}" class="photoBox"><p>Supprimer</p><img src="' + data + '" /></div>');
                            }})
        {% endif %}


                $('.checkbox-list input').iCheck({checkboxClass: 'icheckbox_flat-aero'});

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