<div class="modal fade" id="wallet_payment_modal" tabindex="-1" role="dialog" aria-labelledby="track_unreported" aria-hidden="true" data-id="0" data_price="{{PRICE}}">
    <div class="modal-dialog mat_box" role="document">
        <div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">{{LANG Choose a payment method.}}</h5>
			</div>
            <div class="modal-body">
				<div class="pay_method">
					<?php if($music->config->paypal_payment == 'on'){?>
						<button class="btn" onclick="purchaseWalletPaypal($(this),'{{PRICE}}')" id="btn-wallet-paypal-payment" data-id="" data-title="" data-price="{{PRICE}}">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#283593" d="M8.32,21.97C8.21,21.92 8.08,21.76 8.06,21.65C8.03,21.5 8,21.76 8.66,17.56C9.26,13.76 9.25,13.82 9.33,13.71C9.46,13.54 9.44,13.54 10.94,13.53C12.26,13.5 12.54,13.5 13.13,13.41C16.38,12.96 18.39,11.05 19.09,7.75C19.13,7.53 19.17,7.34 19.18,7.34C19.18,7.33 19.25,7.38 19.33,7.44C20.36,8.22 20.71,9.66 20.32,11.58C19.86,13.87 18.64,15.39 16.74,16.04C15.93,16.32 15.25,16.43 14.05,16.46C13.25,16.5 13.23,16.5 13,16.65C12.83,16.82 12.84,16.79 12.45,19.2C12.18,20.9 12.08,21.45 12.04,21.55C11.97,21.71 11.83,21.85 11.67,21.93L11.56,22H10C8.71,22 8.38,22 8.32,21.97V21.97M3.82,19.74C3.63,19.64 3.5,19.47 3.5,19.27C3.5,19 6.11,2.68 6.18,2.5C6.27,2.32 6.5,2.13 6.68,2.06L6.83,2H10.36C14.27,2 14.12,2 15,2.2C17.62,2.75 18.82,4.5 18.37,7.13C17.87,10.06 16.39,11.8 13.87,12.43C13,12.64 12.39,12.7 10.73,12.7C9.42,12.7 9.32,12.71 9.06,12.85C8.8,13 8.59,13.27 8.5,13.6C8.46,13.67 8.23,15.07 7.97,16.7C7.71,18.33 7.5,19.69 7.5,19.72L7.47,19.78H5.69C4.11,19.78 3.89,19.78 3.82,19.74V19.74Z" /></svg>{{LANG PayPal}}
						</button>
					<?php } ?>
					<?php if($music->config->stripe_payment == 'on'){?>
						<button class="btn" onclick="purchaseWalletStripe($(this),'{{PRICE}}')" id="btn-wallet-stripe-payment" data-id="" data-title="" data-price="{{PRICE}}">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#6BBEA1" d="M20,8H4V6H20M20,18H4V12H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>{{LANG Credit Card}}
						</button>
					<?php } ?>
                    <?php if($music->config->bank_payment == 'on'){?>
						<button class="btn" onclick="purchaseWalletBank($(this),'{{PRICE}}')" id="btn-wallet-bank-payment" data-id="" data-title="" data-price="{{PRICE}}">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#B5C3C6" d="M11.5,1L2,6V8H21V6M16,10V17H19V10M2,22H21V19H2M10,10V17H13V10M4,10V17H7V10H4Z" /></svg>{{LANG Bank transfer}}
						</button>
                    <?php } ?>
                    <?php if($music->config->cashfree_payment == 'on'){?>
                        <button class="btn" onclick="cashfree_pay($(this),'wallet')" id="btn-cashfree-payment" data-id="" data-title="" data-price="{{PRICE}}">
                            <img src="{{CONFIG theme_url}}/img/cashfree.png">{{LANG Cashfree}}
                        </button>
                    <?php } ?>
                    <?php if($music->config->paystack_payment == 'on'){?>
                        <button class="btn" onclick="paystack_pay($(this),'wallet')" id="btn-paystack-payment" data-id="" data-title="" data-price="{{PRICE}}">
                            <img src="{{CONFIG theme_url}}/img/paystack.png">{{LANG Paystack}}
                        </button>
                    <?php } ?>
                    <?php if($music->config->razorpay_payment == 'on'){?>
                        <button class="btn" onclick="razorpay_pay($(this),'wallet')" id="btn-razorpay-payment" data-id="" data-title="" data-price="{{PRICE}}">
                            <img src="{{CONFIG theme_url}}/img/razorpay.png">{{LANG Razorpay}}
                        </button>
                    <?php } ?>
                    <?php if($music->config->paysera_payment == 'on'){?>
                        <button class="btn" onclick="paysera_pay($(this),'wallet')" id="btn-paysera-payment" data-id="" data-title="" data-price="{{PRICE}}">
                            <img src="{{CONFIG theme_url}}/img/paysera.png">{{LANG Paysera}}
                        </button>
                    <?php } ?>
                    <?php if($music->config->checkout_payment == 'on'){?>
                        <button class="btn" onclick="checkout_pay($(this),'wallet')" id="btn-checkout-payment" data-id="" data-title="" data-price="{{PRICE}}">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"> <path style="fill:#019ACA;" d="M512,256c0,24.409-3.417,48.013-9.791,70.374C471.636,433.539,372.976,512,256,512 C114.615,512,0,397.385,0,256S114.615,0,256,0c112.149,0,207.454,72.119,242.071,172.502C507.099,198.677,512,226.764,512,256z"/> <g> <path style="fill:#F0EFEB;" d="M498.072,172.502c-19.926-12.455-45.108-17.784-71.45-12.904 c-44.23,8.192-74.073,44.387-74.094,91.167c-0.387,6.071,0.188,13.354,1.985,20.511c8.589,34.262,29.414,58.943,66.173,68.305 c30.103,7.67,57.971,3.929,81.523-13.208C508.583,304.013,512,280.409,512,256C512,226.764,507.099,198.677,498.072,172.502z M490.851,295.643c-16.865,18.15-38.013,22.936-61.2,16.645c-23.928-6.499-37.48-23.604-43.071-47.355 c-1.17-4.963-1.546-10.021-1.296-14.221c0.021-32.434,19.435-57.522,48.232-63.206c38.076-7.513,72.422,19.895,73.895,58.776 C508.123,264.903,503.745,281.767,490.851,295.643z"/> <path style="fill:#F0EFEB;" d="M84.868,312.922c12.492,0,24.985,0,37.476,0c13.791,0,27.583,0.135,41.371-0.085 c3.992-0.064,5.327,1.111,5.091,5.137c-0.332,5.659-0.428,11.379,0.021,17.022c0.388,4.87-1.636,5.606-5.925,5.588 c-36.91-0.15-73.82-0.087-110.73-0.087c-13.526,0-13.104-0.018-13.689-13.669c-0.332-7.75,1.921-12.893,8.097-17.96 c22.096-18.125,43.654-36.911,65.297-55.583c6.453-5.567,12.277-11.784,16.926-19.021c5.188-8.074,6.848-16.926,5.221-26.21 c-2.922-16.664-19.722-25.666-38.273-20.93c-12.54,3.201-21.052,11.856-28.623,21.486c-2.861,3.639-4.581,3.916-7.954,0.935 c-4.699-4.153-9.793-7.873-14.827-11.631c-1.899-1.417-2.722-2.39-1.067-4.792c21.73-31.543,52.725-42.546,88.687-30.858 c38.834,12.621,42.357,56.672,26.059,81.762c-7.615,11.723-17.872,20.935-28.433,29.82c-15.021,12.639-30.179,25.116-45.279,37.663 C84.498,311.98,84.683,312.451,84.868,312.922z"/> <path style="fill:#F0EFEB;" d="M284.865,343.452c-54.955,1.164-96.58-39.644-96.716-90.472 c-0.123-46.273,26.955-82.92,69.758-92.655c30.503-6.938,59.117-2.159,84.541,17.437c4.598,3.543,4.352,5.552,0.273,9.008 c-4.629,3.922-8.965,8.245-13.037,12.749c-2.925,3.235-4.868,3.752-8.727,0.8c-16.533-12.647-35.196-17.295-55.577-12.103 c-25.378,6.466-43.248,29.734-44.409,57.509c-0.971,23.229,6.213,43.253,25.18,57.717c21.007,16.02,50.546,15.303,73.637-1.764 c4.195-3.101,6.369-3.111,9.705,0.753c3.959,4.585,8.463,8.749,13.056,12.718c3.134,2.707,2.306,4.116-0.445,6.434 C324.287,336.604,303.68,343.595,284.865,343.452z"/> </g></svg>{{LANG 2checkout}}
                        </button>
                    <?php } ?>
                    <?php if($music->config->iyzipay_payment == 'on'){?>
                        <button class="btn" onclick="iyzipay_pay($(this),'wallet')" id="btn-iyzipay-payment" data-id="" data-title="" data-price="{{PRICE}}">
                            <img src="{{CONFIG theme_url}}/img/iyzipay.png">{{LANG Iyzipay}}
                        </button>
                    <?php } ?>
                    <?php if($music->config->payu_payment == 'on'){?>
                        <button class="btn" onclick="payu_pay($(this),'wallet')" id="btn-payu-payment" data-id="" data-title="" data-price="{{PRICE}}">
                            <img src="{{CONFIG theme_url}}/img/payu.png">{{LANG Payu}}
                        </button>
                    <?php } ?>
                    <?php if($music->config->securionpay_payment == 'on'){?>
                        <button class="btn" onclick="securionpay_pay($(this),'wallet')" id="btn-securionpay-payment" data-id="" data-title="" data-price="{{PRICE}}">
                            <img src="{{CONFIG theme_url}}/img/securionpay.png">{{LANG Securionpay}}
                        </button>
                    <?php } ?>
                    <?php if($music->config->authorize_payment == 'on'){?>
                        <button class="btn" onclick="authorize_pay($(this),'wallet')" id="btn-authorize-payment" data-id="" data-title="" data-price="{{PRICE}}">
                            <img src="{{CONFIG theme_url}}/img/authorize.png">{{LANG Authorize}}
                        </button>
                    <?php } ?>
				</div>
            </div>
        </div>
    </div>
	<input id="wallet_amount" type="hidden" value="{{PRICE}}">
</div>


<div class="modal fade" id="stripe_modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog " role="document">
		<div class="modal-content add_money_modal add_address_modal" style="    background-color: #272727;">
			<h5 class="modal-title text-center">Stripe</h5>
			<div class="modal-body">
				<div id="stripe_alert" style="    color: red;"></div>
				<form id="stripe_form" method="post">
					<div class="form-group">
						<input class="form-control shop_input" type="text" placeholder="{{LANG Name}}"  value="{{ME name}}" id="stripe_name">
					</div>
					<div class="form-group">
						<input class="form-control shop_input" type="email" placeholder="{{LANG Email}}" value="{{ME email}}" id="stripe_email">
					</div>
					<div class="form-group">
						<input id="stripe_number" class="form-control shop_input" type="text" placeholder="{{LANG Card Number}}">
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<select id="stripe_month" type="text" class="form-control shop_input" autocomplete="off" placeholder="{{LANG Month}} (01)">
									<option value="01">01</option>
									<option value="02">02</option>
									<option value="03">03</option>
									<option value="04">04</option>
									<option value="05">05</option>
									<option value="06">06</option>
									<option value="07">07</option>
									<option value="08">08</option>
									<option value="09">09</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
								</select>
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<select id="stripe_year" type="text" class="form-control shop_input" autocomplete="off" placeholder="{{LANG Year}} (2019)">
									<?php for ($i=date('Y'); $i <= date('Y')+15; $i++) {  ?>
									<option value="<?php echo($i) ?>"><?php echo($i) ?></option>
									<?php } ?>
								</select>
							</div>
						</div>
					</div>
					<div class="form-group">
						<input id="stripe_cvc" value="123" type="text" class="form-control shop_input" autocomplete="off" placeholder="CVC" maxlength="3" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-main" onclick="SH_StripeRequest()" id="stripe_button" >{{LANG Pay}}</button>
						<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{LANG Cancel}}</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>

<script>
    function purchaseWalletPaypal(element) {
        ElementText = element.text();
        element.text("{{LANG Please wait..}}");
        element.attr('disabled', 'true');
        $.get('{{CONFIG ajax_url}}/get-wallet-url?price={{PRICE}}', function (data) {
            if (data.status == 200) {
                element.text("{{LANG Redirecting..}}");
                location.href = data.url;
            } else {
                element.text("{{LANG Oops, an error found.}}");
                element.removeAttr('disabled');
                console.log(data.error);
            }
        });
    }

    function openStripeModel(){
        //$('#stripe_email').val($('#stripe_email').attr('data-email'));
        $('#stripe_number').val('');
        $('#stripe_cvc').val('');
        $('#stripe_modal').removeClass('up_rec_img_ready, up_rec_active');
        $('#stripe_modal').modal('show');
	}
    var stripe_array = [];
    function SH_StripeRequest(argument) {
        if ($("#stripe_name").val() != '' && $("#stripe_email").val() != '' && $("#stripe_number").val() != '' && $("#stripe_month").val() != '' && $("#stripe_year").val() != '' && $("#stripe_cvc").val() != '' && $("#wallet_amount").val() != '') {
            var script = document.createElement('script');
            script.src = 'https://js.stripe.com/v2/';
            script.type = 'text/javascript';
            script.onload = script.onreadystatechange = function() {
                Stripe.setPublishableKey('{{CONFIG stripe_id}}');

                $('#stripe_button').attr('disabled', 'true');
                $('#stripe_button').text("{{LANG Please wait..}}");
                stripe_array['stripe_name'] = $('#stripe_name').val();
                stripe_array['stripe_email'] = $('#stripe_email').val();
                stripe_array['stripe_number'] = $('#stripe_number').val();
                stripe_array['stripe_month'] = $('#stripe_month').val();
                stripe_array['stripe_year'] = $('#stripe_year').val();
                stripe_array['stripe_cvc'] = $('#stripe_cvc').val();
                stripe_array['amount'] = $('#wallet_amount').val();
                Stripe.createToken({
                    number: $('#stripe_number').val(),
                    exp_month: $('#stripe_month').val(),
                    exp_year: $('#stripe_year').val(),
                    cvc: $('#stripe_cvc').val()
                }, SH_StripeResponseHandler);
            };
            let head  = document.getElementsByTagName('head')[0];
            head.appendChild(script);
        }
        else{
            $('#stripe_alert').html("{{LANG Please check your details}}");
        }
    }
    function SH_StripeResponseHandler(status, response) {
        if (response.error) {
            $('#stripe_alert').html(response.error.message);
            $('#stripe_button').removeAttr('disabled');
            $('#stripe_button').text("{{LANG Pay}}");
        } else {
            stripe_array['token'] = response.id;

            $.post('{{CONFIG ajax_url}}/stripe-wallet', {
                stripeToken: stripe_array['token'],
                stripe_name: stripe_array['stripe_name'],
                stripe_email: stripe_array['stripe_email'],
                stripe_number: stripe_array['stripe_number'],
                stripe_month: stripe_array['stripe_month'],
                stripe_year: stripe_array['stripe_year'],
                stripe_cvc: stripe_array['stripe_cvc'],
                amount: stripe_array['amount'],
                description: 'Replenish My Balance',
                price: stripe_array['amount'],
                payType: 'wallet',
                trackID: ''
            }, function (data) {
                if (data.status == 200) {
                    window.location = data.url;
                }else{
                    alert(data.message);
                }
            });
        }
    }
    function purchaseWalletBank(element,price) {
        var title = '{{LANG Replenish My Balance}}';

        $('#btn-upload-receipt').attr('data-id', 1);
        $('#btn-upload-receipt').attr('data-mode', 'wallet');
        $('#btn-upload-receipt').attr('data-title', title);
        $('#btn-upload-receipt').attr('data-price', price);

        $('#receipt_img_path').html('');
        $('#receipt_img_preview').attr('src', '');
        $('.bank_transfer_modal').removeClass('up_rec_img_ready, up_rec_active');
        $('.bank_transfer_modal').modal('show');
    }
</script>