{% include 'layouts/product_header.html' %}



<!-- BREADCRUMB AREA START -->
<div class="ltn__breadcrumb-area ltn__breadcrumb-area-2 ltn__breadcrumb-color-white bg-overlay-theme-black-90 bg-image" data-bg="img/bg/9.jpg">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ltn__breadcrumb-inner ltn__breadcrumb-inner-2 justify-content-between">
                    <div class="section-title-area ltn__section-title-2">
                        <h6 class="section-subtitle ltn__secondary-color">  Welcome to our company</h6>
                        <h1 class="section-title white-color">Checkout</h1>
                    </div>
                    <div class="ltn__breadcrumb-list">
                        <ul>
                            <li><a href="/">Home</a></li>
                            <li>Checkout</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- BREADCRUMB AREA END -->

<!-- WISHLIST AREA START -->
<div class="ltn__checkout-area mb-105">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="ltn__checkout-inner">
<!--                    <div class="ltn__checkout-single-content ltn__returning-customer-wrap">
                        <h5>Returning customer? <a class="ltn__secondary-color" href="#ltn__returning-customer-login" data-toggle="collapse">Click here to login</a></h5>
                        <div id="ltn__returning-customer-login" class="collapse ltn__checkout-single-content-info">
                            <div class="ltn_coupon-code-form ltn__form-box">
                                <p>Please login your accont.</p>
                                <form action="#" >
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="input-item input-item-name ltn__custom-icon">
                                                <input type="text" name="ltn__name" placeholder="Enter your name">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-item input-item-email ltn__custom-icon">
                                                <input type="email" name="ltn__email" placeholder="Enter email address">
                                            </div>
                                        </div>
                                    </div>
                                    <button class="btn theme-btn-1 btn-effect-1 text-uppercase">Login</button>
                                    <label class="input-info-save mb-0"><input type="checkbox" name="agree"> Remember me</label>
                                    <p class="mt-30"><a href="/register">Lost your password?</a></p>
                                </form>
                            </div>
                        </div>
                    </div>-->
<!--                    <div class="ltn__checkout-single-content ltn__coupon-code-wrap">
                        <h5>Have a coupon? <a class="ltn__secondary-color" href="#ltn__coupon-code" data-toggle="collapse">Click here to enter your code</a></h5>
                        <div id="ltn__coupon-code" class="collapse ltn__checkout-single-content-info">
                            <div class="ltn__coupon-code-form">
                                <p>If you have a coupon code, please apply it below.</p>
                                <form action="#" >
                                    <input type="text" name="coupon-code" placeholder="Coupon code">
                                    <button class="btn theme-btn-2 btn-effect-2 text-uppercase">Apply Coupon</button>
                                </form>
                            </div>
                        </div>
                    </div>-->
                    <div class="ltn__checkout-single-content mt-50">
                        <h4 class="title-2">Billing & Shipping Details</h4>
                        <div class="ltn__checkout-single-content-info">
                            <form>
                                <h6>Personal Information</h6>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-item input-item-name ltn__custom-icon">
                                            <input type="text" name="ltn__name" value="{{ user_info[0].full_name }}" id="full_name" placeholder="Full Name" style="margin-bottom: 0px">
                                        </div>
                                        <div id="msg_full_name" style="margin-bottom: 20px;font-size: 14px"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-item input-item-email ltn__custom-icon">
                                            <input type="email" name="ltn__email" placeholder="Email Address" value="{{ user_info[0].email }}" id="email" disabled="" style="margin-bottom: 0px">
                                            <div id="msg_email" style="margin-bottom: 20px;font-size: 14px"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-item input-item-phone ltn__custom-icon">
                                            <input type="number" name="ltn__phone" placeholder="Mobile No" id="mobile_no" value="{{ user_info[0].mobileno }}" style="margin-bottom: 0px">
                                            <div id="msg_mobile_no" style="margin-bottom: 20px;font-size: 14px"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4 col-md-4">
                                        <h6>Country</h6>
                                        <div class="input-item">
                                            <select class="nice-select">
                                                <!--<option>Select Country</option>-->
                                                <option selected="">India</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-8">
                                        <h6>Address</h6>
                                        <div class="input-item">
                                            <input type="text" id="address" placeholder="House number and street name" value="{{ user_info[0].address }}" style="margin-bottom: 0px">
                                            <div id="msg_address" style="margin-bottom: 20px;font-size: 14px"></div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <h6>Village / Town / City</h6>
                                        <div class="input-item">
                                            <input type="text" id="town" placeholder="City" value="{{ user_info[0].town }}"  style="margin-bottom: 0px">
                                            <div id="msg_town" style="margin-bottom: 20px;font-size: 14px"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4 col-md-3">
                                        <h6>Dist </h6>
                                        <div class="input-item">
                                            <input type="text" id="dist" placeholder="District" value="{{ user_info[0].district }}" style="margin-bottom: 0px">
                                            <div id="msg_dist" style="margin-bottom: 20px;font-size: 14px"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-3">
                                        <h6>State </h6>
                                        <div class="input-item">
                                            <input type="text" id="state" placeholder="State" disabled="" value="Gujarat" style="margin-bottom: 0px">
                                            <div id="msg_state" style="margin-bottom: 20px;font-size: 14px"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-3">
                                        <h6>Zip</h6>
                                        <div class="input-item">
                                            <input type="text" id="zipcode" placeholder="Zipcode" value="{{ user_info[0].zipcode }}" style="margin-bottom: 0px">
                                            <div id="msg_zipcode" style="margin-bottom: 20px;font-size: 14px"></div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <button class="btn theme-btn-1 btn-effect-1 text-uppercase" type="button" id="btn_save_change">Save Changes</button>
                                    <div id="msg_success"></div>
                                </div>
                                <hr/>
                                <!--<p><label class="input-info-save mb-0"><input type="checkbox" name="agree"> Create an account?</label></p>-->
                                <h6>Billing & Shipping Address</h6>
                                <div class="input-item input-item-textarea col-md-12" id="shipping_address"> 

                                    {{ user_info[0].full_name }}<br>
                                    {{ user_info[0].mobileno }}<br>
                                    {{ user_info[0].address }}<br>
                                    {{ user_info[0].town }}, {{ user_info[0].district }} ,{{ user_info[0].zipcode }}<br>
                                    {{ user_info[0].state }}, {{ user_info[0].country }}<br>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="ltn__checkout-payment-method mt-50">
                    <h4 class="title-2">Payment Method</h4>
                    <div id="checkout_accordion_1">
                        <!-- card -->
                        <div class="card">
                            <h5 class="collapsed ltn__card-title" id="btn_card" data-toggle="collapse" data-target="#faq-item-2-1" aria-expanded="false">
                                Credit & Debit Cards
                            </h5>
                            <div id="faq-item-2-1" class="collapse" data-parent="#checkout_accordion_1">
                                <div class="card-body">
                                    <p>you can pay with your credit and debit card.</p>
                                </div>
                            </div>
                        </div>
                        <!-- card -->
                        <div class="card">
                            <h5 class="ltn__card-title" id="btn_cod" data-toggle="collapse" data-target="#faq-item-2-2" aria-expanded="true"> 
                                Cash on delivery (COD)
                            </h5>
                            <div id="faq-item-2-2" class="collapse show" data-parent="#checkout_accordion_1">
                                <div class="card-body">
                                    <p>Pay with cash upon delivery.</p>
                                </div>
                            </div>
                        </div>           
                    </div>
                    <div class="ltn__payment-note mt-30 mb-30">
                        <!--<p>Your personal data will be used to process your order, support your experience throughout this website, and for other purposes described in our privacy policy.</p>-->
                    </div>

                </div>
            </div>
            <div class="col-lg-6">
                <div class="shoping-cart-total mt-50">
                    <h4 class="title-2">Cart Totals</h4>
                    <table class="table">
                        <tbody id="tbody">
                            {% set total_price =0 %}
                            {% for c in cart_data_all %}
                            {% set price = c.price %}
                            {% set disc =c.discount %}
                            {% set disc_price = price * disc /100 %}

                            {% set a = price - disc_price %}
                            {% set price_prd = c.buy_quantity * a %}
                            {% set total_price = total_price + price_prd %}
                            <tr class="select_tr" id="{{ c.prd_id }}" name="{{ c.buy_quantity }}">
                                <td>{{ c.name }} <strong>× {{ c.buy_quantity }}</strong></td>
                                <td>₹ {{ price_prd }}</td>
                            </tr>
                            {% endfor %}

                            {% set carting = 0 %}
                            {% if total_price >=1 && total_price <= 800 %}
                            {% set carting = 0 %}
                            {% elseif total_price > 800 && total_price <=1500 %}
                            {% set carting = 0 %}
                            {% elseif total_price > 1500 %}
                            {% set carting = 0 %}
                            {% endif %}
                            <tr>
                                <td>Shipping and Handing</td>
                                <td>₹ {{ carting }}</td>
                            </tr>
                            <tr>
                                <td><strong>Order Total</strong></td>
                                <td><strong id="total_paid_amount">₹ <span>{{ total_price + carting }}</span></strong></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div id="google_pay"></div>
            <button class="btn theme-btn-1 btn-effect-1 text-uppercase" name="{{ user_info[0].id }}" id="btn_place_order" style="margin-left: 20px;margin-top: 5px;" type="button">Place order</button>
            <div id="msg_place_order"></div>
        </div>


    </div>
</div>

<div id="data_pytam">

</div>
<!-- WISHLIST AREA START -->


<!-- FEATURE AREA END -->


<!--https://developers.google.com/pay/api/web/guides/tutorial-->
<!--<script
    async src="https://pay.google.com/gp/p/js/pay.js"
    onload="onGooglePayLoaded()">
//  onload="console.log('TODO: add onload function')">
</script>-->

<script type="text/javascript">

//    const tokenizationSpecification = {
//        type: 'PAYMENT_GATEWAY',
//        parameters: {
//            'gateway': 'example',
//            'gatewayMerchantId': 'exampleGatewayMerchantId'
//        }
//    };
//
//    const cardPaymentMethod = {
//        type: 'PAYMENT_GATEWAY',
//        tokenizationSpecification: tokenizationSpecification,
//        parameters: {
//            allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
//            allowedCardNetworks: ["MASTERCARD", "VISA"]
//        }
//    }
//
//    const googlePayConfiguration = {
//        apiVersion: 2,
//        apiVersionMinor: 0,
//        allowedPaymentMethods: [cardPaymentMethod],
//    }
//
//    function createAndAddButton() {
//        const googlePayButton = googlePayClient.createButton({
//            onClick: onGooglePayButtonCliked,
//        })
////        document.getElementById('google_pay').appendchild(googlePayButton);
//        $('#google_pay').append(googlePayButton);
//    }
//
//    let googlePayClient;
//    function onGooglePayLoaded() {
//        alert("Google pay js Load");
//        googlePayClient = new google.payments.api.PaymentsClient({environment: 'TEST'});
//
//        googlePayClient.isReadyToPay(googlePayConfiguration)
//                .then(function (response) {
//                    debugger;
//                    if (response.result) {
//                        // add a Google Pay payment button
//                        createAndAddButton();
//                    } else {
//
//                    }
//                })
//                .catch(function (err) {
//                    // show error in developer console for debugging
//                    console.error(err);
//                    alert('err ', err);
//                });
//    }
//
//
//
//    function onGooglePayButtonCliked() {
//        const paymentDataRequest = {...googlePayConfiguration};
//
//        paymentDataRequest.merchantInfo = {
//            merchantName: 'Veg Portal',
//            merchantId: 'BCR2DN6TQ6K57EJT'
//        };
//
//        paymentDataRequest.transactionInfo = {
//            totalPriceStatus: 'FINAL',
//            totalPrice: '123.45',
//            currencyCode: 'INR',
//            countryCode: 'IN'
//        };
//
//        googlePayClient.loadPaymentData(paymentDataRequest)
//                .then(paymentData => processPaymentData(paymentData))
//                .catch(error => console.error('LoadPaymentData error: ', error));
//    }
//
//    function processPaymentData(paymentData) {
//        fetch(ordersEndpointUrl, {
//            method: 'post',
//            headers: {
//                'Content-Type': 'application/json'
//            },
//            body: paymentData
//        });
//    }


    $(document).ready(function () {

        $("#full_name").blur(function () {
//            alert('hello '+$("#course_category").val());
            if ($("#full_name").val() == "")
            {
                $("#msg_full_name").fadeIn(500);
                $("#msg_full_name").html("* Full Name is Empty!").css({'color': 'red'});
                $("#msg_full_name").focusin();
            } else
            {
                $("#msg_full_name").fadeOut(1000);
            }
        });

        $("#email").blur(function () {
//            alert('hello '+$("#course_category").val());
            if ($("#email").val() == "")
            {
                $("#msg_email").fadeIn(500);
                $("#msg_email").html("* Email is Empty!").css({'color': 'red'});
                $("#msg_email").focusin();
            } else
            {
                $("#msg_email").fadeOut(1000);
            }
        });

        $("#mobile_no").blur(function () {
//            alert('hello '+$("#course_category").val());
            if ($("#mobile_no").val() == "")
            {
                $("#msg_mobile_no").fadeIn(500);
                $("#msg_mobile_no").html("* Mobile No Is Empty!").css({'color': 'red'});
                $("#msg_mobile_no").focusin();
            } else
            {
                $("#msg_mobile_no").fadeOut(1000);
            }
        });

        $("#address").blur(function () {
//            alert('hello '+$("#course_category").val());
            if ($("#address").val() == "")
            {
                $("#msg_address").fadeIn(500);
                $("#msg_address").html("* Address Is Empty!").css({'color': 'red'});
                $("#msg_address").focusin();
            } else
            {
                $("#msg_address").fadeOut(1000);
            }
        });
        $("#town").blur(function () {
//            alert('hello '+$("#course_category").val());
            if ($("#town").val() == "")
            {
                $("#msg_town").fadeIn(500);
                $("#msg_town").html("* Town / Village Is Empty!").css({'color': 'red'});
                $("#msg_town").focusin();
            } else
            {
                $("#msg_town").fadeOut(1000);
            }
        });

        $("#dist").blur(function () {
//            alert('hello '+$("#course_category").val());
            if ($("#dist").val() == "")
            {
                $("#msg_dist").fadeIn(500);
                $("#msg_dist").html("* District Is Empty!").css({'color': 'red'});
                $("#msg_dist").focusin();
            } else
            {
                $("#msg_dist").fadeOut(1000);
            }
        });

        $("#zipcode").blur(function () {
//            alert('hello '+$("#course_category").val());
            if ($("#zipcode").val() == "")
            {
                $("#msg_zipcode").fadeIn(500);
                $("#msg_zipcode").html("* Zipcode Is Empty!").css({'color': 'red'});
                $("#msg_zipcode").focusin();
            } else
            {
                $("#msg_zipcode").fadeOut(1000);
            }
        });

//        btn_save_change
        $(document.body).on('click', '#btn_save_change', function () {
            debugger;
            var full_name = $("#full_name").val();
            var email = $("#email").val();
            var mobile_no = $("#mobile_no").val();
            var address = $("#address").val();
            var town = $("#town").val();
            var dist = $("#dist").val();
            var zipcode = $("#zipcode").val();

            if (full_name == '')
            {
                $("#msg_full_name").fadeIn(500);
                $("#msg_full_name").html("* Full Name is Empty!").css({'color': 'red'});
                $("#msg_full_name").focusin();
            } else if (full_name == '')
            {
                $("#msg_full_name").fadeIn(500);
                $("#msg_full_name").html("* Full Name is Empty!").css({'color': 'red'});
                $("#msg_full_name").focusin();
            } else if (email == '')
            {
                $("#msg_email").fadeIn(500);
                $("#msg_email").html("* Email is Empty!").css({'color': 'red'});
                $("#msg_email").focusin();
            } else if (mobile_no == '')
            {
                $("#msg_mobile_no").fadeIn(500);
                $("#msg_mobile_no").html("* Mobile No is Empty!").css({'color': 'red'});
                $("#msg_mobile_no").focusin();
            } else if (address == '')
            {
                $("#msg_address").fadeIn(500);
                $("#msg_address").html("* Address is Empty!").css({'color': 'red'});
                $("#msg_address").focusin();
            } else if (town == '')
            {
                $("#msg_town").fadeIn(500);
                $("#msg_town").html("* Town / Village is Empty!").css({'color': 'red'});
                $("#msg_town").focusin();
            } else if (dist == '')
            {
                $("#msg_dist").fadeIn(500);
                $("#msg_dist").html("* District is Empty!").css({'color': 'red'});
                $("#msg_dist").focusin();
            } else if (zipcode == '')
            {
                $("#msg_zipcode").fadeIn(500);
                $("#msg_zipcode").html("* Zipcode is Empty!").css({'color': 'red'});
                $("#msg_zipcode").focusin();
            } else
            {
                debugger;
                var data = {};
                data.full_name = full_name;
                data.email = email;
                data.mobile_no = mobile_no;
                data.address = address;
                data.town = town;
                data.dist = dist;
                data.zipcode = zipcode;
                $.ajax({
                    type: 'POST',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    url: 'profile_save',
                    success: function (data)
                    {
                        debugger;
//                    alert('data ' + data);
                        if (data == 'UPDATE_INFO')
                        {
                            $('#msg_success').fadeIn(500);
                            $('#msg_success').text('* Data Insert Successfully!').css({'color': 'green'});
                            $('#msg_success').fadeOut(5000);

                            var ab = full_name + "<br>" + mobile_no + "<br>" + address + "<br>" + town + ", " + dist + ", " + zipcode + "<br>" + "Gujarat, India";
                            $('#shipping_address').html('');
                            $('#shipping_address').html(ab);
                        } else if (data == 'NOT_CART')
                        {
                            alert('Some Issue in User Profile Updation. ');
                        }
                    },
                    error: function (err) {
                        alert('error ' + err);
                    }
                });
            }
        });


//        
        $(document.body).on('click', '#btn_place_order', function () {
//            alert("Place Order");
            var paid_amount = $('#total_paid_amount').find('span').text();
//            alert("paid_amount " + paid_amount);
//            alert("payment_mode " + payment_mode);
            var user_id = $(this).attr('name');
            var full_name = $("#full_name").val();
            var email = $("#email").val();
            var mobile_no = $("#mobile_no").val();
            var address = $("#address").val();
            var town = $("#town").val();
            var dist = $("#dist").val();
            var zipcode = $("#zipcode").val();


            var arr = [];
            var qty = [];
            var i = 0;
            $('.select_tr').each(function ()
            {
                arr[i++] = this.id;
            });
//            alert('array ' + arr);
            var j = 0;
            $('.select_tr').each(function ()
            {
                qty[j++] = $(this).attr('name');
            });
//            alert('qty ' + qty);

            if (full_name == '')
            {
                $("#msg_full_name").fadeIn(500);
                $("#msg_full_name").html("* Full Name is Empty!").css({'color': 'red'});
                $("#msg_full_name").focusin();
            } else if (full_name == '')
            {
                $("#msg_full_name").fadeIn(500);
                $("#msg_full_name").html("* Full Name is Empty!").css({'color': 'red'});
                $("#msg_full_name").focusin();
            } else if (email == '')
            {
                $("#msg_email").fadeIn(500);
                $("#msg_email").html("* Email is Empty!").css({'color': 'red'});
                $("#msg_email").focusin();
            } else if (mobile_no == '')
            {
                $("#msg_mobile_no").fadeIn(500);
                $("#msg_mobile_no").html("* Mobile No is Empty!").css({'color': 'red'});
                $("#msg_mobile_no").focusin();
            } else if (address == '')
            {
                $("#msg_address").fadeIn(500);
                $("#msg_address").html("* Address is Empty!").css({'color': 'red'});
                $("#msg_address").focusin();
            } else if (town == '')
            {
                $("#msg_town").fadeIn(500);
                $("#msg_town").html("* Town / Village is Empty!").css({'color': 'red'});
                $("#msg_town").focusin();
            } else if (dist == '')
            {
                $("#msg_dist").fadeIn(500);
                $("#msg_dist").html("* District is Empty!").css({'color': 'red'});
                $("#msg_dist").focusin();
            } else if (zipcode == '')
            {
                $("#msg_zipcode").fadeIn(500);
                $("#msg_zipcode").html("* Zipcode is Empty!").css({'color': 'red'});
                $("#msg_zipcode").focusin();
            } else if (payment_mode == '')
            {
                $("#msg_place_order").fadeIn(500);
                $("#msg_place_order").html("* Payment Mode Not Selected!").css({'color': 'red'});
                $("#msg_place_order").focusin();
            } else if (paid_amount == '' || paid_amount == undefined || paid_amount < 1)
            {
                $("#msg_place_order").fadeIn(500);
                $("#msg_place_order").html("* Payment Amount Less Than 0 !").css({'color': 'red'});
                $("#msg_place_order").focusin();
            } else
            {
                debugger;
                var data = {};
                data.user_id = user_id;
                data.full_name = full_name;
                data.email = email;
                data.mobile_no = mobile_no;
                data.address = address;
                data.town = town;
                data.dist = dist;
                data.zipcode = zipcode;
                data.payment_mode = payment_mode;
                data.paid_amount = paid_amount;
                data.prd_id = arr;
                data.prd_qty = qty;
                $.ajax({
                    type: 'POST',
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    url: 'place_order_pytem',
//                    url: 'place_order',
                    success: function (data)
                    {
                        debugger;
//                        alert('data ' + data);
                        $('#data_pytam').html(data);
                        if (data == "/confirm_order") {
                            setTimeout(function () {
                                window.location.href = data;
                            }, 100);
                        } else if (data != "ERROR") {
                            
                        } else {
                            $("#msg_place_order").fadeIn(500);
                            $("#msg_place_order").html("* Some Issue In Payment Process !").css({'color': 'red'});
                            $("#msg_place_order").focusin();
                        }

                    },
                    error: function (err) {
                        alert('error ' + err);
                    }
                });
            }
        });

        var payment_mode = "COD";
        $(document.body).on('click', '#btn_card', function () {
            payment_mode = "CARD";
//            alert("payment_mode "+payment_mode);
        });
        $(document.body).on('click', '#btn_cod', function () {
            payment_mode = "COD";
//            alert("payment_mode "+payment_mode);
        });
    });

</script>

{% include 'layouts/footer.html' %}