{% extends '::base2.html.twig' %}
{% block title %}Gestion des Comptes - Liste{% 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>
                            </li>
                        </ul>
                    </div>
                    <!-- END PAGE BAR -->

                    <!-- BEGIN PAGE TITLE-->
                    <h1 class="page-title"> Liste des Comptes
                        <small>Tous</small>
                    </h1>
                    <!-- END PAGE TITLE-->

                    <!-- BEGIN PAGE HEADER-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="portlet light bordered">
                                <div class="portlet-title">

                                    {% include '@MillesimaActions/flashBag.html.twig' %}

                                    <div class="portlet-title" style="padding-bottom: 10px;">
                                        <a href="{{ path('millesima_administrator_compte_ajout') }}" class="btn add">
                                            <i class="icon-wallet"></i> Ajouter un nouveau Compte
                                        </a>
                                    </div>

                                    <div class="portlet-body" id="autoload-account-table">
                                    <div class="table-responsive" style="overflow: hidden">
                                        <table class="table" id="myTable">
                                            <thead>
                                            <tr>
                                                <th> Compte </th>
                                                <th> Contact </th>
                                                <th> Site Web </th>
                                                <th> Adresse </th>
                                                <th> Chargé de Compte</th>
                                                <th> Action</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% for compte in comptes %}
                                                <tr id-compte="{{ compte.id }}">
                                                    <td> {{ compte.raisonSociale }} </td>
                                                    <td>
                                                        <i class="fa fa-phone"></i>{{ compte.tel }} / <i class="fa fa-fax"></i>{{ compte.fax }}
                                                        <br>
                                                        <i class="fa fa-envelope"></i>{{ compte.email }}
                                                    </td>
                                                    <td> {{ compte.sitWeb }} </td>
                                                    <td> {{ compte.address }} </td>
                                                    <td>
                                                        {% if compte.status == 1 %}
                                                            <button type="button" class="btn-affect-edit btn green-steel btn-xs" data-toggle="modal" data-target="#affectation-edit-modal">
                                                                Affecté à {{ compte.chargeCompte.firstname }} {{ compte.chargeCompte.lastname }}
                                                            </button>
                                                        {% elseif compte.status == 2 %}
                                                            <button type="button" class="btn-affect-edit btn yellow-soft btn-xs" data-toggle="modal" data-target="#affectation-edit-modal">
                                                                Délégué à {{ compte.chefProjet.firstname }} {{ compte.chefProjet.lastname }}
                                                            </button>
                                                        {% else %}
                                                            <button type="button" class="btn grey-mint btn-xs btn-affect" data-toggle="modal" data-target="#affectation-modal">
                                                                Non Affecté
                                                            </button>
                                                            <!-- Modal Affectation -->
                                                            <div class="modal fade" id="affectation-modal" role="dialog">
                                                                <div class="modal-dialog">
                                                                    <!-- Modal content-->
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                                            <h4 class="modal-title">Affecter un chargé de compte</h4>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            <div id="loading"style=" text-align: center;"></div>
                                                                            <div class="row">
                                                                                <div class="col-md-offset-3 col-md-6">
                                                                                    <select class="form-control" id="select-box-charge">
                                                                                        <option value="0">-- Choisir un Chargé de Compte -- </option>
                                                                                        {% for user in users %}
                                                                                            <option value="{{ user.id }}">{{ user.firstname }} {{ user.lastname }}</option>
                                                                                        {% endfor %}
                                                                                    </select>
                                                                                </div>
                                                                            </div>

                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button class="btn green" id="btn-valide-affectation" id-compte="" id-cc="">
                                                                                Affecter
                                                                            </button>
                                                                        </div>

                                                                    </div>

                                                                </div>
                                                            </div>
                                                            <!-- End Modal Affectation -->
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        <button type="button" title="Time Line" class="btn grey-mint btn-xs btn-info" id-compte="" data-toggle="modal" data-target="#time-line-modal">
                                                            <i class="fa fa-history" aria-hidden="true"></i>
                                                        </button>
                                                        <a href="{{ path('millesima_administrator_compte_consult', {'id' : compte.id}) }}" class="btn green-seagreen btn-xs" title="Consulter" target="_blank">
                                                            <i class="fa fa-eye"></i>
                                                        </a>
                                                        {% if compte.status == 1 %}
                                                            <button type="button" title="Chargé de compte" class="btn grey-mint btn-xs btn-superviseur" id="superviseurC" data-toggle="modal" data-target="#superviseur-modal">
                                                                <i class="fa fa-user" aria-hidden="true"></i>
                                                            </button>
                                                            <button class="btn-deleguer btn green btn-xs" id="delegCP" data-toggle="modal" data-target="#delegation-modal" title="Déléguer">
                                                                <i class="fa fa-arrow-right"></i>
                                                            </button>
                                                        {% elseif compte.status == 2 %}
                                                            <button type="button" title="Chef de projet" class="btn grey-mint btn-xs btn-superviseur" id="superviseurC" data-toggle="modal" data-target="#superviseur-modal">
                                                                <i class="fa fa-user" aria-hidden="true"></i>
                                                            </button>
                                                            <button  class="btn-annuler-deleguer btn btn-danger btn-xs" id="delegCP" data-target="#delete-delegation" data-toggle="modal" title="Annuler">
                                                                <i class="fa fa-arrow-left"></i>
                                                            </button>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                            <!-- Modal Time Line -->
                                            <div class="modal fade" id="time-line-modal" role="dialog">
                                                <div class="modal-dialog">

                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                            <h4 class="modal-title">Compte Time Line</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="portlet light portlet-fit bordered" id="time_line_ajax_response"></div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <!-- End Modal Time Line -->
                                            <!-- Modal Superviseur -->
                                            <div class="modal fade" id="superviseur-modal" role="dialog">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                            <h4 class="modal-title">Chargé de compte Affecté</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div id="loading" style=" text-align: center;"></div>
                                                            <div class="row" id="ajax-reponse-superviseurC" id-compte=""></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- End Modal Superviseur -->
                                            <!-- Modal Affectation Edit -->
                                            <div class="modal fade" id="affectation-edit-modal" role="dialog">
                                                <div class="modal-dialog">
                                                    <!-- Modal content-->
                                                    <div class="modal-content">

                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                            <h4 class="modal-title">Modifier le chargé de compte Affecté</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div id="loading" style=" text-align: center;"></div>
                                                            <div class="row">
                                                                <div class="col-md-offset-3 col-md-6">
                                                                    <select class="form-control" id="select-box-cc-edit">
                                                                        <option value="0">-- Modifier Chargé de Compte --</option>
                                                                        {% for user in users %}
                                                                                <option value="{{ user.id }}">{{ user.firstname }} {{ user.lastname }}</option>

                                                                        {% endfor %}
                                                                    </select>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <div class="modal-footer">
                                                            <button class="btn dark btn-danger" id="btn-delete-affectation" id-compte="">
                                                                Supprimer
                                                            </button>
                                                            <button class="btn green" id="btn-edit-affectation" id-compte="" id-cc="">
                                                                Modifier
                                                            </button>
                                                        </div>

                                                    </div>
                                                    <!-- End Modal content-->
                                                </div>
                                            </div>
                                            <!-- End Modal Affectation Edit -->
                                            <!-- Modal Delegation -->
                                            <div class="modal fade" id="delegation-modal" role="dialog">
                                                <div class="modal-dialog">
                                                    <!-- Modal content-->
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                            <h4 class="modal-title">Délégation Compte</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div id="loading"style=" text-align: center;"></div>
                                                            <div class="row">
                                                                <div class="col-md-offset-3 col-md-6">
                                                                    <select class="form-control" id="select-box-cc">
                                                                        <option value="0">-- Choisir un Chef de projet -- </option>
                                                                        {% for user in chefProjet %}
                                                                            <option value="{{ user.id }}">{{ user.firstname }} {{ user.lastname }}</option>
                                                                        {% endfor %}
                                                                    </select>
                                                                </div>
                                                            </div>

                                                        </div>
                                                        <div class="modal-footer">
                                                            <button class="btn green" id="btn-delegation" id-compte="" id-cp="">
                                                                Déléguer
                                                            </button>
                                                        </div>

                                                    </div>

                                                </div>
                                            </div>
                                            <!-- End Modal Delegation -->
                                            <!-- Modal Delegation Delete -->
                                            <div id="delete-delegation" class="modal fade bs-delete-modal-sm" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                                <div class="modal-dialog modal-md">
                                                    <div class="modal-content">

                                                        <div class="modal-header">
                                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                                            <h4 class="modal-title">Annuler Délégation Compte</h4>
                                                        </div>
                                                        <div class="modal-body">
                                                            <p>
                                                                Actuellement, <b style="color: #0a6aa1;"> Mr  </b> a le droit de gérer les nouveaux dossiers de ce compte.
                                                                Voulez-vous vraiment retirer ce droit?
                                                            </p>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button class="btn green" id="btn-delete-delegation" id-compte="">
                                                                Annuler Délégation
                                                            </button>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <!-- End Modal Delegation Delete -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END PAGE HEADER-->

                </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>
            //Time Line
            $("button.btn-info").click(function (){
                $("button.btn-info").attr('id-compte', $(this).closest('tr').attr('id-compte'));
                console.log($("button.btn-info").attr('id-compte'));
                var URL = Routing.generate('millesima_administrator_compte_time_line', {
                    'id' : $("button.btn-info").attr('id-compte'),
                } );
                {% set loading =  asset('back/assets/global/img/ajax-loading.gif')  %}
                $("#time_line_ajax_response").html("<img src = '{{ loading }}' />");
                var request = $.ajax({
                    url: URL,
                    method: "POST",
                }).done(function (msg) {
                    $("#time_line_ajax_response").html(msg);
                }).fail(function (jqXHR, textStatus) {
                    console.log(JSON.stringify(jqXHR));
                    console.log(textStatus);
                });

            });

            //Recuperation Superviseur
            $("button.btn-superviseur").click(function () {
                $("div#ajax-reponse-superviseurC").attr('id-compte', $(this).closest('tr').attr('id-compte'));
                console.log($("div#ajax-reponse-superviseurC").attr('id-compte'));
                var URL = Routing.generate('millesima_administrator_compte_superviseur', {
                    'id' : $("div#ajax-reponse-superviseurC").attr('id-compte'),
                } );
                {% set loading =  asset('back/assets/global/img/ajax-loading.gif')  %}
                $("div#ajax-reponse-superviseurC").html("<img src = '{{ loading }}' />");
                var request = $.ajax({
                    url: URL,
                    method: "POST",
                }).done(function (msg) {
                    $("div#ajax-reponse-superviseurC").html(msg);
                }).fail(function (jqXHR, textStatus) {
                    console.log(JSON.stringify(jqXHR));
                    console.log(textStatus);
                });
            });
        </script>

        <script>
            //Recuperation Id Compte
            $("button.btn-affect").click(function () {
                $("button#btn-valide-affectation").attr('id-compte', $(this).closest('tr').attr('id-compte'));
                //Affectation Compte
                $("#btn-valide-affectation").click(function () {
                    $("button#btn-valide-affectation").attr('id-cc', ($("select#select-box-charge").val()));
                    var id_compte = $("button#btn-valide-affectation").attr('id-compte');
                    var id_cc = $("button#btn-valide-affectation").attr('id-cc');
                    //Ajax request
                    var c = '<img src="{{ asset('back/loader.gif') }}"/>';
                    $('#loading').html(c);
                    $.ajax("../compte/" + id_compte + "/" + id_cc + "/affectation")
                        .done(function () {
                            location.reload();
                        })
                        .fail(function () {
                        });
                });
            });
            $("button.btn-affect-edit").click(function () {
                $("button#btn-edit-affectation").attr('id-compte', $(this).closest('tr').attr('id-compte'));
                $("button#btn-delete-affectation").attr('id-compte', $(this).closest('tr').attr('id-compte'));
            });
            $("button#delegCP").click(function () {
                $("button#btn-delegation").attr('id-compte', $(this).closest('tr').attr('id-compte'));
                $("button#btn-delete-delegation").attr('id-compte', $(this).closest('tr').attr('id-compte'));
            });

            //Edit Affectation Compte
            $("button#btn-edit-affectation").click(function () {
                $("button#btn-edit-affectation").attr('id-cc', ($("select#select-box-cc-edit").val()));
                var id_compte = $("button#btn-edit-affectation").attr('id-compte');
                var id_cc = $("button#btn-edit-affectation").attr('id-cc');
                //Ajax request
                var cc = '<img src="{{ asset('back/loader.gif') }}"/>';
                $('#loading').html(cc);
                $.ajax("../compte/affectation/" + id_compte + "/" + id_cc + "/edit")
                        .done(function () {
                            location.reload();
                        })
                        .fail(function (jqXHR) {
                            console.log(JSON.stringify(jqXHR));
                        });
            });

            //Delete Affectation Compte
            $("button#btn-delete-affectation").click(function () {
                var id_compte = $("button#btn-delete-affectation").attr('id-compte');
                console.log($("button#btn-delete-affectation").attr('id-compte'));
                //Ajax request
                var cc = '<img src="{{ asset('back/loader.gif') }}"/>';
                $('#loading').html(cc);
                $.ajax("../compte/affectation/" + id_compte + "/delete")
                        .done(function () {
                            location.reload();
                        })
                        .fail(function (jqXHR) {
                            console.log(JSON.stringify(jqXHR));
                        });
            });

            //Delegation Compte
            $("#btn-delegation").click(function () {
                $("button#btn-delegation").attr('id-cp', ($("select#select-box-cc").val()));
                var id_c = $("button#btn-delegation").attr('id-compte');
                var id_cp = $("button#btn-delegation").attr('id-cp');
                console.log($("button#btn-delegation").attr('id-compte'));
                console.log($("button#btn-delegation").attr('id-cp'));
                //Ajax request
                var c = '<img src="{{ asset('back/loader.gif') }}"/>';
                $('#loading').html(c);
                $.ajax("../compte/deleguation/" + id_c + "/" + id_cp )
                        .done(function () {
                            location.reload();
                        })
                        .fail(function (jqXHR) {
                            console.log(JSON.stringify(jqXHR));
                        });
            });

            //Delete Delegation Compte
            $("#btn-delete-delegation").click(function () {
                var id_c = $("button#btn-delete-delegation").attr('id-compte');
                console.log($("button#btn-delete-delegation").attr('id-compte'));
                //Ajax request
               var c = '<img src="{{ asset('back/loader.gif') }}"/>';
                $('#loading').html(c);
                $.ajax("../compte/delete/deleguation/" + id_c )
                        .done(function (msg) {
                            location.reload();
                        })
                        .fail(function (jqXHR) {
                            console.log(JSON.stringify(jqXHR));
                        });
            });
        </script>

    {% endblock %}

{% endblock %}