{include file='layout/_header' /}
<style>
    [v-cloak] {
        display: none !important;
    }
</style>
<div id="app" v-cloak>
    <div class="w-new-par">
        <div class="container">

            <div class="row" v-if="list.length > 0">
                <div class="col-md-8 ">
                    <div class="cart_left" id="shopCart2020">
                        <div class="table-product">
                            <div class="">
                                <!-- Default panel contents -->
                                <div class="panel-heading">
                                    <div class="w-rHeadingV2">
                                        <h2>Warenkorb
                                        </h2>
                                    </div>
                                </div>

                                <!-- Table -->
                                <div class="mainbox">
                                    <table class="table" width="100%">
                                        <tbody>


                                            <tr class="product-tr" v-for="vo in list">
                                                <td class="productList grid-m-l">
                                                    <dl>
                                                        <dt>
                                                            <img :src="vo.product_image" style="max-width: 140px;">
                                                        </dt>
                                                        <div class="clear"></div>
                                                    </dl>
                                                </td>
                                                <td class="prQuant">
                                                    <p>{{ vo.product_name}}</p>
                                                    <div class="attr-par ">
                                                        <span style="color:#899927 ">options:</span> <br>
                                                        <span v-for="(val, key, index) in vo.attribute" class="cart-options">{{key}} - <span>{{val}}</span><br></span>
                                                    </div>
                                                    <p class="price">{{vo.product_price*vo.qty | currency('€')}}</p>
                                                    <div class="input-wrapper">
                                                        <span class="num-control num-less" @click="changeGoodsNumber(vo.sku,vo.qty-1)">
                                                            -
                                                        </span>
                                                        <div class="pro-input-num-wrapper">
                                                            <label>
                                                                <input type="number" class="pro-num" :value="vo.qty" max="999" min="1" dvalue="1">
                                                            </label>
                                                        </div>
                                                        <span class="num-control num-add" @click="changeGoodsNumber(vo.sku,vo.qty+1)">
                                                            +
                                                        </span>
                                                        <div class="clear"></div>
                                                    </div>
                                                    <div class="icon-del ">
                                                        <i class="fa fa-trash-o" @click="removeId(vo)"></i>

                                                    </div>
                                                </td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="cart_left  w-guarantee-description">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="des-item">
                                    <div class="des-icon litb-icon-1"></div>
                                    <h3>Achetez en toute confiance</h3>
                                    <div class="des-item-content">
                                        Le shopping sur Frdoll est sûr et sécurisé - c'est garanti !
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="des-item">
                                    <div class="des-icon litb-icon-2"></div>
                                    <h3>Satisfaction garantie</h3>
                                    <div class="des-item-content">
                                        Vous n'êtes pas satisfait de votre produit? Nous allons le reprendre!
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="des-item">
                                    <div class="des-icon litb-icon-3"></div>
                                    <h3>Politique de confidentialité</h3>
                                    <div class="des-item-content">
                                        Nous ne divulguerons jamais aucune de vos informations personnelles!
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>-->
                </div>
                <div class="col-md-4 ">
                    <div class="cart_right">
                        <div class="w-p w-shCartFooter paypal-button-new">
                            <div class="order-summary-title order-line">Bestellübersicht</div>
                            <div class="subtotal-wrapper order-line">
                                <span class="subtotal-title">Zwischensumme:</span>
                                <span class="subtotal-value">{{countList | currency('€') }}</span>
                            </div>
                            <div class="total-wrapper order-line">
                                <span class="total-title">
                                    GESAMTWERT
                                </span>
                                <span class="total-value">{{countList | currency('€') }}</span>
                            </div>
                            <div class="procced-checkout">
                                <a href="{:url('get_checkout')}" class="btn btn-primary checkoutBtn ">
                                    Zur Kasse </a>
                            </div>
                            <!-- <div class="">
                                <p>
                                    <img src="/image/whatsapp.png" alt="">
                                </p>
                                <p>
                                    WhatsApp Kontaktieren Sie uns.</p>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="cart_left  w-guarantee-description">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="des-item">
                                    <div class="des-icon litb-icon-1"></div>
                                    <h3>Sicher einkaufen
                                    </h3>
                                    <div class="des-item-content">
                                        Das Einkaufen auf Jammer-store ist sicher – garantiert!

                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="des-item">
                                    <div class="des-icon litb-icon-2"></div>
                                    <h3>Garantierte Zufriedenheit
                                    </h3>
                                    <div class="des-item-content">
                                        Wir bieten ein umfassendes Rückgaberecht für alle Artikel.
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="des-item">
                                    <div class="des-icon litb-icon-3"></div>
                                    <h3>Politique de confidentialité</h3>
                                    <div class="des-item-content">
                                        Wir geben KEINE von Ihnen bereitgestellten Informationen weiter.

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-else>
                <div class="col-md-12">
                    <div class="cart_left text-center">

                        <div class="table-product" style="text-align: center;margin-bottom: 20px;padding-bottom: 20px;">
                            <h3>Der Einkaufswagen ist leer</h3>
                            <p class="text-center">
                                <a href="/" class="btn btn-primary btn-fullwidth" title="Continuez vos achats" style="max-width:300px;display: inline-block">
                                    <b>Mit dem Einkaufen fortfahren</b>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- import Vue before Element -->
<script src="/assets/vue/vue.js"></script>
<script src="/assets/vue/index.js"></script>
<script src="/assets/vue/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data () {
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error(''));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error(''));
                    } else {
                        if (value < 0) {
                            callback(new Error(''));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            return {
                list: [],
                pre_count: 0,
                count: 0,
                loading: false,
                ruleForm2: {
                    name: '',
                    price: '',
                    age: ''
                },
                rules2: {
                    age: [
                        { validator: checkAge, trigger: 'blur' }
                    ],
                    price: [
                        { validator: checkAge, trigger: 'blur' }
                    ]
                }
            }
        },
        mounted () {
            this.getCartList()
        },
        computed: {
            preAllPrice: function () {
                var a = 0;
                for (let i = 0; i < this.list.length; i++) {
                    a += this.list[i].product_price * this.list[i].qty
                }
                this.pre_count = a;
                return this.pre_count
            },
            countList: function () {
                var a = 0;
                for (let i = 0; i < this.list.length; i++) {
                    a += this.list[i].product_price * this.list[i].qty
                }
                this.count = a * (1 - 0);
                return this.count
            },
        },
        watch: {},
        methods: {
            removeId (value) {
                $('.ft-preloader').addClass("active");
                axios.delete("{:url('delete_cart')}", { data: { 'id': value.sku } })
                    .then((response) => {
                        $('.ft-preloader').removeClass("active");
                        this.list = response.data.result
                    })
                /*var ids = value.id
                for (var i = 0; i < this.list.length; i++) {
                    if (ids == this.list[i].id) {
                        this.list.splice(i, 1)
                    }
                }*/
            },
            changeGoodsNumber (sku, qty) {
                if (qty < 1) return

                $('.ft-preloader').addClass("active");
                axios.put("{:url('update_cart')}", {
                    id: sku,
                    qty: qty,
                })
                    .then(response => {
                        this.list = response.data.result
                        $('.ft-preloader').removeClass("active");
                        console.log(response);
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            getCartList () {
                axios.get("{:url('ajax_cart')}").then((response) => {
                    // handle success
                    this.list = response.data.result
                    console.log(response.data.result);
                })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    })
            },
        },
        filters: {
            currency (value, currency, decimals) {
                digitsRE = /(\d{3})(?=\d)/g
                value = parseFloat(value)
                if (!isFinite(value) || (!value && value !== 0)) return ''
                currency = currency != null ? currency : '$'
                decimals = decimals != null ? decimals : 2
                var stringified = Math.abs(value).toFixed(decimals)
                var _int = decimals
                    ? stringified.slice(0, -1 - decimals)
                    : stringified
                var i = _int.length % 3
                var head = i > 0
                    ? (_int.slice(0, i) + (_int.length > 3 ? ',' : ''))
                    : ''
                var _float = decimals
                    ? stringified.slice(-1 - decimals)
                    : ''
                var sign = value < 0 ? '-' : ''
                return sign + currency + head +
                    _int.slice(i).replace(digitsRE, '$1,') +
                    _float
            }
        }
    })
</script>


{include file='layout/_footer' /}