{% extends 'Backoffice/base.html.twig' %}

{% block activeLiPartenaire %}class="active"{% endblock %}
{% block activePartenaire %}class="active"{% endblock %}
{% block body %}
    <section class="vbox">
        <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li><a href=""><i class="fa fa-home"></i> Tableau de board</a></li>
                <li class="active">Partenaires</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Partenaires</h3>
            </div>

            <div class="row">
                <div class="col-lg-8">
                </div>
                <div class="col-lg-4 text-right">
                    <a href="#" class="btn btn-info btn-rounded btn-fw"  data-toggle='modal' data-target='#myModal'>Nouveau partenaire</a>
                </div>
            </div>

            {% if response != "" %}
                {% if response == "OK" %}
                    <div class="alert alert-success">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <i class="fa fa-ok-sign"></i><strong>OK !</strong> Information enregistrée</a>.
                    </div>
                {% else %}
                    <div class="alert alert-danger">
                        <button type="button" class="close" data-dismiss="alert">&times;</button>
                        <i class="fa fa-ban-circle"></i><strong>Erreur !</strong> {{ response }}
                    </div>
                {% endif %}
            {% endif %}


            <section class="panel panel-default">
                <header class="panel-heading">
                    Liste partenaires
                    <i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i>
                </header>
                <div class="table-responsive">
                    <table class="table table-striped m-b-none" data-ride="datatables">
                        <thead>
                        <tr>
                            <th width="30%">Logo</th>
                            <th width="30%">Titre</th>
                            <th width="30%">Site</th>
                            <th width="10%"></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for p in partenaires %}
                            <tr>
                                <td><img src="{{ asset(p.logo) }}" style="max-height: 80px;" /></td>
                                <td>{{ p.titre }}</td>
                                <td>{{ p.site }}</td>
                                <td>
                                    <button type="button" class="btn btn-sm btn-danger" onclick="deletePartenaire({{ p.id }})">Supprimer</button>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
        </section>
    </section>

    <form role="form" method="POST" enctype="multipart/form-data">
        <div id="myModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" role="dialog">
            <div class="modal-dialog " style="width: 90% !important;">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Nouveau partenaire</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div id="response" style="margin-top: 10px;">

                    </div>
                    <div class="modal-body">

                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                    <dib class="col-lg-12">
                                        <div class="form-group">
                                            <label>Titre</label>
                                            <input type="text" class="form-control" placeholder="Titre" id="titreFr" name="titre">
                                        </div>
                                        <div class="form-group">
                                            <label>Site web</label>
                                            <input type="text" class="form-control" placeholder="Titre" id="titreFr" name="site">
                                        </div>
                                    </dib>
                                </div>
                                <div class="row">
                                    <dib class="col-lg-12">
                                        <div class="form-group">
                                            <label>Logo : (200x200px)</label>
                                            <input id="file-fr" name="file" type="file" class="form-control">
                                        </div>
                                    </dib>
                                </div>
                            </div>
                            <!-- /.panel-body -->
                        </div>


                        <button type="submit" class="btn btn-success">Enregistrer</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Annuler</button>

                        <!-- /.panel-body -->

                    </div>

                </div>

            </div>
        </div>
    </form>

{% endblock %}
{% block js %}
    <script type="text/javascript">



        function deletePartenaire(id){
            noty({
                text: "Etes vous sûr de vouloir supprimer le partenaire ?",
                type: 'confirm',
                theme: 'relax',
                layout: 'center',
                animation: {
                    open: 'animated bounceInDown',
                    close: 'animated bounceOutUp', // jQuery animate function property object
                    easing: 'swing', // easing
                    speed: 200 // opening & closing animation speed
                },
                buttons     : [
                    {addClass: 'btn btn-primary', text: 'Oui', onClick: function ($noty) {
                        var url = '/deletePartenaire/?id='+id;
                        $(".fadeMe").css("visibility","visible").animate({opacity: 0.7}, 200);
                        $.ajax({
                            type: 'get',
                            url: url,
                            success: function(data){
                                if(data=="OK"){
                                    window.location.href=window.location.href;
                                    //window.location.reload();
                                }
                                else{
                                    errorMsg("une erreur s'est produite");
                                    $('.fadeMe').animate({opacity: 0.0}, 900,setInvisible);
                                }


                            }
                        });

                        $noty.close();


                    }
                    },
                    {addClass: 'btn btn-danger', text: 'Non', onClick: function ($noty) {
                        $noty.close();

                    }
                    }
                ]
            });
        }

        function errorMsg(message) {
            noty({
                text: message,
                type: 'error',
                theme: 'relax',
                layout: 'topCenter',
                animation: {
                    open: 'animated bounceInDown',
                    close: 'animated bounceOutUp', // jQuery animate function property object
                    easing: 'swing', // easing
                    speed: 200 // opening & closing animation speed
                }
            });
        }
    </script>
{% endblock %}