@extends('front.layouts.main')
@section('content')

<section class="pt-30">
    <div class="container col">
        <div class="mb-30">
            <h4 class="mt-0 mb-10">PREVIEW OF YOUR GIFT CARD</h4>
            <figure><img src="{{ explode(",",$data['gift_id'])[1] }}" alt="Gift Card" /></figure>
            <div class="d-flex flex-wrap mt-20 preview-gift-card">
                <div class="s3 mb-20">
                    <label>TO</label>
                    <div>{{ $data['to_email'] }}</div>
                </div>
                <div class="s3 mb-20">
                    <label>AMOUNT</label>
                    <div>{{ $data['gift_amt'] }}</div>
                </div>
                <div class="s6 mb-20">
                    <label>MESSAGE</label>
                    <div>{{ $data['from_msg'] }}</div>
                </div>
            </div>
            <!--<button type="button" class="btn btn-green" onclick="checkout()">CHECKOUT</button>-->
        </div>
        <div class="mb-20">
            <div class="radio-inline d-flex flex-wrap payment-option">
                <label class="radio-inner fs-18 text-green mr-20">
                    <input type="radio" name="payment_Type" value="5" >
                    PAY BY VISA/MASTER/MAESTRO CARD
                    <span class="radio-blue"></span>
                </label>
                 <label class="radio-inner fs-18 text-green mr-20">
                    <input type="radio" name="payment_Type" value="6" >
                    PAY BY M-PESA
                    <span class="radio-blue"></span>
                </label>

              <!--<label class="radio-inner fs-18 mr-20 text-green">
                    <input type="radio" name="payment_Type" value="1">
                    PAY ONLINE 
                    <span class="radio-blue"></span>
                </label>
               <label class="radio-inner fs-18 text-green mr-20">
                    <input type="radio" name="payment_Type" value="3" >
                    AIRTEL MONEY
                    <span class="radio-blue"></span>
                </label> 
                <label class="radio-inner fs-18 text-green mr-20">
                    <input type="radio" name="payment_Type" value="4" >
                    MTN MOMO PAY
                    <span class="radio-blue"></span>
                </label>

                <label class="radio-inner fs-18 text-green">
                    <input type="radio" name="payment_Type" value="1" >
                    MOBILE MONEY
                    <span class="radio-blue"></span>
                </label> -->
            </div>
        </div>
        <div class="mb-40">
            <button type="button" onclick="checkPayment()" class="btn btn-green">CONFIRM ORDER</button>
        </div>
    </div>
</section>

<div class="popup" id="aitelPyment" data-popup="airtel-payment" style="display: none;">
    <div class="popup-inner">
        <div class="popup-header">
            <h3 class="mt-0 mb-10"></h3>
        </div>
        <div class="popup-max-hgt font-brandon-text">
            <div class="text-center mb-40">
                <form id="walletpayment" method="post">
                    
                    <div class="form-row mb-20">
                        <div class="col s6" style="float:left;">
                            <div class="mb-20">                                
                            <label>Enter Your Mobile Number</label>
                            <input type="tel" id="mobile" maxlength="9" title="please enter your number" class="form-input controls" name="mobile" required="required">
                            </div>
                        </div>
                        <div class="col s5" style="float:left;">
                            
                        <div class="mt-20">
                                <button type="submit" class="btn btn-green">CONTINUE ORDER</button>
                        </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <a class="popup-close" data-popup-close="airtel-payment" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click" style="display: none;"></div>
</div>


<div class="popup" id="airtelMoney" data-popup="airtel-payment" style="display: none;">
    <div class="popup-inner">
        <div class="popup-header">
            <h3 class="mt-0 mb-10"></h3>
        </div>
        <div class="popup-max-hgt font-brandon-text">
            <div class="text-center mb-40">
                <form id="airtelpayment" method="post">

                    <div class="form-row mb-20">
                        <div class="col s6" style="float:left;">
                            <div class="mb-20">
                            <label>Enter Your Mobile Number</label>
                            <div class="d-flex justify-content-center align-items-center">
                                <p class="mb-0" style="margin-right: 5px">+254</p>
                                <input type="tel" id="mpesa_phone_number" maxlength="9" title="Please enter your number" class="form-input controls" name="mobile" required="required" value="">
                            </div>
                           
                            </div>
                        </div>
                        <div class="col s5" style="float:left;">

                        <div class="mt-20">
                                <button type="submit" class="btn btn-green">CONTINUE ORDER</button>
                        </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <a class="popup-close" data-popup-close="airtel-payment" href="#"><i class="icon-cross"></i></a>
    </div>
    <div class="overlay overlay-click" style="display: none;"></div>
</div>

<div class="popup" id="Pymentloader" data-popup="airtel-payment" style="display: none;">
    <div class="popup-inner" style="border: none;
    background: transparent;">
        
        <div class="popup-max-hgt font-brandon-text">
            <div class="text-center mb-40">
                <img src="