<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
            </div>
        </div>

    </div>
</div>

<?php $__env->startPush('custom-style'); ?>
    <style>
        .product-detail {}

        .product-detail .details {}

        .product-detail .properties {}

        .product-detail .properties span {
            display: inline-block;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 5px;
            padding-bottom: 5px;
            cursor: pointer;
        }

        .product-detail .properties span:hover {
            background-color: #bcb9b9;
        }

        .product-detail .properties span.active {
            background-color: #ff0;
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('custom-script'); ?>
    <script>
        var priceElement = $(".product-detail .price span");
        var cartSection = $(".cart-section");

        function setActivePrice (prices, priceElement) {
            var price = prices.children('.active').data('price');
            price = price ? price : 0;
            $(priceElement.selector).text(price);
        }

        function showCart () {
            var cartSectionBody = $(".cart-section tbody");
            let getData = sessionStorage.getItem("cart");
            let data = JSON.parse(getData);
            if (! data) {
                data = [];
            }
            
            var cartHtml = '';
            $.each(data, function (indexInArray, valueOfElement) {
                var product_price = this.product_price;
                var product_name = this.product_name;
                var color_name = this.color_name;
                var material_name = this.material_name;
                cartHtml += `<tr>
                    <td >${++indexInArray}</td>
                    <td>
                        <p>${product_name}</p>
                        <p>Chất liệu: ${material_name}</p>
                        <p>Màu sắc: ${color_name}</p>
                    </td>
                    <td class="text-danger">${product_price}</td>
                </tr>`;
            });
            cartSectionBody.html(cartHtml);
        }

        function setMaterialActive () {
            var parentItems = $('.properties');
            $.each(parentItems, function (indexInArray, valueOfElement) { 
                var items = $(this).children('span');
                var isSize = $(this).hasClass('sizes');
                
                if ( ! items.hasClass('active') ) {
                    items.first().addClass('active');
                }
            });
            var prices = $('.properties.sizes');
            setActivePrice (prices, priceElement);
        }

        $(document).ready(function() {
            $(".view-detail-ajax").click(function(){
                $('#myModal .modal-body').html('');
                var $url = $(this).data('url');

                $.ajax({
                    type: "get",
                    url: $url,
                    dataType: "html",
                    success: function (response) {
                        $('#myModal .modal-body').html(response);
                        $("#myModal").modal();

                        setMaterialActive();
                        showCart();
                    }
                });
            });

            $( "body" ).on( "click", ".add-to-cart", function(e) {
                var color_name = '';
                var material_name = '';
                var product_price = 0;
                var color_id = 0;
                var material_id = 0;

                var colors = $('.properties.colors span.active');
                var materials = $('.properties.sizes span.active');

                var product_id = $(this).data('id');
                var product_name = $(this).data('name');
                
                if (colors.length) {
                    color_name = $(colors).data('value');
                    color_id = $(colors).data('id')*1;
                }

                if (materials.length) {
                    material_name = $(materials).data('value');
                    product_price = $(materials).data('price')*1;
                    material_id = $(materials).data('id')*1;
                }

                let getData = sessionStorage.getItem("cart");
                let data = JSON.parse(getData);
                if (! data) {
                    data = [];
                }

                if (data.length) {
                    var findIndex = null;

                    $.each(data, function (indexInArray, valueOfElement) { 
                        if (
                            this.product_id == product_id
                            && this.color_id == color_id
                            && this.material_id == material_id
                            ) {
                                // edit if item exist
                                findIndex = indexInArray;
                                this.quantity = this.quantity*1+1;
                            
                        }
                    });

                    if (findIndex === null) {
                         // add if item not exist
                        var quantity = 1;
                        var item = {
                                product_id,
                                color_id,
                                material_id,
                                product_name,
                                product_price,
                                color_name,
                                material_name,
                                quantity
                            }
                        data.push(item);
                    }

                    sessionStorage.setItem("cart", JSON.stringify(data));
                    
                } else {
                    // add if data is null
                    var quantity = 1;
                    var item = {
                            product_id,
                            color_id,
                            material_id,
                            product_name,
                            product_price,
                            color_name,
                            material_name,
                            quantity
                        }
                    data.push(item);
                    sessionStorage.setItem("cart", JSON.stringify(data));
                }

                showCart();
            });

            $( "body" ).on( "click", ".properties span", function(e) {
                e.preventDefault();
                var parentItem = $(this).parent('.properties');
                var items = $(parentItem).children('span');
                $(items).removeClass('active');
                $(this).addClass('active');

                var prices = $('.properties.sizes');
                setActivePrice (prices, priceElement);
            });
        });
    </script>
<?php $__env->stopPush(); ?>
<?php /**PATH D:\xampp\htdocs\offline_laravel_duongle\resources\views/admin/pages/product/detail.blade.php ENDPATH**/ ?>