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

{% block title %} {{ title }}{% endblock %}

{% block body %}

    <div class="main-content">
        <div class="container background-cart">
            <div class="row">

                <div class="col-md-8">
                    <div class="card m-3">
                        <div class="card-header">
                            <h2 class="card-title">Participation à la Campagne: {{ campagn.title }}</h2>
                        </div>
                        <div class="card-body">
                            {{ form_start(form) }}

                            <div class="field">
                                {{ form_row(form.firstName, {'attr' : { 'placeholder' : 'Votre Prénom ' | trans  }}) }}
                            </div>

                            <div class="field">
                                {{ form_row(form.lastName, {'attr' : { 'placeholder' : 'Votre Nom de famille ' | trans  }}) }}
                            </div>

                            <div class="field">
                                {{ form_row(form.email, {'attr' : { 'placeholder' : 'Votre Email ' | trans  }}) }}
                            </div>

                            <div class="field">
                                {{ form_row(form.amount, {'attr' : { 'placeholder' : 'Le montant de votre contribution ' | trans  }}) }}
                            </div>

                            <div class="different-address">
                                {{ form_row(form.isAnonymeContributionAmount) }}
                            </div>
                            <div class="different-address">
                                {{ form_row(form.isAnonymeFullName) }}
                            </div>

                            <h3 class="widget-title xs-widget-title">Mode de Paiement </h3>
                            <div class="form-group col-md-12">
                                <p>Utiliser une carte de crédit ou de débit</p>



                                    <div class="hiddenradio">
                                        <label>
                                            <input type="radio" name="paymentMethod" value="om"/>
                                            <!-- <a href="#" id="js-om" data-toggle="modal" data-target="#omModal"> -->
                                            <img src="{{ asset('img/orange_money.png') | imagine_filter('mimi') }}" alt="orange money logo"/>
                                            <!--  </a> -->
                                        </label>


                                        <label>
                                            <input type="radio" name="paymentMethod" value="masterCard" />

                                            <!-- <a href="#" id="js-om" data-toggle="modal" data-target="#omModal"> -->
                                            <img src="{{ asset('img/carte/mastercard.png') | imagine_filter('mimi') }}"
                                                 alt="orange money logo"/>
                                            <!--  </a> -->
                                        </label>
                                    </div>





                                    {#                                                                <div class="col-xs-3 col-md-3"> #}
                                    {#                                                                    <!-- | imagine_filter('mimi') --> #}
                                    {#                                                                    <a href="#" id="js-card-m" ><img src="{{ asset('img/carte/mastercard.png')  }}"  alt=""/> </a> #}
                                    {#                                                                </div> #}
                                    {#                                                                 <div class="col-xs-3 col-md-3"> #}
                                    {#                                                                    <a href="#" id="js-card-v" ><img src="{{ asset('img/carte/visa.png')}} "  alt=""/> </a> #}

                                    {#                                                                </div> #}

                                    {#                                                                <div class="col-xs-3 col-md-3"> #}
                                    {#                                                                    <a href="#" id="js-card-c" ><img src="{{ asset('img/carte/cb.jpg')}}"  alt=""/> </a> #}
                                    {#                                                                </div> #}



                            </div>


                            <input type="submit" class=" btn btn-primary mt-4 mb-4" value="Enregistrez & Continuez">

                            {{ form_end(form) }}

                        </div>


                    </div>
                </div>


                <div class="col-md-4">

                </div>
            </div>

        </div>
    </div>

    <div id="omModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="monModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="monModal"> Demarche à suivre</h4>
                </div>
                <div class="modal-body">


                    Vous êtes sur le point d'être rédirigé vers l'interface de paiement de Orange Money. Pour obtenir le
                    code de paiement, il faut:

                    <ul>
                        <li>1 - Renseignez votre numéro de téléphone Orange Money sur l'interface de paiement</li>
                        <li>2 - Revenir sur votre téléphone sur le quel figure notre compte Orange Money</li>
                        <li>3 - Composez *144*4*2*1#</li>
                        <li>4 - Entrer votre votre code secret Orange Money</li>
                        <li>5 - Récupérez le code généré puis révenir sur le site et le saissir le dans le champ 'code
                            de paiement' de l'interface Orange Money
                        </li>
                        <li>6 - Puis Cliquez sur Confirmer</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                    <button id="js-om-button" type="button" class="btn btn-primary">OK Compris</button>
                </div>
            </div>
        </div>
    </div>


{% endblock %}

{#{% block javascripts %}
    <script>

        $(document).ready(function () {
            let jsOm = $("#js-om");
            let jsOmButton = $("#js-om-button");

            jsOm.on('click', function (e) {
                e.preventDefault();
                let href = $(this).attr('href');

                jsOmButton.on('click', function (e) {
                    e.preventDefault();
                    window.location.replace(href);
                });
            });
        });
    </script>
{% endblock %}#}
{% block stylesheets %}
    <style>
        /* HIDE RADIO */
        .hiddenradio [type=radio] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* IMAGE STYLES */
        .hiddenradio [type=radio] + img {
            cursor: pointer;
        }

        /* CHECKED STYLES */
        .hiddenradio [type=radio]:checked + img {
            outline: 2px solid #f00;
        }
    </style>
{% endblock %}