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

{% block title %}

{% endblock %}




{% block body %}

  <h3 class="widget-title xs-widget-title pb-5" >&nbsp;</h3>
<div class="banner-section" style="z-index: 2; margin-top: 60px">
    <div class="container">
        <div class="row">

             <div class="col-md-12 col-lg-6" style="box-shadow: 5px 5px 5px 5px rgba(122,126,117,0.45); background-color: #F8F8F8">
                    {{ form_start(form, {'attr': { 'class': 'xs-campaign form-error-field' }}) }}


                    <fieldset>
                     <h2 >{{ 'donation.title' | trans }}  </h2>
                        <div class="form-group col-md-12">
                            <label>Montant</label>
                             <div class="form-inline">

                                  {{ form_row(form.amount, { attr:{ placeholder:  "donation.input.amount" | trans }} ) }}
                              <div class="input-group-addon">   {{ form_row(form.currency) }}</div>
{#                              <div class="input-group-addon">{{ banlal.currency.currencyCode | upper }}</div>#}
                              </div>

                        </div>
                        <input type="hidden" name="tipHidden" id="tipHidden" />
                      </fieldset>
                        <hr>
                            <h5 class="widget-title xs-widget-title">{{ 'donation.subtitle' | trans({ '%siteName%': siteName |upper })  }} </h5>
{#                            <p>{{ 'donation.description' | trans({ '%siteName%': siteName }) }}</p>#}

                            <div class="row">
                                <div class="form-group col-md-6">
                                     <select name="tip" class="form-control" id="js-tip-select">
                                     <option value="7.5">7.5%</option>
                                     <option value="10">10%</option>
                                     <option value="15">15%</option>
                                     <option value="20">20%</option>
                                     <option value="other">Autre</option>
                                     </select>
                                </div>
                                <div class="form-group col-md-6" id="js-tip"  {% if not form.tip_amount.vars.errors| length %}  style="display: none" {% endif %}>
                                      {{ form_row(form.tip_amount, { attr:{ placeholder: "saisir la montant voulu ", class: 'form-control otherTip' }}) }}
{#                                     <input type="text" name="otherTip" id="otherTip" placeholder="saisir la montant voulu" value=""/>#}
                                </div>

                                 {{ form_row(form.tip_other_amount) }}
                                 {{ form_row(form.tip_percentage) }}

                            </div>
                          <hr>
                        <fieldset>

                        <h3 class="widget-title xs-widget-title">{{ 'donation.mode' | trans }}</h3>
                        <div class="form-group col-md-12">
                            <p>{{ 'donation.card' | trans }}</p>

                              <div class="cc-selector">
                                <input id="visa" type="radio" name="payment_gateway" value="visa"  checked/>
                                <label class="drinkcard-cc visa" for="visa"></label>
                                <input id="mastercard" type="radio" name="payment_gateway" value="mastercard" />
                                <label class="drinkcard-cc mastercard" for="mastercard"></label>
                                <input  id="js-om" data-toggle="modal" data-target="#omModal"  type="radio" name="payment_gateway" value="orangemoney" />
                                <label class="drinkcard-cc orangemoney" for="js-om"></label>
                            </div>

{#                            #}
{#                            <div class="row">#}
{#                                <div class="col-xs-3 col-md-3">#}
{#                                    <a href="#" id="js-om" data-toggle="modal" data-target="#omModal"><img src="{{ asset('img/orange_money .png') | imagine_filter('mimi') }} " /> </a>#}
{#                                </div>#}


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

{#                                </div>#}

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

                        <div class="form-inline">
                             <div class="form-group col-md-6">

                            {{ form_row(form.name, { attr:{ placeholder: 'donation.input.name' | trans }}) }}
                             </div>
                            <div class="form-group col-md-6">

                            {{ form_row(form.lastname, { attr:{ placeholder: 'donation.input.lastname' | trans }}) }}
                            </div>
                        </div>


                        <div class="form-group col-md-12">

                            {{ form_row(form.email, { attr:{ placeholder: 'donation.input.email' | trans }}) }}
                        </div>



                       <div class="form-group col-md-12">
                            <div  style="display: inline-block">


                                <label>
                             {{ form_row(form.is_anonymous) }} {{ 'donation.is_anonymous' | trans }}</label>
                        </div>
                      </div>
                      <hr>

{#                      <div class="form-group col-md-12">#}
{#                        <input type="text"  name='number' class="form-control" id="cardNumber" placeholder="le numero de votre carte bancaire"  required autofocus />#}
{#                      </div>#}
{#                      <div class="form-group col-md-12">#}
{#                            <div class="row">#}
{#                                 <div class="col-md-4">#}

{#                                    <input type="text"  name='number' class="form-control" id="cardNumber" placeholder="le numero de votre carte bancaire"  required autofocus />#}
{#                                 </div>#}
{#                                    <div class="col-md-4">#}

{#                                    <input type="text"  name='number' class="form-control" id="cardNumber" placeholder="le numero de votre carte bancaire"  required autofocus />#}
{#                                    </div>#}

{#                               <div class="col-md-4">#}

{#                                     <input type="text"  name='number' class="form-control" id="cardNumber" placeholder="le numero de votre carte bancaire"  required autofocus />#}
{#                                </div>#}
{#                            </div>#}
{#                      </div>#}




{#                        <div class="form-group col-md-12">#}

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

{#                        </div>#}

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

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


{#                        </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">{{ 'donation.btn' | trans }}</button>
                            </p>

                        </div>


                    </fieldset>

                    {{ form_end(form) }}
                </div>
            <div class="col-md-12 col-lg-6" id="js-recap" style="display: none" >
                <div class="widget widget_categories xs-single-sidebar border xs-content-padding">
                    <h3 class="widget-title xs-widget-title">{{ 'donation.sidebar.title' | trans }}</h3>
                    <div class="xs-inner-title fundpress-inner-title" style="box-shadow: 5px 5px 5px 5px rgba(122,126,117,0.45); background-color: #F8F8F8">
                        <table class="table warning sumary-table">
                            <tbody class="xs-side-bar-list xs-font-alt">
                            <tr>
                                <th>{{ 'donation.sidebar.title' | trans }} </th>
                                <td  id="js-donate-amount"> </td>

                            </tr>
                            <tr>
                                <th>{{ 'donation.sidebar.tip' | trans({ '%siteName%': siteName }) }}</th>
                                <td id="js-tips-amount"></td>
                            </tr>
                            <hr>

                            </tbody>
                        </table>

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

        </div>

        </div>



<div id="omModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="monModal" aria-hidden="true" style="z-index: 9999">
    <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" data-dismiss="modal" class="btn btn-primary">OK Compris</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
<script>

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

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

           // jsOmButton.on('click',function (e) {
           //     e.preventDefault();
           //    // window.location.replace(href);
           // });
       });






      var default_currency = null;
       donation_currency = $('#donation_currency');
       donation_currency.change(function(e) {
            default_currency = $(this).find("option:selected").text();

       });

       var jsTipSelect = $('#js-tip-select');
       var jsAmount = $('#donation_amount');

        jsAmount.change(function(e){
           var AmountvalueUpdate = jsAmount.val().replace(/\s/g, '');
           var Amountvalue = AmountvalueUpdate;
           $('#donation_amount').val(Amountvalue);


            if (isNaN(Number.parseInt(Amountvalue, 10)))
             {
                    alert("{{ 'donation.invalidAmount' | trans }}");
             }else{


                jsRecap = $('#js-recap');
                jsRecap.fadeIn();

                tipsOptions = $('#js-tip-select option');
                jsAmountDonate = $('#js-donate-amount');

                jsAmountDonate.text ='';


                dataMoney = formateMoneyWithLocale(Amountvalue);

                jsAmountDonate.empty();
                jsAmountDonate.append(dataMoney);
                tipsOptions.each(function(index, el) {

                optionValue = el.value;

                tip = calculPourcentage(Amountvalue, optionValue);
                if (isNaN(tip)===false)
                    {
                              donation_currency_selected = $('#donation_currency option:selected');

                            currency_code_selected = donation_currency_selected.text();
                             default_currency = currency_code_selected;

                          el.innerText = '';
                          el.innerText = optionValue +'%';
                          el.append(" ( "+tip+$('#donation_currency option:selected').text() +")")
                    }
                });



                //pour le tips
                tauxTipsSelected = jsTipSelect.val();

                $tip_percentage =  $("#donation_tip_percentage");
                  $tip_percentage.val('');
                    $tip_percentage.val(tauxTipsSelected);

                jsAmountTips = $('#js-tips-amount');
                jstipsHidden = $('#tipHidden');
                jstipsHidden.val('');

                amountTipsValue = calculPourcentage(Amountvalue ,tauxTipsSelected);
                jstipsHidden.val(amountTipsValue);
                dataMoneyTips = formateMoneyWithLocale(amountTipsValue);
                jsAmountTips.empty();
                jsAmountTips.append(dataMoneyTips);


             }

        });



        jsTipSelect.change(function(e) {
            //jsAmount.val().replace(/\s/g, '')
            var Amountvalue = jsAmount.val();
         //  var  Amountvalue = Amountvalue.val(Amountvalue.replace(/\s/g, ''));
            if (isNaN(Number.parseInt(Amountvalue, 10)))
             {
                    alert("{{ 'donation.invalidAmount' | trans }}");
             }else{

                 tauxTipsSelected = jsTipSelect.val();

                if (tauxTipsSelected === 'other'){

                    $otherTipDiv = $("#js-tip");
                    $otherTipDiv.fadeIn();
                    $otherTipDiv.focus();
                    $otherTip = $(".otherTip");

                    $otherTip.change(function(e) {

                        $otherTipValue = $otherTip.val();

                        jstipsHidden = $('#tipHidden');
                        jstipsHidden.val('');

                        jstipsHidden.val($otherTipValue);
                        if (isNaN(Number.parseFloat(jstipsHidden.val())))
                          {
                              var tip_amount_not_ok = $('#tipHidden');
                                     if(window.confirm("{{ 'donation.invalidAmount' | trans }}")){
                                       tip_amount_not_ok.val('');
                                         tip_amount_not_ok.val('20');
                                 }else
                                    {
                                        tip_amount_not_ok.val('');
                                       tip_amount_not_ok.val('20');
                                    }
                            }

                        dataMoneyTips = formateMoneyWithLocale($otherTip.val());
                        jsAmountTips.empty();
                        jsAmountTips.append(dataMoneyTips);
                     });

                }else{
                    $otherTip = $(".otherTip");
                    $otherTip.val('');

                    jsAmountTips = $('#js-tips-amount');
                    jstipsHidden = $('#tipHidden');
                    jstipsHidden.val('');
                    amountTipsValue = calculPourcentage(Amountvalue ,tauxTipsSelected);
                    jstipsHidden.val(amountTipsValue);

                       if (isNaN(Number.parseFloat(jstipsHidden.val())))
                          {
                                var tip_amount_not_ok = $('#tipHidden');
                                     if(window.confirm("{{ 'donation.invalidAmount' | trans }}")){
                                       tip_amount_not_ok.val('');
                                         tip_amount_not_ok.val('20');
                                 }else
                                    {
                                        tip_amount_not_ok.val('');
                                       tip_amount_not_ok.val('20');
                                    }
                            }
                    dataMoneyTips = formateMoneyWithLocale(amountTipsValue);
                    jsAmountTips.empty();
                    jsAmountTips.append(dataMoneyTips);
                    $otherTip.val(amountTipsValue);
                }
             }
        });

        var donation_currency = $('#donation_currency');

        donation_currency.change(function(e) {
                    var Amountvalue = jsAmount.val();
                   var  jsAmountDonate = $('#js-donate-amount');

           // donation_currency_selected = $('#donation_currency option:selected');
           //
           // currency_code_selected = donation_currency_selected.text();
           // default_currency = currency_code_selected;

                dataMoney = formateMoneyWithLocale(Amountvalue);

                jsAmountDonate.empty();
                jsAmountDonate.append(dataMoney);
                tipsOptions.each(function(index, el) {

                optionValue = el.value;

                tip = calculPourcentage(Amountvalue, optionValue);
                if (isNaN(tip)===false)
                    {
                              donation_currency_selected = $('#donation_currency option:selected');

                            currency_code_selected = donation_currency_selected.text();
                             default_currency = currency_code_selected;

                          el.innerText = '';
                          el.innerText = optionValue +'%';
                          el.append(" ( "+tip+$('#donation_currency option:selected').text() +")")
                    }
                });


                 tauxTipsSelected = jsTipSelect.val();

                $tip_percentage =  $("#donation_tip_percentage");
                  $tip_percentage.val('');
                    $tip_percentage.val(tauxTipsSelected);

                jsAmountTips = $('#js-tips-amount');
                jstipsHidden = $('#tipHidden');
                jstipsHidden.val('');

                amountTipsValue = calculPourcentage(Amountvalue ,tauxTipsSelected);
                jstipsHidden.val(amountTipsValue);
                dataMoneyTips = formateMoneyWithLocale(amountTipsValue);
                jsAmountTips.empty();
                jsAmountTips.append(dataMoneyTips);


        });


        //
        // if (isNaN(Number.parseFloat(tauxTipsSelected,10)) === false)
        //     {
        //           var Amountvalue = jsAmount.val();
        //
        //     if (isNaN(Number.parseInt(Amountvalue, 10)))
        //      {
        //             alert("La somme n'est pas bonne ");
        //      }else{
        //
        //         jsAmountTips = $('#js-tips-amount');
        //         jsAmountTips.text ='';
        //
        //
        //
        //         amountTipsValue = calculPourcentage(Amountvalue ,tauxTipsSelected)
        //
        //         dataMoneyTips = formateMoneyWithLocale(amountTipsValue);
        //
        //         jsAmountTips.append(dataMoneyTips);
        //
        //
        //
        //      }
        //
        //     }




       function calculPourcentage(amount, rate) {
           if (isNaN(Number.parseInt(amount,10))=== false)
           {
              return (amount*rate)/100;
           }


       }


       function formateMoneyWithLocale(Amountvalue)
       {
             donation_currency_selected = $('#donation_currency option:selected');

           default_currency = donation_currency_selected.text();

                local = "{{ app.request.locale=='fr' ? 'fr-FR' : 'en-EN' }}"



           return  dataMoney  = new Intl.NumberFormat(local, {
                      style: 'currency',
                      currency: $('#donation_currency option:selected').text(),
                    }).format(Amountvalue);
       }
    });

</script>
{% endblock %}
    {% block test %}

    <form name="ucForm" style="z-index: 99999">
        <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 %}