
<?php $__env->startSection('sitecontent'); ?>
<section class="headerbg">
    <div class="header header-padding">
        <?php echo $__env->make('partials.site.header-menu', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
    </div>
    <?php echo $__env->make('partials.site.home-banner', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</section>

<section class="about-product-bg">
    <div class="container">
        <div class="about-product-toprow">
            <ul>
                <li>
                    <span><img src="<?php echo e(asset('site-assets/images/website/')); ?>/<?php echo e(setting('icon_1')); ?>" onerror="this.src='<?php echo e(asset('site-assets/images/step-icon.png')); ?>'"  /></span>
                    <h3><?php echo e(__('lang.home_product_filtration')); ?></h3>
                    <p>
                        <?php echo __('lang.home_product_filtration_description'); ?>
                    </p>
                </li>
                <li>
                    <span><img src="<?php echo e(asset('site-assets/images/website/')); ?>/<?php echo e(setting('icon_2')); ?>" onerror="this.src='<?php echo e(asset('site-assets/images/step-icon.png')); ?>'"  /></span>
                    <h3><?php echo e(__('lang.home_product_max_purity')); ?></h3>
                    <p>
                        <?php echo __('lang.home_product_max_purity_description'); ?>
                    </p>
                </li>
                <li>
                    <span><img src="<?php echo e(asset('site-assets/images/website/')); ?>/<?php echo e(setting('icon_3')); ?>" onerror="this.src='<?php echo e(asset('site-assets/images/step-icon.png')); ?>'"  /></span>
                    <h3><?php echo e(__('lang.home_product_cholorine_free')); ?></h3>
                    <p>
                        <?php echo __('lang.home_product_cholorine_free_description'); ?>
                    </p>
                </li>
                <li>
                    <span><img src="<?php echo e(asset('site-assets/images/website/')); ?>/<?php echo e(setting('icon_4')); ?>" onerror="this.src='<?php echo e(asset('site-assets/images/step-icon.png')); ?>'"  /></span>
                    <h3><?php echo e(__('lang.home_product_soft_drink')); ?></h3>
                    <p>
                        <?php echo __('lang.home_product_soft_drink_description'); ?>
                    </p>
                </li>
            </ul>
        </div>
        <div class="about-product-bottomrow">            
            <div class="row home-about-alignment">
                <div class="col-md-5">
                    <div class="about-product-img"><img src="<?php echo e(asset('site-assets/images/website/')); ?>/<?php echo e(setting('about_product')); ?>" onerror="this.src='<?php echo e(asset('site-assets/images/about-poduct.png')); ?>'" /></div>
                </div>
                <div class="col-md-7">
                    <span><a class="home_about_product-anchor"><?php echo e(__('lang.home_about_product')); ?></a><span>
                    <h1 class="mt-12"><?php echo e(__('lang.home_about_product_chemical')); ?></h1>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="about-product-text">
                                <h4><?php echo e(__('lang.home_about_product_Calcium')); ?></h4>
                                <h5><?php echo e(__('lang.home_about_product_Calcium_mg_quntity')); ?></h5>
                                <p>
                                    <?php echo __('lang.home_about_product_Calcium_description'); ?>
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="about-product-text">
                                <h4><?php echo e(__('lang.home_about_product_Calcium2')); ?></h4>
                                <h5><?php echo e(__('lang.home_about_product_Calcium_mg_quntity2')); ?></h5>
                                <p>
                                    <?php echo __('lang.home_about_product_Calcium_description2'); ?>
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="about-product-text">
                                <h4><?php echo e(__('lang.home_about_product_Calcium3')); ?></h4>
                                <h5><?php echo e(__('lang.home_about_product_Calcium_mg_quntity3')); ?></h5>
                                <p>
                                    <?php echo __('lang.home_about_product_Calcium_description3'); ?>
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="about-product-text">
                                <h4><?php echo e(__('lang.home_about_product_Calcium4')); ?></h4>
                                <h5><?php echo e(__('lang.home_about_product_Calcium_mg_quntity4')); ?></h5>
                                <p>
                                    <?php echo __('lang.home_about_product_Calcium_description4'); ?>
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="about-product-text">
                                <h4><?php echo e(__('lang.home_about_product_Calcium5')); ?></h4>
                                <h5><?php echo e(__('lang.home_about_product_Calcium_mg_quntity5')); ?></h5>
                                <p>
                                    <?php echo __('lang.home_about_product_Calcium_description5'); ?>
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="about-product-text">
                                <h4><?php echo e(__('lang.home_about_product_Calcium6')); ?></h4>
                                <h5><?php echo e(__('lang.home_about_product_Calcium_mg_quntity6')); ?></h5>
                                <p>
                                    <?php echo __('lang.home_about_product_Calcium_description6'); ?>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="populargoods" id="populargoods">
    <div class="container">
        <span class="home-about-assorment"><a class="home-about-assorment-anchor"><?php echo e(__('lang.home_about_product_assortment')); ?></a><span>
        <h1 class="mt-10"><?php echo e(__('lang.home_about_product_popular_goods')); ?></h1>
        <?php if(Session::has('message')): ?>
            <div class="col-lg-12">
                <div class="alert alert-success" role="alert">
                  <?php echo e(Session::get('message')); ?>

                </div>
            </div>
        <?php endif; ?>
        <div id="owl-carousel" class="owl-carousel owl-theme" style="<?php if(isset($_COOKIE['lang_code'])): ?> <?php if($_COOKIE['lang_code']=='ar'): ?> direction: ltr; <?php endif; ?> <?php endif; ?>">
            <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="item">
                    <div class="populargoods-box">
                        <div class="populargoods-img">
                            <img src="<?php echo e(asset('app-assets/images/products')); ?>/<?php echo e($row->image); ?>" alt="<?php echo e($row->name); ?>" style="height:210px;border-radius: 10px;" />
                            <a href="<?php echo e(url('signin')); ?>" class="addproductimg"><img src="<?php echo e(asset('site-assets/images/cart.png')); ?>" alt="<?php echo e($row->name); ?>" /></a>
                        </div>
                        <h6><?php echo e($row->name); ?></h6>
                        <h5><?php if($row->discount_price>0): ?> <?php echo e(\Helpers::currency($row->discount_price)); ?> <?php else: ?> <?php echo e(\Helpers::currency($row->price)); ?> <?php endif; ?></h5>
                        <?php if(auth()->guard()->check()): ?>
                            <?php if($row->cart_info): ?>
                                <a href="javascript:;" class="addproduct" style="background: #af7ab380;" disabled><img src="<?php echo e(asset('site-assets/images/plusico.png')); ?>" alt="<?php echo e($row->name); ?>" /></a>
                            <?php else: ?>
                                <a href="<?php echo e(url('add-to-cart')); ?>?product_id=<?php echo e($row->id); ?>" class="addproduct"><img src="<?php echo e(asset('site-assets/images/plusico.png')); ?>" alt="<?php echo e($row->name); ?>" /></a>
                            <?php endif; ?>
                        <?php endif; ?>
                        <?php if(auth()->guard()->guest()): ?>
                            <a href="<?php echo e(url('signin')); ?>" class="addproduct"><img src="<?php echo e(asset('site-assets/images/plusico.png')); ?>" alt="<?php echo e($row->name); ?>" /></a>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>

<section class="healthlylife-bg">
    <div class="container">
        <!-- <div class="healthlylife-video width-full-left">
            <a href="#" data-toggle="modal" data-target="#watch_video">
                <img src="<?php echo e(asset('site-assets/images/playicon.png')); ?>"  />
                <iframe src="<?php echo e(setting('youtube_video_url')); ?>" style="width:100%;height: 400px;"></iframe>
            </a>
            <p><?php echo e(__('lang.home_about_watch_your_video')); ?></p>
        </div> -->
        <div class="healthlylife-video width-full-left" style="position: relative;">
            <a href="javascript:;">
                <iframe id="youtube_video" src="<?php echo e(setting('youtube_video_url')); ?>" style="width:100%;height: 400px;"></iframe>
                <!-- <div id="play_button" style="position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); z-index: 1;">
                    <img src="<?php echo e(asset('site-assets/images/playicon.png')); ?>" />
                </div> -->
            </a>
            <p><?php echo e(__('lang.home_about_watch_your_video')); ?></p>
        </div>
        <div class="healthlylife-content width-full-left mt-20">
            <h1 class="healthlylife-content-heading float-left">
                <?php echo __('lang.home_about_water_quality'); ?>
            </h1>
            <h6 class="healthlylife-content-heading-h6"><?php echo e(__('lang.home_about_water_quality_description')); ?></h6>
            <hr>
            <div class="row padding-0">
                <!-- col-md-12 col-12 display-flex -->
                <div class="col-md-3 col-12 padding-for-mobile padding-0">
                    <p>
                        <span><img src="<?php echo e(asset('site-assets/images/plusicon.png')); ?>"  /></span><?php echo e(__('lang.home_about_water_quality_strong_immunity')); ?>

                    </p>
                </div>
                <div class="col-md-3 col-12 padding-for-mobile padding-0">
                    <p>
                        <span><img src="<?php echo e(asset('site-assets/images/plusicon.png')); ?>"  /></span><?php echo e(__('lang.home_about_water_quality_good_degistion')); ?>

                    </p>
                </div>
                <div class="col-md-3 col-12 padding-for-mobile padding-0">
                    <p>
                        <span><img src="<?php echo e(asset('site-assets/images/plusicon.png')); ?>"  /></span><?php echo e(__('lang.home_about_water_quality_feeling')); ?>

                    </p>
                </div>
                <div class="col-md-3 col-12 padding-for-mobile padding-0">
                    <p>
                        <span><img src="<?php echo e(asset('site-assets/images/plusicon.png')); ?>"  /></span><?php echo e(__('lang.home_about_water_quality_strong_immunity')); ?>

                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="downloadapp-bg">
    <div class="container">
        <div class="downloadapp-img"><img src="<?php echo e(asset('site-assets/images/website/')); ?>/<?php echo e(setting('mobile_image')); ?>" onerror="this.src='<?php echo e(asset('site-assets/images/downloadapp.png')); ?>'" /></div>
        <div class="downloadapp-content">
            <span class="width-full-left"><a class="downloadapp-content-anchor"><?php echo e(__('lang.home_about_call_ordering')); ?></a><span>
            <h1 class="mt-20"><?php echo __('lang.home_about_call_ordering_description'); ?></h1>
            <div class="downloadapp-content-btn">
                <a href="<?php echo e(setting('apple_download_url')); ?>" class="iosapp" target="_blank"><?php echo e(__('lang.home_download_apple_app')); ?> <i class="fa fa-apple" aria-hidden="true"></i></a>
                <a href="<?php echo e(setting('android_download_url')); ?>" target="_blank" class="androidapp"><?php echo e(__('lang.home_download_android_app')); ?> <i class="fa fa-android" aria-hidden="true"></i></a>
            </div>
        </div>
    </div>
</section>
<div class="modal" id="watch_video">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <iframe src="<?php echo e(setting('youtube_video_url')); ?>" style="width:100%;height: 400px;"></iframe>
            </div>
        </div>
    </div>
</div>
<footer class="footer">
    <?php echo $__env->make('partials.site.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</footer>
<!-- END: Content-->

<script>
  var player;
  
  // This function creates a new YouTube player object
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtube_video', {
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // Function to handle player state changes
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
      $("#play-button").hide();
    } else if (event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED) {
      $("#play-button").show();
    }
  }

  $(document).ready(function() {
    $("#play-button").click(function() {
      if (player.getPlayerState() == YT.PlayerState.PLAYING) {
        player.pauseVideo();
      } else {
        player.playVideo();
      }
    });
  });
</script>
<!-- <script>
    $(document).ready(function() {
        const videoFrame = $("#youtube_video");
        const playButton = $("#play_button");

        playButton.on("click", function () {
            if (videoFrame[0].contentWindow && videoFrame[0].contentWindow.postMessage) {
                videoFrame[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
                $("#play_button").hide();
            }
        });

        videoFrame.on("click", function () {
            alert(1);
            if (videoFrame[0].contentWindow && videoFrame[0].contentWindow.postMessage) {
                videoFrame[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
                $("#play_button").show();
            }
        });
    });
</script> -->
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.site-app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Applications/MAMP/htdocs/hayawater/resources/views/index.blade.php ENDPATH**/ ?>