{% extends 'base_backend.html.twig' %}
{% block nombreMessage %}{{ nbrMsg }}{% endblock %}

{% block body %}

    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2> <strong>Services</strong> </h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{{ path('homeback') }}">Accueil</a>
                </li>
                <li>
                    <a href="{{ path('services') }}">Gestion des publicités</a>
                </li>
                <li class="active">
                    <strong>Service</strong>
                </li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="wrapper wrapper-content animated fadeInUp">

                <div class="ibox">
                    <div class="ibox-title">
                        <h5>Liste des publicités</h5>
                        <div class="ibox-tools">
                            <a href="#" class="btn btn-primary btn-sm " data-toggle="modal" data-target="#myModal">Nouvelle publicité</a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row m-b-sm m-t-sm">
                            <div class="col-md-1">
                                <button type="button" id="loading-example-btn" class="btn btn-white btn-sm" ><i class="fa fa-refresh"></i> Actualisé</button>
                            </div>
                            <div class="col-md-11">

                            </div>
                        </div>

                        <div class="project-list">

                            <table class="table table-hover">
                                <tbody>
                                <tr>
                                    <td class="project-title">
                                        <a href="#" style="float: right">Image</a>
                                    </td>
                                    <td class="project-title">
                                        <a href="#" style="float: right">Nom</a>
                                    </td>
                                    <td class="project-title">
                                        <a href="#" style="float: right">Action</a>
                                    </td>
                                </tr>
                                {% for r in services %}
                                    <tr>

                                        <td class="project-people">
                                            <a href="#"><img alt="image" class="img-circle" src="{{ asset(imagepath ~ r.image ) }}"></a>
                                        </td>
                                        <td class="project-title">
                                            <a href="#" style="float: right">{{ r.nom }}</a>
                                        </td>
                                        <td class="project-actions" >
                                            {% if r.image2=='0' %}
                                            <a href="{{ path('setvu',{'id':r.id}) }}" class="btn btn-primary btn-sm"><i class="fa fa-eye btn-primary"></i></a>
                                            {% else %}
                                                <a href="{{ path('setvu',{'id':r.id}) }}" class="btn btn-danger btn-sm"><i class="fa fa-eye-slash btn-black"></i></a>
                                            {% endif %}



                                            <a href="{{ path('editservice',{'id':r.id}) }}" class="btn btn-white btn-sm"><i class="fa fa-pencil"></i> Editer </a>
                                            <a href="{{ path('servicedelete',{'id':r.id}) }}" class="btn btn-white btn-sm"><i class="fa fa-remove"></i> Supprimer </a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content animated fadeIn">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Ajout Slide</h4>
                        <small class="font-bold"></small>
                    </div>
                    {{ form_start(form) }}
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label" for="order_id">image 1 :</label>
                                    {{ form_widget(form.image,{ 'attr': {'class': 'form-control filebtn'} }) }}
                                    {{ form_errors(form.image) }}
                                    <h4 style="display: none;color: red;width: 300px;" id="error" >Veuillez télécharger une image valide !</h4>
                                </div>
                            </div>

                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label" for="order_id">Nom :</label>
                                    {{ form_widget(form.nom,{ 'attr': {'class': 'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label" for="order_id">Description 1 :</label>
                                    {{ form_widget(form.description1,{ 'attr': {'class': 'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label" for="order_id">Description 2 :</label>
                                    {{ form_widget(form.description2,{ 'attr': {'class': 'form-control'} }) }}
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label class="control-label" for="order_id">Description 3 :</label>
                                    {{ form_widget(form.description3,{ 'attr': {'class': 'form-control'} }) }}
                                </div>
                            </div>


                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                    </div>
                    {{ form_rest(form) }}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </div>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function()
        {
            $('.filebtn').on('change',function (event)
            {
                if(event.target.files[0].type.indexOf("image")==-1){
                    $('#error').show();
                }
                else {
                    $('#error').hide();
                }
            });

            $('.filebtn2').on('change',function (event)
            {
                if(event.target.files[0].type.indexOf("pdf")==-1){
                    $('#error2').show();
                }
                else {
                    $('#error2').hide();
                }
            });
        });

    </script>
    {#<script>#}
    {#$(document).ready(function(){#}


    {#$('.summernote').summernote("code");#}

    {#});#}
    {#</script>#}
{% endblock %}