{% extends "base.html.twig" %}

{% block localstyle %}
    td {
        padding:5px !important;
    }
    {% if fgprint is defined and fgprint %}
        table { font-size:10px;}
        th,td {
            border: 1px solid #37474F;
        }
        thead {
	        display: table-header-group;
        }
        tr { page-break-inside: avoid; }        
    {%endif%}

{% endblock %}

{% block body %}
    <h1 class="page-header">
    PROJET METIERS<br>
    {{project.displayname}}
    </h1>

    <a class="btn btn-secondary" href={{ path('app_project') }}>Fermer</a>

    <p></p>

    <div class="row" style="margin: 0px">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-table fa-fw"></i> Utilisateurs
                </div>

                <div class="card-body">
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover small" id="dataTables" style="width:100%">
                            <thead>
                            <tr>
                                <th width="70px" class="no-sort no-print">Action</th>
                                <th>Nom</th>
                            </tr>
                            </thead>
                            <tbody>
                                {%for user in users %}
                                    {% if "ROLE_USER" in user.roles %}
                                        <tr>
                                            <td class="no-print">
                                                <button class="btn btn-link" onClick="modalJob({{user.id}})"><i class="fa fa-plus"></i></a>
                                            </td>

                                            <td>{{user.displayname}}</td>
                                        </tr>
                                    {% endif %}
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            {% for userproject in userprojects %}
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-table fa-fw"></i> {{ userproject.name }}
                    </div>

                    <div class="card-body">
                        <div class="dataTable_wrapper">
                            <table class="table table-striped table-bordered table-hover small" id="dataTables" style="width:100%">
                                <thead>
                                <tr>
                                    <th width="70px" class="no-sort no-print">Action</th>
                                    <th>Nom</th>
                                </tr>
                                </thead>
                                <tbody>
                                    {%for user in userproject.users %}
                                        <tr>
                                            <td class="no-print">
                                                <button class="btn btn-link" onClick="delJob({{user.id}})"><i class="fa fa-minus"></i></a>
                                            </td>

                                            <td>{{user.user.displayname}}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <br>
            {% endfor %}

        </div>
    </div>

    <div id="modaljob" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Métier</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                
                <div class="modal-body">
                    <button onClick="addJob()" class="btn btn-success">Valider</button>
                    <button onClick="" class="btn btn-secondary" data-dismiss="modal">Annuler</button>

                    <p></p>
                    <div class="form-group">
                        <label class="control-label required" for="idjob">
                            Métier<span class="mandatory">*</span>
                        </label>
                        <select class="select2entity" id="idjob" name="idjob">
                            <option></option>
                            {% for job in jobs %}
                                <option value="{{job.id}}">{{job.name}}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <input type="hidden" id="iduser" name="iduser" class="form-control" value="">
                </div>            
            </div>
        </div>
    </div>

{% endblock %}

{% block localjavascript %}
    $(document).ready(function() {
        {% if not fgprint is defined or not fgprint %}
            $('.table').DataTable({
                columnDefs: [ { "targets": "no-sort", "orderable": false }, { "targets": "no-string", "type" : "num" } ],
                responsive: true,
                iDisplayLength: 100,
                order: [[ 1, "asc" ]],
                searching: false,
                paging: false,
                info: false
            });
        {%else%}
            $('#dataTables').removeClass("table table-striped table-bordered table-hover small dataTable no-footer");        
        {% endif %}
    });

    function modalJob(iduser) {
        $("#iduser").val(iduser);
        $("#modaljob .alert").remove();
        $("#modaljob").modal('show');
    }

    function addJob() {
        $("#modaljob .alert").remove();

        iduser=$("#iduser").val();
        idjob=$("#idjob").val();
        if(idjob) {
            $.ajax({                                                            
                type: "POST",
                data: {
                    idproject: {{project.id}},
                    idjob:  idjob,
                    iduser: iduser,
                },
                url: "{{ path('app_project_users_add') }}",
                success: function (response) {
                    response=JSON.parse(response);
                    if(response.return=="KO") {
                        $("#modaljob .modal-body").append("<div class='alert alert-danger' style='margin: 5px 0px'>"+response.error+"</div>");
                    }
                    else {
                        location.reload();
                    }
                }
            });            
        }
    }

    function delJob(iduser) {
        $.ajax({                                                            
            type: "POST",
            data: {
                iduser: iduser,
            },
            url: "{{ path('app_project_users_del') }}",
            success: function (response) {
                response=JSON.parse(response);
                if(response.return=="KO") {
                }
                else {
                    location.reload();
                }
            }
        });            
    }

    function myprint() {
        href=document.location.href;
        document.location.href=href+"?fgprint=true";
    }    

{% endblock %}