{% extends '::base2.html.twig' %}
{% block title %}Gestion Comptes - Add{% endblock %}
{% block stylesheets %}{{ parent() }}{% endblock %}

{% block body %}

    <div class="page-wrapper">
        <!-- BEGIN HEADER -->
        <div class="page-header navbar navbar-fixed-top">
            {% include 'admin/header.html.twig' %}
        </div>
        <!-- END HEADER -->

        <!-- BEGIN HEADER & CONTENT DIVIDER -->
        <div class="clearfix"></div>
        <!-- END HEADER & CONTENT DIVIDER -->

        <!-- BEGIN CONTAINER -->
        <div class="page-container">
            <!-- BEGIN SIDEBAR -->
            <div class="page-sidebar-wrapper">
                <!-- BEGIN SIDEBAR -->
                <div class="page-sidebar navbar-collapse collapse">
                    {% include 'admin/menu.html.twig' %}
                </div>
                <!-- END SIDEBAR -->
            </div>
            <!-- END SIDEBAR -->

            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->
                <div style="background: #eef1f5;" class="page-content">

                    <!-- BEGIN PAGE BAR -->
                    <div class="page-bar">
                        <ul class="page-breadcrumb">
                            <li>
                                <a href="javascript:void(0)">Gestion des Comptes</a>
                                <i class="fa fa-circle"></i>
                            </li>
                            <li>
                                <a href="javascript:void(0)">Ajouter un Compte</a>
                            </li>
                        </ul>
                    </div>
                    <!-- END PAGE BAR -->

                    <!-- BEGIN PAGE TITLE-->
                    <h1 style="padding-left: 16px;" class="page-title"> Ajouter Compte
                        <small>Nouveau</small>
                    </h1>
                    <!-- END PAGE TITLE-->
                    <!-- BEGIN PAGE HEADER-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="tabbable-line boxless tabbable-reversed">
                                <!-- BEGIN FORM-->
                                {{ form_start(form, {'method': 'post', 'action': path('millesima_administrator_compte_ajout')}) }}

                                <div class="portlet light bordered">
                                    <div class="portlet-title">
                                        <div class="font-red-sunglo">
                                            {#<div class="portlet-title">
                                                <div class="caption">
                                                    <i class="fa fa-gift"></i>Formulaire Info Compte
                                                </div>
                                                <div class="tools"></div>
                                            </div>#}
                                            <div class="portlet-body form">
                                                {% if app.request.hasPreviousSession %}
                                                    {% for type, messages in app.session.flashbag.all() %}
                                                        {% for message in messages %}
                                                            <div class="alert {% if type == 'success' %} alert-success  {% else %} alert-danger  {% endif %} alert-dismissible fade in"
                                                                 role="alert">
                                                                <button type="button" class="close" data-dismiss="alert"
                                                                        aria-label="Close"><span
                                                                            aria-hidden="true">×</span>
                                                                </button>
                                                                <strong>{{ type }}!</strong> {{ message }}
                                                            </div>
                                                        {% endfor %}
                                                    {% endfor %}
                                                {% endif %}
                                                <!-- BEGIN FORM COMPTE -->
                                                <div class="form-horizontal" style="padding: 20px;">
                                                    <div class="form-body">

                                                        <div class="row">
                                                            <div class="col-md-6 col-sm-12 col-xs-12">
                                                                {{ form_label(form.file, 'Logo') }}
                                                                {{ form_widget(form.file, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                <div class="form-control-focus"></div>
                                                                <div class="red">
                                                                    {{ form_errors(form.file) }}
                                                                </div>
                                                            </div>

                                                            <div class="col-md-3 col-sm-12 col-xs-12">
                                                                {{ form_label(form.raisonSociale, 'Raison Sociale *') }}
                                                                {{ form_widget(form.raisonSociale, { 'attr': {'class': 'form-control','required':true} }) }}
                                                                <div class="form-control-focus"></div>
                                                                <div class="red">
                                                                    {{ form_errors(form.raisonSociale) }}
                                                                </div>
                                                            </div>

                                                            <div class="col-md-3 col-sm-12 col-xs-12">
                                                                {{ form_label(form.matriculeFiscale, 'Matricule Fiscale *') }}
                                                                {{ form_widget(form.matriculeFiscale, { 'attr': {'class': 'form-control','required':true} }) }}
                                                                <div class="form-control-focus"></div>
                                                                <div class="red">
                                                                    {{ form_errors(form.matriculeFiscale) }}
                                                                </div>
                                                            </div>

                                                        </div>

                                                        <div class="row">

                                                            <div class="col-md-6 col-sm-12 col-xs-12">
                                                                {{ form_label(form.address, 'Adresse *') }}
                                                                {{ form_widget(form.address, { 'attr': {'class': 'form-control','required':true} }) }}
                                                                <div class="form-control-focus"></div>
                                                                <div class="red">
                                                                    {{ form_errors(form.address) }}
                                                                </div>
                                                            </div>

                                                            <div class="col-md-3 col-sm-12 col-xs-12">
                                                                {{ form_label(form.tel, 'Phone *') }}
                                                                {{ form_widget(form.tel, { 'attr': {'class': 'form-control','required':true} }) }}
                                                                <div class="form-control-focus"></div>
                                                                <div class="red">
                                                                    {{ form_errors(form.tel) }}
                                                                </div>
                                                            </div>

                                                            <div class="col-md-3 col-sm-12 col-xs-12">
                                                                {{ form_label(form.fax, 'Fax *') }}
                                                                {{ form_widget(form.fax, { 'attr': {'class': 'form-control','required':true} }) }}
                                                                <div class="form-control-focus"></div>
                                                                <div class="red">
                                                                    {{ form_errors(form.fax) }}
                                                                </div>
                                                            </div>

                                                        </div>

                                                        <div class="row">
                                                            <div class="col-md-6 col-sm-12 col-xs-12">
                                                                {{ form_label(form.email, 'Email *') }}
                                                                {{ form_widget(form.email, { 'attr': {'class': 'form-control','required':true} }) }}
                                                                <div class="form-control-focus"></div>
                                                                <div class="red">
                                                                    {{ form_errors(form.email) }}
                                                                </div>
                                                            </div>

                                                            <div class="col-md-6 col-sm-12 col-xs-12">
                                                                {{ form_label(form.sitWeb, 'Site Web *') }}
                                                                {{ form_widget(form.sitWeb, { 'attr': {'class': 'form-control','required':true} }) }}
                                                                <div class="form-control-focus"></div>
                                                                <div class="red">
                                                                    {{ form_errors(form.sitWeb) }}
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </div>
                                                    <div class="form-actions">
                                                        <div class="row">
                                                            <div class="col-md-offset-4 col-md-4">
                                                                <button type="submit" value=""
                                                                        class="col-md-8 btn submit">
                                                                    Créer Nouveau Compte
                                                                </button>
                                                                {#<button type="button" class="col-md-3 btn blue-chambray">Cancel</button>#}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- END FORM COMPTE -->
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 tab-pane">
                                    <div class="portlet box font-red-sunglo">
                                        <div class="portlet-title">
                                            <div class="caption">
                                                <i class="fa fa-gift"></i><span style="color: #a01616;">Formulaire Ajout Compte de facturation</span>
                                            </div>
                                            <div class="tools"></div>
                                        </div>
                                        <div class="portlet-body form">
                                            <!-- BEGIN FORM COMPTE -->

                                            <div class="form-horizontal" style="padding: 20px;">
                                                <div class="form-body facturation"
                                                     data-prototype2="{{ form_widget(form.compteFacturation.vars.prototype)|e('html_attr') }}">
                                                </div>
                                            </div>

                                            <!-- END FORM COMPTE -->
                                        </div>
                                    </div>
                                    <div class="portlet box font-red-sunglo">
                                        <div class="portlet-title">
                                            <div class="caption">
                                                <i class="fa fa-gift"></i><span style="color: #a01616;">Formulaire Ajout Département</span>
                                            </div>
                                            <div class="tools"></div>
                                        </div>
                                        <div class="portlet-body form">
                                            <!-- BEGIN FORM DEPARTEMENT -->

                                            <div class="form-horizontal" style="padding: 20px;">
                                                <div class="form-body departement"
                                                     data-prototype3="{{ form_widget(form.departement.vars.prototype)|e('html_attr') }}">
                                                </div>
                                            </div>

                                            <!-- END FORM DEPARTEMENT -->
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 tab-pane">
                                    <div class="portlet box font-red-sunglo">
                                        <div class="portlet-title">
                                            <div class="caption">
                                                <i class="fa fa-gift"></i><span style="color: #a01616;">Formulaire Ajout Utilisateur Compte</span>
                                            </div>
                                            <div class="tools"></div>
                                        </div>
                                        <div class="portlet-body form">
                                            <!-- BEGIN FORM USER COMPTE -->
                                            <div class="form-horizontal" style="padding: 20px;">
                                                <div class="form-body users"
                                                     data-prototype="{{ form_widget(form.Utilisateurs.vars.prototype)|e('html_attr') }}"></div>
                                            </div>
                                            <!-- END FORM USER COMPTE -->
                                        </div>
                                    </div>
                                </div>

                                {{ form_end(form) }}
                                <!-- End FORM-->
                            </div>

                        </div>
                    </div>
                </div>
                <!-- END PAGE HEADER-->

            </div>
            <!-- END CONTENT BODY -->
        </div>

    </div>
    <!-- END CONTENT -->
    </div>
    <!-- END CONTAINER -->

    <!-- BEGIN FOOTER -->
    <div class="page-footer">
        {% include 'commun/footer.html.twig' %}
    </div>
    <!-- END FOOTER -->
    </div>

    </div>

    {% block javascripts %}

        {{ parent() }}

        <!-- Gestion Utilisateurs -->
        <script>
            $(document).ready(function () {
                var $collectionHolder;
                var $addUsersLink = $('<a href="#" class="add_users_link"><i style="padding-left: 30%;" class="fa fa-plus"></i>Add Utilisateurs Compte</a>');
                var $newLinkLi = $("div.users").append($addUsersLink);
                jQuery(document).ready(function () {
                    $collectionHolder = $('div.users');
                    $collectionHolder.append($newLinkLi);
                    $collectionHolder.data('index', $collectionHolder.find(':input').length);
                    $addUsersLink.on('click', function (e) {
                        e.preventDefault();
                        addUsersForm($collectionHolder, $newLinkLi);
                    });
                });
            });

            function addUsersForm($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 = $('<div class="col-md-12" style="border: 1px solid #e7ecf1!important;padding: 15px;margin-bottom: 15px;"></div>').append(newForm);
                $newLinkLi.before($newFormLi);

                $("#millesima_administrator_compte_ajout_Utilisateurs_"+index+"_username").attr("required",false);
                $("#millesima_administrator_compte_ajout_Utilisateurs_"+index+"_plainPassword_first").attr("required",false);
                $("#millesima_administrator_compte_ajout_Utilisateurs_"+index+"_plainPassword_second").attr("required",false);

                $("#millesima_administrator_compte_ajout_Utilisateurs_"+index+"_username").closest('div').hide();
                $("#millesima_administrator_compte_ajout_Utilisateurs_"+index+"_plainPassword_first").closest('div').hide();
                $("#millesima_administrator_compte_ajout_Utilisateurs_"+index+"_plainPassword_second").closest('div').hide();

                addUsersFormDeleteLink($newFormLi);
            }

            function addUsersFormDeleteLink($tagFormLi) {
                var $removeFormA = $('<a class="btn btn-default" href="javascript:;" style="float: right;margin-top: -470px;"><i class="fa fa-trash"></i></a>');
                $tagFormLi.append($removeFormA);

                $removeFormA.on('click', function (e) {
                    e.preventDefault();
                    $tagFormLi.remove();
                });
            }
        </script>

        <!-- Gestion Compte de Facturation -->
        <script>
            $(document).ready(function () {
                var $collectionHolder;
                var $addFacturationLink = $('<a href="javascript:;" class="add_facturation_link"><i style="padding-left: 30%;" class="fa fa-plus"></i>Add Compte Facturation</a>');
                var $newLinkLi = $("div.facturation").append($addFacturationLink);
                jQuery(document).ready(function () {
                    $collectionHolder = $('div.facturation');
                    $collectionHolder.append($newLinkLi);
                    $collectionHolder.data('index', $collectionHolder.find(':input').length);
                    $addFacturationLink.on('click', function (e) {
                        e.preventDefault();
                        addFacturationForm($collectionHolder, $newLinkLi);
                    });
                });
            });

            function addFacturationForm($collectionHolder, $newLinkLi) {
                var prototype = $collectionHolder.data('prototype2');
                var index = $collectionHolder.data('index');
                var newForm = prototype.replace(/__name__/g, index);
                $collectionHolder.data('index', index + 1);
                var $newFormLi = $('<div class="col-md-12" style="border: 1px solid #e7ecf1!important;padding: 15px;margin-bottom: 15px;"></div>').append(newForm);
                $newLinkLi.before($newFormLi);
                /*$("#millesima_administrator_compte_ajout_compteFacturation_"+index+"_raisonSociale").css("width", "49%");
                $("#millesima_administrator_compte_ajout_compteFacturation_"+index+"_matriculeFiscale").css("width", "49%");
                $("#millesima_administrator_compte_ajout_compteFacturation_"+index+"_matriculeFiscale").css("float", "right");
                $("#millesima_administrator_compte_ajout_compteFacturation_"+index+"_matriculeFiscale").css("margin-top", "-24px");
                console.log(index);*/
                addFacturationFormDeleteLink($newFormLi);
            }

            function addFacturationFormDeleteLink($tagFormLi) {
                var $removeFormA = $('<a class="btn btn-default" href="javascript:;" style="float: right;margin-top: -128px;"><i class="fa fa-trash"></i></a>');
                $tagFormLi.append($removeFormA);

                $removeFormA.on('click', function (e) {
                    e.preventDefault();
                    $tagFormLi.remove();
                });
            }
        </script>

        <!-- Gestion Departement -->
        <script>
            $(document).ready(function () {
                var $collectionHolder;
                var $addDepartementLink = $('<a href="javascript:void(0)" class="add_departement_link"><i style="padding-left: 30%;" class="fa fa-plus"></i>Add Departement</a>');
                var $newLinkLi = $("div.departement").append($addDepartementLink);
                jQuery(document).ready(function () {
                    $collectionHolder = $('div.departement');
                    $collectionHolder.append($newLinkLi);
                    $collectionHolder.data('index', $collectionHolder.find(':input').length);
                    $addDepartementLink.on('click', function (e) {
                        e.preventDefault();
                        addDepartementForm($collectionHolder, $newLinkLi);
                    });
                });
            });

            function addDepartementForm($collectionHolder, $newLinkLi) {
                var prototype = $collectionHolder.data('prototype3');
                var index = $collectionHolder.data('index');
                var newForm = prototype.replace(/__name__/g, index);
                $collectionHolder.data('index', index + 1);
                var $newFormLi = $('<div class="col-md-12" style="border: 1px solid #e7ecf1!important;padding: 15px;margin-bottom: 15px;"></div>').append(newForm);
                $newLinkLi.before($newFormLi);
                addDepartementFormDeleteLink($newFormLi);
            }

            function addDepartementFormDeleteLink($tagFormLi) {
                var $removeFormA = $('<a class="btn btn-default" href="javascript:;" style="float: right;margin-top: -70px;"><i class="fa fa-trash"></i></a>');
                $tagFormLi.append($removeFormA);

                $removeFormA.on('click', function (e) {
                    e.preventDefault();
                    $tagFormLi.remove();
                });
            }
        </script>

    {% endblock %}

{% endblock %}