@extends('layouts.app')
@include('cookieConsent::index')
@section('content')

<script>
        function changeEvents(name) {
                $.ajax({
                url: 'filter/{option}',
                type: 'GET',
                data: { option: name },
                success: function(response)
                {
                                    $("#calendar").fullCalendar( 'removeEvents');
                                    $("#calendar").fullCalendar( 'addEventSource', response);
                }
            });
        }

        $(document).ready(function() {
            var initialLangCode = 'sk';

            $('#calendar').fullCalendar({
                locale: initialLangCode,
                defaultView: 'month',
                eventLimit: true,
                header: {
                    left: '',
                    center: 'title',
                    right : 'prev,next'
                },
                events: [
                    @foreach ($events as $event)
                        {
                        title : '{{ $event->title }}',
                        start : '{{ $event->start }}',
                        end : '{{ $event->end }}',
                        allDay : {{ $event->allday }},
                        url: '/peinfo/public/content/events/{{ $event->event_id }}',
                    },
                    @endforeach
    ]
            });

    });

</script>

      <div id="page-wrapper">

      <!-- Banner -->
        <section id="banner">
          <div class="inner shadow">
            <h2>PARTIZANSKE INFO</h2>
            <p>Všetko na jednom mieste</p>
          </div>
          <a href="#calendar" class="more scrolly">Kalendár</a>
        </section>

      <!-- One -->
        <section id="cal" class="wrapper style1 special">
                    <div class="inner">
            <div class="index-background">
                    <div class="kategorie">
                    <h4 class="kat-text">Kategórie</h4>
                    <select class="vyber" onchange="changeEvents(this.value)">
                                    <option value="vsetky">Všetky</option>
                                    <option value="divadlo">Divadlo</option>
                                    <option value="kino">Kino</option>
                                    <option value="prednaska">Prednáška-diskusia</option>
                                    <option value="sport">Šport</option>
                                    <option value="stretnutie">Stretnutie</option>
                                    <option value="trhy">Trhy</option>
                                    <option value="turistika">Turistika</option>
                                    <option value="vystava">Vernisáž-výstava</option>
                                    <option value="vzdelavanie">Vzdelávanie</option>
                                    <option value="zabava">Zábava</option>
                                    <option value="spomienka">Spomienka</option>
                        </select>
                    </div>
            <div id="calendar"></div>
                    </div>
        </section>

                <div class="col-md-12">
                    <div class="owl-carousel">
                            <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUb9_jxtyBNrEPTWHDDq9FMbEiRaCot2uesclTBSs9e0sgdjCUzAsYF7Y"></div>
                            <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbJpr3lvcIVKE-xt1toBC_iNQYe5A-CJ2K3kB4SlTcFAkQcCV7"></div>
                            <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQSlGT60d2ccgTj7hznw-f_wUPXIu3btX2BFzk22DGIBWOOYlMDGg"></div>
                            <div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUb9_jxtyBNrEPTWHDDq9FMbEiRaCot2uesclTBSs9e0sgdjCUzAsYF7Y"></div>
                    </div>

      <link href="{{ asset('css/owl.carousel.min.css') }}" rel="stylesheet">
                    <script src="{{ asset('js/owl.carousel.min.js') }}"></script>
                    <script src="{{ asset('js/index_carousel.js') }}"></script>

                </div>
      </div>
@endsection