<div id="content" class="site-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>

  <!--about us-->
  <section class="bg-dark-theratio" id="aboutSection">
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <div class="about-img-2">
            <video width="100%" loop autoplay muted>
              <source
                src="<?= base_url() . 'uploads/page/' . $home['about_image1']; ?>"
                type="video/mp4" 
              />
              Your browser does not support the video tag.
            </video>
          </div>
        </div>
        <div class="col-lg-6 align-self-center">
          <div class="about-content-2 ml-xl-70">
            <div class="ot-heading">
              <!-- <span>[ About Serba Antik ]</span> -->
              <h2 class="main-heading text-light">
              <?= $home['about_title'] ?>  
              </h2>
            </div>
            <div class="ot-tabs tabs-light">
              <ul class="tabs-heading unstyle">
                <li class="tab-link current" data-tab="tab-1">about</li>
                <li class="tab-link" data-tab="tab-2">why us</li>
                <li class="tab-link" data-tab="tab-3">history</li>
              </ul>
              <div id="tab-1" class="tab-content current">
                <?= $home['about_text'] ?> 
              </div>
              <div id="tab-2" class="tab-content"> 
              <?= $home['why_text'] ?>
                </div>
              <div id="tab-3" class="tab-content">
                <ul id="homeTimeline">
                  <?php foreach($history as $item) : ?>
                    <li>
                    <span style="font-size:20px"><?= $item['year'] ?></span> <?= strip_tags($item['content']) ?>
                  </li>
                   <?php endforeach; ?> 
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- product categories -->
  <section class="section-team-list team-1" style="background-image: linear-gradient(rgba(0, 0, 0, 0.327), rgba(0, 0, 0, 0.3)), url(<?= base_url() . 'uploads/page/' . $home['about_image2']; ?>);"> 
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center theratio-align-center">
          <div class="ot-heading is-dots">
            <!-- <span style="color: white">[ products ]</span> -->
            <h2 class="main-heading" style="color: white">
              Product Categories
            </h2>
          </div> 
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="team-slider owl-theme owl-carousel">
          <?php foreach($categories as $item) : ?>
            <div class="cate-lines h-light">
            <div class="cate-item">
              <a href="<?= base_url() . 'products/category/' . $item['alias'] ?>">
                <img src="<?= base_url() . 'uploads/categories/' . $item['image']; ?>" alt="<?= $item['category'] ?>" />
              </a>
              <div class="cate-item_content">
                <a href="<?= base_url() . 'products/category/' . $item['alias'] ?>"
                  ><h2 class="services">
                    <?= ucwords($item['category']) ?>
                  </h2></a>
              </div>
            </div>
          </div>
          <?php endforeach; ?>  
        </div>
      </div>
    </div>
  </section>

  <!-- our services-->
  <section class="our-portfolio-1">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center theratio-align-center">
          <div class="ot-heading is-dots s-light">
            <!-- <span>[ service ]</span> -->
            <h2 class="main-heading">Our Services</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row justify-content-center">
        <?php foreach($services as $key => $item) : ?>
          <div class="col-lg-4 col-md-6 col-6 px-0">
            <div class="cate-lines h-light">
              <div class="cate-item">
                <a href="<?= base_url() . 'services/' . $item['alias'] ?>">
                  <img src="<?= base_url() . 'uploads/page/' . $item['image1'] ?>" alt="<?= $item['name'] ?>" />
                </a>
                <div class="cate-item_content">
                  <a href="<?= base_url() . 'services/' . $item['alias'] ?>"
                    ><h2 class="services">
                      <?= ucwords($item['name']) ?><span class="number-stroke">0<?= $key + 1 ?></span>
                    </h2></a
                  >
                </div>
              </div>
            </div>
          </div>
        <?php endforeach ?>
      </div>
    </div>
  </section>

  <section class="our-portfolio-1" style="padding-bottom: 60px">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center theratio-align-center">
          <div class="ot-heading is-dots s-light">
            <!-- <span>[ portfolio ]</span> -->
            <h2 class="main-heading">Our Portfolio</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="container container-large">
      <div class="project-filter-wrapper2">
        <ul class="project_filters s-light">
          <li>
            <a href="#" data-filter=".category-0" class="selected btn-details"
              >All<span class="filter-count"></span
            ></a>
          </li>
          <?php foreach($portfolios_cat as $item) : ?>
            <li>
              <a class="btn-details" href="#" data-filter=".category-<?= $item['id'] ?>"
                ><?= $item['name'] ?><span class="filter-count"></span></a>
            </li>
          <?php endforeach ?>  
        </ul>
        <div class="projects-grid pf_4_cols style-1 img-scale w-auto">
          <div class="grid-sizer"></div>
          <?php for ($i = 0; $i <= 3; $i++) : ?>
            <?php switch ($i) {
              case 0:
                $selected_portfolios = $portfolios;
                break;
              case 1:
                $selected_portfolios = $portfolios_residential;
                break;
              case 2:
                $selected_portfolios = $portfolios_office;
                break;
              case 3:
                $selected_portfolios = $portfolios_hotel;
                break;
            }
            ?>
            <?php foreach($selected_portfolios as $key => $item) : ?> 
              <div class="project-item category-<?= $i ?>">
                <div class="projects-box">
                  <div class="projects-thumbnail">
                    <a href="<?= base_url() . 'uploads/page/' . $item['image'] ?>" data-lightbox="<?= $item['image'] ?>-a" data-title="<?= ucwords($item['name']) ?>">
                      <img src="<?= base_url() . 'uploads/page/' . $item['image'] ?>" alt="<?=  $item['name'] ?>" />
                    </a>
                    <div class="overlay">
                      <h5><?=  ucwords($item['name']) ?></h5>
                      <i class="ot-flaticon-add"></i> 
                    </div>
                  </div>
                  <div class="portfolio-info">
                    <div class="portfolio-info-inner">
                      <h5>
                        <a class="title-link" href="<?= base_url() . 'uploads/page/' . $item['image'] ?>" data-lightbox="<?= $item['image'] ?>-b" data-title="<?= ucwords($item['name']) ?>"><?=  ucwords($item['name']) ?></a>
                      </h5>
                    </div>
                    <a class="overlay" href="<?= base_url() . 'uploads/page/' . $item['image'] ?>" data-lightbox="<?= $item['image'] ?>-c" data-title="<?= ucwords($item['name']) ?>"></a>
                  </div>
                </div>
              </div>
            <?php endforeach; ?>  
          <?php endfor ?>
        </div>
        <div class="space-70"></div>
        <div class="space-5"></div>
        <div class="ot-button text-center">
          <a href="<?= base_url('portfolio') ?>" class="octf-btn octf-btn-light border-hover-light"
            >view All Portfolio</a
          >
        </div> 
      </div>
    </div>
  </section>

  <section class="testi-2 bg-dark-theratio">
    <div class="container">
      <div class="row m-0">
        <div class="studio-testi-slide s-light mb-5 mb-xl-0">
          <div
            class="studio-testi-slide-block z-index-2 position-relative"
          >
            <div class="ot-heading is-dots s-light"> 
              <!-- <span>[ testimonials ]</span> -->
              <h2 class="main-heading">What They Say</h2>
            </div>
            <div class="ot-testimonials v-dark">
              <div
                class="testimonials-slide-2 ot-testimonials-slider-s2 owl-theme owl-carousel"
              >
                <?php foreach($testimonies as $item) : ?>
                  <div class="testi-item"> 
                    <div class="ttext">
                      <?= $item['testimony'] ?>
                    </div>
                    <div>
                      <img src="<?= base_url() . 'uploads/page/' . $item['image'] ?>" alt="<?= $item['customer_name'] ?>" />
                      <div class="t-head flex-middle">
                        <div class="tinfo">
                          <h5> <?= ucwords($item['customer_name']) ?></h5>
                        </div>
                      </div>
                    </div>
                  </div>
                <?php endforeach ?>  
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="studio-testi-img text-center">
          <div class="studio-testi-img-block z-index-1">
            <img src="images/image2-home2.webp" alt="" />
          </div>
        </div> -->
      </div>
    </div>
  </section>

  <div class="team-clients bg-dark-theratio">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center theratio-align-center">
          <div class="ot-heading is-dots s-light">
            <!-- <span>[ partners ]</span> -->
            <h2 class="main-heading">Our Brands</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-12">
          <div class="clients-slide owl-theme owl-carousel">
            <?php foreach($brands as $item) : ?>
            <div class="img-item">
              <figure><img src="<?= base_url() . 'uploads/brand/' . $item['logo'] ?>" alt="" /></figure>
            </div>
            <?php endforeach ?>
          </div>
        </div>
      </div>
    </div>
  </div>

  <section class="our-blog-2">
    <div class="container">
      <div class="row pb-50">
        <div class="col-lg-8 col-md-12 mb-4 mb-lg-0">
          <div class="ot-heading is-dots s-light">
            <!-- <span>[ blog ]</span> -->
            <h2 class="main-heading">Our Latest Blog</h2>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 text-lg-right align-self-center">
          <div class="ot-button" id="blogViewAll">
            <a href="<?= base_url('blog') ?>" class="octf-btn octf-btn-light border-hover-light"
              >View blog</a
            >
          </div>
        </div>
      </div>
      <div class="row justify-content-center">
        <?php foreach($blogs as $blog) : ?>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="post-box masonry-post post-item v-dark">
            <div class="post-inner">
              <div class="entry-media post-cat-abs">
                <a href="<?= base_url() . 'blog/detail/' . strtolower($blog['alias']) ?>"><img src="<?= base_url() . 'uploads/blog/' . $blog['image2']; ?>" alt="" /></a>
                <div class="post-cat">
                  <div class="posted-in"><a href="<?= base_url() . 'blog/detail/' . strtolower($blog['alias']) ?>"><?= ucwords($blog['name']) ?></a></div> 
                </div>
              </div>
              <div class="inner-post">
                <div class="entry-header">
                  <div class="entry-meta">
                    <span class="posted-on"
                      ><a href="<?= base_url() . 'blog/detail/' . strtolower($blog['alias']) ?>"><?= date('d M Y', strtotime($blog['publish_date'])); ?></a></span 
                    >
                  </div>
                  <!-- .entry-meta -->

                  <h5 class="entry-title">
                    <a class="title-link" href="<?= base_url() . 'blog/detail/' . strtolower($blog['alias']) ?>"
                      > <?php
                  $title = strlen($blog['blog']) > 65 ? substr($blog['blog'], 0, 65) . "..." : $blog['blog'];
                  echo ucfirst($title); 
                ?></a
                    >
                  </h5>
                </div>
                <!-- .entry-header -->

                <div class="the-excerpt">
                <?php
                      $output = strlen($blog['description']) > 100 ? substr($blog['description'], 0, 150) . "..." : $blog['description'];
                      echo ucfirst($output); 
                    ?>
                </div>
                <!-- .entry-content -->
              </div>
            </div>
          </div>
        </div>
        <?php endforeach ?>
      </div>
    </div>
  </section>
</div>

<section class="p-0"> 
  <div
    class="projects-grid pf_4_cols style-2 p-info-s2 img-scale w-auto no-gaps mx-0"
  >
    <div class="grid-sizer"></div>
    <?php foreach($showrooms as $key => $item) : ?> 
      <?php if(!empty($item['image2'])) : ?>
        <div class="project-item
        <?php $dimension = getimagesize(FCPATH . 'uploads/showroom/' . $item['image2']); ?>
        <?php if($dimension[0] > 800) : ?>
        thumb2x
        <?php endif; ?>
        ">
          <div class="projects-box">
            <div class="projects-thumbnail"> 
              <a href="<?= base_url('showrooms') ?>">
                <img src="<?= base_url() . 'uploads/showroom/' . $item['image2'] ?>" alt="<?= ucwords($item['showroom']) ?>" />
              </a>
              <div class="overlay">
                <h5><?= ucwords($item['showroom']) ?></h5>
                <i class="ot-flaticon-add"></i>
              </div>
            </div>
            <div class="portfolio-info">
              <div class="portfolio-info-inner">
                <h5>
                  <a class="title-link" href="<?= base_url('showrooms') ?>"><?= ucwords($item['showroom']) ?></a>
                </h5>
              </div>
              <a class="overlay" href="<?= ucwords($item['showroom']) ?>"></a>
            </div>
          </div>
        </div>
      <?php endif; ?>  
    <?php endforeach ?> 
  </div>
</section>

<!-- get in touch--> 
<section class="cta-2" style="background-image:url(<?= base_url() . 'uploads/page/' . $home['about_image4'] ?>)">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2><?= ucwords($home['aboutpage_title']) ?></h2>
        <p><?= ucfirst($home['aboutpage_subtitle']) ?></p>
        <div class="ot-button">
          <a style="margin-right:20px; margin-bottom:30px; font-size:17px;" href="<?= base_url('showrooms') ?>" class="octf-btn octf-btn-light border-hover-light"
            >SHOWROOMS</a> 
          <a id="contactUsNow" target="_blank" href="https://api.whatsapp.com/send?phone=<?= $phone ?>" class="octf-btn octf-btn-light border-hover-light" style="background: #03CC02; font-size: 17px; color: #fff; margin-bottom:30px;"
            >CONTACT US NOW</a> 
        </div>
      </div>
    </div>
  </div>
</section>