@extends('web.layout.app')
@section('css')

@endsection
@section('content')
    <div class="connections-section">
        <div class="valign">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-push-2">
                        <h1 data-aos="fade-up">ראה את האהבה - חי</h1>
                        <p data-aos="fade-up">שמור את הקשר שלך עם צ'יבאס ירושלים בחיים על ידי ביקור בדף זה לעתים קרובות. דפדף בתמונות האחרונות, בסרטוני האירוע, בקמפיינים ועוד, והירשם למטה כדי להתייחס אליו בכל פעם שדף זה מתעדכן.</p>
                        <h3 data-aos="fade-up">קבל עדכונים בחינם!</h3>
                        <div class="clearfix"></div>
                        <div class="row">
                            @include('flash::message')
                        </div>
                        <div class="row">
                            {!! Form::open(['route' => 'subscribes.store']) !!}
                            <div class="col-md-5 col-sm-5" data-aos="fade-up" data-aos-delay="100"><input name="name" type="text" placeholder="שֵׁם" class="name-icon" /></div>
                            <div class="col-md-5 col-sm-5" data-aos="fade-up" data-aos-delay="200"><input name="email" type="text" placeholder="אימייל" class="email-icon" /></div>
                            <div class="col-md-2 col-sm-2" data-aos="fade-up" data-aos-delay="300"><button type="submit" class="btn btn-primary btn-lg btn-block connections-send-btn">לִשְׁלוֹחַ</button></div>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-8 col-md-push-2"  data-aos="fade-up" data-aos-delay="400" style="padding-bottom: 30px;">
                    <h4 data-aos="fade-up"></h4>
                    <div class="owl-carousel owl-theme">
                    @foreach($mainContent->boxes as $box)
                    <div class="item">
                        <a href="{{ asset($box->file) }}" rel="lightbox">
                            <img src="{{ asset($box->file) }}" />
                        </a>
                    </div>
                    @endforeach
                    </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section('scripts')

        <script>
            $(function() {
                $('[rel="lightbox"]').lightbox();
            });
        </script>
        <script>
            $(document).ready(function() {
              $('.owl-carousel').owlCarousel({
                loop: false,
                margin: 10,
                responsiveClass:true,
                autoplay:true,
                autoplayTimeout:3000,
                responsive: {
                  0: {
                    items: 1,
                      loop: false,
                    nav: false
                  },
                  600: {
                    items: 1,
                    loop: false,
                    nav: false
                  },
                  1000: {
                    items: 7,
                    nav: false,
                    loop: false,
                    margin: 20
                  }
                }
              })
            })
          </script>

@endsection