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 %}