{% extends '::base2.html.twig' %}
{% block title %}Compte {{ compte.raisonSociale }}{% endblock %}
{% block stylesheets %}{{ parent() }}{% endblock %}

{% block body %}

<div class="page-wrapper">
    <!-- BEGIN HEADER -->
    <div class="page-header navbar navbar-fixed-top">
        {% include 'account_executive/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 'account_executive/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_account_executive_accueil') }}">Mes Comptes</a>
                            <i class="fa fa-circle"></i>
                        </li>
                        <li>
                            <a href="{{ path('millesima_account_executive_compte_consulter', {'id' : compte.id}) }}">Compte {{ compte.raisonSociale }}</a>
                            <i class="fa fa-circle"></i>
                        </li>
                        <li>
                            <a href="#">Ajouter Fournisseur</a>
                        </li>
                    </ul>
                </div>
                <!-- END PAGE BAR -->

                <!-- BEGIN PAGE TITLE-->
                <h1 class="page-title" style="padding-left: 15px;"> Gestion des fournisseurs du {{ compte.raisonSociale }}
                    <small>Affectation</small>
                </h1>
                <!-- END PAGE TITLE-->

                <!-- BEGIN PAGE HEADER-->
                <div class="row">
                    <input hidden id="compteId" id-compte="{{ compte.id }}">

                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-xs-5">
                                <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
                                    {% for fournisseur in fournisseursNAF %}
                                        <option value="{{ fournisseur.id }}">{{ fournisseur.nom }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-xs-2">
                                <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
                                <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
                                <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
                                <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
                            </div>

                            <div class="col-xs-5">
                                <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple">
                                    {% for fournisseur in fournisseursAF %}
                                        <option value="{{ fournisseur.id }}">{{ fournisseur.nom }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END PAGE HEADER-->

                <!-- BEGIN PAGE FOOTER-->
                <div class="row">
                    <br><br>
                    <div class="col-md-offset-4 col-md-6">
                        <a href="{{ path('millesima_account_executive_accueil') }}">
                            <button type="submit" value="" style="background-color: #a01616;color: white;" class="col-md-8 btn">
                                Retour à mes comptes
                            </button>
                        </a>
                    </div>
                </div>
                <!-- END PAGE FOOTER-->

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

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

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

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

        <script type="text/javascript">
            $(document).ready(function($) {
                $('#multiselect').multiselect();
            });
        </script>

        <script type="text/javascript">
            $('#multiselect_rightAll').click(function () {
                var multiselectIds = $("#multiselect option").map(function () {
                    return $(this).val();
                }).toArray();
                var $data_string = JSON.stringify(multiselectIds);
                console.log($data_string);
                var URL1 = Routing.generate('millesima_account_executive_compte_affecter_fournisseur_add', {
                    'id': $("#compteId").attr('id-compte'),
                    'data_string': $data_string,
                });
                var request = $.ajax({
                    url: URL1,
                    method: "POST",
                }).done(function () {
                    alert("success");
                }).fail(function (jqXHR, textStatus) {
                    alert("error");
                    console.log(textStatus);
                });
            });

            $('#multiselect_rightSelected').click(function () {
                var $data_string = JSON.stringify($("#multiselect").val());
                console.log($data_string);
                var URL2 = Routing.generate('millesima_account_executive_compte_affecter_fournisseur_add', {
                    'id': $("#compteId").attr('id-compte'),
                    'data_string': $data_string,
                });
                var request = $.ajax({
                    url: URL2,
                    method: "POST",
                }).done(function () {
                    alert("success");
                }).fail(function (jqXHR, textStatus) {
                    alert("error");
                    console.log(textStatus);
                });
            });

            $('#multiselect_leftAll').click(function () {
                var multiselectIds = $("#multiselect_to option").map(function () {
                    return $(this).val();
                }).toArray();
                var $data_string = JSON.stringify(multiselectIds);
                console.log($data_string);
                var URL3 = Routing.generate('millesima_account_executive_compte_affecter_fournisseur_delete', {
                    'id': $("#compteId").attr('id-compte'),
                    'data_string': $data_string,
                });
                var request = $.ajax({
                    url: URL3,
                    method: "POST",
                }).done(function () {
                    alert("success");
                }).fail(function (jqXHR, textStatus) {
                    alert("error");
                    console.log(textStatus);
                });
            });

            $('#multiselect_leftSelected').click(function () {
                var $data_string = JSON.stringify($("#multiselect_to").val());
                console.log($data_string);
                var URL4 = Routing.generate('millesima_account_executive_compte_affecter_fournisseur_delete', {
                    'id': $("#compteId").attr('id-compte'),
                    'data_string': $data_string,
                });
                var request = $.ajax({
                    url: URL4,
                    method: "POST",
                }).done(function () {
                    alert("success");
                }).fail(function (jqXHR, textStatus) {
                    alert("error");
                    console.log(textStatus);
                });
            });
        </script>
    {% endblock %}

{% endblock %}