@extends('layout')

@section('content')

    <div class="row">
        <div class="col-lg-2 col-sm-12 d-none d-lg-block">
            <a class="ui fluid card" href="/raumvermietung">
                <div class="image">
                    <img src="/imgs/raumvermietung.jpg">
                </div>
                <div class="content"  style="background-color: #6a0000; ">
                    <div class="header" style="color: white;">Bruckmühle mieten</div>
                </div>
            </a>
            <a class="ui fluid card" href="/kulturcard">
                <div class="image">
                    <img src="/imgs/kulturcard-2016.jpg">
                </div>
                <div class="content"  style="background-color: #6a0000; ">
                    <div class="header" style="color: white;">Kulturcard</div>
                </div>
            </a>
            <a class="ui fluid card" href="http://wirfuerbruckmuehle.at">
                <div class="image">
                    <img src="/imgs/wirfuerbruckmuehle.jpg">
                </div>
                <div class="content"  style="background-color: #6a0000; ">
                    <div class="header" style="color: white;">Wir für Bruckmühle</div>
                </div>
            </a>
        </div>

        <div class="col-lg-10 col-sm-12">
            <div class="row">
                <div class="slide d-none d-md-block" style="width:100%">
                
<!------ HIER BEGINNT OBERES BILD------->
                
                    <a href="/event/1241">
                        <div class="date">
                            <span class="day">23</span>
                            <span class="month month07">Juni</span>
                            <span class="year">2018</span>
                        </div>
                        <div class="title">
                            <h2>STEFAN LEONHARDSBERGER</h2>
                            <h3>und die Pompfüneberer </h3>
                        </div>
                        <img src="/imgs/events/big.jpg" style="max-width: none;width:100%;">
                        
<!------ HIER ENDET OBERES BILD------->                       
                        
                    </a>
                </div>
            </div>

            <h1>Aktuelle Veranstaltungen</h1>
            <div class="ui link cards">
                @foreach($events as $event)
                    <a class="huge card" href="/event/{{$event->id}}">

                        <div class="image" style="height: 250px;">
                            {{ Html::image("/imgs/events/".$event->image, $event->title, array('style' => 'height: 100%;')) }}
                            <?php
                            $days = array('So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa');
                            $months = array('Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember');
                            $start = strtotime($event->start_date);
                            ?>
                            <canvas class="myCanvas" >
                            </canvas>
                            <div class="event-date"><span class="weekday">{{$days[date('w', $start)]}}</span> <span
                                        class="day">{{date('d.',$start)}}</span><br/> <span
                                        class="month">{{$months[date('m',$start)-1]}}</span></div>



                        </div>
                        <div class="content">
                            <div class="header">{{$event->title}}</div>
                            {{--<div class="meta">--}}
                            {{--<a>Friends</a>--}}
                            {{--</div>--}}
                            <div class="description">
                                {{$event->shorttext}}
                            </div>
                        </div>
                        <div class="extra content">
                    <span class="right floated">
                        <i class="add to cart icon large"></i>
                    </span>
                            <span>
                        {{--<i class="user icon large"></i>--}}
                                @if($event->payableWithCultureCard)
                                    kulturcard
                                @endif
                    </span>
                        </div>
                    </a>
                @endforeach
            </div>
            <br />
            <a class="ui primary button" href="/programm" style="background-color: #6A0000; position:absolute; right:0; margin-right: 35px;">
                Alle Veranstaltungen
            </a>
        </div>
        <span style="margin-bottom: 40px;"></span>

        <br /><br />


        <div class="col-sm-12 d-lg-none" style="margin-top: 30px;">
            <br />
            <a class="ui fluid card" href="/raumvermietung">
                <div class="image">
                    <img src="/imgs/raumvermietung.jpg">
                </div>
                <div class="content"  style="background-color: #6a0000; ">
                    <div class="header" style="color: white;">Raum&shyver&shymietung</div>
                </div>
            </a>
            <a class="ui fluid card" href="/kulturcard">
                <div class="image">
                    <img src="/imgs/kulturcard-2016.jpg">
                </div>
                <div class="content"  style="background-color: #6a0000; ">
                    <div class="header" style="color: white;">Kulturcard</div>
                </div>
            </a>
            <a class="ui fluid card" href="http://wirfuerbruckmuehle.at">
                <div class="image">
                    <img src="/imgs/wirfuerbruckmuehle.jpg">
                </div>
                <div class="content"  style="background-color: #6a0000; ">
                    <div class="header" style="color: white;">Wir für Bruckmühle</div>
                </div>
            </a>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        var c = document.getElementsByClassName("myCanvas");
        for (var i = 0; i < c.length; i++) {
            var ctx = c[i].getContext("2d");
            ctx.fillStyle = '#6A0000';
            ctx.globalAlpha = 0.8;
            ctx.beginPath();
            ctx.moveTo(0, 150);
            ctx.lineTo(1000,150);
            ctx.lineTo(350, 20);
            ctx.lineTo(0, 90);
            ctx.closePath();
            ctx.fill();
        }
    </script>
@endsection