ヤミRoot VoidGate

Viewing: index.html.twig

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

{% block title %}Hello PaymentController!{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>




  <div class="row" id="content">
      <div class="row">
          <div class="col s12 m10 offset-m1  " style="margin-top: 50px ;margin-bottom: 10px ">


              <div class="col s6" style="margin-top: 20px;">
                  <div class="col s5 divider grey accent-2" id="path3_1"></div>
                  <div class="col s2">
                      <a id="path3_2" href="#!" style="margin-left: -3px; margin-top: -20px" class="btn-floating  grey accent-2"><span style="font-size: 20px; margin-left: 12px" class="center center-align"><b>1</b></span></a>
                  </div>
                  <div class="col s5   divider grey accent-2" id="path3_3"></div>
                  <div class="col s7 offset-s4" style="margin-top: 5px">
                      <span class="    center center-align" id="text_path3"> <b>Mode Payement</b></span>

                  </div>
              </div>
              <div class="col s6" style="margin-top: 20px;">
                  <div class="col s5 divider grey accent-2" id="path4_1"></div>
                  <div class="col  s2 ">
                      <a id="path4_2" href="#!" style="margin-left: -3px; margin-top: -20px" class="btn-floating  grey accent-2"><span style="font-size: 20px; margin-left: 12px" class="center center-align"><b>2</b></span></a>
                  </div>
                  <div class="col s5   divider grey accent-2" id="path4_3"></div>

                  <div class="col s4 offset-s5" style="margin-top: 5px">
                      <span class="    center center-align" id="text_path4"> <b>Facture</b></span>

                  </div>

              </div>
          </div>

          <div class="col s12 m10 offset-m1">
              <h5 class="center-align center">#{{ booking.id }}, {{ booking.room.roomType.type }} , {{ booking.room.building.designation }} {{ booking.payment.amount }}(XAF)</h5>
          </div>

          <div class="col s12  hide " style="margin-top: 15px" id="preload3">

              <div class="col s12">
                  <div class="progress ">
                      <div class="indeterminate  pink"></div>
                  </div>
                  <div class="col s12">
                      <h5 style="font-size: 20px; margin-top: 20px" class="center-align center">Traitement en cours. Veuillez patienter SVP. </h5>

                  </div>
                  <div class="col s10 m8 offset-m2" style="margin-top: 10px; ">
                      <img src="{{ asset("img/loading_sweet.gif") }}" style="max-height: 300px" class="center-align center center-block" alt="">
                  </div>


              </div>


          </div>

          <div class="col s12 hide" style="margin-top: 15px" id="preload2">

              <div class="col s12">
                  <div class="progress ">
                      <div class="indeterminate  pink"></div>
                  </div>
                  <h5 style="font-size: 15px;" class="center-align">Control de la validité payement en cours (NB: Votre payement expire après 15min)... </h5>
              </div>


          </div>

      </div>



      {% if booking.paymentAsBeenConfirmed == false %}
          <div class="row">
              <div class="col s10 offset-s1" style="margin-top: 1%">

                  <div class="input-field col s12 s10 offset-s1 m8 offset-m2 l6 offset-l3" style="margin-bottom: 30px" >
                      <select class="icons js-example-templating" style="width: 100%">
                          <option value="" disabled >Choose your country</option>

                          {% for country in countries %}


                              {% if  visitor!=null %}
                                  Available
                                  {% if visitor.countryCode|lower ==country.code|lower %}
                                      <option id="country_{{ country.code }}" selected value="{{ country.code }}"  data-icon="{{ asset('media/'~ country.countryFlag ) }}" class="right circle">{{ country }}</option>

                                  {% elseif visitor.countryCode!=country.code %}
                                      <option id="country_{{ country.code }}" value="{{ country.code }}"  data-icon="{{ asset('media/'~ country.countryFlag ) }}" class="right circle">{{ country }}</option>

                                  {% endif %}
                              {% elseif visitor==null %}
                                  <option id="country_{{ country.code }}" value="{{ country.code }}"  data-icon="{{ asset('media/'~ country.countryFlag ) }}" class="right circle">{{ country }}</option>

                              {% endif %}

                          {% endfor %}

                      </select>

                  </div>
              </div>

              <div class="col s12">
                  {% for paymentProvider in paymentProviders %}

                      {% if paymentProvider.enable %}
                      <div id="step3_{{ paymentProvider.country.id }}" class="row ">



                          <div class="col s12 card  " style="border-radius: 20px">
                              <div class="col s10 offset-s1 center">
                                  <h5>{{  paymentProvider.country  }} -> {{ paymentProvider.providerName }} </h5>
                                  <img src="{{ asset('media/'~ paymentProvider.providerLogo ) }}" style="max-height: 80px;   " class="responsive-img center-block center" alt="Logo ">

                              </div>

                              <div class="col s12  ">

                                  {% for paymentOption in paymentProvider.paymentOptions %}


                                      <div class="col  s10 offset-s1 m4 l2 hoverable   {% if booking.payment.paymentOption!=null %} {% if booking.payment.paymentOption.rOnly== paymentOption.rOnly%} z-depth-3 animated  {%endif %}{%endif %}" style="margin-top: 30px; ">

                                          <a href="#!" onclick="generatePayment({{ paymentOption.rOnly }},'{{ paymentProvider.skuCode }}','{{ paymentOption.paymentName|e }}')">
                                              <img src="{{ asset('media/'~ paymentOption.picture ) }}" style="width: 100px; height: 100px" class="responsive-img center-block center" alt="Orange Money">

                                          </a>
                                          <h6 class="center-align">{{ paymentOption.paymentName|e }}</h6>

                                      </div>

                                  {% endfor %}

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

                      {% endif %}
                  {% endfor %}

              </div>
          </div>

      {% elseif booking.paymentAsBeenConfirmed == true %}

          <div class="row">
              <div class="col s12">
                  <div class="col s12 center center-align ">
                      {% if booking.room.picture!=null %}
                          <img src="{{ asset('media/'~ booking.room.picture ) }}" alt="" class="responsive-img" style="max-height: 250px">

                      {% endif %}
                  </div>
                  <div class="col s12 center center-align ">


                      <h5>Thanks You, your payment has been completely perform</h5>
                      <h4>Details: </h4>
                      <p><b>Room: </b>{{ booking.room }}</p>
                      <p><b>Coming From: </b>{{ booking.comingFrom }}</p>

                      <p><b>Period: </b> From {{ booking.arrivalDate|date("F jS \\a\\t g:ia") }}, To {{ booking.departureDate|date("F jS \\a\\t g:ia") }}</p>
                      <p><b>Child: </b>{{ booking.child }},<b> Adult: </b>{{ booking.adult }}</p>



                  </div>
              </div>
          </div>
      {% endif %}


      <div class="row">
          <div class="col s12 center" style="margin-top: 20px">
              <a style="margin-top: 20px"     href="{{ path('app_home') }}" class=" waves-purple waves-effect btn col s10 offset-s1 m4 offset-m4 btn-large green darken-1">
                  <span>Retour à l'accueil</span>
                  <i class="fas fa-home right active"> </i>
              </a>
          </div>
      </div>

  </div>



{% endblock %}


{% block javascripts %}
    <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
    <script src="{{ asset('js/materialize.min.js') }}"></script>
    <script src="{{ asset('js/sweetalert2.all.min.js') }}"></script>

    <script src="{{ asset('js/slick.js') }}"></script>
    <script src="{{ asset('js/callus.js') }}"></script>
    <script src="{{ asset('js/aes.js') }}"></script>
    <script src="{{ asset('js/tripledes.js') }}"></script>
    <script src="{{ asset('js/enc-base64-min.js') }}"></script>
    <script src="{{ asset('js/index.js') }}"></script>

    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>


    <script type="text/javascript">

        $(document).ready(function(){
            //$('select').material_select();

            $(".js-example-templating").select2({
                templateResult: formatState
            });

            getClientLocation ();
        });


        function formatState (state) {
            if (!state.id) {
                return state.text;
            }
            {% if host == "http://localhost" %}
            var baseUrl = "{{host }}/lo/public/media/countries";
            {% elseif host!="http://localhost" %}

             var baseUrl = "{{host }}/public/media/countries";

            {% endif %}
            console.log(baseUrl);

            var $state = $(
                '<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag circle" style="height: 30px; width: 30px" /> ' + state.text + '</span>'
            );
            return $state;
        };



        function getClientLocation () {


            var locationUrl="{{ path('client_location') }}";


            $.ajax({
                method: "GET",
                tryCount  : 0,
                retryLimit  : 4,
                url: "https://api.ipify.org?format=json",



                beforeSend:function () {

                },
                success: function(data){


                    console.log(data);

                    var api_address=data.ip;



                    $.ajax({
                        method: "POST",
                        tryCount  : 0,
                        retryLimit  : 4,
                        url: locationUrl,
                        "headers": {
                            "Content-Type": "application/json"
                        },
                        data: JSON.stringify({

                            "api_address":api_address}),

                        beforeSend:function () {

                        },
                        success: function(data){


                            setCookie("visitor",data.id,20)
                            //country_code


                            console.log(data);


                        },
                        error:function (xhr, textStatus, errorThrown) {

                            console.log(xhr);

                        }

                    });

                },
                error:function (xhr, textStatus, errorThrown) {

                }
            });

        }


        {% if booking.paymentAsBeenConfirmed == false %}
            {% if booking.payment.paymentOption!=null %}
            {% if booking.payment.paymentOption.isCash==false %}




            {% endif %}
            {% endif %}
        {% else %}

        $("#path3_1").removeClass("grey");
        $("#path3_1").addClass("green");

        $("#path3_2").removeClass("grey");
        $("#path3_2").addClass("green").html('<i class="fas fa-check"></i>');

        $("#path3_3").removeClass("grey");
        $("#path3_3").addClass("green");

        $("#path4_1").removeClass("grey");
        $("#path4_1").addClass("green");

        $("#path4_2").removeClass("grey");
        $("#path4_2").addClass("green");

        $("#path4_3").removeClass("grey");
        $("#path4_3").addClass("green");

        $("#text_path3").addClass("green-text");

        $("#bill_canal_step3").removeClass("hide");

        {% endif %}


        function generatePayment(paymentServiceId, skucode,bill_provider) {

            updatePaymentOption(paymentServiceId);

            if(paymentServiceId!==16){

                Swal.fire({
                    title: bill_provider+'.\nProvide your mobile money account.',
                    backdrop: `
                                                     rgba(55,141,255,0.23)
                                                        url("https://images.pond5.com/constellation-particles-processes-system-transformation-footage-087212493_prevstill.jpeg")
                                                        center
                                                            `,
                    input: 'text',
                    imageHeight: 60,
                    imageAlt: 'Logo',
                    allowEscapeKey: false,
                    reverseButtons: true,
                    showCloseButton: true,
                    background: '#fff url(img/trees.png)',
                    imageUrl: 'img/logo.png',
                    confirmButtonText: 'Oui, Confirmer &rarr;',
                    inputValue: "6",
                    showCancelButton: true,
                    inputValidator: (value) => {
                        if (!value ) {
                            return 'Votre numéro de téléphone est obligatoire pour continuer!'
                        }
                        var phone=""+value+""
                        if(phone.length!==9){
                            return 'Votre numéro de téléphone est incorrect!'
                        }
                    }
                }).then((result) => {
                    if (result.value) {
                        var phone = result.value;
                        var dohoneUrl="https://www.my-dohone.com/dohone/pay?cmd=start";
                        dohoneUrl+="&rN={{ booking.user.lastName }}";
                        dohoneUrl+="&rDvs={{ payment.rDvs }}";
                        dohoneUrl+="&rMt={{ tokenData.amount }}";
                        dohoneUrl+="&rOnly="+paymentServiceId;
                        dohoneUrl+="&rT="+phone;
                        dohoneUrl+="&rH="+skucode;
                        dohoneUrl+="&rI={{ tokenData.ref }}";
                        dohoneUrl+="&source={{ domain }}";
                        dohoneUrl+="&motif=Booking Reservation Pay";
                        dohoneUrl+="&notifyPage={{ host }}{{ path("app_payment_notify") }}";
                        dohoneUrl+="&endPage={{ host }}{{ path('app_payment',{'token': token}) }}";
                        dohoneUrl+="&cancelPage={{ host }}{{ path('app_payment',{'token': token}) }}";
                        dohoneUrl+="&logo={{ host }}{{ asset('img/logo-logercm.png') }}";
                        dohoneUrl+="&rLocale={{ booking.user.local }}";

                        window.location.assign(dohoneUrl);



                    }})
            }else{


                Swal.fire({
                    title: bill_provider+'.\n\nProvide Your Card Number.',
                    backdrop: ` rgba(55,141,255,0.23)
                                 url("https://images.pond5.com/constellation-particles-processes-system-transformation-footage-087212493_prevstill.jpeg")
                                                        center
                                                            `,
                    input: 'text',
                    imageHeight: 60,
                    imageAlt: 'Logo',
                    allowEscapeKey: false,
                    reverseButtons: true,
                    showCloseButton: true,
                    background: '#fff url(img/trees.png)',
                    imageUrl: 'img/logo.png',
                    confirmButtonText: 'Oui, Confirmer &rarr;',
                    inputValue: "6",
                    showCancelButton: true,
                    inputValidator: (value) => {
                        if (!value ) {
                            return 'Provide Card number!'
                        }
                        var phone=""+value+""
                        if(phone.length!==16){
                            return 'Wrong Card length!'
                        }
                    }
                }).then((result) => {

                    if (result.value) {
                        var phone = result.value;
                        var dohoneUrl = "https://www.my-dohone.com/dohone/pay?cmd=start";

                        dohoneUrl += "&rN={{ booking.user.lastName }}";
                        dohoneUrl += "&rDvs={{ payment.rDvs }}";
                        dohoneUrl += "&rMt={{ tokenData.amount }}";
                        dohoneUrl += "&rOnly=" + paymentServiceId;
                        dohoneUrl += "&rT="+phone;
                        dohoneUrl += "&rH=" + skucode;
                        dohoneUrl += "&rI={{ tokenData.ref }}";
                        dohoneUrl += "&source={{ domain }}";
                        dohoneUrl += "&motif=Booking Reservation pay";
                        dohoneUrl += "&notifyPage={{ host }}{{ path("app_payment_notify") }}";
                        dohoneUrl += "&endPage={{ host }}{{ path('app_payment',{'token': token}) }}";
                        dohoneUrl += "&cancelPage={{ host }}{{ path('app_payment',{'token': token}) }}";
                        dohoneUrl += "&logo={{ host }}{{ asset("img/logo-logercm.png") }}";
                        dohoneUrl += "&rLocale={{ booking.user.local }}";

                        window.location.assign(dohoneUrl);

                    }
                });

            }




        }


        function updatePaymentOption(idOption) {
            $.ajax({
                method: "POST",
                tryCount  : 0,
                retryLimit  : 4,
                url: "{{ path("payment_option_update") }}",
                "headers": {
                    "Content-Type": "application/json"
                },
                data: JSON.stringify({

                    "idOption":idOption ,

                    "token": "{{ token }}",

                }),
                beforeSend:function () {



                },
                success: function(data){

           console.log(data);



                },
                error:function (xhr, textStatus, errorThrown) {


                }

            });
        }
    </script>
{% endblock %}
User / IP	: 216.73.216.143
Host / Server	: 146.88.233.70 / dev.loger.cm
System	: Linux hybrid1120.fr.ns.planethoster.net 3.10.0-957.21.2.el7.x86_64 #1 SMP Wed Jun 5 14:26:44 UTC 2019 x86_64