<?php if(count($slideshows) > 0) : ?>
<div id="content">
<!-- slideshow-->
<div
    id="rev_slider_one_wrapper"
    class="rev_slider_wrapper fullscreen-container" 
    data-alias="mask-showcase"
    data-source="gallery" 
  >
    <!-- START REVOLUTION SLIDER 5.4.1 fullscreen mode -->
    <div
      id="rev_slider_two"
      class="rev_slider fullscreenbanner" 
      style="display: none"
      data-version="5.4.1"
    >
      <ul>
        <?php foreach($slideshows as $key => $slideshow) : ?>
        <li
          data-index="rs-<?= $key + 1 ?>"
          data-transition="fade"
          data-slotamount="default"
          data-hideafterloop="0"
          data-hideslideonmobile="off"
          data-easein="default"
          data-easeout="default"
          data-masterspeed="300" 
          data-thumb="images/slider2.webp"
          data-rotate="0" 
          data-saveperformance="off"
          data-title=""
          data-param1="1"
          data-param2=""
          data-param3=""
          data-param4=""
          data-param5=""
          data-param6=""
          data-param7=""
          data-param8=""
          data-param9=""
          data-param10=""
          data-description=""
        >
          <!-- MAIN IMAGE -->
          <img
            src="<?= base_url() . 'uploads/banners/' . $slideshow['image']; ?>"
            data-bgcolor="#ffffff"
            style=""
            alt=""
            data-bgposition="center center"
            data-bgfit="cover"
            data-bgrepeat="no-repeat"
            data-bgparallax="off"
            class="rev-slidebg"
            data-no-retina
          />

          <!-- LAYER 3  Thin text title-->
          <div
            class="tp-caption tp-resizeme caption-big-2"
            id="slide-<?= $key + 1 ?>-layer-3"
            data-x="['center','center','center','center']"
            data-hoffset="['0','0','0','0']"
            data-y="['center','center','center','center']"
            data-voffset="['-38','-30','-30','-18']"
            data-fontsize="['50',40','30','18']"
            data-lineheight="['80','70','60','30']"
            data-fontweight="['200','200','200','200']"
            data-color="['#fff','#fff','#fff','#fff']"
            data-whitespace="nowrap"
            data-type="text"
            data-responsive_offset="on"
            data-frames='[{"delay":0,"speed":1000,"frame":"0","from":"x:50px;opacity:0;","to":"o:1;","ease":"power3.inOut"},{"delay":"wait","speed":1000,"frame":"999","to":"x:50px;opacity:0;","ease":"power3.inOut"}]'
            data-textAlign="['center','center','center','center']"
          >
            <span style="text-shadow:1px 1px #000;">
            <?= $slideshow['title'] ?>
            <br>
            <?= $slideshow['text_content'] ?>
          </span>
          </div>
        </li>
        <?php endforeach; ?>
      </ul>
    </div>
  </div>
</div>
<?php endif; ?>

<div class="shop-catalog"> 
    <div class="container"> 
        <div class="row">
            <div class="widget-area primary-sidebar col-lg-3 col-md-12 col-sm-12">
                <aside id="search-2" class="widget widget_search">
                    <form role="search" method="get" id="search-form" class="search-form">
                        <input id="input_search" type="search" class="search-field" placeholder="Search…">
                        <button id="btn_search" class="search-submit" type="submit" value="Search"><i class="ot-flaticon-search"></i></button>
                    </form>
                </aside>
                <?php if($category['can_download_catalog'] == 'yes') : ?>
                <aside id="search-2" class="widget widget_search">
                    <div class="add-to-cart-inner">
                        <a id="mbtn2" href="#" class="octf-btn octf-btn-dark">DOWNLOAD CATALOG</a>
                    </div>
                </aside>
                <?php endif ?>
                <aside id="search-2" class="widget widget_search" style="border: 1px solid #e6e6e6; padding: 10px; padding-bottom:20px;">
                    <h5 class="widget-title">Filter</h5>
                    <div style="display: grid; grid-template-columns: 1fr">
                        <?= form_open() ?> 
                        <div class="ot-accordions pr-4">
                            <?php foreach($varians as $key => $varian) : ?>
                                <?php if(isset($varian['attributes'])) : ?>
                                    <div class="acc-item">
                                        <div class="acc-toggle flex-middle">
                                            <?= ucwords($varian['varian']) ?>
                                            <span class="down"><i class="fas fa-plus"></i></span>
                                            <span class="up"><i class="fas fa-minus"></i></span> 
                                        </div>  
                                        <div class="acc-content">


                                            <?php foreach($varian['attributes'] as $attribute) : ?>
                                                <?php $combined_attribute = $varian['varian'] . '|' . $attribute['attribute']; ?>
                                                <input type="checkbox" 
                                                <?php if($this->session->userdata('varian_attributes')) : ?>
                                                  <?php if(in_array($combined_attribute, $this->session->userdata('varian_attributes'))) : ?>        
                                                    checked
                                                   <?php endif; ?> 
                                                <?php endif; ?>
                                                 class="atrributes_checkboxes"
                                                 value="<?= $combined_attribute ?>" />
                                                <label for="vehicle1"><?= ucwords($attribute['attribute']) ?></label><br>
                                            <?php endforeach ?>  
                                        </div>
                                    </div>
                                <?php endif ?>
                            <?php endforeach ?>    
                        </div>
                        <a href="<?= base_url() . 'products/category/' . $category['alias'] . '/true' ?>" class="octf-btn octf-btn-dark">Reset</a>  
                        <?= form_close() ?>
                    </div>
                </aside>
                <aside class="widget widget_categories">
                    <h5 class="widget-title">All Products</h5>  
                    <ul>
                        <?php foreach($categories as $cat_item) : ?>
                            <li><a href="<?= base_url() . 'products/category/' . $cat_item['alias'] ?>"><?= ucwords($cat_item['category']) ?></a> <span class="count">(
                            <?php 
                            $this->db->select('id_products');
                            $this->db->from('products');
                            $this->db->join('category_product', 'category_product.id_product = products.id_products');
                            $this->db->where('id_category', $cat_item['id_categories']);$this->db->where('product_status', '1');
                            $stocks_for_category_ids =[6, 7, 8, 9];
                            if (in_array($cat_item['id_categories'], $stocks_for_category_ids))
                            {
                                $this->db->where('stock >=', $cat_item['min_show_qty']);
                            }
                            $count_category = $this->db->get()->num_rows();
                            ?>
                                <?= $count_category ?>
                            )</span></li>
                        <?php endforeach ?> 
                    </ul>
                </aside>
            </div>
            <div class="col-lg-9 col-md-12 order-first order-lg-last mb-lg-0 mb-5">
                <div id="spinner" style="width:150px; margin-left:auto; margin-right:auto; padding-top:60px; display:none;">
                    <img src="<?= base_url() . 'uploads/spinner.gif' ?>" alt="spinner" />
                </div>
                <div class="product">
                    <div id="products"></div>
                </div>   
                <div id="pagination_links"></div>
            </div>
        </div> 
    </div>
</div>
<div id="modalDialog2" class="modal" style="width:600px; max-width:90%;  position: fixed;
    top: 70%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);">
    <div class="modal-content animate-top">
        <div class="modal-header">
            <h5 class="modal-title">Download Catalog</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <form method="post" id="contactFrm">
        <div class="modal-body">
            <!-- Form submission status -->
            <div class="response"></div>
			
            <!-- Contact form -->
            <div class="form-group">
                <label>Name:</label>
                <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required>
            </div>
            <div class="form-group">
                <label>Email:</label>
                <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required>
            </div>
            <div class="form-group">
                <label>Mobile Phone:</label>
                <input type="text" name="phone" id="phone" class="form-control" placeholder="Enter your phone" required>
            </div>
            <div class="form-group">
                <label>Collection:</label>
                <select class="form-control"  name="collection" required id="collection" >
                    <option>Black out</option>
                    <option>Deemout</option>
                    <option>Sheer</option>
                    <option>Sunbeam</option>
                    <option>Fiber Guard</option>
                </select>
            </div>
        </div>
        <div class="modal-footer"> 
            <!-- Submit button -->
            <button id="downloadButton" type="submit" class="octf-btn octf-btn-dark">DOWNLOAD</button>
        </div>
        </form>
    </div>
</div>
<script>
let attributes = [];
let search_term;

<?php if($this->session->userdata('varian_attributes')) : ?>
    <?php foreach($this->session->userdata('varian_attributes') as $attribute) : ?>
        attributes.push('<?= $attribute ?>');
    <?php endforeach; ?>    
<?php endif ?>    

$( document ).ready(function() {
    load_products(<?= $category['id_categories'] ?>, attributes, 0);

    $('#btn_search').on('click',function(e) {
       e.preventDefault(); 
       attributes = [];
       $('#content').hide();

       search_term = $('#input_search').val();

       load_products(<?= $category['id_categories'] ?>, attributes, 0, search_term);
    }); 

    $('#pagination_links').on('click','a',function(e) {
       e.preventDefault(); 
       $('#content').hide();
       let pagenum = $(this).attr('data-ci-pagination-page');
       load_products(<?= $category['id_categories'] ?>, attributes, pagenum,  search_term);
    });

    $(document).on('change', '.atrributes_checkboxes', function() {
        $('#content').hide();
        attributes = [];
        $(':checkbox:checked').each(function(i) {
            attributes[i] = $(this).val();  
        });
        load_products(<?= $category['id_categories'] ?>, attributes, 0, search_term);
    });

    function load_products(category_id, all_attributes, pagenum, search_term = null) {

        console.log('search_term', search_term);

        $('#spinner').show();
        $.ajax({
            'url'       : '<?= site_url(); ?>' + 'products/ajax_getproducts',
            'type'      : 'POST', 
            'data'      : {
                        'category_id'   : category_id,
                        'attributes'    : all_attributes,  
                        'pagenum'       : pagenum,    
                        'search_term'    : search_term, 
                        '<?= $this->security->get_csrf_token_name(); ?>' : '<?= $this->security->get_csrf_hash(); ?>'
                        },  
            'success'   : function(data) { 
                if (data) {
                    $('#spinner').hide();
                    $('#products').html(JSON.parse(data).products);  
                    $('#pagination_links').html(JSON.parse(data).pagination);
                    $("html, body").animate({ scrollTop: 0 }, "fast"); 

                    $('.topAttributeIcons').on('click', function(e) {
                        let removedAttribute = $(this).data('attribute');
                        attributes = all_attributes.filter(e => e !== removedAttribute);
                        load_products(<?= $category['id_categories'] ?>, attributes, 0, search_term);
                        $('input:checkbox[value="' + removedAttribute + '"]').attr('checked', false);
                    });
                };
            },
        });
    }
});
</script>