@extends('app')
@section('title', $page_data->meta_title)

@section('meta_keywords', $page_data->meta_keywords?? '')
@section('meta_description', $page_data->meta_description?? '')

<!--@section('title','Home')-->

@section('head')

<style>
    .carousel-control.left, .carousel-control.right {
        background-image:none;
    }

    .img-responsive{
        width:100%;
        height:auto;
    }

    .hovereffect h2.f-21{
        font-size:21px;
    }

    .hovereffect h2.f-21 img{
        max-width:100%;
    }

    .cnt-food-girl{
        padding:0;
    }

    .slide-text{
        display:block;
        position:absolute;
        top:0;
        text-align: left;
        font-size: 30px;
        max-width: 85%;
        padding: 8px;
        color: #fff;
        padding-top:7%;
        z-index: 2;
        text-shadow: 0 0 1px black;
    }

    .image-martini{
        width: 100%;
        margin-top: 7vh;
        height: 393px;
        background-image: url('{{ url('resources/assets') }}/images/waiter1.jpg');
        background-size: cover;
        /* position: absolute; */
        bottom: 0;
        margin-left:0;
        background-position:center;
    }

    .image-martini img{
        width:100%;
        display:none;
    }
    
    .we_accept{
        font-size: 55;
        padding: 20px;
        color: #0f6db6;
        font-weight: bold;
    }
    
    .we_accept_img img{
    
        max-width:130px;
        margin:0 4px;
    }
    
    @media (min-width: 950px ) {
        .mart-image{
            display:flex;
        }

        .mart-image .fun-fast{
            float:none;
            height: 49%;
        }
        .mart-image .image-martini{
            float:none;
            height: 39%;
        }

        .mart-image .left > div{
            height:100%;
        }
        .mart-image .left > div .image-martini{
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .food-handler-card > div{
            padding-top:28%;
        }
    }

    @media (max-width: 900px ) {
        .w-49{
            width:49%;
        }
    }
    @media (min-width: 992px ) {
        .carousel-inner .active.left {
            left: -25%;
        }
        .carousel-inner .next {
            left:  25%;
        }
        .carousel-inner .prev {
            left: -25%;
        }
    }

    @media (min-width: 768px) and (max-width: 991px ) {
        .carousel-inner .active.left {
            left: -33.3%;
        }
        .carousel-inner .next {
            left:  33.3%;
        }
        .carousel-inner .prev {
            left: -33.3%;
        }
        .active > div:first-child {
            display:block;
        }
        .active > div:first-child + div {
            display:block;
        }
        .active > div:last-child {
            display:none;
        }
    }

    @media (max-width: 767px) {
        .carousel-inner .active.left {
            left: -100%;
        }
        .carousel-inner .next {
            left:  100%;
        }
        .carousel-inner .prev {
            left: -100%;
        }
        .active > div {
            display:none;
        }
        .active > div:first-child {
            display:block;
        }
        .hovereffect h2.f-21{
            font-size:1.1em;
            margin-top:-35px;
        }

        .hovereffect h2.f-21 img{
            width:43%;
        }

        .slide-text{
            font-size:1.2em;
            padding-top: 24%;
        }
    }

    .mb-2{
        margin-bottom:20px;
    }
    .img-div{
        background-size:cover;
        background-position:center;
        height:351px;
        position:relative;
    }
    .img-div:after{
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        top:0;
        z-index:1;
        content:" ";
        background-color: rgba(0,0,0,.3);
    }
    .slider-cnt p{
        padding:43px 0;
    }
    
    .cnt-up h3{
        padding: 20px 0px;
    }
    .cnt-dn-bg {
        background: #e32337;
        padding: 10px 45px 45px;
    }
</style>
@endsection

@php
    $tabc_course = \App\Courses::where('course_id',1)->first();
    $food_course = \App\Courses::where('course_id',2)->first();
    $bundle = \App\Bundles::where('id',1)->first();
@endphp

@section('content')
<!-- Slider Area ---->
<div class="container-fluid slider-area">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    @if(count($sliders) > 1)
                    <ol class="carousel-indicators">
                                                @foreach($sliders as $slider)
                        <li data-target="#myCarousel" data-slide-to="{{ $i }}" class="{{ ($i == 0?'active':'') }}"></li>
                                                @endforeach

                    </ol>
                    @endif
                    <!-- Wrapper for slides -->
                    @php
                        $image = 'waiter2.jpg';
                    @endphp
                    <div class="carousel-inner">
                                                @foreach($sliders as $slider)
                        <div class="item {{ ($i == 0?'active':'') }}">
                            <div style="background-image:url('{{ $upload_url.($slider->image!=''? '/slider/'.$image:'/no_image.png') }}');" class="img-div"></div>
                            <span style="display:none;" class="slide-text">
                                <div>
                                    {{__('Just as Fast, Just as Easy')}}... <b>{{__('Twice as Funny!')}}</b><br />
                                    Start your course today - be prepared to work <br />
                                    @if($tabc_course)Only <b style="color:red;font-weight:900;">${{ number_format($tabc_course->temp_price,2) }}</b> <b>For Your TABC Certification.</b>@endif
                                </div>
                            </span>
                        </div>
                                                @endforeach
                    </div>
                    @if(count($sliders) > 1)
                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> 
                    <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
                    @endif
                </div>
            </div>
            <div class="col-md-4">
                <div class="slider-cnt">
      <!--              <p><span>TABC CERTIFICATION <br>-->
      <!--                  100% ONLINE <br>-->
      <!--                  TABC-APPROVED<br>-->
						<!--1ST TIMER OR RENEW</span></p>-->
						<p><span style="font-size: 43px;margin-top: -25px;display: inline-block;">{{ucwords(__('TABC Certification Fast'))}}<br />
                            <span nowrap style="font-size: inherit;">{{__('TABC Approved')}}</span> <b style="font-weight:900;">${{ number_format($tabc_course->temp_price,2) }}</b>
                        </p>
                    @if(!Session::has('user_login'))
                    <a href="{{ url('/signup') }}" class="btn btn-primary red_hover">{{strtoupper(__('start course now'))}}</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Slider Area Ends --->
<!-- Logo Slides ---->
<div class="container-fluid hm-ls">
    <div class="container">
        <!--The main div for carousel-->
        <div class="container text-center">
            <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="2000" id="fruitscarousel">

                <div class="carousel-inner">
                                        @foreach($logos as $logo)
                    <div class="item {{ ($i == 0?'active':'') }}">
                        <div class="col-md-2 col-sm-3 col-xs-12"><a href="#"><img src="{{ $upload_url.($logo->image!=''? '/logo/'.$logo->image:'/no_image.png') }}" alt="{{$logo->title}}"></a></div>
                    </div>

                                        @endforeach
                </div>

            </div>
        </div>


    </div>
</div>
<!--- Logo Slides Ends --->

<!-- Imgae links Area --->
<div class="container-fluid hm-img-link">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 mb-2" onClick="window.location.href = '{{ url((Session::has('user_login')? '/profile':'/signup')) }}'">
                <div class="hovereffect"> <img class="img-responsive" src="{{ url('resources/assets') }}/images/img-link-01.jpg" alt="">
                    <div class="overlay">
                        <h2 class="f-21">{{__('TABC Certification Fast Online')}} @if($tabc_course)${{ number_format($tabc_course->temp_price,2) }}@endif <img src="{{ url('resources/assets') }}/images/img-link-icon-01.png"></h2>
                    </div>
                </div>
            </div>
             <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 mb-2"  onClick="window.location.href = '{{ url((Session::has('user_login')? '/profile':'/signup')) }}'">
                <div class="hovereffect"> <img class="img-responsive" src="{{ url('resources/assets') }}/images/img-link-03.jpg" alt="">
                    <div class="overlay">
                        <h2 class="f-21">{{__('TABC & Food Handlers Fast')}}. @if($bundle)${{number_format($bundle->temp_price,2)}}@endif <img src="{{ url('resources/assets') }}/images/img-link-icon-03.png"></h2>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 mb-2"  onClick="window.location.href = '{{ url((Session::has('user_login')? '/profile':'/signup')) }}'">
                <div class="hovereffect" style="padding:12px 0;"> <img class="img-responsive" src="{{ url('resources/assets') }}/images/Food-Handler.jpeg" alt="">
                    <div class="overlay">
                        <h2 class="f-21">{{__('Food Handlers Fast. No Test Or Timers')}}. @if($food_course)${{ number_format($food_course->price,2) }}@endif<img src="{{ url('resources/assets') }}/images/img-link-icon-01.png"></h2>
                    </div>
                </div>
            </div>
            <!---<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 mb-2"  onClick="window.location.href = 'tabc-class-with-a-comic'">
                <div class="hovereffect"> <img class="img-responsive" src="{{ url('resources/assets') }}/images/img-link-02.jpg" alt="">
                    <div class="overlay">

                        <h2 class="f-21">{{__('Book Your Onsite TABC or Food Handler Class with a Touring Comedian Today')}}. <img src="{{ url('resources/assets') }}/images/img-link-icon-02.png"></h2>

                    </div>
                </div>
            </div>-->
        </div>
    </div>
</div>
<!-- End Imgae links Area --->
<!-- Content Area Up --->

<div class="container-fluid cnt-area-up">
    <div class="row mart-image">
        <div class="col-md-6 nlrp left">
            <div class="row">
                <div class="col-md-10 col-md-offset-1 cnt-up fun-fast">
                    @if(!empty($page_information['tpl_txt_1']))
                    <h3>{!!  unescape($page_information['tpl_txt_1']) !!}</h3>
                    @endif
                    <p>{!!  unescape($page_information['tpl_txt_1_1']) !!}</p>
                </div>


                <div class="col-md-10 col-md-offset-1 cnt-up image-martini">
                    <!--<img src="{{ url('resources/assets') }}/images/martini.jpg">-->
                </div>


            </div>
        </div>
        <div class="col-md-6 cnt-up-img">

            <div class="row">

                <div class="col-md-12 nlrp">

                    <img src="{{ url('resources/assets') }}/images/cnt-up-img.png" class="img-responsive"> 

                </div>

                <div class="col-md-12 cnt-up cnt-dn-bg">
                    {!!__("<h3>Texas Food Handlers Certification Fast! <br /> Texas State Approved. No Test or Timers! <br /> Only $:price. Click <a href=\"/signup\">Here</a> to Start Now</h3>",['price'=>number_format($food_course->price,2)])!!}
                </div>

            </div>

        </div>
    </div>
</div>
<!-- Content Area Up Ends ---
<div class="container-fluid cnt-food-crt">
    <div class="row">
        <div class="col-md-6 nlrp food-handler-card">
            <div style="font-size:26px;">
                <div class="text-uppercase">{!!  __(unescape($page_information['tpl_txt_2'])) !!}</div>
                {!!  __(unescape($page_information['tpl_txt_2_1'])) !!}
            </div>
        </div>
        <div class="col-md-6 cnt-food-girl">
            <img src="{{ url('resources/assets') }}/images/123_1.jpeg" style="margin-top:0;height:auto;">
        </div>
    </div>
</div>
-->

<div class="container-fluid" style="background-color:#fff;">
    <div class="row">
        <div class="col-sm-12">
            <div class="text-center we_accept text-uppercase">{{__("WE ACCEPT")}}</div>
        </div>
        <div class="col-sm-12 text-center bg-white">
            
            <div class="container we_accept_img">
                <div class="row">
                    <div class="col-sm-12">
                        <img src="{{ url('resources/assets') }}/images/paypal-icon.png" />
                        <img src="{{ url('resources/assets') }}/images/visa-logo.png" />
                        <img src="{{ url('resources/assets') }}/images/mastercard-logo.png" />
                        <img src="{{ url('resources/assets') }}/images/american-express-logo.png" />
                        <img src="{{ url('resources/assets') }}/images/apple-pay-logo.png" />
                        <img src="{{ url('resources/assets') }}/images/google-pay-logo.png" />
                        <img src="{{ url('resources/assets') }}/images/cash-app-logo.png" />
                    </div>
                </div>
            </div>
            <!--<img src="{{ url('resources/assets') }}/images/paypal-credit-card-logos_cashapp.png" style="max-width: 900;margin: 21px 0;"/>-->
        </div>
    </div>
</div>


@endsection


@section('foot')
<script type="text/javascript" src="{{ url('resources/assets') }}/js/bootstrap.min.js"></script>
<script>
                jQuery(document).ready(function () {

                jQuery('.carousel[data-type="multi"] .item').each(function () {
                var next = jQuery(this).next();
                if (!next.length) {
                next = jQuery(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo(jQuery(this));
                for (var i = 0; i < 4; i++) {
                next = next.next();
                if (!next.length) {
                next = jQuery(this).siblings(':first');
                }
                next.children(':first-child').clone().appendTo($(this));
                }
                });
                });
</script>
       <script>
            $(document).ready(function(){
                //$('[data-target="#myWarning"]').trigger('click');
            })
        </script>


@endsection