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

{% block perform_stylesheets %}
    <style>
        fieldset {
            margin-bottom: 10px;
        }
    </style>
{% endblock perform_stylesheets %}

{% block container %}
    <div class="promos">
        {% import 'YOUCommercantBundle::macros.html.twig' as macros %}
        <br/>
        {{ macros.ariane({
        'Tableau de bord':{'url':path('you_commercant_secured_homepage')},
        'Mes options simples':{'url':path('you_commercant_option_simple_index')},
        'Ajouter une option simple':{}
    }) }}

        <div class="container-fluid padded">
            <h1 class="titretdb">Ajouter une option simple</h1>
            {{ include('YOUCommercantBundle:OptionSimple:introduction.html.twig') }}

            <div class="row-fluid" id="tocomplettoverify">
                <div class="span12">

                    <div class="box">
                        <div class="box-header">
                            <span class="title">Options</span>
                        </div>
                        <div class="box-content row-fluid">

                            <div class="span8">
                                <div class="padded separate-sections">
                                    {% if form.vars.errors is not empty %}
                                        <div class="alert">{{ form_errors(form) }}</div>
                                    {% endif %}
                                    <form action="{{ path('you_commercant_option_simple_create') }}" method="post" {{ form_enctype(form) }}>
                                        <fieldset>
                                            <div class="span2">
                                                {{ form_label(form.title) }}
                                            </div>
                                            <div class="span4">
                                                {{ form_widget(form.title) }}
                                                {{ form_errors(form.title) }}
                                            </div>
                                        </fieldset>
                                        <fieldset>
                                            <div class="span2">
                                                {{ form_label(form.reference) }}
                                            </div>
                                            <div class="span4">
                                                {{ form_widget(form.reference) }}
                                                {{ form_errors(form.reference) }}
                                            </div>
                                        </fieldset>
                                        <fieldset>
                                            <div class="span2">
                                                {{ form_label(form.image) }}
                                            </div>
                                            <div class="span4">
                                                {{ form_widget(form.image) }}
                                                {{ form_errors(form.title) }}
                                            </div>
                                        </fieldset>
                                        <fieldset>
                                            {% for m in form.isMandatory %}
                                                <div class="span1">
                                                    {{ form_widget(m) }}
                                                </div>
                                                <div class="span2">
                                                    {{ form_label(m) }}
                                                </div>
                                            {% endfor %}
                                            <div class="span6">
                                                Vous souhaitez que votre client effectue un choix ?<br/>
                                                Cochez le bouton obligatoire
                                            </div>
                                        </fieldset>

                                        <fieldset>
                                            <table class="table table-striped table-bordered table-condensed productSousOptions" data-prototype="{{ include('YOUCommercantBundle:OptionSimple:prototype.html.twig', {'form':form.productSousOptions.vars.prototype})|e }}">
                                                <thead>
                                                    <tr>
                                                        <th>Noms sous-option</th>
                                                        <th>Intitulé</th>
                                                        <th>Images</th>
                                                        <th>Prix</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for productSousOption in form.productSousOptions %}
                                                        <tr>
                                                            <td>{{ form_widget(productSousOption.name) }}</td>
                                                            <td>{{ form_widget(productSousOption.label) }}</td>
                                                            <td>{{ form_widget(productSousOption.image) }}</td>
                                                            <td>{{ form_widget(productSousOption.price) }}</td>
                                                        </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </fieldset>

                                        <fieldset>
                                            <div class="span6">
                                                {{ form_label(form.choiceQuantity) }}
                                            </div>
                                            <div class="span6">
                                                {{ form_widget(form.choiceQuantity, {'attr':{'style':'width:60px;'}}) }}
                                            </div>
                                            <div class="span12">
                                                Vous permez d'indiquer le nombre de sous-option à choisir obligatoirement lors de la commande.<br/>
                                                <small>Exemple : salade + tomates + maïs + concombres </small>
                                            </div>
                                        </fieldset>
                                        <fieldset>
                                            <div class="span6">
                                                Afficher les choix dans des listes distinctes
                                            </div>
                                            <div class="span2">
                                                {{ form_widget(form.isDistinct) }}
                                            </div>
                                        </fieldset>
                                        {{ form_widget(form._token) }}

                                        <input class="btn btn-blue" type="submit" value="Créer l'option"/>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts_special %}
    <script>
        jQuery(document).ready(function () {
            var $collectionHolder;

            var $addProductSousOptionLink = $('<a href="#" class="btn btn-blue add_productSousOption_link" style="margin-bottom:10px;"><i class="icon icon-plus"></i> Ajouter une sous option</a>');
            var $newLinkLi = $('table.productSousOptions').after($addProductSousOptionLink);
            var $choiceQuantity = $('#youcommercant_bundle_product_option_choiceQuantity');

            $collectionHolder = $('table.productSousOptions, tbody');
            $collectionHolder.after($newLinkLi);
            $collectionHolder.data('index', $collectionHolder.find(':input').length);

            $addProductSousOptionLink.on('click', function (e) {
                e.preventDefault();
                addProductSousOptionForm($collectionHolder, $newLinkLi);
            });

            $collectionHolder.find('tbody').find('tr').each(function () {
                addProductSousOptionFormDeleteLink($(this));
            });

            function addProductSousOptionForm($collectionHolder, $newLinkLi) {
                var prototype = $collectionHolder.data('prototype');
                var index = $collectionHolder.data('index');
                var newForm = prototype.replace(/__name__/g, index);
                $collectionHolder.data('index', index + 1);
                var $newFormLi = $('<tr></tr>').append(newForm);
                $newLinkLi.append($newFormLi);
                addProductSousOptionFormDeleteLink($newFormLi);
                updateChoiceQuantity();
            }

            function addProductSousOptionFormDeleteLink($productSousOptionFormLi) {
                var $removeFormA = $('<td><a class="btn btn-small btn-default pull-right noajax" href="#"><i class="icon icon-trash"></i></a></td>');
                $productSousOptionFormLi.append($removeFormA);

                $removeFormA.on('click', function (e) {
                    e.preventDefault();
                    $productSousOptionFormLi.remove();
                    updateChoiceQuantity();
                });
            }

            function updateChoiceQuantity() {
                var i = 0;
                $choiceQuantity.find('option').remove();
                $collectionHolder.find('tr').each(function () {
                    $choiceQuantity.append('<option value="' + i + '">' + i + '</option>');
                    i++;
                });
            }
        });
    </script>
{% endblock %}