<?php $bannerDaysStringArray = array('Sun' => 'Sunday', 'Mon' => 'Monday', 'Tue' => 'Tuesday', 'Wed' => 'Wednesday', 'Thu' => 'Thursday', 'Fri' => 'Friday', 'Sat' => 'Saturday'); ?>
<section id="slider">
    <div id="slideshow">
        <div class="slideitem current">
            <div class="text-center banner-content" style="background-image:linear-gradient(rgba(164,145,96,.1),rgba(255,255,255,.3)),url(<?php echo ONLINE_RESOURCES_PATH . 'images/slider/slider-1.jpg'; ?>);height: 490px; background-position: center center;background-repeat: no-repeat;background-size: cover; ">
                <!--<h1 class="text-uppercase title welcome text-uppercase hide-xs">Welcome <br/>at<br/> <?php echo $this->config->item('general_name') ?></h1>-->
                <h1 class="text-uppercase title welcome text-uppercase hide-xs">&nbsp;</h1>
                <br/><br/>

                <h2 class="sub-title-1 text-uppercase">
                    <!--<span class="hide-xs"><?php echo $bannerDaysStringArray[date('D')] ?>&nbsp;<?php echo date('h:i a') ?><br/></span>-->
                    <?php if (isRestaurantOpenNow()): ?>
                        <span class="sub-title-2" id="openingTime">Open now</span>
                    <?php else: ?>
                        <?php if ($isTodayOpened): ?>
                            <span class="sub-title-3" id="openingTime">Closed now <?php echo ', open at ' . $openingTime ?></span>
                        <?php endif; ?>
                    <?php endif; ?>
                </h2>

                <div  style="padding-bottom: 40px;">
                    <div>
                        <?php if (!$processOrder): ?>
                            <?php if ($isTodayOpened): ?>
                                <a href="<?php echo site_url('pre-order') ?>"><span class="btn btn-fb" id="slider-button">Pre-order for later</span></a>
                            <?php else: ?>
                                <span class="sub-title-3 text-uppercase" id="openingTime">Closed today</span>
                            <?php endif; ?>
                        <?php else: ?>
                            <a href="<?php echo site_url('online-order') ?>" class="btn btn-c text-uppercase" id="slider-button"><span class="sub-title-1">Order Now</span></a>
                        <?php endif; ?>
                    </div>
                      <!--<a href="<?php echo site_url('reservation') ?>" class="btn btn-c text-uppercase" id="booking-button"><span class="sub-title-1">Book a Table</span></a>-->
                </div>
            </div>
        </div>
        <div class="slideitem">
            <div class="text-center banner-content" style="background-image:linear-gradient(rgba(164,145,96,.1),rgba(255,255,255,.3)),url(<?php echo ONLINE_RESOURCES_PATH . 'images/slider/slider-2.jpg'; ?>);height: 490px; background-position: center center;background-repeat: no-repeat;background-size: cover; ">
                <!--<h1 class="text-uppercase title welcome text-uppercase hide-xs">Welcome <br/>at<br/> <?php echo $this->config->item('general_name') ?></h1>-->
                <h1 class="text-uppercase title welcome text-uppercase hide-xs">&nbsp;</h1>
                <br/><br/>
                <h2 class="sub-title-1 text-uppercase">
                   <!-- <span class="hide-xs"><?php echo $bannerDaysStringArray[date('D')] ?>&nbsp;<?php echo date('h:i a') ?><br/></span>-->
                    <?php if (isRestaurantOpenNow()): ?>
                        <span class="sub-title-2" id="openingTime">Open now</span>
                    <?php else: ?>
                        <?php if ($isTodayOpened): ?>
                            <span class="sub-title-3 " id="openingTime">Closed now <?php echo ', open at ' . $openingTime ?></span>
                        <?php endif; ?>
                    <?php endif; ?>
                </h2>
                <div  style="padding-bottom: 40px;">
                    <div>
                        <?php if (!$processOrder): ?>
                            <?php if ($isTodayOpened): ?>
                                <a href="<?php echo site_url('pre-order') ?>"><span class="btn btn-fb" id="slider-button">Pre-order for later</span></a>
                            <?php else: ?>
                                <span class="sub-title-3 text-uppercase" id="openingTime">Closed today</span>
                            <?php endif; ?>
                        <?php else: ?>
                            <a href="<?php echo site_url('online-order') ?>" class="btn btn-c text-uppercase" id="slider-button"><span class="sub-title-1">Order Now</span></a>
                        <?php endif; ?>
                    </div>
                     <!-- <a href="<?php echo site_url('reservation') ?>" class="btn btn-c text-uppercase" id="booking-button"><span class="sub-title-1">Book a Table</span></a>-->
                </div>
            </div>
        </div>
        <div class="slideitem">
            <div class="text-center banner-content" style="background-image:linear-gradient(rgba(164,145,96,.1),rgba(255,255,255,.3)),url(<?php echo ONLINE_RESOURCES_PATH . 'images/slider/slider-3.jpg'; ?>);height: 490px; background-position: center center;background-repeat: no-repeat;background-size: cover; ">
                <!--<h1 class="text-uppercase title welcome text-uppercase hide-xs">Welcome <br/>at<br/> <?php echo $this->config->item('general_name') ?></h1>-->
                <h1 class="text-uppercase title welcome text-uppercase hide-xs">&nbsp;</h1>
                <br/><br/>
                <h2 class="sub-title-1 text-uppercase">
                    <!--<span class="hide-xs"> <?php echo $bannerDaysStringArray[date('D')] ?>&nbsp;<?php echo date('h:i a') ?><br/></span>-->
                    <?php if (isRestaurantOpenNow()): ?>
                        <span class="sub-title-2" id="openingTime">Open now</span>
                    <?php else: ?>
                        <?php if ($isTodayOpened): ?>
                            <span class="sub-title-3" id="openingTime">Closed now <?php echo ', open at ' . $openingTime ?></span>
                        <?php endif; ?>
                    <?php endif; ?>
                </h2>
                <div  style="padding-bottom: 40px;">
                    <div>
                        <?php if (!$processOrder): ?>
                            <?php if ($isTodayOpened): ?>
                                <a href="<?php echo site_url('pre-order') ?>"><span class="btn btn-fb" id="slider-button">Pre-order for later</span></a>
                            <?php else: ?>
                                <span class="sub-title-3 text-uppercase" id="openingTime">Closed today</span>
                            <?php endif; ?>
                        <?php else: ?>
                            <a href="<?php echo site_url('online-order') ?>" class="btn btn-c text-uppercase" id="slider-button"><span class="sub-title-1">Order Now</span></a>
                        <?php endif; ?>
                    </div>
                     <!-- <a href="<?php echo site_url('reservation') ?>" class="btn btn-c text-uppercase" id="booking-button"><span class="sub-title-1">Book a Table</span></a>-->
                </div>
            </div>
        </div>
    </div>
    <style>
        #slider {margin-top: 40px;z-index: 11111;}
        #slideshow {margin: 0 auto; position: relative; width: 100%; padding: 245px 0; background: rgba(0,0,0,0.2); box-shadow: 0 0 20px rgba(0,0,0,0.6); box-sizing:border-box;}
        #slideshow > div {position: absolute; top: 0px; left: 0px; right: 0px;bottom: 0px; }
        #slideshow > div > img {width:100%;height:100%;max-height: 100%;border:none;border-radius: 0px;}
        #slideshow:hover i, #slideshow:hover .slider-dots{opacity: 1;}
        .slidebtn {z-index:99;background:transparent;outline:none;border:none;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;padding:0 10px 0 10px;}
        .slidebtn:active,.slidedtn:focus {outline:none;}
        .slidebtn .icon {color:#FFF;font-size:72px;opacity: 0.2; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
        .prev {position: absolute; top: 10px; left: 10px; bottom: 10px;}
        .next {position: absolute; top: 10px; right: 10px;bottom: 10px;}
        .slider-dots {opacity: 0.2;list-style: none;display: inline-block;padding-left: 0;margin-bottom: 0;position:absolute;left:50%;bottom:3%;transform: translate(-50%, 0);z-index:99;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
        .slider-dots li {color: #000;display: inline;font-size: 48px;margin-right: 5px;cursor:pointer;}
        .slider-dots li.active-dot {color: #fff;}
    </style>
    <script>
        $(document).ready(function () {
            $("#slider #slideshow > div:gt(0)").hide();
            var buttons = "<button class=\"slidebtn prev\"><i class=\"icon icon-left-open-big\"></i></button><button class=\"slidebtn next\"><i class=\"icon icon-right-open-big\"></i></button\>";
            var slidesl = $('.slideitem').length;
            var d = "<li class=\"dot active-dot\">&bull;</li>";
            for (var i = 1; i < slidesl; i++) {
                d = d + "<li class=\"dot\">&bull;</li>";
            }
            var dots = "<ul class=\"slider-dots\">" + d + "</ul\>";

            $("#slideshow").append(dots).append(buttons);
            var interval = setInterval(slide, 3000);

            function intslide(func) {
                if (func === 'start') {
                    interval = setInterval(slide, 3000);
                } else {
                    clearInterval(interval);
                }
            }
            function slide() {
                sact('next', 0, 1200);
            }
            function sact(a, ix, it) {
                var currentSlide = $('.current');
                var nextSlide = currentSlide.next('.slideitem');
                var prevSlide = currentSlide.prev('.slideitem');
                var reqSlide = $('.slideitem').eq(ix);
                var currentDot = $('.active-dot');
                var nextDot = currentDot.next();
                var prevDot = currentDot.prev();
                var reqDot = $('.dot').eq(ix);

                if (nextSlide.length === 0) {
                    nextDot = $('.dot').first();
                    nextSlide = $('.slideitem').first();
                }
                if (prevSlide.length === 0) {
                    prevDot = $('.dot').last();
                    prevSlide = $('.slideitem').last();
                }
                if (a === 'next') {
                    var Slide = nextSlide;
                    var Dot = nextDot;
                } else if (a === 'prev') {
                    var Slide = prevSlide;
                    var Dot = prevDot;
                } else {
                    var Slide = reqSlide;
                    var Dot = reqDot;
                }
                currentSlide.fadeOut(it).removeClass('current');
                Slide.fadeIn(it).addClass('current');
                currentDot.removeClass('active-dot');
                Dot.addClass('active-dot');
            }
            $('.next').on('click', function () {
                intslide('stop');
                sact('next', 0, 400);
                intslide('start');
            });
            $('.prev').on('click', function () {
                intslide('stop');
                sact('prev', 0, 400);
                intslide('start');
            });
            $('.dot').on('click', function () {
                intslide('stop');
                var index = $(this).index();
                sact('dot', index, 400);
                intslide('start');
            });
        });
    </script>
</section>