{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
@endsection
@section('content')
<style>
    .table-condensed{
        background:#fff;
    }
    .card-custom{
        margin-top: 25px;
    }
    #newbtn
    {
        background: #B52555;
    }
    #newbtn button
    {
        color: #fff;
    }
    .dot-cir {
        font-size: 11px;
        padding-right: 21px;
        color: #1FD9A9;
    }
    .dot-cir-1 {
        font-size: 11px;
        padding-right: 21px;
        color: #FF8989;
    }
</style>
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="d-flex flex-column-fluid">
        <div class="container">
            <div class="row">
                <div class="container">
                    <div class="alert alert-custom alert-white alert-shadow gutter-b head-line top-box" role="alert">
                        <div class="alert-text head-text">My Wallet<br>
                        </div>
                        <div class="alert-icon">
                            <div class="card-toolbar">
                                <a href="" class="btn btn-info font-weight-bolder font-size-sm mr-3 add-to-camp-btn text-name"> Current Wallet Amount :
                                    <span class="amount-td1">{{ $payment_fetch_data['current_user_total']}}</span>
                                </a>
                                <a href="" class="btn btn-danger font-weight-bolder font-size-sm add-to-camp-btn text-name">Total Used Amount :
                                    <span class="amount-td2">{{ $payment_fetch_data['current_user_used_total']}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex flex-row">
                        <div class="flex-row-auto offcanvas-mobile w-300px w-xl-325px credit-wrap" id="kt_profile_aside">
                            <div class="card card-custom  bg-pay">
                                <div class="card-body ">
                                    <div class="d-flex justify-content-between flex-column pt-4 h-100">
                                       <div class="pb-5">
                                       <div class="select-credit">
                                       <h3 class="topup-cre">Add Wallet Topup Credit</h3>
                                       <div class="alert-icon">
                                            <div class="card-toolbar">
                                                <!-- <a href="#" class="btn btn-info font-weight-bolder font-size-sm mr-3 add-to-camp-btn prize-drop"> -->
                                                    <div class="mr-1">
                                                        <select id="paymentPakagesDropdown" class="form-control btn-box">
                                                            <option value="" data-title=""> Select Topup </option>
                                                            <option value="5" data-title="£ 5.00"> £ 5.00 </option>
                                                            <option value="10" data-title="£ 10.00"> £ 10.00 </option>
                                                            <option value="15" data-title="£ 15.00"> £ 15.00 </option>
                                                            <option value="20" data-title="£ 20.00"> £ 20.00 </option>
                                                            <option value="custom_credit_value" data-title="£ 20.00"> Add More than £ 20.00 </option>
                                                        </select>
                                                        <input type="number" id="custom-credit-box" placeholder="Enter amount over £ 20.00" class="form-control" style="margin-top: 5px;">
                                                    </div>
                                                <!-- </a> -->
                                                <button type="submit" class="btn btn-danger d-flex font-weight-bolder font-size-sm add-to-camp-btn pay-btn btn_click btn-pay" data-btn="" id="topupButton" data-toggle="modal" disabled>Pay</a>
                                            </div>
                                        </div>
                                        <p class="vat">Credit cost per letter sent<b>(*Inclusive of VAT)</b><b style="font-size: 16px;">£0.78</b>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card card-custom top-box">
                <div class="card-header flex-wrap border-0 pt-6 pb-0">
                    <div class="card-body Return-div">
                        <div class="mb-7">
                            <div class="row ">
                                <div class="card-body">
                                    <div class="mb-7">
                                        <div class="row align-items-center">
                                            <div class="col-lg-9 col-xl-8">
                                                <div class="row align-items-center">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <table class="table" id="paymentDatatable">
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>Amount</th>
                                                <th>Payment Title</th>
                                                <th>Post Count</th>
                                                <th>Date</th>
                                                <th>Payment</th>
                                                <th>Status</th>
                                                <th>Invoice</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>            
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
    </div>
</div>
</div>
</div>

<!-- Payment modal start  -->
<div class="modal fade filter-modal" id="paymentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalSizeLg" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content modal-box-content">
            <div class="modal-header filter-modal-head">    
                <h5 class="modal-title" id="exampleModalLabel">Payment Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <i aria-hidden="true" class="ki ki-close"></i>
                </button>
            </div>
             <form id="payment-form">
                <div class="modal-body">               
                    <div class="modal-body">
                        <input type="hidden" name="amount" id="payAmount" />
                        <input type="hidden" name="platform" value="WEB" />
                        <div class="card-body">
                            <div class="form-group row">
                                <div class="col-lg-12">
                                    <label>Name on card</label>
                                    <input class="form-control form-control-lg form-control-solid" id="cardholder-name" type="text" name="first_name" required value="">
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="form-group row">
                                <div class="col-lg-12">
                                    <label>Credit or debit card</label>
                                    <div id="card-element" style="border: 1px solid #cccccc; padding: 2px; margin-bottom:10px">
                                    </div>
                                    <div id="card-errors" role="alert"></div>
                                    <p style="margin: 50px 0px -50px 0px;">* VAT (20%) taxed on the topup payment</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">       
                    <button type="submit" class="btn btn-primary font-weight-bold" id="pay_now_button">Pay now</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Payment modal end  -->
@endsection

{{-- Scripts Section --}}
@section('scripts')
{{-- vendors --}}
<script src="{!! asset('admin/js/jquery.dataTables.js') !!}"></script>
<script src="{!! asset('admin/js/dataTables.bootstrap4.js') !!}"></script>
<script src="{!! asset('admin/js/dataTables.responsive.min.js') !!}"></script>
<script src="{!! asset('admin/js/responsive.bootstrap4.min.js') !!}"></script>
<script src="{!! asset('admin/js/tables-datatable.js') !!}"></script>
<script type="text/javascript" src="{{ asset('js/developer/ajax-crud.js') }}"></script>
{{-- page scripts --}}
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/pages/crud/forms/widgets/select2.js')}}"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
    var link                = '{{ url('/') }}';
    var token               = '{{ csrf_token() }}';
    var single_post_cost    = '{{ config('stannp_api.single_post_cost') }}';
    var percentage_of_vat   = '{{ config('stannp_api.vat_percentage') }}';
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#custom-credit-box').hide();
        $('#topupButton').attr('disabled', true);
        // $("#custom-credit-box").inputFilter(function(value) {
        //     return /^\d*$/.test(value); // Allow digits only, using a RegExp
        // });

        var table = $('#paymentDatatable').DataTable({
            "aaSorting": [],
            "pageLength": 10,
            "sDom": '<"top"f>rt<"bottom"pli><"clear">',
            language: { search: '', searchPlaceholder: "Search...", "sLengthMenu": "_MENU_","sInfo" : "Showing _START_ - _END_ of _TOTAL_ ", "sLengthMenu": "_MENU_" },                
            columnDefs: [
                {
                    targets: 1,
                    orderable: false,    
                },
                {
                    targets: 5,
                    width:"10%",    
                },
                {
                    targets: 7,
                    width:"15%",
                    orderable: false,
                },
            ],
            mark: true,
            ajax: {
                url: '{!! route('fetchpaymentdata') !!}',
                data: function (d) {
                }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex' },
                {data: 'payment_amount', name: 'payment_amount'},
                {data: 'title', name: 'title'},
                {data: 'count_val', name: 'count_val'},
                {data: 'date', name: 'date'},
                {data: 'payment', name: 'payment'},
                {data: 'status', name: 'status'},       
                {data: 'invoice', name: 'invoice'},
            ]
      });
    });

  $('#paymentPakagesDropdown').on('change', function() {
    // var selected_value  = $(this);
    var selected_value  = $(this).children("option:selected").val();
    // console.log(vat_amount);
    // console.log(selected_value);
    var topup_button    = $('#topupButton');
    if (selected_value != '') {
        $('#custom-credit-box').hide();
      if (selected_value == 'custom_credit_value') {
        topup_button.attr('disabled', true);
        $('#custom-credit-box').show();
      } else {
        // calculate total amount from selected amount by adding VAT
        selected_value      = parseFloat(selected_value);
        vat_amount          = parseFloat(selected_value * (percentage_of_vat/100));
        selected_value      = selected_value + vat_amount;
        $('#custom-credit-box').val("");
        topup_button.attr('disabled', false);
        // var sel_text = $("#paymentPakagesDropdown option:selected").text();
        $('#payAmount').val(selected_value);
        $('#pay_now_button').text("Pay £" + parseFloat(selected_value).toFixed(2));
      }
    } else {
        topup_button.attr('disabled', true);
        $('#custom-credit-box').hide();
    }
  });

  $('#custom-credit-box').on('keyup', function() {
    var custom_credit_value     = parseFloat(parseInt($(this).val()));
    var topup_button            = $('#topupButton');
    if (custom_credit_value > 20) {
      vat_amount          = parseFloat(custom_credit_value * (percentage_of_vat/100));
      custom_credit_value = custom_credit_value + vat_amount;
      // console.log(vat_amount);
      // console.log(custom_credit_value);
      topup_button.attr('disabled', false);
      $('#pay_now_button').text("Pay £ " + parseFloat(custom_credit_value).toFixed(2));
       $('#payAmount').val(custom_credit_value);
    } else {
      topup_button.attr('disabled', true);
      $('#pay_now_button').text("Pay ");
    }
  });
        

  $('#topupButton').on('click', function() {
      $('#paymentModal').modal('show');
  });
  
  //payment related scripts
  var stripe        = '';
  var app_env       = '{{ env('APP_ENV') }}';
  var intentCreate  = "{{URL::to('create/payment/intent')}}";
  if (app_env == 'live') {
    stripe = Stripe('{{ config('services.stripe.key') }}');
  } else {
    stripe = Stripe('{{ config('services.stripe.test_key') }}');
  }
</script>
<script src="{{ asset('js/payment.js?v2') }}"></script> 
@endsection