templates/payment/payment.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  4. {% block stylesheets %}
  5.     {{ parent() }}
  6.     <link href="https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&family=Fjord+One&family=Nova+Flat&family=Oswald:wght@200&display=swap" rel="stylesheet">
  8.     <link href="https://fonts.googleapis.com/css?family=Oswald|Slabo+27px" rel="stylesheet">
  10.     <link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome-free-5.3.1-web/css/all.min.css') }}">
  11.     <link href="{{ asset('fos/plugins/fonts/Amaranth/amaranth.css') }}" rel="stylesheet" type="text/css">
  12.     <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-4.1.1/css/bootstrap.min.css') }}">
  16.     <style>
  17.         .login-page {
  18.             width: 50%;
  19.             margin: auto;
  20.             margin-top: 4%;
  21.         }
  23.         .form {
  24.             z-index: 1;
  25.             background: #FFFFFF;
  26.             max-width: 700px;
  27.             width: 680px;
  28.             padding: 45px;
  29.             text-align: center;
  30.             box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  31.             height: auto;
  32.             margin: auto;
  34.         }
  36.         .nav p {
  37.             font-family: "Amaranth", sans-serif;
  38.             text-align: left;
  39.             font-size: 12px;
  40.             text-transform: uppercase;
  41.             line-height: 12px;
  42.             color: #6a6a6a;
  43.         }
  45.         .nav .nav-link.active p b {
  46.             font-size: 16px;
  47.             color: black;
  48.             zoom:1;
  49.         }
  52.         .nav-tabs {
  53.             text-align:center;
  54.         }
  57.         .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  58.             color: #495057;
  59.             background-color: #fff;
  60.             border-color: #ffffff #ffffff #ff0000;
  61.         }
  63.         .nav-tabs .nav-link {
  64.             border: 2px solid transparent;
  65.             border-top-left-radius: .25rem;
  66.             border-top-right-radius: .25rem;
  67.         }
  70.         .request {
  71.             text-align: center;
  72.             margin: 15px auto 4px auto;
  73.             font-family: "Amaranth", sans-serif;
  74.         }
  76.         .request button {
  77.             margin-top: 20px;
  78.             font-family:"Amaranth", sans-serif;
  79.         }
  81.         .request-other-btn {
  82.             text-align: center;
  83.             margin: 20px auto 0px -60px;
  84.             font-family: "Amaranth", sans-serif;
  85.         }
  87.         #poweredby{
  88.             font-family: Oswald, serif;
  89.             font-size: 12px;
  90.             padding: 5px;
  91.             text-align: center;
  93.         }
  94.         #poweredby span{
  95.             color: red;
  96.         }
  98.         table td {
  99.             /*text-align: left;*/
  100.             font-family:  "Amaranth", sans-serif;
  101.         }
  103.         #payments {
  104.             margin-top: 20px;
  105.         }
  107.         .table thead th {
  108.             /*text-align: left;*/
  109.             font-family: "Nova Flat", Sans-serif, serif;
  110.             font-size: 12px;
  111.         }
  113.         .input-container {
  114.             display: -ms-flexbox; /* IE10 */
  115.             display: flex;
  116.             width: 100%;
  117.         }
  119.         .icon {
  120.             padding: 10px;
  121.             background: #b1b1b157;
  122.             color: #121212;
  123.             min-width: 50px;
  124.             text-align: center;
  125.             font-size: 28px;
  126.             border-bottom-left-radius: 5px;
  127.             border-top-left-radius: 5px;
  128.         }
  131.         .input-field {
  132.             width: 100%;
  133.             padding: 10px;
  134.             outline: none;
  135.             border: 1px solid #0000000d;
  136.         }
  138.         .input-field:focus {
  139.             border: 2px solid #b1b1b157;
  140.         }
  143.         .btn:hover {
  144.             opacity: 1;
  145.         }
  147.         form {
  148.             text-align: left;
  149.         }
  151.         form .help-block {
  152.             margin-left: 2px;
  153.             color: red;
  154.         }
  156.         td .btn {
  157.             margin-top: 12px;
  158.         }
  160.         .request_fields {
  161.             display: none;
  162.         }
  164.         .reload, .continue, .back-cash{
  165.             border-radius: 30px;
  166.         }
  168.         .mpesa-detail {
  169.             font-family: 'Amaranth', serif;
  170.             text-align: left;
  171.             text-transform: uppercase;
  172.         }
  173.         .mpesa-detail span {
  174.             font-family: "monospace", sans-serif;
  175.             font-size: 14px;
  176.             font-weight: normal;
  177.         }
  179.         .mpesa-detail .fas {
  180.             color: orange;
  181.         }
  184.         .back-cash img {
  185.             height: 20px;
  186.         }
  188.         .parcel b{
  189.             font-family: 'Amaranth', serif;
  190.         }
  192.         .parcel span {
  193.             /*font-family: 'Oswald', sans-serif;*/
  194.             font-family: monospace;
  195.             font-size: 18px;
  196.         }
  197.         .continue {
  198.             font-family: 'Amaranth', sans-serif;
  199.         }
  201.         .input-field {
  204.         }
  206.         .input-field input {
  207.             margin-right: 5px;
  208.         }
  209.         .input-field label {
  210.             width: 90%;
  211.             font-size: 12px;
  212.             text-transform: uppercase;
  213.             font-family: monospace;
  214.         }
  216.     </style>
  218. {% endblock %}
  220. {% block head %}
  221. {% endblock %}
  223. {% block main %}
  227.     <div class="login-page">
  229.         <div class="form">
  230.             {% block responseflash %}
  231.                 {% for flash_message in app.session.flashBag.get('success') %}
  232.                     <div class="alert alert-success alert-dismissable in pro">
  233.                         <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
  234.                         <strong>Success:</strong> {{ flash_message }}
  235.                     </div>
  236.                 {% endfor %}
  238.                 {% for flash_message in app.session.flashBag.get('warning') %}
  239.                     <div class="alert alert-warning alert-dismissable in pro">
  240.                         <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
  241.                         <strong>Warning: </strong> {{ flash_message }}
  242.                     </div>
  243.                 {% endfor %}
  244.                 {% for flash_message in app.session.flashBag.get('error') %}
  245.                     <div class="alert alert-danger alert-dismissable  in pro">
  246.                         <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
  247.                         <strong>Error:</strong> {{ flash_message }}
  248.                     </div>
  249.                 {% endfor %}
  250.             {% endblock %}
  252.             <nav>
  253.                 <div class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
  254.                     <a class="nav-item nav-link active" id="nav-sender-tab" data-toggle="tab" href="#nav-sender" role="tab" aria-controls="nav-sender" aria-selected="true">
  255.                         <p> SENDER <br>
  256.                             <b>{{ transaction.wayBill.senderName }}<br>
  257.                                 {{ transaction.wayBill.senderPhoneNumber }}</b>
  258.                         </p>
  259.                     </a>
  260.                     <a class="nav-item nav-link" id="nav-receiver-tab" data-toggle="tab" href="#nav-receiver" role="tab" aria-controls="nav-receiver" aria-selected="false">
  261.                         <p> RECEIVER <br>
  262.                             <b>{{ transaction.wayBill.receiverName }}<br>
  263.                                 {{ transaction.wayBill.receiverPhoneNumber }}</b>
  264.                         </p>
  265.                     </a>
  266.                     <a class="nav-item nav-link" id="nav-other-tab" data-toggle="tab" href="#nav-other" role="tab" aria-controls="nav-other" aria-selected="false">
  267.                         <p>OTHER</p>
  269.                     </a>
  270.                 </div>
  271.             </nav>
  272.             <div class="tab-content" id="nav-tabContent">
  273.                 <div class="tab-pane fade show active" id="nav-sender" role="tabpanel" aria-labelledby="nav-sender-tab">
  275.                     <div class="row">
  276.                         <div class="col-lg-12 request">
  277.                             {{ form_start(senderForm) }}
  278.                             <div class="request_fields">
  279.                                 {{ form_widget(senderForm.phone,{'attr':{'class':'form-control' , 'value': transaction.wayBill.senderPhoneNumber }} ) }}
  280.                                 {{ form_widget(senderForm.field,{'attr':{'class':'form-control', 'value': 'SENDER'}} ) }}
  281.                             </div>
  283.                             <button type="submit" class="btn btn-success" name="action" value="sender_form">
  284.                                 <i><img src="{{ asset('fos/images/m-pesa-icon.svg') }}" alt=""></i>
  285.                                 Request M-PESA
  286.                                 <i class="fas fa-arrow-circle-right"></i>
  287.                             </button>
  289.                             {{ form_end(senderForm) }}
  290.                         </div>
  291.                     </div>
  293.                 </div>
  294.                 <div class="tab-pane fade" id="nav-receiver" role="tabpanel" aria-labelledby="nav-receiver-tab">
  296.                     <div class="row">
  297.                         <div class="col-lg-12 request">
  298.                             {{ form_start(receiverForm) }}
  299.                             <div class="request_fields" >
  300.                                 {{ form_widget(receiverForm.phone,{'attr':{'class':'form-control' , 'value': transaction.wayBill.receiverPhoneNumber }} ) }}
  301.                                 {{ form_widget(receiverForm.field,{'attr':{'class':'form-control', 'value': 'RECEIVER'}} ) }}
  302.                             </div>
  304.                             <button type="submit" class="btn btn-success" name="action" value="receiver_form">
  305.                                 <i><img src="{{ asset('fos/images/m-pesa-icon.svg') }}" alt=""></i>
  306.                                 Request M-PESA
  307.                                 <i class="fas fa-arrow-circle-right"></i>
  308.                             </button>
  310.                             {{ form_end(receiverForm) }}
  313.                         </div>
  314.                     </div>
  318.                 </div>
  319.                 <div class="tab-pane fade" id="nav-other" role="tabpanel" aria-labelledby="nav-other-tab">
  320.                     {{ form_start(otherForm)}}
  321.                     <div class="row">
  324.                             <div class="col-lg-6 request">
  325.                                 <div class="input-container">
  326.                                     <i class="fas fa-mobile icon"></i>
  327.                                     {{ form_widget(otherForm.phone,{'attr':{'id':'phone','class':'input-field other-field' , 'placeholder': '0720 000 000' }} ) }}
  328.                                     <span class="help-block">
  329.                                              {{ form_errors(otherForm.phone) }}
  330.                                           </span>
  331.                                     {{ form_widget(otherForm.field,{'attr':{'class':'form-control other', 'value': 'OTHER', 'style':'display:none'}} ) }}
  332.                                 </div>
  333.                             </div>
  335.                             <div class="col-lg-6 request-other-btn">
  336.                                 <button type="submit" class="btn btn-success" name="action" value="other_form">
  337.                                     <i><img src="{{ asset('fos/images/m-pesa-icon.svg') }}" alt=""></i>
  338.                                     Request M-PESA
  339.                                     <i class="fas fa-arrow-circle-right"></i>
  340.                                 </button>
  341.                             </div>
  342.                     </div>
  343.                     {{ form_end(otherForm) }}
  345.                 </div>
  346.             </div>
  347.             <div class="row">
  348.                 <div class="col-lg-12">
  349.                     <table class="table table-bordered">
  350.                         <thead class="thead-light">
  351.                         <tr>
  352.                             <th>Waybill</th>
  353.                             <th>Amount</th>
  354.                             <th>Balance</th>
  355.                         </tr>
  356.                         </thead>
  357.                         <tbody>
  358.                         <tr>
  359.                             <td>
  360.                                 {{ transaction.wayBill.id }}
  361.                             </td>
  362.                             <td>
  363.                                 {{ transaction.amount }}
  364.                             </td>
  365.                             <td>
  366.                                 <span id="balance"></span>
  367.                             </td>
  368.                          </tr>
  369.                         </tbody>
  371.                     </table>
  372.                 </div>
  373.                 <div class="col-lg-12">
  375.                     <div class="row" style="margin-top: 20px;">
  376.                         <div class="col">
  377.                             <table id="payments"
  378.                                    class="easyui-datagrid"
  379.                                    style="width:100%; font-weight:normal; text-transform: uppercase; margin-top: 20px;"
  380.                                    singleSelect=true
  381.                                    rownumbers=true
  382.                                    pageSize=30
  383.                                    fitColumns=true>
  385.                                 <thead>
  386.                                 <tr>
  387.                                 </tr>
  388.                                 </thead>
  389.                             </table>
  390.                         </div>
  391.                     </div>
  392.                 </div>
  393.             </div>
  395.             <div class="row">
  396.                 <div class="col-lg-4 request">
  397.                     <br>
  398.                     <a href="{{ path('one_way_bill', {'id': transaction.wayBill.id }) }}" class="btn btn-success back-cash" >
  399.                         <i class="fas fa-arrow-circle-left"></i>
  400.                         Cash
  401.                         <i><img src="{{ asset('fos/images/money_icon.png') }}" alt=""></i>
  402.                     </a>
  403.                 </div>
  405.                 <div class="col-lg-4 request">
  406.                     <button type="button" class="btn btn-success reload"  onclick="$('#payments').datagrid('reload');" >
  407.                         <i class="fas fa-redo"></i>
  408.                         Refresh
  409.                     </button>
  410.                 </div>
  411.                 <div class="col-lg-4 request">
  413.                 </div>
  414.             </div>
  415.             <hr>
  416.             <div class="row">
  417. {#                <div class="col-lg-3">#}
  418. {#                    <div class="parcel">#}
  419. {#                        <b>Waybill</b> <br>#}
  420. {#                        <span>{{ transaction.wayBill.id }}</span><br>#}
  421. {#                        <b>Amount</b> <br>#}
  422. {#                        <span>KES{{ transaction.amount }}</span>#}
  423. {#                    </div>#}
  424. {#                    <div class="balance">#}
  425. {#                        balance: <span id="balance"></span>#}
  426. {#                    </div>#}
  427. {#                </div>#}
  428.                 <div class="col-lg-6">
  429.                     <div id="mpesa-detail_" style="display: none" class="row">
  431.                     </div>
  432.                 </div>
  433.                 <div class="col-lg-6">
  435.                      {{ form_start(mpesaSelectionForm, {'attr': { 'style':' display: block'}})}}
  436.                              {{ form_widget(mpesaSelectionForm.mpesa,{'attr':{'id':'form_id','class':'input-field', 'style':'display: none' }} ) }}
  438.                             <button type="submit" class="btn btn-warning continue" onclick=""  disabled>
  439.                                 Complete
  440.                                 <i class="fas fa-arrow-circle-right"></i>
  441.                             </button>
  443.                     {{ form_end(mpesaSelectionForm)}}
  445.                     {{ form_start(mpesaCashSelectionForm, {'attr': { 'style':' display: block'}})}}
  446.                     {{ form_widget(mpesaCashSelectionForm.mpesa,{'attr':{'id':'form_id','class':'input-field', 'style':'display: none' }} ) }}
  448.                     <button type="submit" class="btn btn-warning continue_cash" onclick=""  disabled>
  449.                         Complete with cash
  450.                         <i class="fas fa-arrow-circle-right"></i>
  451.                     </button>
  453.                     {{ form_end(mpesaCashSelectionForm)}}
  456.                     <span id="balance"></span>
  458.                 </div>
  459.             </div>
  460.         </div>
  461.         <div id="poweredby">
  462.                 <hr/>
  463.                  powered by <span>&copy Ohau Technologies, ltd</span>
  464.         </div>
  465.     </div>
  466. {% endblock %}
  471.  {% block javascripts %}
  472.     {{ parent() }}
  473.     <script>
  474.         $('.other-field').mask('0000 000 000');
  476.         $('#payments').datagrid({
  477.             url:'/payment/list',
  478.             method: 'post',
  479.             pageSize:20,
  480.             singleSelect: false,
  481.             rownumbers:true,
  482.             remoteFilter:true,
  483.             pagination:true,
  484.             fitColumns:true,
  485.             collapsible:true,
  486.             onSelect: function(index, row){
  488.                 selectRow(index,row);
  490.                 // mpesa_payment_selection_id.value = row.id;
  491.                 // mpesa_payment_selection_amount.value = row.transaction_amount;
  492.             },onLoadSuccess(index, field, value) {
  493.                 $(".continue").attr("disabled", true);
  494.                 $("#mpesa-detail_").css('display','none');
  495.                 $(".continue_cash").attr("disabled", true);
  497.                 mpesa_cash_payment_selection_mpesa.innerHTML = '';
  498.                 mpesa_payment_selection_mpesa.innerHTML = '';
  501.                 for(let i=0; i<document.getElementsByName("mpesa_payment_selection[mpesa][]").length; i++){
  502.                     let id = document.getElementsByName("mpesa_payment_selection[mpesa][]")[i].id;
  503.                      document.getElementById(id).checked = false;
  504.                 }
  506.                 for(let i=0; i<document.getElementsByName("mpesa_cash_payment_selection[mpesa][]").length; i++){
  507.                     let id = document.getElementsByName("mpesa_cash_payment_selection[mpesa][]")[i].id;
  508.                     document.getElementById(id).checked = false;
  509.                 }
  511.                 // mpesa_payment_selection_amount.value = '';
  512.                 // mpesa_payment_selection_id.value = '';
  513.                 //
  515.                 // amount.innerHTML = '';
  516.                 // name_.innerHTML = '';
  517.                 // phone.innerHTML = '';
  518.                 // time.innerHTML = '';
  519.                 // transaction.innerHTML ='';
  520.             },onUnselect(index, row){
  521.                 selectRow(index, row);
  523.             },
  524.             columns: [[
  525.                 {field:'ck',title:'NAME',width:20, checkbox: true},
  526.                 {field:'name',title:'NAME',width:50,formatter:function(value,row,index){
  527.                         return `${row.first_name} ${row.middle_name} ${row.last_name}`;
  528.                     }},
  529.                 {field:'transaction_id',title:'TRANSACTION ID',width:80,formatter:function(value,row,index){
  530.                         return row.transaction_id;
  531.                     }},
  532.                 {field:'phone',title:'PHONE',width:50,formatter:function(value,row,index){
  533.                         return row.msisdn;
  534.                     }},
  535.                 {field:'created_at',title:'TIME',width:80,formatter:function(value,row,index){
  536.                         return row.created_at;
  537.                     }},
  538.                 {field:'transaction_Amount',title:'AMOUNT',width:50,formatter:function(value,row,index){
  539.                         return row.transaction_amount;
  540.                     }}
  541.             ]]
  542.         });
  545.         function continue_(){
  546.             $('#tt').datagrid('getSelected')
  547.             let row = $('#tt').datagrid('getSelected');
  548.             if (row){
  549.                 alert('Item ID:'+row.itemid+"\nPrice:"+row.listprice);
  550.             }
  551.         }
  553.         function selectRow(index, row) {
  554.             $("#mpesa-detail_").css('display','block');
  555.             $(".continue_cash").attr("disabled", true);
  557.             console.log(row);
  559.             console.log(row.first_name+' selected');
  561.             let rows = $('#payments').datagrid('getSelections');
  562.             console.log(row.first_name+' selected '+rows.length);
  564.             for(let i=0; i<document.getElementsByName("mpesa_payment_selection[mpesa][]").length; i++){
  565.                 let id = document.getElementsByName("mpesa_payment_selection[mpesa][]")[i].id;
  566.                  document.getElementById(id).checked = false;
  567.             }
  569.             for(let i=0; i<document.getElementsByName("mpesa_cash_payment_selection[mpesa][]").length; i++){
  570.                 let id = document.getElementsByName("mpesa_cash_payment_selection[mpesa][]")[i].id;
  571.                 document.getElementById(id).checked = false;
  572.             }
  578.             let html = '';
  579.             let selectedTotal = 0;
  580.             let checkboxes = '';
  581.             let mpesaCheckboxes = '';
  582.             for(let i=0; i<rows.length; i++) {
  583.                 selectedTotal += (rows[i].transaction_amount * 1);
  584.                 html +=
  585.                     `<div class="col-lg-12">
  586.                         <p class="mpesa-detail" id="mpesa_all_details">
  587.                             <b>MPESA       </b><i class="fas fa-arrow-circle-right"></i><span id="name_"> ${rows[i].first_name} ${rows[i].middle_name} ${rows[i].last_name} </span><br>
  588.                             <b>AMOUNT      </b> <i class="fas fa-arrow-circle-right"></i><span id="amount">${rows[i].transaction_amount}</span><br>
  589. <!--                            <b>PHONE       </b><i class="fas fa-arrow-circle-right"></i> <span id="phone">${rows[i].msisdn}</span><br>-->
  590.                             <b>TIME        </b><i class="fas fa-arrow-circle-right"></i> <span id="time">${rows[i].created_at}</span><br>
  591.                             <b>TRANSACTION </b><i class="fas fa-arrow-circle-right"></i> <span id="transaction">${rows[i].transaction_id}</span><br>
  592.                         </p>
  593.                     </div>`;
  595.                 checkboxes += `
  596.                     <input type="checkbox" id="mpesa_cash_payment_selection_mpesa_${rows[i].id}" name="mpesa_cash_payment_selection[mpesa][]" value="${rows[i].id}" checked>
  597.                     <label for="mpesa_cash_payment_selection_mpesa_${rows[i].id}" >${rows[i].first_name} ${rows[i].middle_name} ${rows[i].last_name}</label>`;
  599.                 mpesaCheckboxes += `
  600.                     <input type="checkbox" id="mpesa_payment_selection_mpesa_${rows[i].id}" name="mpesa_payment_selection[mpesa][]" value="${rows[i].id}" checked>
  601.                     <label for="mpesa_payment_selection_mpesa_${rows[i].id}" >${rows[i].first_name} ${rows[i].middle_name} ${rows[i].last_name}</label>`;
  604.                 if(document.getElementById("mpesa_payment_selection_mpesa_"+rows[i])) {
  605.                     document.getElementById("mpesa_payment_selection_mpesa_"+rows[i].id).checked = true;
  606.                     document.getElementById("mpesa_cash_payment_selection_mpesa_"+rows[i].id).checked = true;
  607.                 }
  610.             }
  612.             mpesa_cash_payment_selection_mpesa.innerHTML = checkboxes;
  613.             mpesa_payment_selection_mpesa.innerHTML = mpesaCheckboxes;
  616.             document.getElementById("mpesa-detail_").innerHTML = html;
  617.             let paymentBalance = {{ transaction.amount }} - selectedTotal;
  618.             document.getElementById("balance").innerHTML = paymentBalance;
  620.             $(".continue_cash").attr("disabled", true);
  622.             if(paymentBalance === 0){
  623.                 $(".continue").attr("disabled", false);
  626.             }else{
  627.                 $(".continue").attr("disabled", true);
  628.                 if(paymentBalance <= 0){
  629.                     $(".continue_cash").attr("disabled", true);
  630.                     console.log('disable continue-cash');
  631.                 }else{
  632.                     $(".continue_cash").attr("disabled", false);
  634.                     console.log('enable continue-cash '+paymentBalance);
  635.                 }
  636.             }
  637.         }
  640.     </script>
  642. {% endblock %}