{% extends 'layout/backEndLayout.html.twig' %}
{% form_theme searchForm 'bootstrap_4_layout.html.twig' %}


{% block content %}
        
    <div class="row mt-4 ">
            <div class="col-1" >
                <a class="btn btn-info" href="{{ path('app_payment_new') }}">
                    <i class="fa fa-plus"></i> 
                </a>
            </div>
            <div class="col-11 jumbotron " >
            <div class="row mb-4">
                <div class="col-12 jumbotron" >
                    {{form_start(searchForm)}}
                    <div class="form-row row">
                        <div class="col-md-2">
                            {{form_row(searchForm.room)}}
                        </div>
                        <div class="col-md-2">
                            {{form_row(searchForm.quater)}}
                        </div>
                         <div class="col-md-2">
                            {{form_row(searchForm.startDate)}}
                        </div>
                         <div class="col-md-2">
                            {{form_row(searchForm.endDate)}}
                        </div>
                        <div class="col-md-2">
                            {{form_row(searchForm.student)}}
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary" type="submit">
                                        <b>Rechercher</b>
                            </button>
                        </div>
                    </div>
                    {{form_end(searchForm)}}
                </div>
            </div>
            <div class=" row m-1 box-shadow">
                    <div class="card-header">
                         <h4 class="my-0 font-weight-normal text-center text-justify text-uppercase"> Liste des payements effectues </h4>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th style="width:20%;">Code</th>
                                <th style="width:50%;">Eleve</th>

                                <th style="width:15%;">Amount</th>
                                <th style="width:15%;">actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for payment in payments %}
                            <tr>
                                <td style="width:15%;">{{ payment.code ? payment.code : '' }}</td>
                                <td style="width:55%;">{{ payment.subscription.student}}</td>
                                <td style="width:15%;">{{ payment.amount }}</td>
                                  <td style="width:15%;" class="text-center">
                                        <div class="btn-group">
                                        <a target="_blank" class="btn btn-outline-info" href="{{ path('app_payment_pdf', {id: payment.id}) }}">
											<i class="fa fa-cloud-download">
												</i> 
										</a>
                                            
                                        <a class="btn btn-outline-info" href="{{ path('app_payment_show', {id: payment.id}) }}">
                                                    <i class="fa fa-eye" aria-hidden="true"></i> 
                                        </a>
                                        <a class="btn btn-outline-warning" href="{{path('app_payment_edit', {id: payment.id})}}"> 
                                                <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                        </a>
                                            
                                        
                                        </div>
                                    </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="5">no records found</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
            </div>
            
        </div>

{% endblock %}