@extends('layouts.app')

@section('title')
    Home page
@stop

@section('content')
    <section class="leftDiv">
        <div class="col-sm-6 imgCon">
            {!! Html::image('images/homePage/'.$pro1->image, $pro1->catLink->title, ['class'=>'img-responsive', 'width'=>675, 'height'=>600]) !!}
            <div class="details">
                <h3>{!! $pro1->catLink->title !!}</h3>
                <p>{!! $pro1->offer !!}</p>
                <a href="#" class="btn btn-primary">All products</a>
            </div>
        </div>
        <div class="col-sm-6 ind-pro">
            <div class="text-center header-pro-ind">
                <h4>ALL Tecnogas products <span> {!! $pro1->catLink->title !!}</span></h4>
            </div>
            <div class="owl-carousel owl-theme">
                @foreach($pro1->catLink->proItem as $item)
                    <div class="item">
                        {!! Html::image('images/products/'.$item->image, '', ['width'=>111, 'height'=>167]) !!}
                        <h4>{!! $item->title !!}</h4>
                        <a href="{!! URL::to('product-details/'.$pro1->catLink->title.'/'.$item->id) !!}"
                           class="btn btn-primary">More Details</a>
                    </div>
                @endforeach

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


    <section class="leftDiv rightDIv">
        <div class="col-sm-6 ind-pro">
            <div class="text-center header-pro-ind">
                <h4>ALL Tecnogas products <span> {!! $pro2->catLink->title !!}</span></h4>
            </div>
            <div class="owl-carousel owl-theme">


                @foreach($pro2->catLink->proItem as $item)
                    <div class="item">
                        {!! Html::image('images/products/'.$item->image, '', ['width'=>111, 'height'=>167]) !!}
                        <h4>{!! $item->title !!}</h4>
                        <a href="{!! URL::to('product-details/'.$pro2->catLink->title.'/'.$item->id) !!}"
                           class="btn btn-primary">More Details</a>
                    </div>
                @endforeach

            </div>
        </div>
        <div class="col-sm-6 imgCon">
            {!! Html::image('images/homePage/'.$pro2->image, $pro2->catLink->title, ['class'=>'img-responsive', 'width'=>675, 'height'=>600]) !!}
            <div class="details">
                <h3>{!! $pro2->catLink->title !!}</h3>
                <p>{!! $pro2->offer !!}</p>
                <a href="#" class="btn btn-primary">All products</a>
            </div>
        </div>
    </section>

    <section class="leftDiv">
        <div class="col-sm-6 imgCon">
            {!! Html::image('images/homePage/'.$pro3->image, $pro3->catLink->title, ['class'=>'img-responsive', 'width'=>675, 'height'=>600]) !!}
            <div class="details">
                <h3>{!! $pro3->catLink->title !!}</h3>
                <p>{!! $pro3->offer !!}</p>
                <a href="#" class="btn btn-primary">All products</a>
            </div>
        </div>
        <div class="col-sm-6 ind-pro">
            <div class="text-center header-pro-ind">
                <h4>ALL Tecnogas products <span> {!! $pro3->catLink->title !!}</span></h4>
            </div>
            <div class="owl-carousel owl-theme">

                @foreach($pro3->catLink->proItem as $item)
                    <div class="item">
                        {!! Html::image('images/products/'.$item->image, '', ['width'=>111, 'height'=>167]) !!}
                        <h4>{!! $item->title !!}</h4>
                        <a href="{!! URL::to('product-details/'.$pro3->catLink->title.'/'.$item->id) !!}"
                           class="btn btn-primary">More Details</a>
                    </div>
                @endforeach

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

    <section class="divblo">
        {!! Html::image('images/ids.jpg', '', ['class'=>'img-responsive', 'width'=>1349, 'height'=>354]) !!}
    </section>



    {{--  our products available  --}}
    <section class="available">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <h2>our products <br> available at</h2>
                </div>
                <div class="col-xs-12 col-sm-8">
                    <ul class="list-group">
                        <li><img src="http://www.tecnogasegypt.com/tecno/public/images/lo01.jpg" width="170" height="65" alt="" class="img-responsive"/></li>
                        <li><img src="http://www.tecnogasegypt.com/tecno/public/images/lo02.jpg" width="170" height="65" alt="" class="img-responsive"/></li>
                        <li><img src="http://www.tecnogasegypt.com/tecno/public/images/lo03.jpg" width="170" height="65" alt="" class="img-responsive"/></li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

@endsection

@section('js')
    <!-- Owl Stylesheets -->
    {!! Html::script('siteroot/plugins/owl-carousel/owl.carousel.js') !!}
    <script>
        $('.owl-carousel').owlCarousel({
            loop: true,
            autoplay: true,
            margin: 10,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                1000: {
                    items: 3
                }
            }
        })
    </script>
@endsection