<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">Products</h1>
                    </div>
                </div>
                <div class="col-md-8">
                    <img src="<?php echo base_url(); ?>assets/user/img/product-banner.webp" alt="product" class="w-100">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- page-title end -->
<?php $sidebarcat = $this->common->getData('ep_category',array(),array(),array('field'=>'item_order','by'=>'asc')); ?>
<!-- produt start -->
<div class="shop">
    <div class="container">
        <div class="row gx-md-5 g-3">
            <div class="col-lg-8 col-md-8 col-12 mb-3">
                <div class="filter-form">
                    <form class="p-0" action="<?php echo base_url('products'); ?>" method="get">
                        <div class="row g-md-3 g-3">
                            <div class="col-md-5 col-12">
                                <div class="form-group">
                                    <input type="text" name="keyword" class="form-control" placeholder="Search By Keyword">
                                </div>
                            </div>
                            <div class="col-md-5 col-12">
                                <div class="form-group">
                                    <div class="select"><select name="catid" id="mounth" class="select-hidden form-control">
                                            <option value=""> Search By Categories </option>
                                            <?php if(isset($sidebarcat) && $sidebarcat){ foreach($sidebarcat as $key => $value){ ?>
                                                <option value="<?php echo $value['id']; ?>"> <?php echo $value['category']; ?> </option>
                                            <?php } } ?>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group text-center ">
                                    <button class="btn btn-primary" type="submit"> <span> Search <div><img src="<?php echo base_url(); ?>assets/user/img/btn-right.png" class="img" alt="right"> </div> </span> </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 col-12">
                <div class="row g-md-3 g-3">
                    <?php if (isset($products) && !empty($products)){
                        foreach ($products as $key => $value) {
                    ?>
                        <div class="col-lg-4 col-md-4 col-sm-6 col-12">
                            <div class="product openDetail" data-pid="<?php echo $value['id']; ?>" data-pname="<?php echo $value['title']; ?>" data-pimg="<?php echo base_url($value['image']); ?>">
                                <div class="product-wrap">
                                    <div class="product-img">
                                        <?php if($value['image']!=''){ $pimg = base_url($value['image']); ?>
                                            <img src="<?php echo base_url($value['image']); ?>" alt="<?php echo substr($value['title'],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['title'],0, 15); ?>" class="img-fluid pro-img">
                                        <?php } ?>
                                        <div class="product-btn">
                                            <a href="javascript:void(0);" class="btn-view mb-0">
                                                <img src="<?php echo base_url(); ?>assets/user/img/addcart.webp" class="img-fluid" alt="product view">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="btn-wrap">
                                        <div class="btn btn-primary-outline mb-0">
                                            <span> Add To My List
                                                <img src="<?php echo base_url(); ?>assets/user/img/Aerrow-t.webp" class="img ms-2" width="14" alt="right">
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-inner">
                                    <a href="javascript:void(0);">
                                        <p class="product-title" style="min-height:30px;"><?php echo substr($value['title'], 0,40); ?><?php echo(strlen($value['title'])>40)?'...':''; ?></p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php } }else{ ?>
                        <div class="col-md-12">
                           <h1 class="text-center"><strong>No products found...</strong></h1>
                        </div>
                    <?php } ?>
                </div>

                <div class="text-center">
                    <nav aria-label="Page navigation example">
                        <!-- <ul class="pagination justify-content-center mt-md-5 mt-4 mb-4">
                            <li class="page-item"><a class="page-link active" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#">4</a></li>
                        </ul> -->
                        <?php echo $this->pagination->create_links(); ?>
                    </nav>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12  shop-sidebar">
                <div class="sidebox-prolist mb-0  pb-2">
                    <div class="title-wrap">
                        <h1 class="side-title"> My List </h1>
                    </div>
                    <div class="list-pro-wrap">
                        <div class="top-head">
                            <h3>Product Name</h3>
                            <h3>Quantity</h3>
                        </div>
                        <ul class="list-unstyled ps-0" id="epcart">
                            <?php if($this->wishlist->contents()){ foreach ($this->wishlist->contents() as $key => $value) { ?>
                                <li>
                                    <h4 class="pro-name"><?php echo $value['options']['product_name']; ?></h4>
                                    <p class="quantity"><?php echo $value['qty']; ?></p>
                                </li>
                            <?php } }else{ ?>
                                <li><p>No items found...</p></li>
                            <?php } ?>
                        </ul>
                        <div class="text-center">
                            <a class="btn btn-primary" href="<?php echo base_url('product-enquire'); ?>"> <span> Enquire Now <div><img src="<?php echo base_url(); ?>assets/user/img/btn-right.png" class="img" alt="right"> </div> </span> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- produt end -->
<script>
    $('.openDetail').on('click', function () {
        var pid = $(this).attr('data-pid');
        var name = $(this).attr('data-pname');
        var pimg = $(this).attr('data-pimg');
        $('#pid').val(pid);
        $('#pimg').attr('src',pimg);
        $('#pname').html(name);
        $('#staticBackdrop1').modal('show');
    });
</script>

<div class="product-modal">
    <div class="modal modal-lg fade" id="staticBackdrop1" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>My List</h2>
                </div>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <form id="pdetailform" action="#">
                        <input type="hidden" name="pid" value="" id="pid">
                        <div class="product-detail shop-detail ps-md-5 ps-4 pe-md-5 pe-4">
                            <div class="row g-md-4 g-3 align-items-center">
                                <div class="col-md-5">
                                    <div class="product-image">
                                        <img id="pimg" src="<?php echo base_url(); ?>assets/user/img/product-item.webp" alt="img" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <div class="shop-inner">
                                        <div class="shop-inner-content">
                                            <h2 class="heading-title mb-3" id="pname">[HALAL] JAPANESE RED BEAN PASTE <br> FOR BREAD BAKING (600G/BAG)</h2>
                                            <!-- <span class="price"> $98.00 </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>
                                            <button id="ATC" class="btn btn-primary" type="submit"> <span> Add To Cart <div><img src="<?php echo base_url(); ?>assets/user/img/btn-right.png" class="img" alt="right"> </div> </span> </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<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 = $('#pid').val();
            var qty = $('#qty').val();
            $.ajax({
                url: site_url + "cart/addProductInWishlist",
                type: 'POST',
                data: 'productid=' + productid + '&qty=' + qty,
                success: function(data) {
                    if (data.found == 0) {
                        var cartDropdown = data.cartlist;
                        var count = data.count;
                        $("#epcart").html(cartDropdown);
                    } else {
                        alert(data.msg);
                    }
                }
            });


            $('#ATC').attr('disabled', false);
            $('#ATC').removeClass('disabled');

            $('#staticBackdrop1').modal('hide');
        });
    });
</script>
<script>
    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);
    }

    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);
        }
    }
</script>