{% extends '@Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig' %}


{% block stylesheets %}
{{ parent() }}


<style>

/*
.method-photos{
    float: right;
}*/

.method-paiement {
    position: relative;
    top: -300px;
}

.container.method-container {
    background: #ffffffd9;
    padding: 25px;
    box-shadow: 0px 10px 10px 10px #0000001A;
}

.col-sm-8.col-paiement {
    border: 0.78px solid #B6BCC7;
    padding: 10px;
    margin-top: 10px;
    background: white;
    border-radius: 6px;
    height: auto;
}
a.btn.btn-prev, a.btn.btn-payer {
    font-weight: 600;
}
a.btn.btn-payer {
    background: #E2B653;
    border-radius: 0px;
    width: 100%;
    color: white;
}

</style>


  
{% endblock  %}
{% block body %}
 

 
  <img src="{{asset('themes/coworking/front/images/freewor.jpg')}}" style="width: 100%;height: 520px;" class="img-fluid" />
 
         <div class="method-paiement">
    <div class="container method-container">
        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8">
                
                <h3 style="color: black;">Paiement</h3>
                
                <small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </small>
                
            </div>
            <div class="col-sm-2"></div>
        </div>
 

       {% for payment in  paymentsMethod %}

        <div class="row">
            <div class="col-sm-2"></div>
            <div class="col-sm-8 col-paiement">
                <div class="method-photos">
                    {% if (payment.name == "Payer par Wafacash") %}
                    
                    <img src="{{asset('themes/coworking/front/images/wafacash.png')}}" width="5%" style="float: right;"/>
                      {% endif %}
                      {% if (payment.name == "Payez avec une carte de crédit") %}
                       <img src="{{asset('themes/coworking/front/images/master.png')}}" width="7%" style="float: right;"/>
                    
                        <img src="{{asset('themes/coworking/front/images/visa.png')}}" width="7%" style="float: right;" />
                            {% endif %}

                  
                </div>
                <input type="radio" id="method{{payment.id}}" name="method" value="{{payment.id}}" >
                <label for="method{{payment.id}}">{{payment.name}}</label><br />
                <small class="text-muted">{{payment.description}}</small>
            </div>
            <div class="col-sm-2"></div>
        </div>
         {% endfor %}

 





        <div class="row validate mt-5 mb-5 text-center">
            <div class="col-sm-4"></div>
            <div class="col-sm-2"><a href="#" class="btn btn-prev">PRECEDENT</a></div>
            <div class="col-sm-2"><a href="#" class="btn btn-payer">PAYER</a></div>
            <div class="col-sm-4"></div>

        </div>
    </div>

              
          
          
        </div>
         

    
          
   
  
  
{% endblock %}






{% block javascripts %}
  <!-- MAIN CONTENT -->
 
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
 


 
 
{% endblock %}