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

{% block title %}

{% endblock %}




{% block body %}


<div class="banner-section" style="z-index: 2">
    <div class="container">
        <div class="row">
{#            <div class="col-md-12 col-lg-6">#}

                <div class="content-center">
                    <div class="xs-contact-form-wraper">
                        {{ form_start(form) }}
                        <div id="card-element">
                            <div class="form-group">
                                <div class="form-group">
{#                                    {{ form_row(form.number, {'attr' : { "id" : "cardNumber",'placeholder' : 'registration.input.firstname' | trans  }}) }}#}
                                    {#                                        <input type="text"  name='number' class="form-control" id="cardNumber" placeholder="le numero de votre carte bancaire"  required autofocus />#}
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-xs-7 col-md-7">
                                        <div class="form-group">
                                            <div class="row">

                                                <div class="col-xs-6 col-lg-6">
{#                                                    {{ form_row(form.exp_month) }}#}
                                                    {#                                                        <input type="text" name='mm' class="form-control card-expiry-month" id="expityMonth" placeholder="MM" required />#}
                                                </div>
                                                <div class="col-xs-6 col-lg-6">
{#                                                    {{ form_row(form.exp_year) }}#}
                                                    {#                                                        <input type="text" class="form-control card-expiry-year" name='yy' id="expityYear" placeholder="YY" required />#}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-5 col-md-5">
                                        <div class="form-group">
{#                                            {{ form_row(form.cvc)}}#}
                                            {#                                                <input type="text" name='cvc' class="form-control card-cvc" id="cvCode" placeholder="CV" required />#}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <button type="submit" class='btn btn-lg btn-primary btn-block xs-btn round-btn green-btn'  id="card-button" data-secret="">payer  </button>
                        </div>
{#                        {{ form_end(form) }}#}
                    </div>
                </div>
                <div id="card-errors" role="alert"></div>
            </div>
            <div class="col-md-12 col-lg-6">
                <div class="widget widget_categories xs-single-sidebar border xs-content-padding">
                    <h3 class="widget-title xs-widget-title">Récapitulatif</h3>
                    <div class="xs-inner-title fundpress-inner-title">
                        <table class="table warning sumary-table">
                            <tbody class="xs-side-bar-list xs-font-alt">
                            <tr>
                                <th>Nom Beneficiaire </th>
                                <td>BARRY </td>

                            </tr>
                            <tr>
                                <th>Prénom Beneficiaire</th>
                                <td>Prnom</td>
                            </tr>
                            <tr>
                                <th>Numéro de téléphone Beneficaire</th>
                                <td {{ "None" }}</td>
                            </tr>
                            <tr>
                                <th>Type de Reception</th>
                                <td>{{ 'Casch' }}</td>

                            </tr>
                            <tr>
                                <th>Somme à la Réception</th>
                                <td>20000 00000 000</td>
{#                                <td>{{ transfert.receiveAmount |format_currency(transfert.receiveCurrency, locale='fr') }}</td>#}

                            </tr>

                            <tr>
                                <th>Somme à Payer</th>
                                <td>300</td>
{#                                <td>{{ AmountToPay  }}</td>#}
                            </tr>
                            <tr>
                                <th>Commission</th>
                                <td>3 %</td>
{#                                <td>{{ commission }}</td>#}
                            </tr>
                            </tbody>
                        </table>

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



        </div>
{#    <main class="mt-5">#}
{#        <div class="container">#}
{#            <div class="div-affiche">#}
{#            <h1><?php echo $soutien['Banlal']['name'] ?? ""; ?></h1>#}
{#        </div>#}
{#        </div>#}

{#        </div>#}
{#        <div class="container">#}
{#            <div class="row">#}
{#                <div class="col-md-6">#}
{#                    {{ form_start(form, {'attr': { 'class': 'xs-campaign' }}) }}#}

{#                    <legend class="text-center">#}

{#                    </legend>#}

{#                    <fieldset>#}
{#                        <div class="form-group col-md-12">#}
{#                            <label >Votre Nom</label>#}
{#                            {{ form_row(form.name) }}#}
{#                        </div>#}



{#                        <div class="form-group col-md-12">#}
{#                            <label >Votre Prénom</label>#}
{#                            {{ form_row(form.lastname) }}#}
{#                        </div>#}

{#                        <div class="form-group col-md-12">#}
{#                            <label for="email_help">votre email</label>#}
{#                            {{ form_row(form.email) }}#}
{#                        </div>#}
{#                        <div class="form-group col-md-12">#}
{#                            <label for="message">montant du don </label>#}
{#                            {{ form_row(form.amount) }}#}
{#                        </div>#}
{#                        <legend class="text-center">#}
{#                            <h2>Participation</h2>#}
{#                        </legend>#}

{#                        <div class="form-group col-md-12">#}
{#                            <label for="nom_banlal">Votre date de naissance:</label>#}

{#                            {{ form_row(form.birthday) }}#}
{#                        </div>#}
{#                        <div class="form-group col-md-12">#}
{#                            <label for="nom_banlal">Choix de la devise :</label>#}

{#                            {{ form_row(form.currency) }}#}

{#                            #}{#                            <select name="currency" class="form-control">#}

{#                            #}{#                                {% for currency in currencies %}#}
{#                            #}{#                                    <option name="{{ currency.currencyCode }}">{{ app.request.locale == 'fr'? currency.nameFr : currency.nameEn }}</option>#}
{#                            #}{#                                {% endfor %}#}

{#                            #}{#                            </select>#}

{#                        </div>#}


{#                        <div class="form-group col-md-12">#}
{#                            <p class="text-center">#}
{#                                <button type="submit" class="btn btn-lg btn-primary btn-block xs-btn round-btn green-btn">Soumettre</button>#}
{#                            </p>#}

{#                        </div>#}


{#                    </fieldset>#}

{#                    {{ form_end(form) }}#}
{#                </div>#}
{#                <div class="col-md-6">#}
{#                    <div class="xs-single-sidebar">#}

{#                        <div class="xs-info-card xs-purple-bg fundpress-info-card xs-box-shadow xs-mb-30 color-white">#}
{#                            <p class="xs-mb-20 xs-content-description fundpress-content-description">#}
{#                                {{ banlal.name }}#}
{#                            </p>#}
{#                            {% if banlal.type.id==2 %}#}
{#                            <span class="xs-mb-40"><a href="{{ url('banlal.show', {id: banlal.id, slug: banlal.slug })}}">Faire Un don à cette Mobilisation</a> </span>#}
{#                            <div class="xs-spilit-container">#}
{#                                <div class="xs-info-card-times">#}
{#                                    <h5>Date de Mobilisation</h5>#}
{#                                    <h6>{{ banlal.mobilizationAt }}</h6>#}
{#                                </div>#}
{#                                <div class="xs-info-card-times">#}
{#                                    <h5>Lieu</h5>#}
{#                                    <h6>{{ banlal.place }} </h6>#}
{#                                </div>#}
{#                            </div>#}
{#                            {% endif %}#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}


{#            </div>#}
{#        </div>#}

{#    </main>#}


{% endblock %}
    {% block test %}

    <form name="ucForm">
        <div class="mb-three-halves o-checkout-donation">
            <div class="m-form-field m-form-field--stacked o-checkout-donation-amount m-currency-field">
                <div class="m-form-field-inner">
                    <label class="m-form-field-label m-form-field-label--prepend a-label" for="checkout-donation">Entrez le montant de votre don</label>
                    <div class="m-currency-field-wrapper">
                        <div class="m-currency-field-currency"><span class="m-currency-field-symbol">$</span> <span class="m-currency-field-abbr">CAD</span></div>
                        <input type="text" id="checkout-donation" autoComplete="off" class="m-currency-field-input a-text-input" inputMode="numeric" name="donationAmount" value=""/><span class="m-currency-field-decimal">.00</span>
                    </div>
                </div>
            </div>
            <div class="mb-three-halves mt-three-halves a-rule a-rule--horizontal"></div>
            <fieldset class="m-fieldset">
                <legend class="a-legend heading-5">Verser un pourboire aux services GoFundMe</legend>
                <span class="o-checkout-donation-description text-small color-gray">GoFundMe est une plateforme gratuite. Nous ne prélevons pas de commission sur les dons. Nous comptons sur la générosité de donateurs comme vous pour financer nos services.</span>
                <ul class="list-unstyled o-checkout-donation-tip">
                    <li>
                        <div class="m-form-field m-form-field--stacked o-checkout-donation-tip-selection m-tip-option-field">
                            <div class="m-form-field-inner">
                                <label class="m-form-field-label m-form-field-label--prepend a-label" for="donation-tip-option">Sélectionnez le montant du pourboire à laisser à GoFundMe</label>
                                <div class="a-select">
                                    <select id="donation-tip-option" name="tipAmount" class="a-select-options">
                                        <option value="10">10 %</option>
                                        <option selected="" value="15">15 %</option>
                                        <option value="20">20 %</option>
                                        <option value="-1">Autre</option>
                                    </select>
                                    <svg class="a-select-icon a-icon--ui a-icon" height="1.1875em" viewBox="0 0 19 19" width="1.1875em">
                                        <use href="/static/media/ui-icons.d3094448b40f69a0f39e0af6bbffb52d.svg#ui-caret-down" xlink:href="/static/media/ui-icons.d3094448b40f69a0f39e0af6bbffb52d.svg#ui-caret-down"></use>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li></li>
                </ul>
            </fieldset>
        </div>
        <button class="mb2x a-primary-button a-primary-button--green a-styled-button a-styled-button--full-for-small a-styled-button--large a-base-button" type="button">Continue</button>
        <div class="hide">
            <div class="mb2x mt2x a-rule a-rule--horizontal"></div>
            <fieldset class="o-checkout-payment m-fieldset">
                <legend class="a-legend heading-5">Payment method</legend>
                <div class="disp-flex align-center">
                    <div class="a-loading-dots a-loading-dots--black a-loading-dots--large"><span class="dot dot--one"></span><span class="dot dot--two"></span><span class="dot dot--three"></span></div>
                </div>
            </fieldset>
            <div class="mb2x mt2x a-rule a-rule--horizontal"></div>
            <fieldset class="o-checkout-optional m-fieldset">
                <legend class="a-legend heading-5">Détails sur le don (facultatif)</legend>
                <div class="disp-flex align-middle m-anonymous-option-field">
                    <div class="m-form-field m-form-field--inline">
                        <div class="m-form-field-inner"><input type="checkbox" class="a-checkbox a-switch" id="checkout-optional-anonymous" name="checkoutPersonalAnonymous" tabindex="-1" value="isAnonymous"/><label class="m-form-field-label m-form-field-label--append a-label" for="checkout-optional-anonymous">Ne pas afficher mon nom sur la campagne.</label></div>
                    </div>
                    <div class="m-popover m-popover--inline m-popover--dark">
                        <button aria-expanded="false" aria-label="Vous avez des questions sur les dons anonymes ?" class="color-blue ml m-popover-button a-button a-button--inline" type="button">
                            <svg class="a-icon--ui a-icon a-icon--large" height="1.1875em" viewBox="0 0 19 19" width="1.1875em">
                                <use href="/static/media/ui-icons.d3094448b40f69a0f39e0af6bbffb52d.svg#ui-info" xlink:href="/static/media/ui-icons.d3094448b40f69a0f39e0af6bbffb52d.svg#ui-info"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </fieldset>
            <div class="mb2x mt2x a-rule a-rule--horizontal"></div>
            <div class="mb2x hide-for-large mb-three-halves o-checkout-summary">
                <h2 class="heading-5">Votre don</h2>
                <dl class="color-gray o-checkout-summary-list">
                    <dt>Votre don</dt>
                    <dd>$0</dd>
                    <dt>Pourboire à GoFundMe</dt>
                    <dd>$0</dd>
                    <dt class="color-dark-gray o-checkout-summary-total-label">Total dû aujourd&#x27;hui</dt>
                    <dd class="color-dark-gray o-checkout-summary-total-amount">$0</dd>
                </dl>
                <div class="hide-for-large mb0 a-rule a-rule--horizontal"></div>
            </div>
            <div class="o-checkout-submit">
                <button class="o-checkout-submit-button a-button a-button--full-for-small a-button--large a-button--solid-green" data-element-id="btn_donate_donateNow" id="donate-now" type="submit">Je soutiens</button>
                <ul class="o-checkout-processors m-secure-processors list-unstyled disp-inline-flex align-middle">
                    <li class="mr-half">
                        <svg class="m-secure-processor-icon a-icon--payment a-icon" height="1.1875em" viewBox="0 0 19 19" width="1.1875em">
                            <use href="/static/media/payment-icons.180e06d8f9eac7f2dc5f9a2ab512ba10.svg#payment-mastercard-SecureCode" xlink:href="/static/media/payment-icons.180e06d8f9eac7f2dc5f9a2ab512ba10.svg#payment-mastercard-SecureCode"></use>
                        </svg>
                    </li>
                    <li class="mr-half">
                        <svg class="m-secure-processor-icon a-icon--payment a-icon" height="1.1875em" viewBox="0 0 19 19" width="1.1875em">
                            <use href="/static/media/payment-icons.180e06d8f9eac7f2dc5f9a2ab512ba10.svg#payment-american-express-SafeKey" xlink:href="/static/media/payment-icons.180e06d8f9eac7f2dc5f9a2ab512ba10.svg#payment-american-express-SafeKey"></use>
                        </svg>
                    </li>
                    <li>
                        <svg class="m-secure-processor-icon a-icon--payment a-icon" height="1.1875em" viewBox="0 0 19 19" width="1.1875em">
                            <use href="/static/media/payment-icons.180e06d8f9eac7f2dc5f9a2ab512ba10.svg#payment-Verified-by-visa" xlink:href="/static/media/payment-icons.180e06d8f9eac7f2dc5f9a2ab512ba10.svg#payment-Verified-by-visa"></use>
                        </svg>
                    </li>
                </ul>
            </div>
        </div>
    </form>

    {% endblock %}