<div class="page-title">
    <div class="container">
        <div class="banner-full-wrap">
            <div class="row g-0">
                <div class="col-md-4">
                    <div class="text-center banner-right-wrap">
                        <h1 class="main-title">Shop</h1>
                    </div>
                </div>
                <div class="col-md-8">
                    <img src="<?php echo base_url(); ?>assets/user/img/shop-banner.webp" alt="shop" class="w-100">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- page-title end -->
<?php if ($product) {
    $image = $this->common->getData('product_media', array('product_id' => $product['productid']), array(), array('field' => 'isThumb', 'by' => 'desc'));
    $colorimg = array();
} ?>
<?php //$catname = $this->common->getsData('category',array('c_id'=>$product['product_category'][0])); 
?>
<!-- shop-detail start -->
<div class="shop-detail">
    <div class="container">
        <form id="pdetailform" class="<?php echo "productd-bg addProductInCart1 product_" . $product["productid"]; ?>" data-id="<?php echo $product["productid"]; ?>">
            <input id="productid" name="productid" value="<?php echo $product["productid"]; ?>" type="hidden">
            <div class="row justify-content-center">
                <div class="col-lg-12 col-md-12 col-12 mb-md-4 pb-2">
                    <a href="<?php echo base_url(); ?>shop" class="go-back-two">
                        <img src="<?php echo base_url(); ?>assets/user/img/back-one.webp" alt="back" class="img-fluid me-2" width="60"> Back
                    </a>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-8 col-12">
                    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
                        <div class="carousel-inner">
                            <?php if (isset($image) && $image) { ?>
                                <?php foreach ($image as $key => $value) { ?>
                                    <div class="carousel-item <?php echo ($key == 0) ? 'active' : ''; ?>">
                                        <img src="<?php echo base_url($value['product_image']); ?>" alt="img" class="w-100">
                                    </div>
                                <?php } ?>
                            <?php } ?>
                        </div>
                        <?php if (isset($image) && count($image) > 1) { ?>
                            <div class="carousel-indicators">
                                <?php foreach ($image as $key => $value) { ?>
                                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="<?php echo $key; ?>" class="<?php echo ($key == 0) ? 'active' : ''; ?>" aria-current="true" aria-label="Slide 1">
                                        <img src="<?php echo base_url($value['product_image']); ?>" class="w-100" alt="product img">
                                    </button>
                                <?php } ?>
                            </div>
                        <?php } ?>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="shop-inner ps-md-3 ps-lg-5 mt-lg-0 mt-md-4">
                        <div class="shop-inner-content">
                            <h2 class="heading-title mb-3"><?php echo $product['product_name']; ?></h2>
                            <?php if($product['product_sku']!=''){ ?>
                                <p class="mt-0 mb-2">Model No: <?php echo $product['product_sku']; ?></p>
                            <?php } ?>
                            <span class="price" id="qtyprice" data-price="<?php echo ($product['product_sale_price'] > 0) ? $product['product_sale_price'] : $product['product_price']; ?>">
                                <?php if ($product['product_sale_price'] > 0) { ?>
                                    $ <?php echo $product['product_sale_price']; ?>
                                    <del>$ <?php echo $product['product_price']; ?></del>
                                <?php } else { ?>
                                    $ <?php echo $product['product_price']; ?>
                                <?php } ?>
                            </span>
                        </div>
                        <div class="count-list d-md-flex">
                            <p class="qty">Quantity</p>
                            <ul class="d-flex justify-content-around align-items-center list-unstyled counter mb-md-0 mb-4">
                                <li><a href="javascript:void(0);" onClick='decreaseCount(event, this)'>-</a></li>
                                <li class="count-nummber"><input class="count-number" id="qty" type="text" name="qty" value="1" readonly style="max-width: 100px;border: none;width: auto;text-align: center;"></li>
                                <li><a href="javascript:void(0);" onClick='increaseCount(event, this)'>+</a></li>
                            </ul>
                            <?php if ($product['product_stock'] != 0) { ?>
                                <button type="submit" id="ATC" title="shopping cart" class="btn btn-primary"><span> Add To Cart <div><img src="<?php echo base_url(); ?>assets/user/img/btn-right.png" class="img" alt="right"> </div> </span></button>
                            <?php } else { ?>
                                <h4>Out of stock</h4>
                            <?php } ?>
                        </div>
                        <div class="product-detail-tab">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <?php if($product['product_description']!=''){ ?>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Description</button>
                                    </li>
                                <?php } ?>
                                <?php if($product['product_specification']!=''){ ?>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Additional Information</button>
                                    </li>
                                <?php } ?>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                    <?php echo $product['product_description']; ?>
                                </div>
                                <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                                    <?php echo $product['product_specification']; ?>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- shop-detail end -->
<?php $atcthumb = $this->common->getsData('product_media', array('product_id' => $product['productid'], 'isThumb' => 1)); ?>
<div class="atc-success" style="box-shadow: 1px 2px 8px 2px #ddd;border-radius: 50px;">
    <!-- <div class="row">
        <div class="col-md-12">
            <p class="text-white mb-0"><img src="<?php //echo base_url(); ?>assets/user/img/home/icon-feather-check-circle.svg" style="background:#fff;border-radius:20px;padding:4px;margin-right:5px;" width="30"><?php //echo $product['product_name']; ?>  -  HAS BEEN ADDED TO CART</p>
        </div>
    </div> -->
    <div class="row">
        <div class="col-md-12">
            <a href="javascript:void(0);" class="closeATcModal" style="position:absolute;top: -10px;right: -10px;font-size: 24px;background: #ed1c24;border: 1px solid #ed1c24;border-radius: 50px;color: #fff;width: 30px;height: 30px;line-height: 30px;text-align: center;">×</a>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-sm-4 col-4">
            <img src="<?php echo base_url($atcthumb['product_image']); ?>" style="width:100%;" alt="img">
        </div>
        <div class="col-md-8 col-sm-8 col-8">
            <h1 class="text-start">Item added to cart</h1>
            <h5><?php echo $product['product_name']; ?></h5>
            <h4 id="priceHtmlATC">
                <?php if ($product['product_sale_price'] > 0) { ?>
                    $<?php echo $product['product_sale_price']; ?>
                <?php } else { ?>
                    $<?php echo $product['product_price']; ?>
                <?php } ?>
            </h4>
            <div class="single-product-cart text-start">
                <a href="<?php echo base_url('shopping-cart'); ?>" class="btn btn-primary text-center ms-0" style="min-width:140px;margin:5px;">VIEW CART</a>
                <a href="<?php echo base_url('checkout'); ?>" class="btn btn-primary text-center" style="min-width:140px;">CHECKOUT</a>
            </div>
        </div>
    </div>
</div>
<style>
    header {
        background: #fff;
    }

    .atc-success {
        background: #fff;
        position: fixed;
        left: 50%;
        top: 50%;
        /*right: 15px;
        top: 8%;*/
        transform: translate(-50%, -50%);
        z-index: 999;
        width: 90%;
        max-width: 650px;
        padding: 20px 15px;
        display: none;
        font-family: 'Lora';
    }

    .atc-success h1 {
        text-align: center;
        font: normal normal bold 25px/30px Lora;
        letter-spacing: 0px;
        color: #343434;
        opacity: 1;
        margin-bottom: 15px;
        float: left;
        width: 100%;
    }

    .atc-success h5 {
        text-align: left;
        font: normal normal 500 20px/30px Lora;
        letter-spacing: 0px;
        color: #000;
        opacity: 1;
    }

    .atc-success h4 {
        text-align: left;
        font: normal normal 500 18px/28px Lora;
        letter-spacing: 0px;
        color: #e9c5aa;
        opacity: 1;
    }

    .atc-success img {
        border-radius: 8px;
    }

    table {
        max-width: 100%;
    }
</style>
<!-- related product start -->
<div class="related-product">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="text-center pb-md-4">
                    <h3 class="heading-title"> You May Also Like </h3>
                </div>
                <div class="related-product-inner">
                    <div class="owl-carousel owl-theme shopping-item">
                        <?php if (isset($related) && !empty($related)) { foreach ($related as $key => $value) { ?>
                            <div class="item">
                                <div class="product">
                                    <div class="product-wrap">
                                        <div class="product-img">
                                            <a href="<?php echo base_url('shop-detail/'.strtolower($value['product_slug']).'/'.$value['productid']); ?>">
                                                <?php if($value['product_image']!=''){ $pimg = base_url($value['product_image']); ?>
                                                    <img src="<?php echo base_url($value['product_image']); ?>" alt="<?php echo substr($value['product_name'],0, 15); ?>" class="img-fluid pro-img">
                                                <?php }else{ $pimg = base_url('assets/user/img/product-item.webp'); ?>
                                                    <img src="<?php echo base_url('assets/user/img/product-item.webp'); ?>" alt="<?php echo substr($value['product_name'],0, 15); ?>" class="img-fluid pro-img">
                                                <?php } ?>
                                            </a>
                                            <div class="product-btn">
                                                <?php if($value['product_sale_price']>0){ $price1 = $value['product_sale_price']; }else{ $price1 = $value['product_price']; } ?>
                                                <a href="javascript:void(0);" class="btn-view mb-0 addToCartP" data-pid="<?php echo $value['productid']; ?>" data-pimg="<?php echo $pimg; ?>" data-price="<?php echo $price1; ?>" data-pname="<?php echo $value['product_name']; ?>">
                                                    <img src="<?php echo base_url(); ?>assets/user/img/addcart.webp" class="img-fluid" alt="product view">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="btn-wrap">
                                            <a href="<?php echo base_url('shop-detail/'.strtolower($value['product_slug']).'/'.$value['productid']); ?>">
                                                <div class="btn btn-primary-outline mb-0">
                                                    <span> View Product
                                                        <img src="<?php echo base_url(); ?>assets/user/img/Aerrow-t.webp" class="img ms-2" width="14" alt="right">
                                                    </span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-inner">
                                        <a href="<?php echo base_url('shop-detail/'.strtolower($value['product_slug']).'/'.$value['productid']); ?>">
                                            <p class="product-title" style="min-height:30px;"><?php echo substr($value['product_name'], 0,40); ?><?php echo(strlen($value['product_name'])>40)?'...':''; ?></p>
                                            <p class="price">
                                                <?php if($value['product_sale_price']>0){ ?>
                                                    <del>$<?php echo $value['product_price']; ?></del> &nbsp;
                                                    $<?php echo $value['product_sale_price']; ?> 
                                                <?php }else{ ?>
                                                    $<?php echo $value['product_price']; ?>
                                                <?php } ?>
                                            </p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        <?php } } ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- related product end -->
<script>
    $(document).ready(function() {
        $("#pdetailform").formValidation({
            framework: 'bootstrap',
            excluded: ':disabled',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                color: {
                    validators: {
                        notEmpty: {
                            message: 'Please Select Color'
                        }
                    }
                },
                size: {
                    validators: {
                        notEmpty: {
                            message: 'Please Select Size'
                        }
                    }
                },
            }
        }).on('success.form.fv', function(e) {
            var $form = $(e.target),
                $button = $form.data('formValidation').getSubmitButton();
            // alert($button.attr('id'));
            var site_url = "<?php echo base_url(); ?>";
            e.preventDefault();
            var productid = $(this).attr("data-id");
            var type = $(".product_" + productid + " #type").val();
            var qty = $(".product_" + productid + " #qty").val();
            var size = $(".product_" + productid + " #size label.active :input[name=size]").val();
            var color = $(".product_" + productid + " #color label.active :input[name=color]").val();
            // alert("qty : "+qty+" | size : "+size+" | color : "+color+" | type : "+type);
            if ($button.attr('id') == "ATC") {
                $.ajax({
                    url: site_url + "cart/addProductInCart",
                    type: 'POST',
                    data: 'productid=' + productid + '&qty=' + qty + '&size=' + size + '&color=' + color + '&type=' + type,
                    success: function(data) {
                        if (data.found == 0) {
                            var cartDropdown = data.cartDropdown;
                            var count = data.count;
                            $("#cart-sidebar").html(cartDropdown);
                            $("#cart-total").html(count);
                            $("#priceHtmlATC").html('$ ' + (parseFloat($('#qtyprice').attr('data-price')) * qty));
                            // $('.sidebar-cart-active').addClass('inside');
                            // $('.main-wrapper').addClass('overlay-active');
                            $(".atc-success").fadeIn();
                            setTimeout(function() {
                                $(".atc-success").hide().fadeOut();
                            }, 5000);
                        } else {
                            alert(data.msg);
                        }
                    }
                });
            } else {
                $.ajax({
                    url: site_url + "cart/addProductInCart",
                    type: 'POST',
                    data: 'productid=' + productid + '&qty=' + qty + '&size=' + size + '&color=' + color + '&type=' + type,
                    success: function(result) {
                        location.href = site_url + 'shopping-cart';
                    }
                });
            }


            $('#ATC').attr('disabled', false);
            $('#ATC').removeClass('disabled');
        });
    });
</script>
<script type="text/javascript">
    function countpricetotal(qty) {
        var price = parseFloat($('#qtyprice').attr('data-price'));
        $('#qtyprice').html('$ ' + (price * qty).toFixed(2));
    }

    function increaseCount(a, b) {
        // var input = b.previousElementSibling;
        var input = $('#qty');
        var value = parseInt(input.val(), 10);
        value = isNaN(value) ? 0 : value;
        value++;
        input.val(value);
        countpricetotal(value);
    }

    function decreaseCount(a, b) {
        // var input = b.nextElementSibling;
        var input = $('#qty');
        var value = parseInt(input.val(), 10);
        if (value > 1) {
            value = isNaN(value) ? 0 : value;
            value--;
            input.val(value);
            countpricetotal(value);
        }
    }
</script>