{% extends '::base2.html.twig' %}
{% block title %}Gestion des Comptes - Edit{% endblock %}
{% set nombre_user =  0 %}
{% block stylesheets %}{{ parent() }}
    <style>
        .form-body .row {
            padding-bottom: 0px !important;
        }

        .row {
            margin-left: -20px !important;
            margin-right: -20px !important;
        }

        .delete-element {
            border: 1px solid #e7ecf1 !important;
            padding: 15px;
            margin-bottom: 15px;
        }

    </style>{% 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/menuCompte.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="{{ path('millesima_administrator_compte_liste') }}">Gestion des Comptes</a>
                            <i class="fa fa-circle"></i>
                        </li>
                        <li>
                            <a href="{{ path('millesima_administrator_compte_edit', {'id' : compte.id}) }}">Modifier
                                un
                                Compte</a>
                        </li>
                    </ul>
                </div>
                <!-- END PAGE BAR -->

                <!-- BEGIN PAGE TITLE-->
                <h1 class="page-title"> Compte {{ compte.raisonSociale }}
                    <small>Edit</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_edit', {'id' : compte.id}) }) }}

                            <div class="portlet light bordered">
                                <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>

                                                    <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>

                                                    <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>

                                                </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>

                                                    <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>

                                                    <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>

                                                </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>

                                                    <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>
                                                </div>

                                            </div>
                                            <div class="form-actions">
                                                <div class="row">
                                                    <div class="col-md-offset-4 col-md-12">
                                                        <button type="submit" value="" class="col-md-3 btn submit">
                                                            Modifier Compte
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- END FORM COMPTE -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 tab-pane" style="padding-left: 2px;">
                                <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 Facturation</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 facturation" data-prototype="{{ form_widget(form.compteFacturation.vars.prototype)|e('html_attr') }}">
                                                {% for facturationCP in form.compteFacturation %}
                                                    <div class="row" {% if loop.index == 1 %} style="margin-top: -20px;" {% endif %}>
                                                        <div class="col-md-12"
                                                             style="border: 1px solid #e7ecf1!important;padding: 15px;margin-bottom: 15px;">
                                                            <div id="millesima_administrator_compte_ajout_compteFacturation_4">
                                                                <div>
                                                                    <label class="control-label">Raison Sociale</label>
                                                                    {{ form_widget(facturationCP.raisonSociale, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                </div>
                                                                <div>
                                                                    <label class="control-label">Matricule
                                                                        Fiscale</label>
                                                                    {{ form_widget(facturationCP.matriculeFiscale, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                </div>
                                                            </div>
                                                            <a class="btn btn-default"
                                                               style="float: right;margin-top: -133px;"><i
                                                                        class="fa fa-trash"></i></a>
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>

                                    </div>
                                    <!-- END FORM USER COMPTE -->
                                </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-prototype="{{ form_widget(form.departement.vars.prototype)|e('html_attr') }}">
                                                {% for dep in form.departement %}
                                                    <div class="row" {% if loop.index == 1 %} style="margin-top: -20px;" {% endif %}>
                                                        <div class="col-md-12"
                                                             style="border: 1px solid #e7ecf1!important;padding: 15px;margin-bottom: 15px;">
                                                            <div id="millesima_administrator_compte_ajout_departement_{{ loop.index - 1 }}">
                                                                <div>
                                                                    <label class="control-label">Nom département</label>
                                                                    {{ form_widget(dep.nom, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                </div>
                                                            </div>
                                                            <a class="btn btn-default"
                                                               style="float: right;margin-top: -70px;">
                                                                <i class="fa fa-trash"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        <!-- END FORM DEPARTEMENT -->
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 tab-pane" style="padding-right: 2px;">
                                <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;" id="form-users">
                                            <div class="form-body users" data-prototype="{{ form_widget(form.Utilisateurs.vars.prototype)|e('html_attr') }}">
                                                {% for user in form.Utilisateurs %}
                                                    {% set nombre_user =  nombre_user +1 %}
                                                    <div class="row" id="user_{{ loop.index }}">
                                                        <div class="col-md-12" style="border: 1px solid #e7ecf1!important;padding: 15px;margin-bottom: 15px;">
                                                            <div id="millesima_administrator_compte_ajout_Utilisateurs_{{ loop.index - 1 }}" class="user-element">
                                                                <div class="row">
                                                                    <div class="col-md-12">
                                                                        <p>
                                                                            Mr {{ form_widget(user.civility[0], { 'attr': {'class': 'flat','required':false} }) }}
                                                                            Mme {{ form_widget(user.civility[1], { 'attr': {'class': 'flat','required':false} }) }}
                                                                            {{ form_errors(user.civility) }}
                                                                        </p>
                                                                    </div>
                                                                    <div>
                                                                        <div class="col-md-12">
                                                                            <label class="control-label">Nom</label>
                                                                            {{ form_widget(user.firstname, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                        </div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="col-md-12">
                                                                            <label class="control-label">Prenom</label>
                                                                            {{ form_widget(user.lastname, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                        </div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="col-md-12">
                                                                            <label class="control-label">Role</label>
                                                                            {{ form_widget(user.function, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                        </div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="col-md-12">
                                                                            <label class="control-label">Email</label>
                                                                            {{ form_widget(user.email, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                        </div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="col-md-12">
                                                                            <label class="control-label">Mobile</label>
                                                                            {{ form_widget(user.phone_number, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                        </div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="col-md-12">
                                                                            <label class="control-label">Tel</label>
                                                                            {{ form_widget(user.tel_number, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                        </div>
                                                                    </div>
                                                                    <div>
                                                                        <div class="col-md-12">
                                                                            <label class="control-label">Photo</label>
                                                                            {{ form_widget(user.path, { 'attr': {'class': 'form-control','required':false} }) }}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            </div>
                                                        {% if loop.last %}
                                                            <input class="userCount" hidden
                                                                   data-user="{{ loop.length }}"/>
                                                        {% endif %}
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        <!-- END FORM USER COMPTE -->
                                    </div>
                                </div>
                            </div>

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

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

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

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

    {% block javascripts %}
        {{ parent() }}

        <!-- Gestion Utilisateurs -->
        <script>
            $(document).ready(function () {
                $("#millesima_administrator_compte_ajout_Utilisateurs div label").hide();
                for (var i = 0; i < $('.userCount').attr('data-user'); i++) {
                    $("#millesima_administrator_compte_ajout_Utilisateurs_" + i + "_username").attr("required", false);
                    $("#millesima_administrator_compte_ajout_Utilisateurs_" + i + "_plainPassword_first").attr("required", false);
                    $("#millesima_administrator_compte_ajout_Utilisateurs_" + i + "_plainPassword_second").attr("required", false);

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

                var $collectionHolder;
                var $addUsersLink = $('<i style="padding-left: 30%;" class="fa fa-plus"></i><a class="add_users_link">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) {
                        // prevent the link from creating a "#" on the URL
                        e.preventDefault();
                        addUsersForm($collectionHolder, $newLinkLi);
                    });
                    i = 1;
                    $('.users').children('div div div').each(function (){
                        addUsersFormEditDeleteLink($(this),i);
                        i++;
                    });
                });
            });

            function addUsersForm($collectionHolder, $newLinkLi) {
                index_user = {{ nombre_user }};
                index_user_n = index_user + 1;
                var index = $collectionHolder.data('index');
                var prototype = $collectionHolder.data('prototype');
                var newForm = prototype.replace(/__name__/g, index);
                $collectionHolder.data('index', index + 1);
                var $newFormLi = $('<div class="row" id="user_' + index_user_n + '" style="border: 1px solid #e7ecf1!important;padding: 15px;margin-bottom: 15px;"> <div class="col-md-12"></div></div>').append(newForm);
                var h = $("#form-users").height();
                h += 700;
                $('#form-users').css({'height': h});
                $('#user_' + index_user).after($newFormLi);

                $("#millesima_administrator_compte_ajout_Utilisateurs_" + index + "_username").attr("required", false).addClass('form-control');
                $("#millesima_administrator_compte_ajout_Utilisateurs_" + index + "_plainPassword_first").attr("required", false).addClass('form-control');
                $("#millesima_administrator_compte_ajout_Utilisateurs_" + index + "_plainPassword_second").attr("required", false).addClass('form-control');

                //$("#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, index);
            }

            function addUsersFormDeleteLink($tagFormLi, index) {
                var $removeFormA = $('<a class="btn btn-default" style="float: right;margin-top: -633px;"><i class="fa fa-trash"></i></a>');
                $tagFormLi.append($removeFormA);
                $removeFormA.on('click', function (e) {
                    e.preventDefault();
                    $tagFormLi.remove();
                    var h = $("#form-users").height();
                    h -= 650;
                    $('#form-users').css({'height': h});
                });
            }

            function addUsersFormEditDeleteLink($tagFormLi, index) {
                var $removeFormA = $('<a class="btn btn-default" style="float: right; margin-top: -498px;margin-right: 12px;"><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 = $('<i style="padding-left: 30%;" class="fa fa-plus"></i><a class="add_facturation_link">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('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);

                addFacturationFormDeleteLink($newFormLi);
            }

            function addFacturationFormDeleteLink($tagFormLi) {
                var $removeFormA = $('<a class="btn btn-default" 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 = $('<i style="padding-left: 30%;" class="fa fa-plus"></i><a href="#" class="add_departement_link">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('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 delete-element"></div>').append(newForm);
                $newLinkLi.before($newFormLi);

                addDepartementFormDeleteLink($newFormLi);
            }

            function addDepartementFormDeleteLink($tagFormLi) {
                var $removeFormA = $('<a href="#" class="btn btn-default" style="float: right;margin-top: -72px;"><i class="fa fa-trash"></i></a>');
                $tagFormLi.append($removeFormA);
                $removeFormA.on('click', function (e) {
                    alert('sdsdsdd');
                    e.preventDefault();
                    $tagFormLi.remove();
                });
            }
        </script>

    {% endblock %}

{% endblock %}